renshou/template/king_kong_district/king_kong_district.vue

<template>
	<view>
		<!--components/banner/banner.wxml-->
		<!-- 顶部banner -->
		<template name="ad">
			<view class="bgfff pdlr20 sat">
				<block v-if="!districtTemplate">
					<view class="nav dflex" v-if="categoryList.length>0">
						<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'" :style="'height:' + swiperHeight" @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">
							<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 v-else>
					<view class="nav dflex" v-if="districtTemplate.content.selectDataKingLength.length>0">
						<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'"
							:style="'height:'+swiperHeight" @change="swiperGridFun" :current="swiperGridcurrent">
							<block v-for="(item, ine) in districtTemplate.content.selectDataKingLength" :key="ine">
								<swiper-item autoplay="true" class="dflex grid">
									<block v-for="(it, idx) in item" :key="idx">
										<!-- #ifdef H5 -->
										<block v-for="(el, ids) in it" :key="idx+'_'+ids" v-if="el.bannerType!=''">
											<view :class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'" v-if="el.bannerType == 8">
												<contact-button :img-url="el.picUrl"  :button-text="el.bannerTitle"></contact-button>
											</view>
											<view @tap="getUrl2" :data-type="el.bannerType"
												:data-content="el.bannerContent" :data-merchant="url" :data-web="web"
												:data-title="el.bannerContentName"
												:class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'" v-else>
												<image lazy-load="true" :src="el.picUrl"></image>{{el.bannerTitle}}
											</view>
										</block>
										<!-- #endif -->

										<!-- #ifndef H5 -->
										<block v-for="(el, ids) in it" :key="ids" v-if="el.bannerType!=''">
											<view :class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'" v-if="el.bannerType == 8">
												<contact-button :img-url="el.picUrl"  :button-text="el.bannerTitle"></contact-button>
											</view>
											<view @tap="getUrl2" :data-type="el.bannerType"
												:data-content="el.bannerContent" :data-merchant="url" :data-web="web"
												:data-title="el.bannerContentName"
												:class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'" v-else>
												<image lazy-load="true" :src="el.picUrl"></image>{{el.bannerTitle}}
											</view>
										</block>
										<!-- #endif -->
									</block>
								</swiper-item>
							</block>
						</swiper>
						<view class="dots1 dflex" v-if="districtTemplate.content.selectDataKingLength.length>1">
							<!-- #ifdef H5 -->
							<block v-for="(item, index) in districtTemplate.content.selectDataKingLength"
								:key="'item_'+index">
								<view :class="'dot1 ' + (index == swiperGridcurrent ? ' active' : '')"
									:data-current="index" @tap="dotGrid"></view>
							</block>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<block v-for="(item, index) in districtTemplate.content.selectDataKingLength" :key="index">
								<view :class="'dot1 ' + (index == swiperGridcurrent ? ' active' : '')"
									:data-current="index" @tap="dotGrid"></view>
							</block>
							<!-- #endif -->
						</view>
					</view>
				</block>
			</view>
				<!-- <coupons :couponList="couponList" v-if="couponList.length>0"></coupons> -->
		</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';

	export default {
		data() {
			return {
				swiperGridcurrent: 0,

				swiperHeight: String
			};
		},
		components: {
			coupons
		},
		props: {
			web: String,  //跳转地址
			url: String, //跳转地址
			districtTemplate: Object ,//金刚区模板配置
			couponList: Array,//优惠券
		},
		mounted() {
			// console.log(this.districtTemplate, this.districtTemplate.content.selectDataKingLength.length, this.web, this
			// 	.url)
			this.getSwiperHeight();
		},
		watch: {

		},

		beforeMount() {},

		methods: {

			getUrl2(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){
							app.globalData.openPage('pages/web/web?url='+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
				}); // }
			},

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

				if (that.districtTemplate.content.lines == 2) {
					if (that.districtTemplate.lineNumber == 3) {
						if (that.swiperHeight, that.districtTemplate.content.selectDataKingLength[detail.current].flat(
								Infinity).length <= 3) {
							that.setData({
								swiperHeight: '120px'
							})
						} else {
							that.setData({
								swiperHeight: '432rpx'
							})
						}
					}
					// console.log(that.districtTemplate.content.selectDataKingLength[detail.current].flat(
					// 	Infinity).filter(it => it.bannerType != ''))
					if (that.districtTemplate.lineNumber == 4) {
						if (that.swiperHeight, that.districtTemplate.content.selectDataKingLength[detail.current].flat(
								Infinity).filter(it => it.bannerType != '').length <= 4) {
							that.setData({
								swiperHeight: '100px'
							})
						} else {
							that.setData({
								swiperHeight: '200px'
							})
						}
					}
				}


				this.setData({
					swiperGridcurrent: detail.current
				});
				// console.log('swiperHeight', this.swiperHeight);

			},
			getSwiperHeight(){
				let that = this;
				console.log('that.districtTemplate.content.lines==',that.districtTemplate.content.lines)
				if (that.districtTemplate.content.lines == 1) {
					that.swiperHeight = '150rpx'
				}
				if (that.districtTemplate.content.lines == 2) {
					if (that.districtTemplate.lineNumber == 3) {
						that.setData({
							swiperHeight: '432rpx'
						})
					}
					if (that.districtTemplate.lineNumber == 4) {
						that.setData({
							swiperHeight: '200px'
						})
					}
				}
				this.$forceUpdate();
			},

			// 九宫格
			dotGrid(e) {
				let that = this
				if (that.districtTemplate.content.lines == 2) {
					if (that.districtTemplate.lineNumber == 3) {
						if (that.swiperHeight, that.districtTemplate.content.selectDataKingLength[e.currentTarget.dataset
								.current].flat(
								Infinity).length <= 3) {
							that.setData({
								swiperHeight: '120px'
							})
						} else {
							that.setData({
								swiperHeight: '432rpx'
							})
						}
					}
					if (that.districtTemplate.lineNumber == 4) {
						if (that.swiperHeight, that.districtTemplate.content.selectDataKingLength[e.currentTarget.dataset
								.current].flat(
								Infinity).filter(it => it.bannerType != '').length <= 4) {
							that.setData({
								swiperHeight: '100px'
							})
						} else {
							that.setData({
								swiperHeight: '200px'
							})
						}
					}
				}


				this.setData({
					swiperGridcurrent: e.currentTarget.dataset.current
				});
			},

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