H5_module/template/banner/banner.vue

<template>
	<view>
		<!--components/banner/banner.wxml-->
		<!-- 顶部banner -->
		<template name="banner">
			<view class="pdlr30 sat">
				<!-- 顶部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">
								<button open-type="contact" v-if="item.type == 8">
									<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'"
										mode="aspectFill"></image>
								</button>
								<block v-else>
									<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'"
										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="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>
		</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,
				swiperCurrent: 0,
				categoryList: [],
				navBannerList: [],
				appId: req.header.appId
			};
		},
		components: {},
		props: {
			bannerList: 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();
		},
		watch: {

		},

		beforeMount() {},

		methods: {
			getNavBanner(){
				let that = this;
				req.getRequest('/api/banner', {
					groupId: '1196269897935630424'
				}, 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
				})
			},

			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 == 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;
				} 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 = "activity/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 == 3 && dt.content != "") {//外链类型
					url = dt.content;//1为普通文章内容
				} 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>