no message
parent
6d4810fea1
commit
94ca61f25b
@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="bannerContainer ">
|
||||
<view class="u-skeleton" v-if="bannerList && bannerList.length > 0">
|
||||
<div class="g_h_10"></div>
|
||||
<swiper class="banner u-skeleton-fillet" :autoplay="true" previous-margin="-3px" next-margin="-3px" :circular="true" current="0" current-item-id interval="3000" duration="300" display-multiple-items="1" :skip-hidden-item-layout="false">
|
||||
<swiper-item class item-id v-for="(item, index) in bannerList" :key="index">
|
||||
<image
|
||||
@tap="
|
||||
handleClickNum({
|
||||
item: item,
|
||||
})
|
||||
"
|
||||
:data-path="item.path"
|
||||
class="size100 br8"
|
||||
:src="item.icon"
|
||||
mode="aspectFit|aspectFill|widthFix"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="m-jingang g_mt_10" v-if="serviceList && serviceList.length > 0" style="position: relative">
|
||||
<!-- {{ 'currentIndex= '+currentIndex }}
|
||||
{{ 'dx= '+dx }} -->
|
||||
<!-- previous-margin="-3px" -->
|
||||
|
||||
<swiper
|
||||
class="u-skeleton-fillet utran"
|
||||
:autoplay="false"
|
||||
next-margin="28px"
|
||||
:circular="false"
|
||||
:current="currentIndex"
|
||||
current-item-id
|
||||
interval="3000"
|
||||
duration="300"
|
||||
display-multiple-items="1"
|
||||
:skip-hidden-item-layout="false"
|
||||
@transition="handleTransition"
|
||||
@animationfinish="handleAnimationFinish"
|
||||
:style="{
|
||||
height: currentIndex == 0 ? swiperFirstHeight + 'px' : swiperSecondHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<swiper-item style="overflow: unset">
|
||||
<!-- (imageSize*0.8 - ml) -->
|
||||
<div
|
||||
class="m-first-panel g_flex_row_start_none"
|
||||
:class="[serviceListAfter.length == 0 && serviceListBefore.length == 5 ? 'g_flex_row_between' : 'g_flex_row_start_none']"
|
||||
style="width: 100vw"
|
||||
:style="{
|
||||
transform: 'translateX(' + (currentIndex == 1 && dx <= 0 ? 0 : '0') + 'px)',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in serviceListBefore"
|
||||
:key="index"
|
||||
@click="
|
||||
handleClickNum({
|
||||
item: item,
|
||||
})
|
||||
"
|
||||
:style="{
|
||||
width: basicsSize + 'px',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="g_flex_c"
|
||||
:style="{
|
||||
width: imageSize + 'px',
|
||||
height: imageSize + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0 auto',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:style="{
|
||||
width: imageSize * 0.8 + 'px',
|
||||
height: imageSize * 0.8 + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<view
|
||||
class="g_ell_1 g_fs_14 g_c_6"
|
||||
:style="{
|
||||
width: basicsSize + 'px',
|
||||
height: '20px',
|
||||
padding: '0px 0 10px',
|
||||
'text-align': 'center',
|
||||
}"
|
||||
>{{ item.name }}</view
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-item>
|
||||
<swiper-item v-if="serviceListAfter && serviceListAfter.length > 0" style="overflow: unset">
|
||||
<!-- (imageSize*0.8 - ml) -->
|
||||
<!-- 'margin-left': currentIndex == 0 ? '0' : (ml + 'px') -->
|
||||
<div
|
||||
class="m-second-panel g_flex_row_start"
|
||||
style="width: 100vw; column-gap: 5.5px"
|
||||
:style="{
|
||||
transform: 'translateX(-' + (currentIndex == 0 && dx >= 0 ? 0 : '0') + 'px)',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in serviceListAfter"
|
||||
:key="index"
|
||||
@click="
|
||||
handleClickNum({
|
||||
item: item,
|
||||
})
|
||||
"
|
||||
:style="{
|
||||
width: basicsSize + 'px',
|
||||
}"
|
||||
class="second-item"
|
||||
>
|
||||
<div
|
||||
class="g_flex_c"
|
||||
:style="{
|
||||
width: imageSize + 'px',
|
||||
height: imageSize + 'px',
|
||||
overflow: 'hidden',
|
||||
margin: '0 auto',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:style="{
|
||||
width: imageSize * 0.8 + 'px',
|
||||
height: imageSize * 0.8 + 'px',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<view
|
||||
class="g_ell_1 g_fs_14 g_c_6"
|
||||
:style="{
|
||||
width: basicsSize + 'px',
|
||||
height: '20px',
|
||||
padding: '0px 0 10px',
|
||||
'text-align': 'center',
|
||||
}"
|
||||
>{{ item.name }}</view
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<div class="mdoc" v-if="serviceListAfter && serviceListAfter.length > 0" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)">
|
||||
<view class="g_w_all g_flex_row_center">
|
||||
<view class="doa" :class="currentIndex == index ? 'doa_active g_bg_main' : 'g_bg_c'" v-for="(item, index) in 2" :key="index"></view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
// pages/messageDetail/index.js
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [],
|
||||
serviceList: [],
|
||||
serviceListBefore: [],
|
||||
serviceListAfter: [],
|
||||
currentStore: {},
|
||||
connectModalShow: false,
|
||||
loading: true,
|
||||
globalData: getApp().globalData,
|
||||
currentIndex: 0,
|
||||
|
||||
swiperFirstHeight: "0",
|
||||
swiperSecondHeight: "0",
|
||||
basicsSize: "0",
|
||||
imageSize: 0,
|
||||
dx: 0,
|
||||
ml: 0,
|
||||
ww: 0,
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
created() {
|
||||
var that = this;
|
||||
that.getBannerList();
|
||||
that.getChannelList();
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
methods: {
|
||||
handleTransition(e) {
|
||||
this.dx = e.detail.dx;
|
||||
},
|
||||
handleAnimationFinish(e) {
|
||||
this.dx = 0;
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
/**
|
||||
* 获取banner信息
|
||||
*/
|
||||
getBannerList() {
|
||||
let that = this;
|
||||
that.G.Get(
|
||||
that.api.get_channel_info,
|
||||
{
|
||||
classify: 2,
|
||||
},
|
||||
(res) => {
|
||||
that.bannerList = res;
|
||||
},
|
||||
(res) => {}
|
||||
);
|
||||
},
|
||||
getChannelList() {
|
||||
let that = this;
|
||||
that.G.Get(
|
||||
that.api.get_channel_info,
|
||||
{
|
||||
classify: 1,
|
||||
},
|
||||
(res) => {
|
||||
that.serviceList = res.map((item) => ({
|
||||
...item,
|
||||
image: item.icon || "",
|
||||
}));
|
||||
that.serviceListBefore = that.serviceList.filter((item, index) => index < 5);
|
||||
that.serviceListAfter = that.serviceList.filter((item, index) => index >= 5);
|
||||
|
||||
that.basicsSize = that.floorToDecimal(Number(uni.getSystemInfoSync().windowWidth / 5.35));
|
||||
that.imageSize = that.floorToDecimal(Number(that.basicsSize * 1 - 20));
|
||||
|
||||
that.swiperFirstHeight = that.floorToDecimal(Number(that.basicsSize * 1 + 14));
|
||||
if (that.serviceListAfter.length > 0) {
|
||||
that.swiperSecondHeight = that.floorToDecimal(Number(Math.ceil(that.serviceListAfter.length / 5) * (that.basicsSize * 1 + 14)));
|
||||
}
|
||||
that.ml = that.floorToDecimal(Number(uni.getSystemInfoSync().windowWidth / 5) - Number(uni.getSystemInfoSync().windowWidth / 5.35), 1);
|
||||
this.ww = uni.getSystemInfoSync().windowWidth;
|
||||
},
|
||||
(res) => {}
|
||||
);
|
||||
},
|
||||
floorToDecimal(num, $count = 2) {
|
||||
const factor = Math.pow(10, $count);
|
||||
return Math.floor(num * factor) / factor;
|
||||
},
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
makePhoneCall(e) {
|
||||
var that = this;
|
||||
if (!e.mark.tel) {
|
||||
uni.showToast({
|
||||
title: "暂无联系方式",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e.mark.tel,
|
||||
});
|
||||
},
|
||||
handleClickNum(e) {
|
||||
let that = this;
|
||||
if (uni.getStorageSync("apply-userinfo")) {
|
||||
if (e.item.type == 1) {
|
||||
// 消息列表
|
||||
uni.switchTab({
|
||||
url: "/pages/message/index",
|
||||
});
|
||||
}
|
||||
if (e.item.type == 2) {
|
||||
uni.navigateTo({
|
||||
url: `/root/detail/message?id=${e.item.params.ids}`,
|
||||
});
|
||||
}
|
||||
if (e.item.type == 3) {
|
||||
// 自有职位
|
||||
uni.navigateTo({
|
||||
url: `/root/other/channelPage?jobtype=2`,
|
||||
});
|
||||
}
|
||||
if (e.item.type == 4) {
|
||||
// 全部职位
|
||||
uni.navigateTo({
|
||||
url: `/root/other/channelPage`,
|
||||
});
|
||||
}
|
||||
if (e.item.type == 5) {
|
||||
// 筛选职位
|
||||
uni.navigateTo({
|
||||
url: `/root/other/channelPage?manage=${JSON.stringify(e.item.params)}`,
|
||||
});
|
||||
}
|
||||
if (e.item.type == 6) {
|
||||
// 特定职位
|
||||
uni.navigateTo({
|
||||
url: `/root/other/channelPage?shareJobIds=${e.item.params.ids}&from=mine`,
|
||||
});
|
||||
}
|
||||
if (e.item.type == 7) {
|
||||
if (!e.item.url) {
|
||||
uni.showToast({
|
||||
title: "小程序暂不支持",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: e.item.url,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (e.item.type == 8) {
|
||||
// 主推职位(列表)
|
||||
uni.navigateTo({
|
||||
url: "/root/other/channelPage?istop=1",
|
||||
});
|
||||
}
|
||||
if (e.item.type == 9) {
|
||||
// 按工价排序
|
||||
uni.navigateTo({
|
||||
url: "/root/other/channelPage?sortTag=1",
|
||||
});
|
||||
}
|
||||
if (e.item.type == 11) {
|
||||
// 按时间排序
|
||||
uni.navigateTo({
|
||||
url: "/root/other/channelPage?sortTag=0",
|
||||
});
|
||||
}
|
||||
if (e.item.type == 10) {
|
||||
// 按距离排序
|
||||
uni.navigateTo({
|
||||
url: "/root/other/channelPage?sortTag=2",
|
||||
});
|
||||
}
|
||||
if (e.item.type == 12) {
|
||||
// 批量分享
|
||||
uni.navigateTo({
|
||||
url: "/root/detail/shareJob",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/root/login/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage1() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.bannerContainer {
|
||||
/* background-color: #f5f5f5; */
|
||||
/* padding-top: 10px; */
|
||||
}
|
||||
.banner {
|
||||
width: calc(100vw - 20px);
|
||||
height: 70px;
|
||||
margin: 0 10px 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transform: translateY(0);
|
||||
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
.banner swiper-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
text-align: center;
|
||||
}
|
||||
.size100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.br8 {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.doa {
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
margin-right: 6px;
|
||||
border-radius: 6px;
|
||||
&:nth-child(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.doa_active {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.utran {
|
||||
transition: height 0.1s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 8.8 KiB |
Loading…
Reference in New Issue