bocai_supplyChain_uni/pages/home/child/promotion.vue

<template>
	<view>
		<view class="bannerContainer">
			<swiper class="banner" :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="toHot(item)" :data-path="item.path" class="size100 br8" :src="item.img" mode="aspectFit|aspectFill|widthFix" />
				</swiper-item>
			</swiper>
			<g-panel-card-num :list="serverList" :speed="1" cusType="image" :height="44" class="g_mt_12" :cusTitle="false" @clickItem="handleClickNum" />
		</view>
		<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 {
	data() {
		return {
			bannerList: [],
			currentStore: {},
			connectModalShow: false,
			serverList: [
				{
					name: "附近热招",
					image: "zhijiao0826.png",
					path: "/root/other/channelPage?title=附近热招&type=job&keys=",
				},
				{
					name: "日结专区",
					image: "daili0826.png",
					path: "/root/other/channelPage?title=日结专区&type=job&keys=日结",
				},
				{
					name: "收藏",
					image: "ztrt.png",
					path: "/root/person/collect",
				},
				{
					name: "推荐有奖",
					image: "hezuo0826.png",
					path: "/root/other/channelPage?title=推荐有奖&type=other&keys=推荐",
				},
				{
					name: "联系我们",
					image: "lianxi0826.png",
					path: "/root/other/channelPage?title=联系我们&type=other&keys=联系",
				},
			],
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	created() {
		var that = this;
		that.getBannerList();
	},
	onLoad(options) {
		var that = this;
		that.getBannerList();
		// console.log(options);
		// if (options.type) {
		//     this.setData({
		//         pageType: options.type
		//     });
		// }
		// if (options.id) {
		//     this.setData({
		//         currentId: options.id
		//     });
		//     this.requestInfo();
		// }
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	methods: {
		/**
		 * 获取banner信息
		 */
		getBannerList() {
			let that = this;
			console.log(that.api.banner_list);

			that.G.Get(
				that.api.banner_list,
				{},
				(res) => {
					console.log(res);
					//  res.pageBean.recordList.forEach((item) => {
					// item["pubTime"] = dateUtil.timeShow(item.publishTime);
					// console.log(item);
					//  });
					res.banners.forEach((item) => {
						switch (item.title) {
							case "国庆高工价合集":
								item.path = "/root/other/channelPage?title=职位推荐&type=job&keys=江苏溧阳新能源焊工";
								break;
							case "快递短期工 人走账清":
								item.path = "/root/other/channelPage?title=职位推荐&type=job&keys=芜湖奇瑞";
								break;
							case "9月30+高工价合集":
								item.path = "/root/other/channelPage?title=职位推荐&type=job&keys=武汉安波福小时工";
								break;
							default:
								break;
						}
					});
					that.bannerList = res.banners;
				},
				(res) => {
					console.log(res);
				}
			);
			// uni.request({
			//     url: app.globalData.ip + '/daotian/banner/list',
			//     success(res) {
			//         console.log(res);
			//         if (res.data.status == 200) {
			//             that.setData({
			//                 bannerList: res.data.data.banners
			//             });
			//         }
			//     }
			// });
		},
		toHot(_item) {
			console.log("_item", _item);
			uni.navigateTo({
				url: _item.path,
			});
		},
		/**
		 * 拨打电话
		 */
		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;
			console.log("我的服务：", e);
			if (e.item.name != "联系我们") {
				uni.navigateTo({
					url: e.item.path,
				});
			} else {
				let appInfo = uni.getStorageSync("miniApp-info");
				that.currentStore = appInfo;
				that.currentStore.splitPhone = this.G.splitPhone(that.currentStore.contactTel);
				that.connectModalShow = true;
			}

			// this.G.isLogin();
			// if (this.G.isLogin()) {
			// 	uni.navigateTo({
			// 		url: e.item.path,
			// 	});
			// }
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage1() {},
	},
};
</script>
<style>
.bannerContainer {
	background-color: #f5f5f5;
	/* padding-top: 10px; */
	margin-bottom: 10px;
}
.banner {
	width: calc(100vw - 20px);
	height: 70px;
	margin: 0 10px 12px;
	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;
}
/* @import '../../'; */
</style>