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.
549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
|
<view style="width: calc(100vw - 20px);margin: 10px auto 0;border-radius: 8px;overflow: hidden;">
|
|
<view class="bannerContainer u-skeleton g_bg_f_5 g_border_e_b">
|
|
<view class="" v-if="false">
|
|
<swiper class="banner g_mb_10 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="g_positino_rela g_bg_f" v-if="serviceListBefore.length > 0">
|
|
<!-- :style="{
|
|
height: currentIndex == 0 ? swiperFirstHeight + 'px' : swiperSecondHeight + 'px',
|
|
next-margin="28px"
|
|
}" -->
|
|
<swiper class="u-skeleton-fillet utran"
|
|
:autoplay="false" :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: serviceListBefore && serviceListBefore.length <= 5 ? '86px' : '150px',
|
|
}"
|
|
>
|
|
<swiper-item style="overflow: unset" class="g_flex_column_center">
|
|
<!-- (imageSize*0.8 - ml) -->
|
|
<div
|
|
class="m-first-panel g_flex_row_start"
|
|
style=""
|
|
: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: '20%',
|
|
}"
|
|
hover-class="thover"
|
|
>
|
|
<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_3"
|
|
: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"
|
|
hover-class="thover"
|
|
>
|
|
<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.69 + 'px',
|
|
height: imageSize * 0.69 + 'px',
|
|
}"
|
|
/>
|
|
</div>
|
|
<view
|
|
class="g_ell_1 g_fs_14 g_c_3"
|
|
: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>
|
|
<!-- <g-panel-card-num :list="serviceList" :loading="loading" class="" :speed="1" cusType="image" :height="44" :num="serviceList.length" :cusTitle="false" @clickItem="handleClickNum" /> -->
|
|
</view>
|
|
</view>
|
|
<u-skeleton :loading="loading" :animation="true" bgColor="#ededed"></u-skeleton>
|
|
<u-popup v-model="connectModalShow" mode="center" :closeable="true" border-radius="16" width="80%" :mask-close-able="true">
|
|
<div class="g_text_c">
|
|
<div class="g_pt_32 g_fw_600 g_pb_24 g_fs_18">联系我们</div>
|
|
<div class="g_pb_4 g_fs_14 g_c_6">门店联系人: {{ currentStore.contactUserName }}</div>
|
|
<div class="g_pb_32 g_fs_14 g_c_6" @click.stop="makePhoneCall" :mark:tel="currentStore.contactTel">联系电话: {{ currentStore.splitPhone }}</div>
|
|
<image class="g_w_184 g_h_184" :src="currentStore.contactWechatQrcode" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" show-menu-by-longpress> </image>
|
|
<div class="g_mt_16 g_fs_14 g_pb_32 g_fw_600">长按识别二维码</div>
|
|
</div>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
// pages/messageDetail/index.js
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
userinfo: uni.getStorageSync("apply-userinfo") || {},
|
|
bannerList: [],
|
|
serviceList: [],
|
|
currentStore: {},
|
|
connectModalShow: false,
|
|
loading: true,
|
|
|
|
serviceListBefore: [],
|
|
serviceListAfter: [],
|
|
currentIndex: 0,
|
|
swiperFirstHeight: "0",
|
|
swiperSecondHeight: "0",
|
|
basicsSize: "0",
|
|
imageSize: 0,
|
|
dx: 0,
|
|
};
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
created() {
|
|
// var that = this;
|
|
// that.getBannerList();
|
|
// that.getChannelList();
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {
|
|
var that = this;
|
|
// that.userinfo = uni.getStorageSync("apply-userinfo") || {};
|
|
that.getBannerList();
|
|
that.getChannelList();
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
mounted() {
|
|
var that = this;
|
|
that.$nextTick(() => {
|
|
setTimeout(() => {
|
|
that.getBannerList();
|
|
that.getChannelList();
|
|
}, 100);
|
|
});
|
|
},
|
|
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) => {
|
|
// console.log("轮播列表：", res);
|
|
that.bannerList = res;
|
|
},
|
|
(res) => {
|
|
// console.log(res);
|
|
},
|
|
);
|
|
},
|
|
getChannelList() {
|
|
let that = this,
|
|
_auth = false;
|
|
that.G.Get(
|
|
that.api.get_channel_info,
|
|
{
|
|
classify: 1,
|
|
},
|
|
(res) => {
|
|
// console.log("服务地址：", that.api.get_channel_info);
|
|
|
|
// console.log("服务地址：", that.api.get_channel_info);
|
|
// console.log("resresresrse", res);
|
|
// console.log("resresresrse", res);
|
|
|
|
// let status = true;
|
|
// if (uni.getStorageSync("agencyInfo")) {
|
|
// that.G.Get(
|
|
// that.api.get_supplier_info,
|
|
// {
|
|
// agencyId: uni.getStorageSync("agencyInfo") ? uni.getStorageSync("agencyInfo").id : "",
|
|
// },
|
|
// (info_res) => {
|
|
// if (info_res) {
|
|
// // 判断是否全部认证过以控制入驻平台是否显示
|
|
// if (info_res.realNameAuth == 2 && info_res.certificationAuth == 2) {
|
|
// _auth = true;
|
|
// } else {
|
|
// _auth = false;
|
|
// }
|
|
// }
|
|
// }
|
|
// );
|
|
// }
|
|
|
|
// let list = res.map((item) => {
|
|
// return {
|
|
// name: item.name,
|
|
// path: item.url,
|
|
// image: item.icon,
|
|
// ...item,
|
|
// icon: "",
|
|
// };
|
|
// });
|
|
// list = list.filter((item) => {
|
|
// if (_auth || that.userinfo.agencyStatus != 1) {
|
|
// if (_auth) {
|
|
// return item.type != 16;
|
|
// } else if (that.userinfo.agencyStatus != 1) {
|
|
// return item.type != 15;
|
|
// }
|
|
// } else {
|
|
// return true;
|
|
// }
|
|
// });
|
|
// that.serviceList = list;
|
|
// that.loading = false;
|
|
// // console.log("serviceList", that.serviceList);
|
|
|
|
new Promise((resolve) => {
|
|
let status = true;
|
|
if (uni.getStorageSync("agencyInfo")) {
|
|
this.G.Get(
|
|
this.api.get_supplier_info,
|
|
{
|
|
agencyId: uni.getStorageSync("agencyInfo") ? uni.getStorageSync("agencyInfo").id : "",
|
|
},
|
|
(info_res) => {
|
|
if (info_res) {
|
|
// 判断是否全部认证过以控制入驻平台是否显示
|
|
if (info_res.realNameAuth == 2 && info_res.certificationAuth == 2) {
|
|
_auth = true;
|
|
} else {
|
|
_auth = false;
|
|
}
|
|
resolve(status);
|
|
}
|
|
},
|
|
);
|
|
} else {
|
|
resolve(status);
|
|
}
|
|
}).then((status) => {
|
|
let list = res.map((item) => {
|
|
return {
|
|
...item,
|
|
image: item.icon || "",
|
|
// name: item.name,
|
|
// path: item.url,
|
|
// image: item.icon,
|
|
// ...item,
|
|
// icon: "",
|
|
};
|
|
});
|
|
list = list.filter((item) => {
|
|
if (_auth || that.userinfo.agencyStatus != 1) {
|
|
if (_auth) {
|
|
return item.type != 16;
|
|
} else if (that.userinfo.agencyStatus != 1) {
|
|
return item.type != 15;
|
|
}
|
|
} else {
|
|
return true;
|
|
}
|
|
});
|
|
that.serviceList = list;
|
|
// that.serviceList = list.map((item) => ({
|
|
// ...item,
|
|
// image: item.icon || "",
|
|
// }));
|
|
that.serviceListBefore = that.serviceList.filter((item, index) => index < 11);
|
|
// 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.loading = false;
|
|
// console.log("serviceList", that.serviceList);
|
|
});
|
|
},
|
|
(res) => {
|
|
// console.log(res);
|
|
},
|
|
);
|
|
},
|
|
floorToDecimal(num, $count = 2) {
|
|
const factor = Math.pow(10, $count);
|
|
return Math.floor(num * factor) / factor;
|
|
},
|
|
handleClickNum(e) {
|
|
let that = this;
|
|
// console.log("我的服务：", e);
|
|
let isLogin = uni.getStorageSync("apply-userinfo") ? true : false;
|
|
if (!isLogin && e.item.type == 16) {
|
|
uni.navigateTo({
|
|
url: "/root/person/loginIndex",
|
|
});
|
|
return false;
|
|
}
|
|
if (e.item.type == 1) {
|
|
// 消息列表
|
|
uni.switchTab({
|
|
url: "/pages/message/indexcopy",
|
|
});
|
|
}
|
|
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",
|
|
});
|
|
}
|
|
if (e.item.type == 13) {
|
|
// 按佣金排序
|
|
uni.navigateTo({
|
|
url: "/root/other/channelPage?sortTag=3",
|
|
});
|
|
}
|
|
if (e.item.type == 14) {
|
|
// 甄选职位
|
|
uni.navigateTo({
|
|
url: "/root/other/channelPage?picked=1",
|
|
});
|
|
}
|
|
if (e.item.type == 15) {
|
|
// 今日发单
|
|
uni.navigateTo({
|
|
url: "/root/detail/todayRecord",
|
|
});
|
|
}
|
|
if (e.item.type == 16) {
|
|
// 入驻平台
|
|
uni.navigateTo({
|
|
url: "/root/other/tobeAgencyChoose",
|
|
});
|
|
}
|
|
},
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage1() {},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.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;
|
|
}
|
|
.utran {
|
|
transition: height 0.1s ease-in-out;
|
|
}
|
|
/* @import '../../'; */
|
|
</style>
|