You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
428 lines
9.9 KiB
Vue
428 lines
9.9 KiB
Vue
<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>
|