修改轮播图内容不够两行显示时下方大片留白的问题

components/cm-module/pageTemplate/templateH.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="section_page_main clearfix">
-		<view class="recommend-list">
-			<swiper class="tui-banner-swiper" :autoplay="true" :interval="5000" :duration="500" :circular="true" @change="swiperChange">
+		<view class="recommend-list" :style="hasLessProduct?'height:269px':''">
+			<swiper class="tui-banner-swiper" :autoplay="true" :interval="5000" :duration="500" :circular="true" @change="swiperChange" :style="hasLessProduct?'height:269px':''">
 				<swiper-item v-for="(product,index) in productList" :key="index">
 					<view class="floor-item ad_04 clearfix" v-for="(item, idx) in product" :key="idx" @click.stop="navToDetailPage(item)">
 						<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
@@ -146,6 +146,7 @@
 				current:100,
 				swiperCurrent:0,
 				pageSize:4,
+				productCount:0
 			}
 		},
 		filters: {
@@ -157,7 +158,10 @@
 			this.initData(this.pageData)
 		},
 		computed: {
-			...mapState(['hasLogin','userInfo','isActivity'])
+			...mapState(['hasLogin','userInfo','isActivity']),
+			hasLessProduct(){
+				return this.productCount <= 2
+			}
 		},
 		watch: {
 			pageData: {
@@ -175,7 +179,8 @@
 				}).catch(err => {
 					console.log('err',err)
 				})
-				if(data.floorImageList.length>0){
+				this.productCount = data.floorImageList.length
+				if(this.productCount>0){
 					this.productList.splice(0,this.productList.length);
 					for (var i = 0, j = data.floorImageList.length; i < j; i += this.pageSize) {
 						this.productList.push(data.floorImageList.slice(i, i + this.pageSize));

components/cm-module/pcitureTemplate/templateA.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="section_page_main clearfix">
-		<view class="recommend-list">
+		<view class="recommend-list" :style="hasLessImage?'height:82px':''">
 			<swiper
 				class="tui-banner-swiper"
 				:autoplay="true"
@@ -8,6 +8,7 @@
 				:duration="500"
 				:circular="true"
 				@change="swiperChange"
+				:style="hasLessImage?'height:82px':''" 
 			>
 				<swiper-item class="clearfix" v-for="(list,index1) in productList" :key="index1">
 					<view class="img-box" v-for="(product,index2) in list" :key="index2" @click="navigaitionTo(product)">
@@ -51,6 +52,7 @@ export default {
 			productList: [],
 			swiperCurrent: 0,
 			pageSize: 8,
+			imageCount:0
 		}
 	},
 	created() {
@@ -66,8 +68,14 @@ export default {
 			deep: true
 		}
 	},
+	computed:{
+		hasLessImage(){
+			return this.imageCount <= 4
+		}
+	},
 	methods: {
 		initData(data) {
+			this.imageCount = data.floorImageList.length
 			while(data.floorImageList.length > 0){
 				this.productList.push(data.floorImageList.splice(0,this.pageSize))
 			}

components/cm-module/pcitureTemplate/templateB.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="section_page_main clearfix">
-		<view class="recommend-list">
+		<view class="recommend-list" :style="hasLessImage?'height:78px':''" >
 			<swiper
 				class="tui-banner-swiper"
 				:autoplay="true"
@@ -8,6 +8,7 @@
 				:duration="500"
 				:circular="true"
 				@change="swiperChange"
+				:style="hasLessImage?'height:78px':''" 
 			>
 				<swiper-item class="clearfix" v-for="(list,index1) in productList" :key="index1">
 					<view class="img-box"  v-for="(product,index2) in list" :key="index2" @click="navigaitionTo(product)">
@@ -51,11 +52,17 @@ export default {
 			productList: [],
 			swiperCurrent: 0,
 			pageSize: 6,
+			imageCount:0
 		}
 	},
 	created() {
 		this.initData(this.pageData)
 	},
+	computed:{
+		hasLessImage(){
+			return this.imageCount <= 3
+		}
+	},
 	watch: {
 		pageData: {
 			handler: function(el) {
@@ -71,6 +78,7 @@ export default {
 			this.$api.getStorage().then(resolve => {
 				this.shopId = resolve.shopId ? resolve.shopId : 0
 			})
+			this.imageCount = data.floorImageList.length
 			while(data.floorImageList.length > 0){
 				this.productList.push(data.floorImageList.splice(0,this.pageSize))
 			}

components/cm-module/pcitureTemplate/templateE.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="section_page_main clearfix">
-		<view class="recommend-list">
+		<view class="recommend-list" :style="hasLessImage?'height:105px':''" >
 			<swiper
 				class="tui-banner-swiper"
 				:autoplay="true"
@@ -8,6 +8,7 @@
 				:duration="500"
 				:circular="true"
 				@change="swiperChange"
+				:style="hasLessImage?'height:105px':''" 
 			>
 				<swiper-item class="clearfix"  v-for="(list,index1) in productList" :key="index1">
 					<view class="img-box"  v-for="(product,index2) in list" :key="index2" @click="navigaitionTo(product)">
@@ -56,6 +57,11 @@ export default {
 	created() {
 		this.initData(this.pageData)
 	},
+	computed:{
+		hasLessImage(){
+			return this.imageCount <= 2
+		}
+	},
 	watch: {
 		pageData: {
 			handler: function(el) {
@@ -68,6 +74,7 @@ export default {
 	},
 	methods: {
 		initData(data) {
+			this.imageCount = data.floorImageList.length
 			while(data.floorImageList.length > 0){
 				this.productList.push(data.floorImageList.splice(0,this.pageSize))
 			}