renshou/template/banner/banner.vue

<template>
	<view>
		<!--components/banner/banner.wxml-->
		<!-- 顶部banner -->
		<template name="banner">
			<view class=" pdlr30 sat" style="padding-bottom: 30rpx;box-shadow: 0 5px 30px rgba(255,255,255,0.2);">
				<!-- 顶部banner -->
				<view v-if="bannerList.length>0" class="banner r20">
					<swiper class="swiper" @change="swiperChange" :current="swiperCurrent" autoplay="true"
						circular="true" duration="1000">
						<block v-for="(item, index) in bannerList" :key="index">
							<swiper-item autoplay="true">
								<contact-button :img-url="item.pic" class-name="banner-img" v-if="item.type == 8"></contact-button>
								<block v-else>
									<image lazy-load="true" :src="item.pic"
										mode="aspectFill" @tap="getUrl2" :data-type="item.type"
										:data-content="item.content" :data-merchant="url"></image>
								</block>
							</swiper-item>
						</block>
					</swiper>
					<view class="dotse dflex">
						<block v-for="(item, index) in bannerList" :key="index">
							<view :class="'dot ' + (index == swiperCurrent ? ' active' : '')" :data-current="index"
								@tap="dotEvent">
							</view>
						</block>
					</view>
				</view>
				<view class="gy-nav ddflex" v-if="navBannerList&&navBannerList.length>0">
					<view class="li" v-for="(item,index) in navBannerList" :key="index" @click="jumpPage(item)">
						<image :src="item.pic"></image>
					</view>
				</view>
				<!-- <view class="gy-nav ddflex" v-if="appId == 'ZQcE7DsNhdymuX2'">
					<view class="li" v-for="(item,index) in navBannerList" :key="index" @click="jumpPage(item)">
						<image :src="item.pic"></image>
					</view>
				</view> -->
				<block v-else>
				<block v-if="districtTemplate.contentId == 1 || !districtTemplate.module">
					<view class="nav dflex" v-if="categoryList.length>0"><!-- :style="'height:' + swiperHeight" -->
						<swiper :class="districtTemplate.content.lines==1&&districtTemplate.lineNumber==3?'swiper2':districtTemplate.content.lines==2&&districtTemplate.lineNumber==3?'swiper3':districtTemplate.content.lines==1&&districtTemplate.lineNumber==4?'swiper4':districtTemplate.content.lines==1&&districtTemplate.lineNumber==5?'swiper5':'swiper1'" @change="swiperGridFun"
							:current="swiperGridcurrent">
							<block v-for="(item, index) in categoryList" :key="index">
								<swiper-item autoplay="true" class="dflex grid">
									<block v-for="(it, idx) in item" :key="idx">
										<navigator
											:url="'/product/list/list?id=' + it.id + '&title=' + it.title  + '' + web"
											hover-class="none" :class="districtTemplate.lineNumber == 3 ? 'li3' : districtTemplate.lineNumber == 5 ? 'li5' : 'li'">
											<image lazy-load="true" :src="it.icon"></image>{{it.title}}
										</navigator>
									</block>
								</swiper-item>
							</block>
						</swiper>
						<view class="dots1 dflex" v-if="categoryList.length>1">
							<block v-for="(item, index) in categoryList" :key="index">
								<view :class="'dot1 ' + (index == swiperGridcurrent ? ' active' : '')"
									:data-current="index" @tap="dotGrid"></view>
							</block>
						</view>
					</view>
				</block>
				</block>
			</view>
			<view class="notice" v-if="config.Index_Notice && config.Index_Notice != 0">{{config.Index_Notice}}</view>
			<view class="idx-wechat ddflex" v-if="isShowZhuli" @click="showWechat">
				<image src="../../static/images/zhuli.png"></image>
				<view class="fflex">
					<view class="idx-wechat-tit">添加享团的小助理</view>
					<text>1v1专属服务</text>
				</view>
				<view class="idx-wechat-btn">立即添加</view>
			</view>
			<block v-if="isShowWechat">
			<view class="pop-ceng" @click="hideWechat"></view>
			<view class="pop-wechat">
				<image :src="zhuli.pic" class="wechat-img" show-menu-by-longpress="true"></image>
				<view class="changan ddflex">
					<image src="../../static/images/changan.png"></image>
					<view class="fflex">
						<view>长按识别二维码</view>
						<view>添加微信获取优惠信息</view>
					</view>
				</view>
			</view>
			</block>
			<coupons :couponList="couponList" v-if="couponList.length>0"></coupons>
			<interactive :pageList="officeList" v-if="officeList.length>0"></interactive>
		</template>
	</view>
