H5_module/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'"
							@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'"
							@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!=''">
											<button open-type="contact" hover-class="none"
												:class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'"
												v-if="el.bannerType == 8">
												<image lazy-load="true" :src="el.picUrl"></image>{{el.bannerTitle}}
												<view class="btn-tag">专属药师</view>
											</button>
											<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!=''">
											<button open-type="contact" hover-class="none"
												:class="districtTemplate.lineNumber==3?'li3':districtTemplate.lineNumber==5?'li5':'li'"
												v-if="el.bannerType == 8">
												<image lazy-load="true" :src="el.picUrl"></image>{{el.bannerTitle}}
												<view class="btn-tag">专属药师</view>
											</button>
											<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 class="column ddflex" v-if="columnList&&columnList.length>0">
					<block v-for="(item,index) in columnList" :key="index">
						<button open-type="share" hover-class="none" class="li" v-if="item.content == '邀请'">
							<image :src="item.pic" mode="aspectFill"></image>
						</button>
						<view class="li" @click="jumpUrlColumn(item)" v-else>
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</block>
				</view>
				<!-- 套餐 -->
				<view class="box" v-if="mergeList&&mergeList.length>0">
					<view class="b-titles ddflex">
						<view class="b-title">
							<text>活动套餐</text>
						</view>
						<navigator url="/product/merge/list" hover-class="none" class="more ddflex">更多<image
								src="../../static/pages/images/more.png"></image>
						</navigator>
					</view>
					<view class="product-list ddflex">
						<view class="li" v-for="(item,index) in mergeList" :key="index"
							@click="jumpUrl('/product/mergeDetail/detail?id=' + item.id)">
							<image :src="item.pic" mode="aspectFill" class="pro-img"></image>
							<view class="pro-info">
								<view class="pro-tit tovers">{{item.title}}</view>
								<view class="yishou">{{item.sellQuantity}}件已售</view>
								<view class="pro-sta ddflex">
									<view class="money"><text>￥</text>{{item.minSalePrice}}<text></text></view>
									<image src="/static/pages/images/jia.png" class="pro-cart"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</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");

	export default {
		data() {
			return {
				swiperGridcurrent: 0,
				swiperHeight: String,
				columnList: [],
				mergeList: [], //套餐
			};
		},
		components: {},
		props: {
			web: String, //跳转地址
			url: String, //跳转地址
			districtTemplate: Object //金刚区模板配置
		},
		mounted() {
			// console.log(this.districtTemplate, this.districtTemplate.content.selectDataKingLength.length, this.web, this
			// 	.url)
			this.getColumn();
			this.getMergeList();
		},
		watch: {

		},

		beforeMount() {},

		methods: {
			jumpUrlColumn(item) {
				app.globalData.clickBanner(item);
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			getColumn() {
				req.getRequest('/api/banner', {
					code: 'column'
				}, data => {
					this.columnList = data;
				})
			},
			// 套餐
			getMergeList() { //组合产品
				let form = {
					page: 1,
					limit: 3
				}
				req.getRequest('/api/v3/merge/list', form, data => {
					this.mergeList = data;
				})
			},
			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('url===', url)
				} 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 = "service/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;
				}
				if (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);

			},

			// 九宫格
			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>