</template>

<script>
	// components/banner/banner.js
	// 走马灯，广告
	const app = getApp();
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const route = require("../../utils/route.js");
	import coupons from '../../template/coupons/index.vue';
	import interactive from '../../template/interactive/index.vue';

	export default {
		components: {
			coupons,
			interactive
		},
		data() {
			return {
				swiperGridcurrent: 0,
				swiperCurrent: 0,
				categoryList: [],
				navBannerList: [],
				appId: req.header.appId,
				isShowZhuli: false,
				zhuli: '',
				isShowWechat: false
			};
		},
		props: {
			bannerList: Array,  //广告图
			couponList: Array,//优惠券
			officeList: Array,//互动
			web: String,	//跳转地址
			url: String,	//跳转地址
			// categoryList: Array,
			districtTemplate: Object, //金刚区模板配置
			config: Object, //系统配置
		},
		mounted() {
			if (this.districtTemplate.contentId == 1 || !this.districtTemplate.module) {
			// if (this.districtTemplate.number == 0) {
				this.getCategory()
			}
			// console.log(this.districtTemplate, "5464564654",this.bannerList)
			this.getNavBanner();
			this.getZhuli();
		},
		watch: {

		},

		beforeMount() {},

		methods: {
			showWechat(){
				this.isShowWechat = true;
			},
			hideWechat(){
				this.isShowWechat = false;
			},
			getZhuli(){
				req.getRequest('/api/content/list',{code: 'zhuli'},data=>{
					if(data&&data.length > 0){
						this.isShowZhuli = true;
						req.getRequest('/api/content/detail',{id: data[0].id},res=>{
							this.zhuli = res;
						})
					}
				})
			},
			getNavBanner(){
				let that = this;
				req.getRequest('/api/banner', {
					code: '00123'
				}, data => {
					that.navBannerList = data
				});
			},
			getRqeDatas() {
				let that = this; //顶部banner

				let ad = that.homeTemplate.filter(it => it.module == that.templateType.module_ad);

				if (ad && ad.length > 0 && ad[0].state == 0) {
					this.getBannerList(ad[0].module, ad[0].contentId);
				}
			},

			/**
			 * 轮播切换
			 */
			swiperChange({
				detail
			}) {
				// console.log(detail.source,"789456")
				// 防止轮播左右疯狂切换
				if (detail.source == 'autoplay' || detail.source == 'touch') {
					if (this.current == 0 && this.swiperCurrent > 1) {
						//卡死时，重置current为正确索引
						this.setData({
							current: this.swiperCurrent
						});
					} else {
						//正常轮转时，记录正确页码索引
						this.setData({
							swiperCurrent: detail.current
						});
					}
				}

			},
			getBannerList(module, contentId) {
				//banner图
				let that = this;
				req.getRequest('/api/banner', {
					groupId: contentId
				}, data => {
					if (module == that.templateType.module_ad) {
						that.setData({
							bannerList: data
						});
					} else {
						that.setData({
							popAdList: data[0]
						});
					}
				});
			},
			jumpPage(dt){
				let url = '';
				if (dt.type * 1 == 9 && dt.content != "") {
					url = "/product/list/list?id=" + dt.content;
				}else{
					url = dt.content;
				}
				uni.navigateTo({
					url: url
				})
			},
			async getUrl2(e) {
				console.log(e)
				var dt = e.currentTarget.dataset;
				var url = "";
				var id = "";
				var acid = "";
			
				if (dt.content != "") {
					let conunt = dt.content.split("_");
					id = conunt[1];
					acid = conunt[0];
				}
			
				if (dt.type * 1 == 2 && dt.content != "") {
					url = "product/detail/detail?id=" + dt.content;
				} else if (dt.type * 1 == 3) {
					url = dt.content;
					console.log('urlgetUrl2===',url)
					if(!url){
						req.msg('功能待接入')
						return false
					}
					if(url=='pages/index/index'||url=='pages/matchList/index'||url=='pages/interactive/index'||url=='pages/found/found'||url=='pages/user/user'){
						app.globalData.switchTab(url)
						return false
					}else{
						if(url.indexOf('http')!=-1){
							if(url.indexOf('${salesno}')!=-1){
								// 如果打开的分享的销售员微页
								if(req.getStorage('shareId')){
									url = url.replace(/\${salesno}/g,'salesno='+req.getStorage('shareId'))
								}else{
									// 如果自己是销售员
									if(req.getStorage('userInfo').saleNo){
										url = url.replace(/\${salesno}/g,'salesno='+req.getStorage('userInfo').saleNo)
									}else{
										//当前绑定的微页或推荐的微页
										let salesno = await new Promise((r,j)=>{
											req.getLocation(res => {
												const to = {
													latitude: res.latitude,
													longitude: res.longitude
												};
												req.getRequest('/api/visiting/card/recommendCardInfo', to, res => {
													r(res.jobNumber?res.jobNumber:'')
												})
											});
										})
										url = url.replace(/\${salesno}/g,'salesno='+salesno)
									}
								}
							}
							app.globalData.openPage('pages/web/web?url='+encodeURIComponent(url));
							return false
						}
					}
				} else if (dt.type * 1 == 4) {
					url = "product/groupDetail/groupDetail?acid=" + acid + "&id=" + id;
				} else if (dt.type * 1 == 5) {
					url = "product/coupon/coupon";
				} else if (dt.type * 1 == 6) {
					url = "pages/live/live";
				} else if (dt.type * 1 == 7) {
					url = "product/groupList/groupList" + dt.merchant;
				} else if (dt.type * 1 == 9 && dt.content != "") {
					url = "product/list/list?id=" + dt.content + '&title=' + dt.title + this.web;
				} else if (dt.type * 1 == 10) {
					url = "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" + dt.content;
					// console.log(
					// url); // url=`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${dt.content}`
				} else if (dt.type * 1 == 11) {
					url = "activity/group/index/index" + dt.merchant;
				} else if (dt.type * 1 == 12) {
					url = "activity/seckill/seckill" + dt.merchant;
				} else if (dt.type * 1 == 13) {
					url = "activity/bargain/index/index" + dt.merchant;
				} else if (dt.type * 1 == 14) {
					url = "activity/newbornZone/newbornZone" + dt.merchant;
				} else if (dt.type * 1 == 15 && dt.content != "") {
					url = "activity/newbornDetails/newbornDetails?acid=" + acid + "&id=" + id;
				} else if (dt.type * 1 == 16 && dt.content != "") {
					url = "activity/seckillDetails/seckillDetails?acid=" + acid + "&id=" + id;
				} else if (dt.type * 1 == 17 && dt.content != "") {
					url = "activity/bargain/detail/detail?acid=" + acid + "&id=" + id;
				} else if (dt.type * 1 == 18 && dt.content != "") {
					url = "activity/group/detail/detail?acid=" + acid + "&id=" + id;
				} else if (dt.type * 1 == 19 && dt.content != "") {//文章内容
					url = "topic/content/content?id=" + dt.content + "&type=" + 1;//1为普通文章内容
				} else if (dt.type * 1 == 21 && dt.content != "") {//专题类型
					url = "pages/topic/topic?id=" + dt.content;
				} else if (dt.type * 1 == 27 && dt.content != "") {
					url = "match/activityDetail/activityDetail?id=" + dt.content;
				} else{
					url = "";
				}
			
				if (dt.type * 1 == 6) app.globalData.switchTab(url);
				else app.globalData.openPage(url);
				this.hideAd();
			},

			hideAd() {
				//关闭广告
				// if(this.data.first==false){
				this.setData({
					isLayerAd: false
				}); // }
			},

			getCategory() {
				//产品分类
				let that = this;
				route.getCategory({
					pid: 0
				}, res => {
					res = res.map((it, index) => {
						it.index = index;
						return it;
					});
					let newList = [];
					if(this.districtTemplate.module){
						if(this.districtTemplate.content.lines ==1){
							if(this.districtTemplate.lineNumber == 3){
								newList = this.group(res, 3);
							}else if(this.districtTemplate.lineNumber == 4){
								newList = this.group(res, 4);
							}else{
								newList = this.group(res, 5);
							}
						}else{
							if(this.districtTemplate.lineNumber == 3){
								newList = this.group(res, 6);
							}else if(this.districtTemplate.lineNumber == 4){
								newList = this.group(res, 8);
							}else{
								newList = this.group(res, 10);
							}
						}
						// let newList = this.group(res, 8);
						// let data = newList; // .filter(it => it.length >= 8)
						// console.log(data,"858888888")
						// if(this.districtTemplate.lineNumber == 4){
						// 	if (data[0]&&data[0].length <= 4) {
						// 		this.setData({
						// 			swiperHeight: '240rpx'
						// 		});
						// 	} else {
						// 		this.setData({
						// 			swiperHeight: '400rpx'
						// 		});
						// 	}
						// }
						// if(this.districtTemplate.lineNumber == 3){
						// 	if (data[0]&&data[0].length <= 3) {
						// 		this.setData({
						// 			swiperHeight: '240rpx'
						// 		});
						// 	} else {
						// 		this.setData({
						// 			swiperHeight: '400rpx'
						// 		});
						// 	}
						// }
						// if(this.districtTemplate.lineNumber == 5){
						// 	if (data[0]&&data[0].length <= 5) {
						// 		this.setData({
						// 			swiperHeight: '240rpx'
						// 		});
						// 	} else {
						// 		this.setData({
						// 			swiperHeight: '400rpx'
						// 		});
						// 	}
						// }
						// console.log(newList, data);
					}else{
						newList = this.group(res, 8);
					}
					that.categoryList = newList;
					console.log('默认栏目==',that.categoryList)
				});
			},

			swiperGridFun({
				detail
			}) {
				let that = this
				if (detail.source !== "touch") return;

				if (!this.districtTemplate) {
					if (this.categoryList[detail.current].length <= 4) {
						this.setData({
							swiperHeight: '200rpx'
						})
					} else {
						this.setData({
							swiperHeight: '400rpx'
						})
					}
				}
				this.setData({
					swiperGridcurrent: detail.current
				});
				// console.log('swiperHeight', this.swiperHeight);

			},

			// 九宫格
			dotGrid(e) {
				let that = this
				if (!this.districtTemplate) {
					if (this.categoryList[e.currentTarget.dataset.current].length <= 4) {
						this.setData({
							swiperHeight: '100px'
						})
					} else {
						this.setData({
							swiperHeight: '200px'
						})
					}
				}
				this.setData({
					swiperGridcurrent: e.currentTarget.dataset.current
				});
			},

			group(array, subGroupLength) {
				let index = 0;
				let newArray = [];

				while (index < array.length) {
					newArray.push(array.slice(index, index += subGroupLength));
				}

				return newArray;
			}

		}
	};
</script>
<style>
	@import "./banner.css";
</style>