信息平台&美博会&落地页需求优化

components/cm-module/pageTemplate/templateE.vue

@@ -1,313 +1,312 @@
-<template>
-	<view class="section_page_main clearfix">
-		<view class="floor-item ad_01">
-			<image
-				class="item-img-gg"
-				:src="floorData.floorContent.appletsAdsImage1"
-				@click="
-					BannerNavigateTo(
-						floorData.floorContent.linkType1,
-						floorData.floorContent.linkParam1.id ? floorData.floorContent.linkParam1.id : '',
-						floorData.floorContent.adsLink1,
-						floorData.floorContent.linkParam1.keyword ? floorData.floorContent.linkParam1.keyword : ''
-					)
-				"
-				mode="aspectFill"
-			>
-			</image>
-		</view>
-		<view
-			class="floor-item ad_04 clearfix"
-			v-for="(item, idx) in floorData.floorImageList"
-			v-if="idx < 4"
-			:key="idx"
-			@click.stop="navToDetailPage(item)"
-		>
-			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
-			<template-Type :product="item.product"></template-Type>
-			<view class="floor-item_tag" v-if="item.listType == 2">
-				<text>{{ item.label }}</text>
-			</view>
-			<view class="floor-item-content">
-				<view class="title tui-skeleton-rect">
-					<text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
-					<text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
-						>{{ item.name }}
-					</text>
-				</view>
-				<view class="floor-item-price" v-if="item.listType == 1">
-					<template>
-						<template-Tags :product="item.product"></template-Tags>
-					</template>
-					<view v-if="hasLogin">
-						<template v-if="item.product.productCategory == 1">
-							<template-Price  :product="item.product"></template-Price>
-						</template>
-						<template v-else>
-							<view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
-								<text class="p sm">￥</text> <text class="p big">价格详聊</text>
-							</view>
-							<view class="price tui-skeleton-rect" v-else>
-								<text class="p sm">￥</text>
-								<text class="p big">{{ item.product.price | NumFormat }}</text>
-							</view>
-						</template>
-					</view>
-					<view v-else class="no-price">
-						<template v-if="item.product.productCategory == 1">
-							<view class="p-stars">
-								<text class="p-no">￥</text>
-								<uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
-							</view>
-						</template>
-						<template v-else>
-							<view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
-						</template>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
-import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
-import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
-import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
-
-
-export default {
-	name: 'templateE',
-	components: {
-		uniGrader,
-		templateTags,
-		templatePrice,
-		templateType
-	},
-	props: {
-		pageData: {
-			type: Object
-		},
-		userIdentity: {
-			type: Number
-		}
-	},
-	data() {
-		return {
-			shopId: 0,
-			floorData: {}
-		}
-	},
-	filters: {
-		NumFormat: function(text) {
-			//处理金额
-			return Number(text).toFixed(2)
-		}
-	},
-	created() {
-		this.initData(this.pageData)
-	},
-	computed: {
-		...mapState(['hasLogin', 'userInfo', 'isActivity'])
-	},
-	watch: {
-		pageData: {
-			handler: function(el) {
-				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
-				this.pageData = el
-				this.initData(this.pageData)
-			},
-			deep: true
-		}
-	},
-	methods: {
-		initData(data) {
-			this.floorData = data
-			// console.log(this.floorData)
-			this.$api
-				.getStorage()
-				.then(resolve => {
-					this.shopId = resolve.shopId ? resolve.shopId : 0
-				})
-				.catch(err => {
-					console.log('err', err)
-				})
-		},
-		PromotionsFormat(promo) {
-			//促销活动类型数据处理
-			if (promo != null) {
-				if (promo.type == 1 && promo.mode == 1) {
-					return true
-				} else {
-					return false
-				}
-			}
-			return false
-		},
-		navToDetailPage(pros) {
-			//跳转商品详情页
-			this.$api.FlooryNavigateTo(pros)
-		},
-		BannerNavigateTo(linkType, linkId, linkHref, keyword) {
-			//跳转商品详情页
-			this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.section_page_main {
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	.floor-item {
-		width: 339rpx;
-		height: 516rpx;
-		margin-right: 20rpx;
-		font-size: $font-size-24;
-		color: $text-color;
-		background: #ffffff;
-		line-height: 36rpx;
-		border-radius: 16rpx;
-		margin-bottom: 20rpx;
-		float: left;
-		box-sizing: border-box;
-		position: relative;
-		&.ad_01 {
-			width: 100%;
-			height: 240rpx;
-			.item-img-gg {
-				width: 100%;
-				height: 240rpx;
-				display: block;
-				border-radius: 16rpx;
-			}
-		}
-		&.ad_02 {
-			margin-right: 20rpx;
-		}
-		&:nth-child(odd) {
-			margin-right: 0;
-		}
-		.item-img-gg {
-			width: 339rpx;
-			height: 516rpx;
-			display: block;
-			border-radius: 16rpx;
-		}
-		.item-img {
-			width: 339rpx;
-			height: 339rpx;
-			border-radius: 16rpx 16rpx 0 0;
-			display: block;
-			margin-bottom: 8rpx;
-		}
-		.floor-item_tag {
-			width: 100%;
-			height: 32rpx;
-			float: left;
-			margin: 20rpx 0;
-			padding: 0 20rpx;
-			box-sizing: border-box;
-			text {
-				display: inline-block;
-				padding: 0 8rpx;
-				border: 1px solid #e3ebf7;
-				border-radius: 8rpx;
-				color: #9aa5b5;
-				font-size: $font-size-22;
-				line-height: 32rpx;
-				text-align: center;
-				float: left;
-			}
-		}
-		.floor-item-content {
-			width: 100%;
-			padding: 0 20rpx;
-			box-sizing: border-box;
-		}
-		.floor-item-act {
-			display: block;
-			width: 100%;
-			height: 32rpx;
-			text-align: center;
-			box-sizing: border-box;
-		}
-		.title-none {
-			font-size: $font-size-26;
-			color: #ff2a2a;
-			line-height: 54rpx;
-		}
-		.title {
-			width: 100%;
-			height: 70rpx;
-			display: flex;
-			line-height: 35rpx;
-			flex-direction: column;
-			margin: 8rpx 0;
-			padding: 0;
-			position: relative;
-			.mclap {
-				width: 100%;
-				line-height: 35rpx;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				word-break: break-all;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
-				overflow: hidden;
-				font-size: 26rpx;
-				&.indent {
-					text-indent: 95rpx;
-				}
-			}
-			.mclap-tag {
-				display: block;
-				width: 84rpx;
-				height: 32rpx;
-				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
-				border-radius: 4rpx 48rpx 4px 4px;
-				line-height: 32rpx;
-				font-size: $font-size-22;
-				color: #ffffff;
-				text-align: center;
-				position: absolute;
-				left: 0;
-				top: 0;
-			}
-		}
-		.no-price {
-			height: 54rpx;
-			line-height: 54rpx;
-			display: flex;
-			box-sizing: border-box;
-			.p-no {
-				font-size: $font-size-28;
-				color: $text-color;
-				display: block;
-				float: left;
-			}
-			.p-stars {
-				float: left;
-			}
-		}
-		.price {
-			color: #ff2a2a;
-			line-height: 54rpx;
-			&.none {
-				text-decoration: line-through;
-				color: #999999;
-			}
-			.sm {
-				font-size: $font-size-24;
-			}
-			.big {
-				font-size: $font-size-28;
-			}
-		}
-	}
-}
-</style>
+<template>
+	<view class="section_page_main clearfix">
+		<view class="floor-item ad_01">
+			<image
+				class="item-img-gg"
+				:src="floorData.floorContent.appletsAdsImage1"
+				@click="
+					BannerNavigateTo(
+						floorData.floorContent.linkType1,
+						floorData.floorContent.linkParam1.id ? floorData.floorContent.linkParam1.id : '',
+						floorData.floorContent.adsLink1,
+						floorData.floorContent.linkParam1.keyword ? floorData.floorContent.linkParam1.keyword : ''
+					)
+				"
+				mode="aspectFill"
+			>
+			</image>
+		</view>
+		<view
+			class="floor-item ad_04 clearfix"
+			v-for="(item, idx) in floorData.floorImageList"
+			v-if="idx < 4"
+			:key="idx"
+			@click.stop="navToDetailPage(item)"
+		>
+			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
+			<template-Type :product="item.product"></template-Type>
+			<view class="floor-item_tag" v-if="item.listType == 2">
+				<text>{{ item.label }}</text>
+			</view>
+			<view class="floor-item-content">
+				<view class="title tui-skeleton-rect">
+					<text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
+					<text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
+						>{{ item.name }}
+					</text>
+				</view>
+				<view class="floor-item-price" v-if="item.listType == 1">
+					<template>
+						<template-Tags :product="item.product"></template-Tags>
+					</template>
+					<view v-if="hasLogin">
+						<template v-if="item.product.productCategory == 1">
+							<template-Price  :product="item.product"></template-Price>
+						</template>
+						<template v-else>
+							<view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
+								<text class="p sm">￥</text> <text class="p big">价格详聊</text>
+							</view>
+							<view class="price tui-skeleton-rect" v-else>
+								<text class="p sm">￥</text>
+								<text class="p big">{{ item.product.price | NumFormat }}</text>
+							</view>
+						</template>
+					</view>
+					<view v-else class="no-price">
+						<template v-if="item.product.productCategory == 1">
+							<view class="p-stars">
+								<text class="p-no">￥</text>
+								<uni-grader :grade="Number(item.product.priceGrade)" :margin="14"></uni-grader>
+							</view>
+						</template>
+						<template v-else>
+							<view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+						</template>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+
+
+export default {
+	name: 'templateE',
+	components: {
+		uniGrader,
+		templateTags,
+		templatePrice,
+		templateType
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			shopId: 0,
+			floorData: {}
+		}
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo', 'isActivity'])
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		initData(data) {
+			this.floorData = data
+			// console.log(this.floorData)
+			this.$api
+				.getStorage()
+				.then(resolve => {
+					this.shopId = resolve.shopId ? resolve.shopId : 0
+				})
+				.catch(err => {
+					console.log('err', err)
+				})
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			return false
+		},
+		navToDetailPage(pros) {
+			//跳转商品详情页
+			this.$api.FlooryNavigateTo(pros)
+		},
+		BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+			//跳转商品详情页
+			this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.section_page_main {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.floor-item {
+		width: 339rpx;
+		height: 516rpx;
+		margin-right: 20rpx;
+		font-size: $font-size-24;
+		color: $text-color;
+		line-height: 36rpx;
+		border-radius: 16rpx;
+		margin-bottom: 20rpx;
+		float: left;
+		box-sizing: border-box;
+		position: relative;
+		&.ad_01 {
+			width: 100%;
+			height: 240rpx;
+			.item-img-gg {
+				width: 100%;
+				height: 240rpx;
+				display: block;
+				border-radius: 16rpx;
+			}
+		}
+		&.ad_02 {
+			margin-right: 20rpx;
+		}
+		&:nth-child(odd) {
+			margin-right: 0;
+		}
+		.item-img-gg {
+			width: 339rpx;
+			height: 516rpx;
+			display: block;
+			border-radius: 16rpx;
+		}
+		.item-img {
+			width: 339rpx;
+			height: 339rpx;
+			border-radius: 16rpx 16rpx 0 0;
+			display: block;
+			margin-bottom: 8rpx;
+		}
+		.floor-item_tag {
+			width: 100%;
+			height: 32rpx;
+			float: left;
+			margin: 20rpx 0;
+			padding: 0 20rpx;
+			box-sizing: border-box;
+			text {
+				display: inline-block;
+				padding: 0 8rpx;
+				border: 1px solid #e3ebf7;
+				border-radius: 8rpx;
+				color: #9aa5b5;
+				font-size: $font-size-22;
+				line-height: 32rpx;
+				text-align: center;
+				float: left;
+			}
+		}
+		.floor-item-content {
+			width: 100%;
+			padding: 0 20rpx;
+			box-sizing: border-box;
+		}
+		.floor-item-act {
+			display: block;
+			width: 100%;
+			height: 32rpx;
+			text-align: center;
+			box-sizing: border-box;
+		}
+		.title-none {
+			font-size: $font-size-26;
+			color: #ff2a2a;
+			line-height: 54rpx;
+		}
+		.title {
+			width: 100%;
+			height: 70rpx;
+			display: flex;
+			line-height: 35rpx;
+			flex-direction: column;
+			margin: 8rpx 0;
+			padding: 0;
+			position: relative;
+			.mclap {
+				width: 100%;
+				line-height: 35rpx;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				word-break: break-all;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				font-size: 26rpx;
+				&.indent {
+					text-indent: 95rpx;
+				}
+			}
+			.mclap-tag {
+				display: block;
+				width: 84rpx;
+				height: 32rpx;
+				background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+				border-radius: 4rpx 48rpx 4px 4px;
+				line-height: 32rpx;
+				font-size: $font-size-22;
+				color: #ffffff;
+				text-align: center;
+				position: absolute;
+				left: 0;
+				top: 0;
+			}
+		}
+		.no-price {
+			height: 54rpx;
+			line-height: 54rpx;
+			display: flex;
+			box-sizing: border-box;
+			.p-no {
+				font-size: $font-size-28;
+				color: $text-color;
+				display: block;
+				float: left;
+			}
+			.p-stars {
+				float: left;
+			}
+		}
+		.price {
+			color: #ff2a2a;
+			line-height: 54rpx;
+			&.none {
+				text-decoration: line-through;
+				color: #999999;
+			}
+			.sm {
+				font-size: $font-size-24;
+			}
+			.big {
+				font-size: $font-size-28;
+			}
+		}
+	}
+}
+</style>

components/cm-module/pageTemplate/templateH.vue

@@ -1,362 +1,361 @@
-<template>
-	<view class="section_page_main clearfix">
-		<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>
-						<template-Type :product="item.product"></template-Type>
-						<view class="floor-item_tag" v-if="item.listType == 2">
-							<text>{{ item.label }}</text>
-						</view>
-						<view class="floor-item-content">
-							<view class="title tui-skeleton-rect">
-								<text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
-								<text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
-									>{{ item.name }}
-								</text>
-							</view>
-							<view class="floor-item-price" v-if="item.listType == 1">
-								<template>
-									<template-Tags :product="item.product"></template-Tags>
-								</template>
-								<view v-if="hasLogin">
-									<template v-if="item.product.productCategory == 1">
-										<template-Price  :product="item.product"></template-Price>
-									</template>
-									<template v-else>
-										<view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
-											<text class="p sm">￥</text> <text class="p big">价格详聊</text>
-										</view>
-										<view class="price tui-skeleton-rect" v-else>
-											<text class="p sm">￥</text>
-											<text class="p big">{{ item.product.price | NumFormat }}</text>
-										</view>
-									</template>
-								</view>
-								<view v-else class="no-price">
-									<template v-if="item.product.productCategory == 1">
-										<view class="p-stars">
-											<text class="p-no">￥</text>
-											<uni-grader
-												:grade="Number(item.product.priceGrade)"
-												:margin="14"
-											></uni-grader>
-										</view>
-									</template>
-									<template v-else>
-										<view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
-									</template>
-								</view>
-							</view>
-						</view>
-					</view>
-				</swiper-item>
-			</swiper>
-			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
-				<view
-					v-for="(item, idx) in productList"
-					:key="idx"
-					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-					:data-index="swiperCurrent"
-					class="swiper__dots-item"
-				>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
-import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
-import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
-import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
-
-export default {
-	name: 'templateH',
-	components: {
-		uniGrader,
-		templateTags,
-		templatePrice,
-		templateType
-	},
-	props: {
-		pageData: {
-			type: Object
-		},
-		userIdentity: {
-			type: Number
-		}
-	},
-	data() {
-		return {
-			shopId: 0,
-			productList: [],
-			current: 100,
-			swiperCurrent: 0,
-			pageSize: 4,
-			productCount: 0
-		}
-	},
-	filters: {
-		NumFormat: function(text) {
-			//处理金额
-			return Number(text).toFixed(2)
-		}
-	},
-	created() {
-		this.initData(this.pageData)
-	},
-	computed: {
-		...mapState(['hasLogin', 'userInfo', 'isActivity']),
-		hasLessProduct() {
-			return this.productCount <= 2
-		}
-	},
-	watch: {
-		pageData: {
-			handler: function(el) {
-				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
-				this.pageData = el
-				this.initData(this.pageData)
-			},
-			deep: true
-		}
-	},
-	methods: {
-		initData(data) {
-			this.$api
-				.getStorage()
-				.then(resolve => {
-					this.shopId = resolve.shopId ? resolve.shopId : 0
-				})
-				.catch(err => {
-					console.log('err', err)
-				})
-			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))
-				}
-			}
-		},
-		PromotionsFormat(promo) {
-			//促销活动类型数据处理
-			if (promo != null) {
-				if (promo.type == 1 && promo.mode == 1) {
-					return true
-				} else {
-					return false
-				}
-			}
-			return false
-		},
-		tabClick(index) {
-			//轮播图切换
-			this.current = index
-		},
-		swiperChange(e) {
-			//轮播切换
-			const index = e.detail.current
-			this.swiperCurrent = index
-		},
-		navToDetailPage(pros) {
-			//跳转商品详情页
-			this.$api.FlooryNavigateTo(pros)
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.section_page_main {
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	.recommend-list {
-		width: 100%;
-		height: 1100rpx;
-		position: relative;
-		padding-bottom: 20rpx;
-		.tui-banner-swiper {
-			width: 100%;
-			margin: 0 auto;
-			background: #f7f7f7;
-			height: 1100rpx;
-			overflow: hidden;
-			transform: translateY(0);
-			.floor-item {
-				width: 339rpx;
-				height: 516rpx;
-				margin-right: 20rpx;
-				font-size: $font-size-24;
-				color: $text-color;
-				background: #ffffff;
-				line-height: 36rpx;
-				border-radius: 16rpx;
-				margin-bottom: 20rpx;
-				float: left;
-				box-sizing: border-box;
-				position: relative;
-				&:nth-child(2n) {
-					margin-right: 0;
-				}
-				.item-img {
-					width: 339rpx;
-					height: 339rpx;
-					border-radius: 16rpx 16rpx 0 0;
-					display: block;
-					margin-bottom: 8rpx;
-				}
-				.floor-item_tag {
-					width: 100%;
-					height: 32rpx;
-					float: left;
-					margin: 20rpx 0;
-					padding: 0 20rpx;
-					box-sizing: border-box;
-					text {
-						display: inline-block;
-						padding: 0 8rpx;
-						border: 1px solid #e3ebf7;
-						border-radius: 8rpx;
-						color: #9aa5b5;
-						font-size: $font-size-22;
-						line-height: 32rpx;
-						text-align: center;
-						float: left;
-					}
-				}
-				.floor-item-content {
-					width: 100%;
-					padding: 0 20rpx;
-					box-sizing: border-box;
-				}
-				.floor-item-act {
-					display: block;
-					width: 100%;
-					height: 32rpx;
-					text-align: center;
-					box-sizing: border-box;
-				}
-				.title-none {
-					font-size: $font-size-26;
-					color: #ff2a2a;
-					line-height: 54rpx;
-				}
-				.title {
-					width: 100%;
-					height: 70rpx;
-					display: flex;
-					line-height: 35rpx;
-					flex-direction: column;
-					margin: 8rpx 0;
-					padding: 0;
-					position: relative;
-					.mclap {
-						width: 100%;
-						line-height: 35rpx;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						word-break: break-all;
-						-webkit-box-orient: vertical;
-						-webkit-line-clamp: 2;
-						overflow: hidden;
-						font-size: 26rpx;
-						&.indent {
-							text-indent: 95rpx;
-						}
-					}
-					.mclap-tag {
-						display: block;
-						width: 84rpx;
-						height: 32rpx;
-						background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
-						border-radius: 4rpx 48rpx 4px 4px;
-						line-height: 32rpx;
-						font-size: $font-size-22;
-						color: #ffffff;
-						text-align: center;
-						position: absolute;
-						left: 0;
-						top: 0;
-					}
-				}
-				.no-price {
-					height: 54rpx;
-					line-height: 54rpx;
-					display: flex;
-					box-sizing: border-box;
-					.p-no {
-						font-size: $font-size-28;
-						color: $text-color;
-						display: block;
-						float: left;
-					}
-					.p-stars {
-						float: left;
-					}
-				}
-				.price {
-					color: #ff2a2a;
-					line-height: 54rpx;
-					&.none {
-						text-decoration: line-through;
-						color: #999999;
-					}
-					.sm {
-						font-size: $font-size-24;
-					}
-					.big {
-						font-size: $font-size-28;
-					}
-				}
-			}
-		}
-	}
-	.swiper__recommenddots-box {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 60rpx;
-		.swiper__dots-item {
-			width: 8rpx;
-			height: 8rpx;
-			border-radius: 100%;
-			margin-left: 6px;
-			background-color: rgba(225, 86, 22, 0.3);
-		}
-		.swiper__dots-long {
-			width: 32rpx;
-			height: 8rpx;
-			border-radius: 4rpx;
-			background-color: #FF5B00;
-			transition: all 0.4s;
-		}
-	}
-}
-</style>
+<template>
+	<view class="section_page_main clearfix">
+		<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>
+						<template-Type :product="item.product"></template-Type>
+						<view class="floor-item_tag" v-if="item.listType == 2">
+							<text>{{ item.label }}</text>
+						</view>
+						<view class="floor-item-content">
+							<view class="title tui-skeleton-rect">
+								<text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
+								<text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
+									>{{ item.name }}
+								</text>
+							</view>
+							<view class="floor-item-price" v-if="item.listType == 1">
+								<template>
+									<template-Tags :product="item.product"></template-Tags>
+								</template>
+								<view v-if="hasLogin">
+									<template v-if="item.product.productCategory == 1">
+										<template-Price  :product="item.product"></template-Price>
+									</template>
+									<template v-else>
+										<view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
+											<text class="p sm">￥</text> <text class="p big">价格详聊</text>
+										</view>
+										<view class="price tui-skeleton-rect" v-else>
+											<text class="p sm">￥</text>
+											<text class="p big">{{ item.product.price | NumFormat }}</text>
+										</view>
+									</template>
+								</view>
+								<view v-else class="no-price">
+									<template v-if="item.product.productCategory == 1">
+										<view class="p-stars">
+											<text class="p-no">￥</text>
+											<uni-grader
+												:grade="Number(item.product.priceGrade)"
+												:margin="14"
+											></uni-grader>
+										</view>
+									</template>
+									<template v-else>
+										<view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+									</template>
+								</view>
+							</view>
+						</view>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
+				<view
+					v-for="(item, idx) in productList"
+					:key="idx"
+					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+					:data-index="swiperCurrent"
+					class="swiper__dots-item"
+				>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader,
+		templateTags,
+		templatePrice,
+		templateType
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			shopId: 0,
+			productList: [],
+			current: 100,
+			swiperCurrent: 0,
+			pageSize: 4,
+			productCount: 0
+		}
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo', 'isActivity']),
+		hasLessProduct() {
+			return this.productCount <= 2
+		}
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		initData(data) {
+			this.$api
+				.getStorage()
+				.then(resolve => {
+					this.shopId = resolve.shopId ? resolve.shopId : 0
+				})
+				.catch(err => {
+					console.log('err', err)
+				})
+			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))
+				}
+			}
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
+				}
+			}
+			return false
+		},
+		tabClick(index) {
+			//轮播图切换
+			this.current = index
+		},
+		swiperChange(e) {
+			//轮播切换
+			const index = e.detail.current
+			this.swiperCurrent = index
+		},
+		navToDetailPage(pros) {
+			//跳转商品详情页
+			this.$api.FlooryNavigateTo(pros)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.section_page_main {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.recommend-list {
+		width: 100%;
+		height: 1100rpx;
+		position: relative;
+		padding-bottom: 20rpx;
+		.tui-banner-swiper {
+			width: 100%;
+			margin: 0 auto;
+			height: 1100rpx;
+			overflow: hidden;
+			transform: translateY(0);
+			.floor-item {
+				width: 339rpx;
+				height: 516rpx;
+				margin-right: 20rpx;
+				font-size: $font-size-24;
+				color: $text-color;
+				background: #ffffff;
+				line-height: 36rpx;
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+				float: left;
+				box-sizing: border-box;
+				position: relative;
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+				.item-img {
+					width: 339rpx;
+					height: 339rpx;
+					border-radius: 16rpx 16rpx 0 0;
+					display: block;
+					margin-bottom: 8rpx;
+				}
+				.floor-item_tag {
+					width: 100%;
+					height: 32rpx;
+					float: left;
+					margin: 20rpx 0;
+					padding: 0 20rpx;
+					box-sizing: border-box;
+					text {
+						display: inline-block;
+						padding: 0 8rpx;
+						border: 1px solid #e3ebf7;
+						border-radius: 8rpx;
+						color: #9aa5b5;
+						font-size: $font-size-22;
+						line-height: 32rpx;
+						text-align: center;
+						float: left;
+					}
+				}
+				.floor-item-content {
+					width: 100%;
+					padding: 0 20rpx;
+					box-sizing: border-box;
+				}
+				.floor-item-act {
+					display: block;
+					width: 100%;
+					height: 32rpx;
+					text-align: center;
+					box-sizing: border-box;
+				}
+				.title-none {
+					font-size: $font-size-26;
+					color: #ff2a2a;
+					line-height: 54rpx;
+				}
+				.title {
+					width: 100%;
+					height: 70rpx;
+					display: flex;
+					line-height: 35rpx;
+					flex-direction: column;
+					margin: 8rpx 0;
+					padding: 0;
+					position: relative;
+					.mclap {
+						width: 100%;
+						line-height: 35rpx;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						word-break: break-all;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+						font-size: 26rpx;
+						&.indent {
+							text-indent: 95rpx;
+						}
+					}
+					.mclap-tag {
+						display: block;
+						width: 84rpx;
+						height: 32rpx;
+						background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+						border-radius: 4rpx 48rpx 4px 4px;
+						line-height: 32rpx;
+						font-size: $font-size-22;
+						color: #ffffff;
+						text-align: center;
+						position: absolute;
+						left: 0;
+						top: 0;
+					}
+				}
+				.no-price {
+					height: 54rpx;
+					line-height: 54rpx;
+					display: flex;
+					box-sizing: border-box;
+					.p-no {
+						font-size: $font-size-28;
+						color: $text-color;
+						display: block;
+						float: left;
+					}
+					.p-stars {
+						float: left;
+					}
+				}
+				.price {
+					color: #ff2a2a;
+					line-height: 54rpx;
+					&.none {
+						text-decoration: line-through;
+						color: #999999;
+					}
+					.sm {
+						font-size: $font-size-24;
+					}
+					.big {
+						font-size: $font-size-28;
+					}
+				}
+			}
+		}
+	}
+	.swiper__recommenddots-box {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 60rpx;
+		.swiper__dots-item {
+			width: 8rpx;
+			height: 8rpx;
+			border-radius: 100%;
+			margin-left: 6px;
+			background-color: rgba(225, 86, 22, 0.3);
+		}
+		.swiper__dots-long {
+			width: 32rpx;
+			height: 8rpx;
+			border-radius: 4rpx;
+			background-color: #FF5B00;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

pages/goods/product.vue

@@ -62,7 +62,7 @@
 					class="nav-item tui-skeleton-fillet"
 					:class="{ current: tabCurrentIndex === 4 }"
 					@click="tabClick(4)"
-					v-if="product.archiveId !== 0"
+					v-if="product.archiveId !== 0 && userInfo.userIdentity !== 3"
 				>
 					<text>相关资料</text> <text class="line"></text>
 				</view>

pages/h5/activity/activity-topic.vue

@@ -1,208 +1,211 @@
-<template>
-    <view class="container floor clearfix">
-        <!-- top -->
-        <view
-            class="container-top"
-            @click="BannerNavigateTo(pageInfo.linkType, pageInfo.linkParam.id, pageInfo.headLink, pageInfo.keyword)"
-            v-if="isRequest && headImage !== ''"
-        >
-            <image :src="headImage"></image>
-        </view>
-        <tui-skeleton
-            v-if="skeletonShow"
-            backgroundColor="#fafafa"
-            borderRadius="10rpx"
-            :isLoading="true"
-            :loadingType="5"
-        ></tui-skeleton>
-        <!-- 楼层 -->
-        <view class="container-section tui-skeleton">
-            <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></page-floor>
-        </view>
-        <!-- 侧边 -->
-        <scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
-        <!-- 右侧联系 活动入口 -->
-        <activity-contact :pageInfo="pageInfo" v-if="isRequest"></activity-contact>
-    </view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import customFloor from '@/components/cm-custom/custom-floor' //自定义导航
-import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
-import pageFloor from './components/active-floor.vue'
-import ActivityContact from './components/activity-contact.vue'
-import authorize from '@/common/config/authorize.js'
-import wxLogin from '@/common/config/wxLogin.js'
-
-export default {
-    components: {
-        customFloor,
-        templateNav,
-        pageFloor,
-        ActivityContact
-    },
-    data() {
-        return {
-            userId: 0,
-            shopId: 0,
-            userIdentity: 0,
-            skeletonShow: true,
-            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
-            systeminfo: this.setSysteminfo(), //获取设备信息
-            CustomBar: this.CustomBar, // 顶部导航栏高度
-            navBarsList: [],
-            pageList: [], //楼层
-            isRequest: false,
-            isScrollTop: false,
-            pageId: '',
-            typeSort: '',
-            headImage: '',
-            pageInfo: {},
-            activityEntryVisiable: false
-        }
-    },
-    onLoad(option) {
-        if (option.type == 'share') {
-            authorize
-                .checkLogin()
-                .then(res => {
-                    wxLogin.wxLoginAuthorize()
-                })
-                .catch(err => {
-                    console.log(new Date() + '用户未授权微信信息')
-                })
-        }
-        this.pageId = option.linkId
-        this.$api
-            .getComStorage('userInfo')
-            .then(resolve => {
-                this.userId = resolve.userId ? resolve.userId : 0
-                this.shopId = resolve.shopId ? resolve.shopId : 0
-                this.userIdentity = resolve.userIdentity
-                this.GetActivityFloorData()
-            })
-            .catch(error => {
-                this.GetActivityFloorData()
-            })
-        setTimeout(() => {
-            this.skeletonShow = false
-        }, 2000)
-    },
-    computed: {
-        ...mapState(['hasLogin', 'userInfo', 'identity'])
-    },
-    methods: {
-        GetActivityFloorData() {
-            //获取楼层数据
-            this.CommonService.GetActivityFloorData({ pageId: this.pageId, userId: this.userId, source: 2 })
-                .then(response => {
-                    let data = response.data
-                    this.typeSort = data.page.typeSort
-                    this.pageList = data.floorList
-                    this.headImage = data.page.crmHeadImage
-                    this.pageInfo = data.page
-                    this.isRequest = true
-                    uni.setStorageSync('pageLabel', `${data.page.contentLabel}`)
-                    uni.setNavigationBarTitle({ title: data.page.title })
-                    // this.GetHomeInit()
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
-        },
-        GetHomeInit() {
-            //金刚区分类
-            this.CommonService.GetFirstClassly({ typeSort: this.typeSort, source: 'crm' })
-                .then(response => {
-                    this.navBarsList = response.data
-                    this.isRequest = true
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
-        },
-        setHeaderBtnPosi() {
-            // 获得胶囊按钮位置信息
-            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
-            return headerBtnPosi
-        },
-        setSysteminfo() {
-            let systeminfo
-            uni.getSystemInfo({
-                // 获取设备信息
-                success: res => {
-                    systeminfo = res
-                }
-            })
-            return systeminfo
-        },
-        BannerNavigateTo(linkType, linkId, linkHref, keyword) {
-            //跳转商品详情页
-            console.log(linkType, linkId, linkHref, keyword)
-            this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
-        }
-    },
-    onPageScroll(e) {
-        //实时获取到滚动的值
-        if (e.scrollTop > 400) {
-            this.isScrollTop = true
-        } else {
-            this.isScrollTop = false
-        }
-    },
-    onPullDownRefresh() {
-        setTimeout(() => {
-            uni.stopPullDownRefresh()
-        }, 200)
-    },
-    onShareAppMessage(res) {
-        //分享转发
-        if (res.from === 'button') {
-            // 来自页面内转发按钮
-        }
-        return {
-            title: '采美-一站式生/医美采购服务平台',
-            path: `pages/h5/activity/activity-topic?type=share&linkId=${this.pageId}`
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-page {
-    background-color: #ffffff;
-}
-.container-home {
-    width: 100%;
-    height: auto;
-}
-.container-section {
-    width: 100%;
-    height: auto;
-    background-color: #f7f7f7;
-}
-.container-top {
-    width: 100%;
-    height: 340rpx;
-    float: left;
-    image {
-        width: 100%;
-        height: 100%;
-        display: block;
-    }
-}
-.container-activ {
-    width: 100%;
-    height: 240rpx;
-    box-sizing: border-box;
-    padding: 0 24rpx;
-    margin: 24rpx 0;
-    float: left;
-    image {
-        width: 100%;
-        height: 240rpx;
-        display: block;
-    }
-}
-</style>
+<template>
+    <view class="container floor clearfix" :style="{backgroundColor:pageInfo.backgroundColour ? pageInfo.backgroundColour : '#f7f7f7',backgroundImage:'url('+pageInfo.backgroundImage+')'}">
+        <!-- top -->
+        <view
+            class="container-top"
+            @click="BannerNavigateTo(pageInfo.linkType, pageInfo.linkParam.id, pageInfo.headLink, pageInfo.keyword)"
+            v-if="isRequest && headImage !== ''"
+        >
+            <image :src="headImage"></image>
+        </view>
+        <tui-skeleton
+            v-if="skeletonShow"
+            backgroundColor="#fafafa"
+            borderRadius="10rpx"
+            :isLoading="true"
+            :loadingType="5"
+        ></tui-skeleton>
+        <!-- 楼层 -->
+        <view class="container-section tui-skeleton">
+            <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></page-floor>
+        </view>
+        <!-- 侧边 -->
+        <scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
+        <!-- 右侧联系 活动入口 -->
+        <activity-contact :pageInfo="pageInfo" v-if="isRequest"></activity-contact>
+    </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import customFloor from '@/components/cm-custom/custom-floor' //自定义导航
+import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
+import pageFloor from './components/active-floor.vue'
+import ActivityContact from './components/activity-contact.vue'
+import authorize from '@/common/config/authorize.js'
+import wxLogin from '@/common/config/wxLogin.js'
+
+export default {
+    components: {
+        customFloor,
+        templateNav,
+        pageFloor,
+        ActivityContact
+    },
+    data() {
+        return {
+            userId: 0,
+            shopId: 0,
+            userIdentity: 0,
+            skeletonShow: true,
+            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
+            systeminfo: this.setSysteminfo(), //获取设备信息
+            CustomBar: this.CustomBar, // 顶部导航栏高度
+            navBarsList: [],
+            pageList: [], //楼层
+            isRequest: false,
+            isScrollTop: false,
+            pageId: '',
+            typeSort: '',
+            headImage: '',
+            pageInfo: {},
+            activityEntryVisiable: false
+        }
+    },
+    onLoad(option) {
+        if (option.type == 'share') {
+            authorize
+                .checkLogin()
+                .then(res => {
+                    wxLogin.wxLoginAuthorize()
+                })
+                .catch(err => {
+                    console.log(new Date() + '用户未授权微信信息')
+                })
+        }
+        this.pageId = option.linkId
+        this.$api
+            .getComStorage('userInfo')
+            .then(resolve => {
+                this.userId = resolve.userId ? resolve.userId : 0
+                this.shopId = resolve.shopId ? resolve.shopId : 0
+                this.userIdentity = resolve.userIdentity
+                this.GetActivityFloorData()
+            })
+            .catch(error => {
+                this.GetActivityFloorData()
+            })
+        setTimeout(() => {
+            this.skeletonShow = false
+        }, 2000)
+    },
+    computed: {
+        ...mapState(['hasLogin', 'userInfo', 'identity'])
+    },
+    methods: {
+        GetActivityFloorData() {
+            //获取楼层数据
+            this.CommonService.GetActivityFloorData({ pageId: this.pageId, userId: this.userId, source: 2 })
+                .then(response => {
+                    let data = response.data
+                    this.typeSort = data.page.typeSort
+                    this.pageList = data.floorList
+                    this.headImage = data.page.crmHeadImage
+                    this.pageInfo = data.page
+                    this.isRequest = true
+                    uni.setStorageSync('pageLabel', `${data.page.contentLabel}`)
+                    uni.setNavigationBarTitle({ title: data.page.title })
+                    // this.GetHomeInit()
+                })
+                .catch(error => {
+                    this.$util.msg(error.msg, 2000)
+                })
+        },
+        GetHomeInit() {
+            //金刚区分类
+            this.CommonService.GetFirstClassly({ typeSort: this.typeSort, source: 'crm' })
+                .then(response => {
+                    this.navBarsList = response.data
+                    this.isRequest = true
+                })
+                .catch(error => {
+                    this.$util.msg(error.msg, 2000)
+                })
+        },
+        setHeaderBtnPosi() {
+            // 获得胶囊按钮位置信息
+            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
+            return headerBtnPosi
+        },
+        setSysteminfo() {
+            let systeminfo
+            uni.getSystemInfo({
+                // 获取设备信息
+                success: res => {
+                    systeminfo = res
+                }
+            })
+            return systeminfo
+        },
+        BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+            //跳转商品详情页
+            console.log(linkType, linkId, linkHref, keyword)
+            this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+        }
+    },
+    onPageScroll(e) {
+        //实时获取到滚动的值
+        if (e.scrollTop > 400) {
+            this.isScrollTop = true
+        } else {
+            this.isScrollTop = false
+        }
+    },
+    onPullDownRefresh() {
+        setTimeout(() => {
+            uni.stopPullDownRefresh()
+        }, 200)
+    },
+    onShareAppMessage(res) {
+        //分享转发
+        if (res.from === 'button') {
+            // 来自页面内转发按钮
+        }
+        return {
+            title: '采美-一站式生/医美采购服务平台',
+            path: `pages/h5/activity/activity-topic?type=share&linkId=${this.pageId}`
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+    background-color: #ffffff;
+}
+.container {
+    min-height: auto !important;
+}
+.container-home {
+    width: 100%;
+    height: auto;
+}
+.container-section {
+    width: 100%;
+    height: auto;
+    background-color: #f7f7f7;
+}
+.container-top {
+    width: 100%;
+    height: 340rpx;
+    float: left;
+    image {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+}
+.container-activ {
+    width: 100%;
+    height: 240rpx;
+    box-sizing: border-box;
+    padding: 0 24rpx;
+    margin: 24rpx 0;
+    float: left;
+    image {
+        width: 100%;
+        height: 240rpx;
+        display: block;
+    }
+}
+</style>

pages/h5/activity/components/active-floor.vue

@@ -1,271 +1,271 @@
-<template>
-    <view>
-        <view class="page-content clearfix" v-for="(page, index) in pageFloorList" :key="index">
-            <view class="tui-group-name" v-if="page.floorContent">
-                <view class="tui-group-title">
-                    <view class="tui-group-l">{{ page.title }}</view>
-                    <view class="tui-group-r" v-if="showMore(page)" @click="NavToDetailPage(page)">
-                        <text>更多</text>
-                        <text class="iconfont icon-xiayibu"></text>
-                    </view>
-                </view>
-                <view class="tui-sub__desc">{{ page.detail }}</view>
-            </view>
-            <!-- 图文模板 -->
-            <template v-if="page.floorContent.templateType == '3'">
-                <articleA :pageData="page" :userIdentity="userIdentity"></articleA>
-            </template>
-            <template v-if="page.floorContent.templateType == '4'">
-                <articleB :pageData="page" :userIdentity="userIdentity"></articleB>
-            </template>
-            <template v-if="page.floorContent.templateType == '5'">
-                <articleC :pageData="page" :userIdentity="userIdentity"></articleC>
-            </template>
-            <template v-if="page.floorContent.templateType == '6'">
-                <articleD :pageData="page" :userIdentity="userIdentity"></articleD>
-            </template>
-            <!-- 图片模板 -->
-            <template v-if="page.floorContent.templateType == '1'">
-                <pictureA :pageData="page" :userIdentity="userIdentity"></pictureA>
-            </template>
-            <template v-if="page.floorContent.templateType == '2'">
-                <pictureB :pageData="page" :userIdentity="userIdentity"></pictureB>
-            </template>
-            <template v-if="page.floorContent.templateType == '7'">
-                <pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
-            </template>
-            <template v-if="page.floorContent.templateType == '8'">
-                <pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
-            </template>
-            <template v-if="page.floorContent.templateType == '9'">
-                <pictureE :pageData="page" :userIdentity="userIdentity"></pictureE>
-            </template>
-            <template v-if="page.floorContent.templateType == '10'">
-                <pictureF :pageData="page" :userIdentity="userIdentity"></pictureF>
-            </template>
-            <!-- 产品模板 -->
-            <template v-if="page.floorContent.templateType == '11'">
-                <productI :pageData="page" :userIdentity="userIdentity"></productI>
-            </template>
-            <template v-if="page.floorContent.templateType == '12'">
-                <productJ :pageData="page" :userIdentity="userIdentity"></productJ>
-            </template>
-            <template v-if="page.floorContent.templateType == '13'">
-                <productK :pageData="page" :userIdentity="userIdentity"></productK>
-            </template>
-            <template v-if="page.floorContent.templateType == '14'">
-                <productG :pageData="page" :userIdentity="userIdentity"></productG>
-            </template>
-            <template v-if="page.floorContent.templateType == '15'">
-                <productD :pageData="page" :userIdentity="userIdentity"></productD>
-            </template>
-            <template v-if="page.floorContent.templateType == '16'">
-                <productC :pageData="page" :userIdentity="userIdentity"></productC>
-            </template>
-            <template v-if="page.floorContent.templateType == '17'">
-                <productB :pageData="page" :userIdentity="userIdentity"></productB>
-            </template>
-            <template v-if="page.floorContent.templateType == '18'">
-                <productA :pageData="page" :userIdentity="userIdentity"></productA>
-            </template>
-            <template v-if="page.floorContent.templateType == '19'">
-                <productE :pageData="page" :userIdentity="userIdentity"></productE>
-            </template>
-            <template v-if="page.floorContent.templateType == '20'">
-                <productF :pageData="page" :userIdentity="userIdentity"></productF>
-            </template>
-            <template v-if="page.floorContent.templateType == '21'">
-                <productH :pageData="page" :userIdentity="userIdentity"></productH>
-            </template>
-            <!-- 直播模板 -->
-            <template v-if="page.floorContent.templateType == '22'">
-                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
-            </template>
-            <template v-if="page.floorContent.templateType == '23'">
-                <liveC :pageData="page" :userIdentity="userIdentity"></liveC>
-            </template>
-            <template v-if="page.floorContent.templateType == '24'">
-                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
-            </template>
-            <template v-if="page.floorContent.templateType == '25'">
-                <liveB :pageData="page" :userIdentity="userIdentity"></liveB>
-            </template>
-            <!-- 视频模板 -->
-            <template v-if="isTemplate(['26', '30'], page)">
-                <videoA :pageData="page" :userIdentity="userIdentity"></videoA>
-            </template>
-            <template v-if="isTemplate(['27', '31'], page)">
-                <videoB :pageData="page" :userIdentity="userIdentity"></videoB>
-            </template>
-            <template v-if="isTemplate(['28', '32'], page)">
-                <videoC :pageData="page" :userIdentity="userIdentity"></videoC>
-            </template>
-            <template v-if="isTemplate(['29', '33'], page)">
-                <videoD :pageData="page" :userIdentity="userIdentity"></videoD>
-            </template>
-        </view>
-    </view>
-</template>
-
-<script>
-//引入产品模板
-import productA from '@/components/cm-module/pageTemplate/templateA.vue'
-import productB from '@/components/cm-module/pageTemplate/templateB.vue'
-import productC from '@/components/cm-module/pageTemplate/templateC.vue'
-import productD from '@/components/cm-module/pageTemplate/templateD.vue'
-import productE from '@/components/cm-module/pageTemplate/templateE.vue'
-import productF from '@/components/cm-module/pageTemplate/templateF.vue'
-import productG from '@/components/cm-module/pageTemplate/templateG.vue'
-import productH from '@/components/cm-module/pageTemplate/templateH.vue'
-import productI from '@/components/cm-module/pageTemplate/templateI.vue'
-import productJ from '@/components/cm-module/pageTemplate/templateJ.vue'
-import productK from '@/components/cm-module/pageTemplate/templateK.vue'
-//引入图片模板
-import pictureA from './template-picture/templateA.vue'
-import pictureB from './template-picture/templateB.vue'
-import pictureC from './template-picture/templateC.vue'
-import pictureD from './template-picture/templateD.vue'
-import pictureE from './template-picture/templateE.vue'
-import pictureF from './template-picture/templateF.vue'
-import pictureG from './template-picture/templateG.vue'
-import pictureH from './template-picture/templateH.vue'
-//引入图文模板
-import articleA from './template-article/templateA.vue'
-import articleB from './template-article/templateB.vue'
-import articleC from './template-article/templateC.vue'
-import articleD from './template-article/templateD.vue'
-// 直播楼层模板
-import liveA from './template-live/templateA.vue'
-import liveB from './template-live/templateB.vue'
-import liveC from './template-live/templateC.vue'
-// 视频模板
-import videoA from './template-video/templateA.vue'
-import videoB from './template-video/templateB.vue'
-import videoC from './template-video/templateC.vue'
-import videoD from './template-video/templateD.vue'
-
-export default {
-    name: 'pageFloor',
-    components: {
-        productA,
-        productB,
-        productC,
-        productD,
-        productE,
-        productF,
-        productG,
-        productH,
-        productI,
-        productJ,
-        productK,
-        pictureA,
-        pictureB,
-        pictureC,
-        pictureD,
-        pictureE,
-        pictureF,
-        pictureG,
-        pictureH,
-        articleA,
-        articleB,
-        articleC,
-        articleD,
-        liveA,
-        liveC,
-        liveB,
-        videoA,
-        videoB,
-        videoC,
-        videoD
-    },
-    props: {
-        list: {
-            type: Array
-        },
-        pageType: {
-            type: Number
-        },
-        userIdentity: {
-            type: Number
-        }
-    },
-    data() {
-        return {
-            pageFloorList: [],
-            isSwiperTemp: ['1', '2', '9', '21', '5', '7', '22', '23', '24', '25', '27', '32']
-        }
-    },
-    created() {
-        this.initData(this.list)
-    },
-    methods: {
-        initData(data) {
-            this.pageFloorList = data
-        },
-        NavToDetailPage(page) {
-            //跳转
-            this.$api.navigateTo(
-                `/pages/h5/activity/activity-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${page.title}`
-            )
-        },
-        showMore(page) {
-            // if(page.floorContent.templateType)
-            if (page.floorContent.templateType == 10) {
-                if (page.floorImageList.length <= 1) {
-                    return false
-                }
-            }
-            return !this.isSwiperTemp.includes(page.floorContent.templateType)
-        },
-        isTemplate(temp = [], page) {
-            const templateType = page?.floorContent?.templateType
-            return templateType && temp.includes(templateType) 
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.page-content {
-    background-color: #f7f7f7;
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    padding: 0 24rpx;
-    float: left;
-}
-.tui-group-name {
-    width: 100%;
-    height: 92rpx;
-    padding: 20rpx 0;
-}
-.tui-group-title {
-    width: 100%;
-    float: left;
-    .tui-group-l {
-        float: left;
-        font-size: 34rpx;
-        font-weight: bold;
-        text-align: left;
-        line-height: 49rpx;
-        color: #333;
-    }
-    .tui-group-r {
-        float: right;
-        font-size: $font-size-26;
-        text-align: right;
-        line-height: 49rpx;
-        color: #999999;
-        .icon-xiayibu {
-            font-size: $font-size-30;
-            color: #999999;
-        }
-    }
-}
-.tui-sub__desc {
-    width: 100%;
-    float: left;
-    color: rgba(153, 153, 153, 0.9);
-    font-size: $font-size-26;
-}
-</style>
+<template>
+    <view>
+        <view class="page-content clearfix" v-for="(page, index) in pageFloorList" :key="index">
+            <view class="tui-group-name" v-if="page.floorContent">
+                <view class="tui-group-title">
+                    <view class="tui-group-l">{{ page.title }}</view>
+                    <view class="tui-group-r" v-if="showMore(page)" @click="NavToDetailPage(page)">
+                        <text>更多</text>
+                        <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                </view>
+                <view class="tui-sub__desc">{{ page.detail }}</view>
+            </view>
+            <!-- 图文模板 -->
+            <template v-if="page.floorContent.templateType == '3'">
+                <articleA :pageData="page" :userIdentity="userIdentity"></articleA>
+            </template>
+            <template v-if="page.floorContent.templateType == '4'">
+                <articleB :pageData="page" :userIdentity="userIdentity"></articleB>
+            </template>
+            <template v-if="page.floorContent.templateType == '5'">
+                <articleC :pageData="page" :userIdentity="userIdentity"></articleC>
+            </template>
+            <template v-if="page.floorContent.templateType == '6'">
+                <articleD :pageData="page" :userIdentity="userIdentity"></articleD>
+            </template>
+            <!-- 图片模板 -->
+            <template v-if="page.floorContent.templateType == '1'">
+                <pictureA :pageData="page" :userIdentity="userIdentity"></pictureA>
+            </template>
+            <template v-if="page.floorContent.templateType == '2'">
+                <pictureB :pageData="page" :userIdentity="userIdentity"></pictureB>
+            </template>
+            <template v-if="page.floorContent.templateType == '7'">
+                <pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
+            </template>
+            <template v-if="page.floorContent.templateType == '8'">
+                <pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
+            </template>
+            <template v-if="page.floorContent.templateType == '9'">
+                <pictureE :pageData="page" :userIdentity="userIdentity"></pictureE>
+            </template>
+            <template v-if="page.floorContent.templateType == '10'">
+                <pictureF :pageData="page" :userIdentity="userIdentity"></pictureF>
+            </template>
+            <!-- 产品模板 -->
+            <template v-if="page.floorContent.templateType == '11'">
+                <productI :pageData="page" :userIdentity="userIdentity"></productI>
+            </template>
+            <template v-if="page.floorContent.templateType == '12'">
+                <productJ :pageData="page" :userIdentity="userIdentity"></productJ>
+            </template>
+            <template v-if="page.floorContent.templateType == '13'">
+                <productK :pageData="page" :userIdentity="userIdentity"></productK>
+            </template>
+            <template v-if="page.floorContent.templateType == '14'">
+                <productG :pageData="page" :userIdentity="userIdentity"></productG>
+            </template>
+            <template v-if="page.floorContent.templateType == '15'">
+                <productD :pageData="page" :userIdentity="userIdentity"></productD>
+            </template>
+            <template v-if="page.floorContent.templateType == '16'">
+                <productC :pageData="page" :userIdentity="userIdentity"></productC>
+            </template>
+            <template v-if="page.floorContent.templateType == '17'">
+                <productB :pageData="page" :userIdentity="userIdentity"></productB>
+            </template>
+            <template v-if="page.floorContent.templateType == '18'">
+                <productA :pageData="page" :userIdentity="userIdentity"></productA>
+            </template>
+            <template v-if="page.floorContent.templateType == '19'">
+                <productE :pageData="page" :userIdentity="userIdentity"></productE>
+            </template>
+            <template v-if="page.floorContent.templateType == '20'">
+                <productF :pageData="page" :userIdentity="userIdentity"></productF>
+            </template>
+            <template v-if="page.floorContent.templateType == '21'">
+                <productH :pageData="page" :userIdentity="userIdentity"></productH>
+            </template>
+            <!-- 直播模板 -->
+            <template v-if="page.floorContent.templateType == '22'">
+                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
+            </template>
+            <template v-if="page.floorContent.templateType == '23'">
+                <liveC :pageData="page" :userIdentity="userIdentity"></liveC>
+            </template>
+            <template v-if="page.floorContent.templateType == '24'">
+                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
+            </template>
+            <template v-if="page.floorContent.templateType == '25'">
+                <liveB :pageData="page" :userIdentity="userIdentity"></liveB>
+            </template>
+            <!-- 视频模板 -->
+            <template v-if="isTemplate(['26', '30'], page)">
+                <videoA :pageData="page" :userIdentity="userIdentity"></videoA>
+            </template>
+            <template v-if="isTemplate(['27', '31'], page)">
+                <videoB :pageData="page" :userIdentity="userIdentity"></videoB>
+            </template>
+            <template v-if="isTemplate(['28', '32'], page)">
+                <videoC :pageData="page" :userIdentity="userIdentity"></videoC>
+            </template>
+            <template v-if="isTemplate(['29', '33'], page)">
+                <videoD :pageData="page" :userIdentity="userIdentity"></videoD>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script>
+//引入产品模板
+import productA from '@/components/cm-module/pageTemplate/templateA.vue'
+import productB from '@/components/cm-module/pageTemplate/templateB.vue'
+import productC from '@/components/cm-module/pageTemplate/templateC.vue'
+import productD from '@/components/cm-module/pageTemplate/templateD.vue'
+import productE from '@/components/cm-module/pageTemplate/templateE.vue'
+import productF from '@/components/cm-module/pageTemplate/templateF.vue'
+import productG from '@/components/cm-module/pageTemplate/templateG.vue'
+import productH from '@/components/cm-module/pageTemplate/templateH.vue'
+import productI from '@/components/cm-module/pageTemplate/templateI.vue'
+import productJ from '@/components/cm-module/pageTemplate/templateJ.vue'
+import productK from '@/components/cm-module/pageTemplate/templateK.vue'
+//引入图片模板
+import pictureA from './template-picture/templateA.vue'
+import pictureB from './template-picture/templateB.vue'
+import pictureC from './template-picture/templateC.vue'
+import pictureD from './template-picture/templateD.vue'
+import pictureE from './template-picture/templateE.vue'
+import pictureF from './template-picture/templateF.vue'
+import pictureG from './template-picture/templateG.vue'
+import pictureH from './template-picture/templateH.vue'
+//引入图文模板
+import articleA from './template-article/templateA.vue'
+import articleB from './template-article/templateB.vue'
+import articleC from './template-article/templateC.vue'
+import articleD from './template-article/templateD.vue'
+// 直播楼层模板
+import liveA from './template-live/templateA.vue'
+import liveB from './template-live/templateB.vue'
+import liveC from './template-live/templateC.vue'
+// 视频模板
+import videoA from './template-video/templateA.vue'
+import videoB from './template-video/templateB.vue'
+import videoC from './template-video/templateC.vue'
+import videoD from './template-video/templateD.vue'
+
+export default {
+    name: 'pageFloor',
+    components: {
+        productA,
+        productB,
+        productC,
+        productD,
+        productE,
+        productF,
+        productG,
+        productH,
+        productI,
+        productJ,
+        productK,
+        pictureA,
+        pictureB,
+        pictureC,
+        pictureD,
+        pictureE,
+        pictureF,
+        pictureG,
+        pictureH,
+        articleA,
+        articleB,
+        articleC,
+        articleD,
+        liveA,
+        liveC,
+        liveB,
+        videoA,
+        videoB,
+        videoC,
+        videoD
+    },
+    props: {
+        list: {
+            type: Array
+        },
+        pageType: {
+            type: Number
+        },
+        userIdentity: {
+            type: Number
+        }
+    },
+    data() {
+        return {
+            pageFloorList: [],
+            isSwiperTemp: ['1', '2', '9', '21', '5', '7', '22', '23', '24', '25', '27', '32']
+        }
+    },
+    created() {
+        this.initData(this.list)
+    },
+    methods: {
+        initData(data) {
+            this.pageFloorList = data
+            console.log(this.pageFloorList)
+        },
+        NavToDetailPage(page) {
+            //跳转
+            this.$api.navigateTo(
+                `/pages/h5/activity/activity-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${page.title}`
+            )
+        },
+        showMore(page) {
+            // if(page.floorContent.templateType)
+            if (page.floorContent.templateType == 10) {
+                if (page.floorImageList.length <= 1) {
+                    return false
+                }
+            }
+            return !this.isSwiperTemp.includes(page.floorContent.templateType)
+        },
+        isTemplate(temp = [], page) {
+            const templateType = page?.floorContent?.templateType
+            return templateType && temp.includes(templateType) 
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.page-content {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    padding: 0 24rpx;
+    float: left;
+}
+.tui-group-name {
+    width: 100%;
+    height: 92rpx;
+    padding: 20rpx 0;
+}
+.tui-group-title {
+    width: 100%;
+    float: left;
+    .tui-group-l {
+        float: left;
+        font-size: 30rpx;
+        font-weight: bold;
+        text-align: left;
+        line-height: 49rpx;
+        color: #333;
+    }
+    .tui-group-r {
+        float: right;
+        font-size: 25rpx;
+        text-align: right;
+        line-height: 49rpx;
+        color: #999999;
+        .icon-xiayibu {
+            font-size: $font-size-30;
+            color: #999999;
+        }
+    }
+}
+.tui-sub__desc {
+    width: 100%;
+    float: left;
+    color: rgba(153, 153, 153, 0.9);
+    font-size: $font-size-26;
+}
+</style>

pages/h5/activity/components/template-live/components/swiper-temp1.vue

@@ -1,202 +1,201 @@
-<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"
-                :class="{ minHeigth: hasLessImage }"
-            >
-                <swiper-item class="clearfix" v-for="(item, index1) in list" :key="index1">
-                    <view
-                        class="img-box"
-                        v-for="(product, index2) in item"
-                        :key="index2"
-                        @click="navigaitionTo(product)"
-                    >
-                        <view class="cm-cover" :class="'color' + checkDisplayDate">{{coverText[checkDisplayDate]}}</view>
-                        <image :src="product.appletsImage" mode="scaleToFill"></image>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper__recommenddots-box" v-if="list.length > 1">
-                <view
-                    v-for="(item, idx) in list"
-                    :key="idx"
-                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-                    :data-index="swiperCurrent"
-                    class="swiper__dots-item"
-                >
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-    name: 'SwiperTemp',
-    props: {
-        floorImageList: {
-            type: Array
-        },
-        displayDate: String
-    },
-    data() {
-        return {
-            list: [],
-            swiperCurrent: 0,
-            pageSize: 4,
-            imageCount: 0,
-            coverText: ['未开始', '已开始', '已结束']
-        }
-    },
-    created() {
-        this.initData()
-    },
-    computed: {
-        hasLessImage() {
-            return this.imageCount <= 2
-        },
-        checkDisplayDate() {
-            const nowDate = new Date().getTime()
-            const displayDate = new Date(this.displayDate.replace(/-/g, '/')).getTime()
-            const oneDay = 60 * 60 * 24 * 1000
-            // 未开始
-            if (nowDate < displayDate) {
-                return 0
-            }
-            // 已开始
-            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
-                return 1
-            }
-            // 已结束
-            if (nowDate > displayDate + oneDay) {
-                return 2
-            }
-        }
-    },
-    methods: {
-        initData() {
-            this.imageCount = this.floorImageList.length
-            while (this.floorImageList.length > 0) {
-                this.list.push(this.floorImageList.splice(0, this.pageSize))
-            }
-        },
-        swiperChange(e) {
-            //轮播切换
-            const index = e.detail.current
-            this.swiperCurrent = index
-        },
-        navigaitionTo(item) {
-            if (item.adsImage === '' && item.linkType === -1) {
-                return
-            } else if (item.linkType === -1) {
-                uni.navigateTo({
-                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
-                })
-            } else {
-                caimeiApi.FlooryNavigateTo(item)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.minHeigth {
-    height: 250rpx !important;
-}
-.section_page_main {
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    .recommend-list {
-        width: 100%;
-        position: relative;
-        padding-bottom: 20rpx;
-        .tui-banner-swiper {
-            height: 550rpx;
-            width: 100%;
-            margin: 0 auto;
-            background: #f7f7f7;
-            overflow: hidden;
-            transform: translateY(0);
-            .img-box {
-                position: relative;
-                width: 339rpx;
-                height: 240rpx;
-                float: left;
-                margin: 24rpx 24rpx 0 0;
-                overflow: hidden;
-                border-radius: 16rpx;
-                image {
-                    width: 339rpx;
-                    height: 240rpx;
-                }
-                &:nth-child(2n) {
-                    margin-right: 0;
-                }
-                &:nth-child(1),
-                &:nth-child(2) {
-                    margin-top: 0;
-                }
-                .cm-cover {
-                    position: absolute;
-                    width: 96rpx;
-                    height: 40rpx;
-                    top: 0;
-                    right: 0;
-                    border-radius: 0 16rpx 0 16rpx;
-                    color: #fff;
-                    font-size: 24rpx;
-                    text-align: center;
-                    line-height: 36rpx;
-                    &.color2 {
-                        background: rgba(0, 0, 0, 0.5);
-                    }
-                    &.color1 {
-                        background: rgb(255, 92, 0);
-                    }
-                    &.color0 {
-                        background: rgb(30, 206, 112);
-                    }
-                }
-            }
-        }
-    }
-    .swiper__recommenddots-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        /* #ifndef APP-NVUE */
-        display: flex;
-        /* #endif */
-        flex: 1;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        height: 60rpx;
-        .swiper__dots-item {
-            width: 8rpx;
-            height: 8rpx;
-            border-radius: 100%;
-            margin-left: 6px;
-            background-color: rgba(225, 86, 22, 0.3);
-        }
-        .swiper__dots-long {
-            width: 32rpx;
-            height: 8rpx;
-            border-radius: 4rpx;
-            background-color: #FF5B00;
-            transition: all 0.4s;
-        }
-    }
-}
-</style>
+<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"
+                :class="{ minHeigth: hasLessImage }"
+            >
+                <swiper-item class="clearfix" v-for="(item, index1) in list" :key="index1">
+                    <view
+                        class="img-box"
+                        v-for="(product, index2) in item"
+                        :key="index2"
+                        @click="navigaitionTo(product)"
+                    >
+                        <view class="cm-cover" :class="'color' + checkDisplayDate">{{coverText[checkDisplayDate]}}</view>
+                        <image :src="product.appletsImage" mode="scaleToFill"></image>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__recommenddots-box" v-if="list.length > 1">
+                <view
+                    v-for="(item, idx) in list"
+                    :key="idx"
+                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+                    :data-index="swiperCurrent"
+                    class="swiper__dots-item"
+                >
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+    name: 'SwiperTemp',
+    props: {
+        floorImageList: {
+            type: Array
+        },
+        displayDate: String
+    },
+    data() {
+        return {
+            list: [],
+            swiperCurrent: 0,
+            pageSize: 4,
+            imageCount: 0,
+            coverText: ['未开始', '已开始', '已结束']
+        }
+    },
+    created() {
+        this.initData()
+    },
+    computed: {
+        hasLessImage() {
+            return this.imageCount <= 2
+        },
+        checkDisplayDate() {
+            const nowDate = new Date().getTime()
+            const displayDate = new Date(this.displayDate.replace(/-/g, '/')).getTime()
+            const oneDay = 60 * 60 * 24 * 1000
+            // 未开始
+            if (nowDate < displayDate) {
+                return 0
+            }
+            // 已开始
+            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
+                return 1
+            }
+            // 已结束
+            if (nowDate > displayDate + oneDay) {
+                return 2
+            }
+        }
+    },
+    methods: {
+        initData() {
+            this.imageCount = this.floorImageList.length
+            while (this.floorImageList.length > 0) {
+                this.list.push(this.floorImageList.splice(0, this.pageSize))
+            }
+        },
+        swiperChange(e) {
+            //轮播切换
+            const index = e.detail.current
+            this.swiperCurrent = index
+        },
+        navigaitionTo(item) {
+            if (item.adsImage === '' && item.linkType === -1) {
+                return
+            } else if (item.linkType === -1) {
+                uni.navigateTo({
+                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+                })
+            } else {
+                caimeiApi.FlooryNavigateTo(item)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.minHeigth {
+    height: 250rpx !important;
+}
+.section_page_main {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    .recommend-list {
+        width: 100%;
+        position: relative;
+        padding-bottom: 20rpx;
+        .tui-banner-swiper {
+            height: 550rpx;
+            width: 100%;
+            margin: 0 auto;
+            overflow: hidden;
+            transform: translateY(0);
+            .img-box {
+                position: relative;
+                width: 339rpx;
+                height: 240rpx;
+                float: left;
+                margin: 24rpx 24rpx 0 0;
+                overflow: hidden;
+                border-radius: 16rpx;
+                image {
+                    width: 339rpx;
+                    height: 240rpx;
+                }
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+                &:nth-child(1),
+                &:nth-child(2) {
+                    margin-top: 0;
+                }
+                .cm-cover {
+                    position: absolute;
+                    width: 96rpx;
+                    height: 40rpx;
+                    top: 0;
+                    right: 0;
+                    border-radius: 0 16rpx 0 16rpx;
+                    color: #fff;
+                    font-size: 24rpx;
+                    text-align: center;
+                    line-height: 36rpx;
+                    &.color2 {
+                        background: rgba(0, 0, 0, 0.5);
+                    }
+                    &.color1 {
+                        background: rgb(255, 92, 0);
+                    }
+                    &.color0 {
+                        background: rgb(30, 206, 112);
+                    }
+                }
+            }
+        }
+    }
+    .swiper__recommenddots-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex: 1;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 60rpx;
+        .swiper__dots-item {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 100%;
+            margin-left: 6px;
+            background-color: rgba(225, 86, 22, 0.3);
+        }
+        .swiper__dots-long {
+            width: 32rpx;
+            height: 8rpx;
+            border-radius: 4rpx;
+            background-color: #FF5B00;
+            transition: all 0.4s;
+        }
+    }
+}
+</style>

pages/h5/activity/components/template-live/components/swiper-temp2.vue

@@ -1,197 +1,196 @@
-<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"
-                :class="{ minHeigth: hasLessImage }"
-            >
-                <swiper-item class="clearfix" v-for="(item, index1) in list" :key="index1">
-                    <view
-                        class="img-box"
-                        v-for="(product, index2) in item"
-                        :key="index2"
-                        @click="navigaitionTo(product)"
-                    >
-                        <view class="cm-cover" :class="'color' + checkDisplayDate">{{coverText[checkDisplayDate]}}</view>
-                        <image :src="product.appletsImage" mode="scaleToFill"></image>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper__recommenddots-box" v-if="list.length > 1">
-                <view
-                    v-for="(item, idx) in list"
-                    :key="idx"
-                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-                    :data-index="swiperCurrent"
-                    class="swiper__dots-item"
-                >
-                </view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-    name: 'SwiperTemp',
-    props: {
-        floorImageList: {
-            type: Array
-        },
-        displayDate: String
-    },
-    data() {
-        return {
-            list: [],
-            swiperCurrent: 0,
-            pageSize: 2,
-            imageCount: 0,
-            coverText: ['未开始', '已开始', '已结束']
-        }
-    },
-    created() {
-        this.initData()
-    },
-    computed: {
-        hasLessImage() {
-            return this.imageCount <= 1
-        },
-        checkDisplayDate() {
-            const nowDate = new Date().getTime()
-            const displayDate = new Date(this.displayDate.replace(/-/g, '/')).getTime()
-            const oneDay = 60 * 60 * 24 * 1000
-            // 未开始
-            if (nowDate < displayDate) {
-                return 0
-            }
-            // 已开始
-            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
-                return 1
-            }
-            // 已结束
-            if (nowDate > displayDate + oneDay) {
-                return 2
-            }
-        }
-    },
-    methods: {
-        initData() {
-            this.imageCount = this.floorImageList.length
-            while (this.floorImageList.length > 0) {
-                this.list.push(this.floorImageList.splice(0, this.pageSize))
-            }
-        },
-        swiperChange(e) {
-            //轮播切换
-            const index = e.detail.current
-            this.swiperCurrent = index
-        },
-        navigaitionTo(item) {
-            if (item.adsImage === '' && item.linkType === -1) {
-                return
-            } else if (item.linkType === -1) {
-                uni.navigateTo({
-                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
-                })
-            } else {
-                caimeiApi.FlooryNavigateTo(item)
-            } 
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.minHeigth {
-    height: 380rpx !important;
-}
-.section_page_main {
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    .recommend-list {
-        width: 100%;
-        position: relative;
-        padding-bottom: 20rpx;
-        .tui-banner-swiper {
-            height: 780rpx;
-            width: 100%;
-            margin: 0 auto;
-            background: #f7f7f7;
-            overflow: hidden;
-            transform: translateY(0);
-            .img-box {
-                position: relative;
-                width: 702rpx;
-                height: 360rpx;
-                margin-bottom: 24rpx;
-                overflow: hidden;
-                border-radius: 16rpx;
-                image {
-                    width: 702rpx;
-                    height: 360rpx;
-                }
-                &:last-child{
-                    margin-bottom: 0;
-                }
-                .cm-cover {
-                    position: absolute;
-                    width: 96rpx;
-                    height: 40rpx;
-                    top: 0;
-                    right: 0;
-                    border-radius: 0 16rpx 0 16rpx;
-                    color: #fff;
-                    font-size: 24rpx;
-                    text-align: center;
-                    line-height: 36rpx;
-                    &.color2 {
-                        background: rgba(0, 0, 0, 0.5);
-                    }
-                    &.color1 {
-                        background: rgb(255, 92, 0);
-                    }
-                    &.color0 {
-                        background: rgb(30, 206, 112);
-                    }
-                }
-            }
-        }
-    }
-    .swiper__recommenddots-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        /* #ifndef APP-NVUE */
-        display: flex;
-        /* #endif */
-        flex: 1;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        height: 60rpx;
-        .swiper__dots-item {
-            width: 8rpx;
-            height: 8rpx;
-            border-radius: 100%;
-            margin-left: 6px;
-            background-color: rgba(225, 86, 22, 0.3);
-        }
-        .swiper__dots-long {
-            width: 32rpx;
-            height: 8rpx;
-            border-radius: 4rpx;
-            background-color: #FF5B00;
-            transition: all 0.4s;
-        }
-    }
-}
-</style>
+<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"
+                :class="{ minHeigth: hasLessImage }"
+            >
+                <swiper-item class="clearfix" v-for="(item, index1) in list" :key="index1">
+                    <view
+                        class="img-box"
+                        v-for="(product, index2) in item"
+                        :key="index2"
+                        @click="navigaitionTo(product)"
+                    >
+                        <view class="cm-cover" :class="'color' + checkDisplayDate">{{coverText[checkDisplayDate]}}</view>
+                        <image :src="product.appletsImage" mode="scaleToFill"></image>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__recommenddots-box" v-if="list.length > 1">
+                <view
+                    v-for="(item, idx) in list"
+                    :key="idx"
+                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+                    :data-index="swiperCurrent"
+                    class="swiper__dots-item"
+                >
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+    name: 'SwiperTemp',
+    props: {
+        floorImageList: {
+            type: Array
+        },
+        displayDate: String
+    },
+    data() {
+        return {
+            list: [],
+            swiperCurrent: 0,
+            pageSize: 2,
+            imageCount: 0,
+            coverText: ['未开始', '已开始', '已结束']
+        }
+    },
+    created() {
+        this.initData()
+    },
+    computed: {
+        hasLessImage() {
+            return this.imageCount <= 1
+        },
+        checkDisplayDate() {
+            const nowDate = new Date().getTime()
+            const displayDate = new Date(this.displayDate.replace(/-/g, '/')).getTime()
+            const oneDay = 60 * 60 * 24 * 1000
+            // 未开始
+            if (nowDate < displayDate) {
+                return 0
+            }
+            // 已开始
+            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
+                return 1
+            }
+            // 已结束
+            if (nowDate > displayDate + oneDay) {
+                return 2
+            }
+        }
+    },
+    methods: {
+        initData() {
+            this.imageCount = this.floorImageList.length
+            while (this.floorImageList.length > 0) {
+                this.list.push(this.floorImageList.splice(0, this.pageSize))
+            }
+        },
+        swiperChange(e) {
+            //轮播切换
+            const index = e.detail.current
+            this.swiperCurrent = index
+        },
+        navigaitionTo(item) {
+            if (item.adsImage === '' && item.linkType === -1) {
+                return
+            } else if (item.linkType === -1) {
+                uni.navigateTo({
+                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+                })
+            } else {
+                caimeiApi.FlooryNavigateTo(item)
+            } 
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.minHeigth {
+    height: 380rpx !important;
+}
+.section_page_main {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    .recommend-list {
+        width: 100%;
+        position: relative;
+        padding-bottom: 20rpx;
+        .tui-banner-swiper {
+            height: 780rpx;
+            width: 100%;
+            margin: 0 auto;
+            overflow: hidden;
+            transform: translateY(0);
+            .img-box {
+                position: relative;
+                width: 702rpx;
+                height: 360rpx;
+                margin-bottom: 24rpx;
+                overflow: hidden;
+                border-radius: 16rpx;
+                image {
+                    width: 702rpx;
+                    height: 360rpx;
+                }
+                &:last-child{
+                    margin-bottom: 0;
+                }
+                .cm-cover {
+                    position: absolute;
+                    width: 96rpx;
+                    height: 40rpx;
+                    top: 0;
+                    right: 0;
+                    border-radius: 0 16rpx 0 16rpx;
+                    color: #fff;
+                    font-size: 24rpx;
+                    text-align: center;
+                    line-height: 36rpx;
+                    &.color2 {
+                        background: rgba(0, 0, 0, 0.5);
+                    }
+                    &.color1 {
+                        background: rgb(255, 92, 0);
+                    }
+                    &.color0 {
+                        background: rgb(30, 206, 112);
+                    }
+                }
+            }
+        }
+    }
+    .swiper__recommenddots-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex: 1;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 60rpx;
+        .swiper__dots-item {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 100%;
+            margin-left: 6px;
+            background-color: rgba(225, 86, 22, 0.3);
+        }
+        .swiper__dots-long {
+            width: 32rpx;
+            height: 8rpx;
+            border-radius: 4rpx;
+            background-color: #FF5B00;
+            transition: all 0.4s;
+        }
+    }
+}
+</style>

pages/h5/activity/components/template-picture/templateA.vue

@@ -1,172 +1,171 @@
-<template>
-	<view class="section_page_main clearfix">
-		<view class="recommend-list" :style="hasLessImage?'height:82px':''">
-			<swiper
-				class="tui-banner-swiper"
-				:autoplay="true"
-				:interval="5000"
-				: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)">
-						<image :src="product.appletsImage" ></image>
-					</view>
-				</swiper-item>
-			</swiper>
-			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
-				<view
-					v-for="(item, idx) in productList"
-					:key="idx"
-					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-					:data-index="swiperCurrent"
-					class="swiper__dots-item"
-				>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-	name: 'templateH',
-	components: {
-		uniGrader
-	},
-	props: {
-		pageData: {
-			type: Object
-		},
-		userIdentity: {
-			type: Number
-		}
-	},
-	data() {
-		return {
-			productList: [],
-			swiperCurrent: 0,
-			pageSize: 8,
-			imageCount:0
-		}
-	},
-	created() {
-		this.initData(this.pageData)
-	},
-	watch: {
-		pageData: {
-			handler: function(el) {
-				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
-				this.pageData = el
-				this.initData(this.pageData)
-			},
-			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))
-			}
-		},
-		swiperChange(e) {
-			//轮播切换
-			const index = e.detail.current
-			this.swiperCurrent = index
-		},
-		navigaitionTo(item){
-			if (item.adsImage === '' && item.linkType === -1) {
-				return
-			}else if(item.linkType === -1){
-				uni.navigateTo({
-					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
-				})
-			}else{
-				caimeiApi.FlooryNavigateTo(item)
-			}
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.section_page_main {
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	.recommend-list {
-		width: 100%;
-		height: 390rpx;
-		position: relative;
-		padding-bottom: 20rpx;
-		.tui-banner-swiper {
-			width: 100%;
-			margin: 0 auto;
-			background: #f7f7f7;
-			height: 350rpx;
-			overflow: hidden;
-			transform: translateY(0);
-			.img-box {
-				width: 164rpx;
-				height: 164rpx;
-				float: left;
-				margin: 15rpx 15rpx 0 0;
-				overflow: hidden;
-				border-radius: 8rpx;
-				image {
-					width: 164rpx;
-					height: 164rpx;
-				}
-				&:nth-child(4n) {
-					margin-right: 0;
-				}
-				&:nth-child(1),
-				&:nth-child(2),
-				&:nth-child(3),
-				&:nth-child(4) {
-					margin-top: 0;
-				}
-			}
-		}
-	}
-	.swiper__recommenddots-box {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 60rpx;
-		.swiper__dots-item {
-			width: 8rpx;
-			height: 8rpx;
-			border-radius: 100%;
-			margin-left: 6px;
-			background-color: rgba(225, 86, 22, 0.3);
-		}
-		.swiper__dots-long {
-			width: 32rpx;
-			height: 8rpx;
-			border-radius: 4rpx;
-			background-color: #FF5B00;
-			transition: all 0.4s;
-		}
-	}
-}
-</style>
+<template>
+	<view class="section_page_main clearfix">
+		<view class="recommend-list" :style="hasLessImage?'height:82px':''">
+			<swiper
+				class="tui-banner-swiper"
+				:autoplay="true"
+				:interval="5000"
+				: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)">
+						<image :src="product.appletsImage" ></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
+				<view
+					v-for="(item, idx) in productList"
+					:key="idx"
+					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+					:data-index="swiperCurrent"
+					class="swiper__dots-item"
+				>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			productList: [],
+			swiperCurrent: 0,
+			pageSize: 8,
+			imageCount:0
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			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))
+			}
+		},
+		swiperChange(e) {
+			//轮播切换
+			const index = e.detail.current
+			this.swiperCurrent = index
+		},
+		navigaitionTo(item){
+			if (item.adsImage === '' && item.linkType === -1) {
+				return
+			}else if(item.linkType === -1){
+				uni.navigateTo({
+					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+				})
+			}else{
+				caimeiApi.FlooryNavigateTo(item)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.section_page_main {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.recommend-list {
+		width: 100%;
+		height: 390rpx;
+		position: relative;
+		padding-bottom: 20rpx;
+		.tui-banner-swiper {
+			width: 100%;
+			margin: 0 auto;
+			height: 350rpx;
+			overflow: hidden;
+			transform: translateY(0);
+			.img-box {
+				width: 164rpx;
+				height: 164rpx;
+				float: left;
+				margin: 15rpx 15rpx 0 0;
+				overflow: hidden;
+				border-radius: 8rpx;
+				image {
+					width: 164rpx;
+					height: 164rpx;
+				}
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+				&:nth-child(1),
+				&:nth-child(2),
+				&:nth-child(3),
+				&:nth-child(4) {
+					margin-top: 0;
+				}
+			}
+		}
+	}
+	.swiper__recommenddots-box {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 60rpx;
+		.swiper__dots-item {
+			width: 8rpx;
+			height: 8rpx;
+			border-radius: 100%;
+			margin-left: 6px;
+			background-color: rgba(225, 86, 22, 0.3);
+		}
+		.swiper__dots-long {
+			width: 32rpx;
+			height: 8rpx;
+			border-radius: 4rpx;
+			background-color: #FF5B00;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

pages/h5/activity/components/template-picture/templateB.vue

@@ -1,186 +1,185 @@
-<template>
-	<view class="section_page_main clearfix">
-		<view class="recommend-list" :style="hasLessImage?'height:78px':''" >
-			<swiper
-				class="tui-banner-swiper"
-				:autoplay="true"
-				:interval="5000"
-				: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)">
-						<image :src="product.appletsImage" ></image>
-                        <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
-					</view>
-				</swiper-item>
-			</swiper>
-			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
-				<view
-					v-for="(item, idx) in productList"
-					:key="idx"
-					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-					:data-index="swiperCurrent"
-					class="swiper__dots-item"
-				>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-	name: 'templateH',
-	components: {
-		uniGrader
-	},
-	props: {
-		pageData: {
-			type: Object
-		},
-		userIdentity: {
-			type: Number
-		}
-	},
-	data() {
-		return {
-			productList: [],
-			swiperCurrent: 0,
-			pageSize: 6,
-			imageCount:0
-		}
-	},
-	created() {
-		this.initData(this.pageData)
-	},
-	computed:{
-		hasLessImage(){
-			return this.imageCount <= 3
-		}
-	},
-	watch: {
-		pageData: {
-			handler: function(el) {
-				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
-				this.pageData = el
-				this.initData(this.pageData)
-			},
-			deep: true
-		}
-	},
-	methods: {
-		initData(data) {
-			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))
-			}
-		},
-		swiperChange(e) {
-			//轮播切换
-			const index = e.detail.current
-			this.swiperCurrent = index
-		},
-		navigaitionTo(item){
-			if (item.adsImage === '' && item.linkType === -1) {
-				return
-			}else if(item.linkType === -1){
-				uni.navigateTo({
-					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
-				})
-			}else{
-				caimeiApi.FlooryNavigateTo(item)
-			}
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.section_page_main {
-	width: 100%;
-	height: auto;
-	box-sizing: border-box;
-	.recommend-list {
-		width: 100%;
-		height: 380rpx;
-		position: relative;
-		padding-bottom: 20rpx;
-		.tui-banner-swiper {
-			width: 100%;
-			margin: 0 auto;
-			background: #f7f7f7;
-			height: 330rpx;
-			overflow: hidden;
-			transform: translateY(0);
-			.img-box {
-                position: relative;
-				width: 224rpx;
-				height: 156rpx;
-				float: left;
-				margin: 15rpx 15rpx 0 0;
-				overflow: hidden;
-				border-radius: 8rpx;
-				image {
-					width: 224rpx;
-					height: 156rpx;
-				}
-				&:nth-child(3n) {
-					margin-right: 0;
-				}
-				&:nth-child(1),
-				&:nth-child(2),
-				&:nth-child(3) {
-					margin-top: 0;
-				}
-                .cm-cover{
-                    z-index: 99;
-                    top: 0;
-                    left: 0;
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    background:url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
-                    background-size: 40rpx 40rpx;
-                }
-			}
-		}
-	}
-	.swiper__recommenddots-box {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		height: 60rpx;
-		.swiper__dots-item {
-			width: 8rpx;
-			height: 8rpx;
-			border-radius: 100%;
-			margin-left: 6px;
-			background-color: rgba(225, 86, 22, 0.3);
-		}
-		.swiper__dots-long {
-			width: 32rpx;
-			height: 8rpx;
-			border-radius: 4rpx;
-			background-color: #FF5B00;
-			transition: all 0.4s;
-		}
-	}
-}
-</style>
+<template>
+	<view class="section_page_main clearfix">
+		<view class="recommend-list" :style="hasLessImage?'height:78px':''" >
+			<swiper
+				class="tui-banner-swiper"
+				:autoplay="true"
+				:interval="5000"
+				: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)">
+						<image :src="product.appletsImage" ></image>
+                        <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper__recommenddots-box" v-if="productList.length > 1">
+				<view
+					v-for="(item, idx) in productList"
+					:key="idx"
+					:class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+					:data-index="swiperCurrent"
+					class="swiper__dots-item"
+				>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			productList: [],
+			swiperCurrent: 0,
+			pageSize: 6,
+			imageCount:0
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	computed:{
+		hasLessImage(){
+			return this.imageCount <= 3
+		}
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		initData(data) {
+			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))
+			}
+		},
+		swiperChange(e) {
+			//轮播切换
+			const index = e.detail.current
+			this.swiperCurrent = index
+		},
+		navigaitionTo(item){
+			if (item.adsImage === '' && item.linkType === -1) {
+				return
+			}else if(item.linkType === -1){
+				uni.navigateTo({
+					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+				})
+			}else{
+				caimeiApi.FlooryNavigateTo(item)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.section_page_main {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.recommend-list {
+		width: 100%;
+		height: 380rpx;
+		position: relative;
+		padding-bottom: 20rpx;
+		.tui-banner-swiper {
+			width: 100%;
+			margin: 0 auto;
+			height: 330rpx;
+			overflow: hidden;
+			transform: translateY(0);
+			.img-box {
+                position: relative;
+				width: 224rpx;
+				height: 156rpx;
+				float: left;
+				margin: 15rpx 15rpx 0 0;
+				overflow: hidden;
+				border-radius: 8rpx;
+				image {
+					width: 224rpx;
+					height: 156rpx;
+				}
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+				&:nth-child(1),
+				&:nth-child(2),
+				&:nth-child(3) {
+					margin-top: 0;
+				}
+                .cm-cover{
+                    z-index: 99;
+                    top: 0;
+                    left: 0;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background:url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+                    background-size: 40rpx 40rpx;
+                }
+			}
+		}
+	}
+	.swiper__recommenddots-box {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 60rpx;
+		.swiper__dots-item {
+			width: 8rpx;
+			height: 8rpx;
+			border-radius: 100%;
+			margin-left: 6px;
+			background-color: rgba(225, 86, 22, 0.3);
+		}
+		.swiper__dots-long {
+			width: 32rpx;
+			height: 8rpx;
+			border-radius: 4rpx;
+			background-color: #FF5B00;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

pages/h5/activity/components/template-picture/templateE.vue

@@ -1,187 +1,195 @@
-<template>
-    <view class="section_page_main clearfix">
-        <view class="recommend-list" :style="hasLessImage ? 'height:105px' : ''">
-            <swiper
-                class="tui-banner-swiper"
-                :autoplay="true"
-                :interval="5000"
-                :duration="500"
-                :circular="true"
-                @change="swiperChange"
-                :style="hasLessImage ? 'height:105px' : ''"
-                :display-multiple-items="2"
-            >
-                <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)"
-                    >
-                        <image :src="product.appletsImage"></image>
-                        <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper__recommenddots-box" v-if="productList.length > 1">
-                <view
-                    v-for="(item, idx) in productList"
-                    :key="idx"
-                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
-                    :data-index="swiperCurrent"
-                    class="swiper__dots-item"
-                ></view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-    name: 'templateE',
-    components: {
-        uniGrader
-    },
-    props: {
-        pageData: {
-            type: Object
-        },
-        userIdentity: {
-            type: Number
-        }
-    },
-    data() {
-        return {
-            productList: [],
-            swiperCurrent: 0,
-            pageSize: 2
-        }
-    },
-    created() {
-        this.initData(this.pageData)
-    },
-    computed: {
-        hasLessImage() {
-            return this.imageCount <= 2
-        }
-    },
-    watch: {
-        pageData: {
-            handler: function(el) {
-                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
-                this.pageData = el
-                this.initData(this.pageData)
-            },
-            deep: true
-        }
-    },
-    methods: {
-        initData(data) {
-            console.log(data)
-            this.imageCount = data.floorImageList.length
-            while (data.floorImageList.length > 0) {
-                this.productList.push(data.floorImageList.splice(0, this.pageSize))
-            }
-            console.log(this.productList)
-        },
-        swiperChange(e) {
-            //轮播切换
-            const index = e.detail.current
-            this.swiperCurrent = index
-        },
-        navigaitionTo(item) {
-            if (item.adsImage === '' && item.linkType === -1) {
-                return
-            } else if (item.linkType === -1) {
-                uni.navigateTo({
-                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
-                })
-            } else {
-                caimeiApi.FlooryNavigateTo(item)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.section_page_main {
-    width: 100%;
-    height: auto;
-    box-sizing: border-box;
-    .recommend-list {
-        width: 100%;
-        height: 500rpx;
-        position: relative;
-        padding-bottom: 20rpx;
-        .tui-banner-swiper {
-            width: 100%;
-            margin: 0 auto;
-            background: #f7f7f7;
-            height: 445rpx;
-            overflow: hidden;
-            transform: translateY(0);
-            .img-box {
-                position: relative;
-                width: 339rpx;
-                height: 210rpx;
-                float: left;
-                margin: 24rpx 24rpx 0 0;
-                overflow: hidden;
-                border-radius: 16rpx;
-                image {
-                    width: 339rpx;
-                    height: 210rpx;
-                }
-                &:nth-child(2n) {
-                    margin-right: 0;
-                }
-                &:nth-child(1) {
-                    margin-top: 0;
-                }
-                .cm-cover {
-                    z-index: 99;
-                    top: 0;
-                    left: 0;
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
-                    background-size: 40rpx 40rpx;
-                }
-            }
-        }
-    }
-    .swiper__recommenddots-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        /* #ifndef APP-NVUE */
-        display: flex;
-        /* #endif */
-        flex: 1;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        height: 60rpx;
-        .swiper__dots-item {
-            width: 8rpx;
-            height: 8rpx;
-            border-radius: 100%;
-            margin-left: 6px;
-            background-color: rgba(225, 86, 22, 0.3);
-        }
-        .swiper__dots-long {
-            width: 32rpx;
-            height: 8rpx;
-            border-radius: 4rpx;
-            background-color: #FF5B00;
-            transition: all 0.4s;
-        }
-    }
-}
+<template>
+    <view class="section_page_main clearfix">
+        <view class="recommend-list" :style="{height: hasLessImage ? '105px' : ''}" v-if="productList.length > 0">
+            <swiper
+                class="tui-banner-swiper"
+                :autoplay="true"
+                :interval="5000"
+                :duration="500"
+                :circular="true"
+                @change="swiperChange"
+                :style="{height: hasLessImage ? '105px' : ''}"
+            >
+                <swiper-item v-for="(list, index1) in productList" :key="index1">
+                    <view class="template-grid">
+                        <view
+                            class="img-box"
+                            v-for="(product, index2) in list"
+                            :key="index2"
+                            @click="navigaitionTo(product)"
+                        >
+                            <image :src="product.appletsImage" mode="aspectFit"></image>
+                            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__recommenddots-box" v-if="productList.length > 1">
+                <view
+                    v-for="(item, idx) in productList"
+                    :key="idx"
+                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
+                    :data-index="swiperCurrent"
+                    class="swiper__dots-item"
+                ></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+    name: 'templateE',
+    components: {
+        uniGrader
+    },
+    props: {
+        pageData: {
+            type: Object
+        },
+        userIdentity: {
+            type: Number
+        }
+    },
+    data() {
+        return {
+            productList: [],
+            swiperCurrent: 0,
+            pageSize: 4,
+            imageCount: 2
+        }
+    },
+    created() {
+        this.initData(this.pageData)
+    },
+    computed: {
+        hasLessImage() {
+            return this.imageCount <= 2
+        }
+    },
+    watch: {
+        pageData: {
+            handler: function(el) {
+                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                this.pageData = el
+                this.initData(this.pageData)
+            },
+            deep: true
+        }
+    },
+    methods: {
+        initData(data) {
+            this.imageCount = data.floorImageList.length
+            while (data.floorImageList.length > 0) {
+                this.productList.push(data.floorImageList.splice(0, this.pageSize))
+            }
+            console.log(this.productList)
+        },
+        swiperChange(e) {
+            //轮播切换
+            const index = e.detail.current
+            this.swiperCurrent = index
+        },
+        navigaitionTo(item) {
+            if (item.adsImage === '' && item.linkType === -1) {
+                return
+            } else if (item.linkType === -1) {
+                uni.navigateTo({
+                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+                })
+            } else {
+                caimeiApi.FlooryNavigateTo(item)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.section_page_main {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    .recommend-list {
+        width: 100%;
+        height: 500rpx;
+        position: relative;
+        padding-bottom: 20rpx;
+        .tui-banner-swiper {
+            width: 100%;
+            margin: 0 auto;
+            height: 445rpx;
+            overflow: hidden;
+            transform: translateY(0);
+            .template-grid {
+                width: 100%;
+                height: 100%;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                grid-template-rows: repeat(2, 1fr);
+                grid-gap: 12rpx;
+            }
+            .img-box {
+                position: relative;
+                width: 339rpx;
+                height: 210rpx;
+                float: left;
+                overflow: hidden;
+                border-radius: 16rpx;
+                background: #fff;
+                image {
+                    width: 339rpx;
+                    height: 210rpx;
+                }
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+                &:nth-child(1) {
+                    margin-top: 0;
+                }
+                .cm-cover {
+                    z-index: 99;
+                    top: 0;
+                    left: 0;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+                    background-size: 40rpx 40rpx;
+                }
+            }
+        }
+    }
+    .swiper__recommenddots-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex: 1;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 60rpx;
+        .swiper__dots-item {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 100%;
+            margin-left: 6px;
+            background-color: rgba(225, 86, 22, 0.3);
+        }
+        .swiper__dots-long {
+            width: 32rpx;
+            height: 8rpx;
+            border-radius: 4rpx;
+            background-color: #FF5B00;
+            transition: all 0.4s;
+        }
+    }
+}
 </style>

pages/h5/activity/components/template-video/templateA.vue

@@ -1,101 +1,101 @@
-<template>
-    <view class="picture">
-        <view class="section" v-for="(item, index) in productList" :key="index" @click="navigaitionTo(item)">
-            <image :src="item.appletsImage || item.image"></image>
-            <view class="cm-cover"></view>
-        </view>
-    </view>
-</template>
-
-<script>
-import caimeiApi from '@/common/config/caimeiApi.js'
-export default {
-    data() {
-        return {
-            productList: []
-        }
-    },
-    props: {
-        pageData: {
-            type: Object
-        },
-        userIdentity: {
-            type: Number
-        },
-        flag: {
-            type: Boolean,
-            default: false
-        }
-    },
-    created() {
-        this.initData(this.pageData)
-    },
-    watch: {
-        pageData: {
-            handler: function(el) {
-                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
-                this.pageData = el
-                this.initData(this.pageData)
-            },
-            deep: true
-        }
-    },
-    methods: {
-        initData(data) {
-            if (this.flag) {
-                this.productList = data.floorImageList
-            } else {
-                this.productList = data.floorImageList.slice(0, 6)
-            }
-        },
-        navigaitionTo(item) {
-            if (item.link === '' && item.linkType === -1) {
-            	return
-            }else if(item.linkType === -1){
-            	const url = `/pages/h5/activity/activity-detail?type=video&videoUrl=${item.link}&title=${item.name}`
-            	return uni.navigateTo({ url })
-            }else{
-            	caimeiApi.FlooryNavigateTo(item)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.picture {
-    width: 100%;
-    .section {
-        float: left;
-        position: relative;
-        margin-bottom: 14rpx;
-        margin-right: 14rpx;
-        width: 224rpx;
-        height: 157rpx;
-        overflow: hidden;
-        border-radius: 16rpx;
-        image {
-            width: 224rpx;
-            height: 257rpx;
-        }
-        &:nth-child(1),
-        &:nth-child(2),
-        &:nth-child(3) {
-            margin-top: 0;
-        }
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-        .cm-cover {
-            z-index: 99;
-            top: 0;
-            left: 0;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
-            background-size: 40rpx 40rpx;
-        }
-    }
-}
-</style>
+<template>
+    <view class="picture">
+        <view class="section" v-for="(item, index) in productList" :key="index" @click="navigaitionTo(item)">
+            <image :src="item.appletsImage || item.image"></image>
+            <view class="cm-cover"></view>
+        </view>
+    </view>
+</template>
+
+<script>
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+    data() {
+        return {
+            productList: []
+        }
+    },
+    props: {
+        pageData: {
+            type: Object
+        },
+        userIdentity: {
+            type: Number
+        },
+        flag: {
+            type: Boolean,
+            default: false
+        }
+    },
+    created() {
+        this.initData(this.pageData)
+    },
+    watch: {
+        pageData: {
+            handler: function(el) {
+                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                this.pageData = el
+                this.initData(this.pageData)
+            },
+            deep: true
+        }
+    },
+    methods: {
+        initData(data) {
+            if (this.flag) {
+                this.productList = data.floorImageList
+            } else {
+                this.productList = data.floorImageList.slice(0, 6)
+            }
+        },
+        navigaitionTo(item) {
+            if (item.link === '' && item.linkType === -1) {
+            	return
+            }else if(item.linkType === -1){
+            	const url = `/pages/h5/activity/activity-detail?type=video&videoUrl=${item.link}&title=${item.name}`
+            	return uni.navigateTo({ url })
+            }else{
+            	caimeiApi.FlooryNavigateTo(item)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.picture {
+    width: 100%;
+    .section {
+        float: left;
+        position: relative;
+        margin-bottom: 14rpx;
+        margin-right: 14rpx;
+        width: 224rpx;
+        height: 157rpx;
+        overflow: hidden;
+        border-radius: 16rpx;
+        image {
+            width: 224rpx;
+            height: 100%;
+        }
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3) {
+            margin-top: 0;
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        .cm-cover {
+            z-index: 99;
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+            background-size: 40rpx 40rpx;
+        }
+    }
+}
+</style>

pages/h5/activity/quick-operation.vue

@@ -1,177 +1,180 @@
-<template>
-	<view class="container floor clearfix">
-		<!-- top -->
-		<view class="container-top" @click="BannerNavigateTo(pageInfo.linkType,pageInfo.linkParam.id,pageInfo.headLink,pageInfo.keyword)" v-if="isRequest && headImage!==''"><image :src="headImage" ></image></view>
-		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
-		<!-- 楼层 -->
-		<view class="container-section tui-skeleton">
-			<page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></page-floor>
-		</view>
-		<!-- 侧边 -->
-		<scroll-top :isScrollTop="isScrollTop" :bottom="50" ></scroll-top>
-	</view>
-</template>
-
-<script>
-	import { mapState,mapMutations} from 'vuex' 
-	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
-	import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
-    import pageFloor from './components/active-floor.vue'
-	import authorize from '@/common/config/authorize.js'
-	import wxLogin from '@/common/config/wxLogin.js'
-	
-	export default{ 
-		components:{
-			customFloor,
-			templateNav,
-			pageFloor,
-		},
-		data(){
-			return{
-				userId:0,
-				shopId:0,
-				userIdentity:0,
-				skeletonShow:true,
-				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
-				systeminfo: this.setSysteminfo(),		 //获取设备信息
-				CustomBar:this.CustomBar,// 顶部导航栏高度
-				navBarsList:[],
-				pageList:[],//楼层
-				isRequest:false,
-				isScrollTop:false,
-				pageId:'',
-				typeSort:'',
-				headImage:'',
-				pageInfo:{},
-                activityEntryVisiable:false
-			}
-		},
-		onLoad(option) {
-			if(option.type =='share'){
-				authorize.checkLogin()
-				.then(res => {
-					wxLogin.wxLoginAuthorize()
-				})
-				.catch(err => {
-					console.log(new Date +'用户未授权微信信息')
-				})
-			}
-			this.pageId = option.linkId
-			this.$api.getComStorage('userInfo').then((resolve) =>{
-				this.userId = resolve.userId ? resolve.userId : 0
-				this.shopId = resolve.shopId ? resolve.shopId : 0
-				this.userIdentity = resolve.userIdentity
-				this.GetActivityFloorData()
-			}).catch(error =>{
-				this.GetActivityFloorData()
-			})
-		},
-		computed: {
-			...mapState(['hasLogin','userInfo','identity'])
-		},
-		methods:{            
-			GetActivityFloorData(){//获取楼层数据
-				this.CommonService.GetActivityFloorData({pageId:this.pageId,userId:this.userId,source:2}).then(response =>{
-					let data = response.data
-					this.typeSort = data.page.typeSort
-					this.pageList = data.floorList
-					this.headImage = data.page.crmHeadImage
-					this.pageInfo = data.page
-					this.isRequest =true
-					uni.setStorageSync('pageLabel',`${data.page.contentLabel}`)
-					uni.setNavigationBarTitle({title:data.page.title})
-                    this.skeletonShow = false
-					// this.GetHomeInit()
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
-				})
-			},
-			GetHomeInit(){//金刚区分类
-				this.CommonService.GetFirstClassly({typeSort:this.typeSort,source:'crm'}).then(response =>{
-					this.navBarsList = response.data
-					this.isRequest =true
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
-				})
-			},
-			setHeaderBtnPosi(){
-				// 获得胶囊按钮位置信息
-				let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
-				return headerBtnPosi
-			},
-			setSysteminfo(){
-				let systeminfo
-				uni.getSystemInfo({ // 获取设备信息
-					success: (res) => {
-						systeminfo = res
-					},
-				})
-				return systeminfo
-			},
-			BannerNavigateTo(linkType,linkId,linkHref,keyword) {//跳转商品详情页
-				console.log(linkType,linkId,linkHref,keyword)
-				this.$api.BannerNavigateTo(linkType,linkId,linkHref,keyword)
-			}
-		},
-		onPageScroll(e){//实时获取到滚动的值
-			if(e.scrollTop>400){
-				this.isScrollTop = true
-			}else{
-				this.isScrollTop = false
-			}	
-		},
-		onPullDownRefresh() {
-			setTimeout(() => {
-				uni.stopPullDownRefresh()
-			}, 200)
-		},
-		onShareAppMessage(res){//分享转发
-			if (res.from === 'button') {
-		      // 来自页面内转发按钮
-		    }
-			return {
-			  title: '采美-一站式生/医美采购服务平台',
-			  path: `pages/h5/activity/quick-operation?type=share&linkId=${this.pageId}`
-			}
-		},
-		
-	}
-</script>
-
-<style lang="scss" scoped>
-	page{
-		background-color: #FFFFFF;
-	}
-	.container-home{
-		width: 100%;
-		height: auto;
-	}
-	.container-section{
-		width: 100%;
-		height: auto;
-		background-color: #F7F7F7;
-	}
-	.container-top{
-		width: 100%;
-		height: 340rpx;
-		float: left;
-		image{
-			width: 100%;
-			height: 100%;
-			display: block;
-		}
-	}
-	.container-activ{
-		width: 100%;
-		height: 240rpx;
-		box-sizing: border-box;
-		padding: 0 24rpx;
-		margin: 24rpx 0;
-		float: left;
-		image{
-			width: 100%;
-			height: 240rpx;
-			display: block;
-		}
-	}
-</style>
+<template>
+	<view class="floor clearfix" :style="{backgroundColor:pageInfo.backgroundColour ? pageInfo.backgroundColour : '#f7f7f7',backgroundImage:'url('+pageInfo.backgroundImage+')'}">
+		<!-- top -->
+		<view class="container-top" @click="BannerNavigateTo(pageInfo.linkType,pageInfo.linkParam.id,pageInfo.headLink,pageInfo.keyword)" v-if="isRequest && headImage!==''"><image :src="headImage" ></image></view>
+		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
+		<!-- 楼层 -->
+		<view class="container-section tui-skeleton">
+			<page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></page-floor>
+		</view>
+		<!-- 侧边 -->
+		<scroll-top :isScrollTop="isScrollTop" :bottom="50" ></scroll-top>
+	</view>
+</template>
+
+<script>
+	import { mapState,mapMutations} from 'vuex' 
+	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
+	import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
+    import pageFloor from './components/active-floor.vue'
+	import authorize from '@/common/config/authorize.js'
+	import wxLogin from '@/common/config/wxLogin.js'
+	
+	export default{ 
+		components:{
+			customFloor,
+			templateNav,
+			pageFloor,
+		},
+		data(){
+			return{
+				userId:0,
+				shopId:0,
+				userIdentity:0,
+				skeletonShow:true,
+				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
+				systeminfo: this.setSysteminfo(),		 //获取设备信息
+				CustomBar:this.CustomBar,// 顶部导航栏高度
+				navBarsList:[],
+				pageList:[],//楼层
+				isRequest:false,
+				isScrollTop:false,
+				pageId:'',
+				typeSort:'',
+				headImage:'',
+				pageInfo:{},
+                activityEntryVisiable:false
+			}
+		},
+		onLoad(option) {
+			if(option.type =='share'){
+				authorize.checkLogin()
+				.then(res => {
+					wxLogin.wxLoginAuthorize()
+				})
+				.catch(err => {
+					console.log(new Date +'用户未授权微信信息')
+				})
+			}
+			this.pageId = option.linkId
+			this.$api.getComStorage('userInfo').then((resolve) =>{
+				this.userId = resolve.userId ? resolve.userId : 0
+				this.shopId = resolve.shopId ? resolve.shopId : 0
+				this.userIdentity = resolve.userIdentity
+				this.GetActivityFloorData()
+			}).catch(error =>{
+				this.GetActivityFloorData()
+			})
+		},
+		computed: {
+			...mapState(['hasLogin','userInfo','identity'])
+		},
+		methods:{            
+			GetActivityFloorData(){//获取楼层数据
+				this.CommonService.GetActivityFloorData({pageId:this.pageId,userId:this.userId,source:2}).then(response =>{
+					let data = response.data
+					this.typeSort = data.page.typeSort
+					this.pageList = data.floorList
+					this.headImage = data.page.crmHeadImage
+					this.pageInfo = data.page
+					this.isRequest =true
+					uni.setStorageSync('pageLabel',`${data.page.contentLabel}`)
+					uni.setNavigationBarTitle({title:data.page.title})
+                    this.skeletonShow = false
+					// this.GetHomeInit()
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},
+			GetHomeInit(){//金刚区分类
+				this.CommonService.GetFirstClassly({typeSort:this.typeSort,source:'crm'}).then(response =>{
+					this.navBarsList = response.data
+					this.isRequest =true
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},
+			setHeaderBtnPosi(){
+				// 获得胶囊按钮位置信息
+				let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
+				return headerBtnPosi
+			},
+			setSysteminfo(){
+				let systeminfo
+				uni.getSystemInfo({ // 获取设备信息
+					success: (res) => {
+						systeminfo = res
+					},
+				})
+				return systeminfo
+			},
+			BannerNavigateTo(linkType,linkId,linkHref,keyword) {//跳转商品详情页
+				console.log(linkType,linkId,linkHref,keyword)
+				this.$api.BannerNavigateTo(linkType,linkId,linkHref,keyword)
+			}
+		},
+		onPageScroll(e){//实时获取到滚动的值
+			if(e.scrollTop>400){
+				this.isScrollTop = true
+			}else{
+				this.isScrollTop = false
+			}	
+		},
+		onPullDownRefresh() {
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 200)
+		},
+		onShareAppMessage(res){//分享转发
+			if (res.from === 'button') {
+		      // 来自页面内转发按钮
+		    }
+			return {
+			  title: '采美-一站式生/医美采购服务平台',
+			  path: `pages/h5/activity/quick-operation?type=share&linkId=${this.pageId}`
+			}
+		},
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+    .floor {
+        min-height: 100vh;
+    }
+	page{
+		background-color: #FFFFFF;
+	}
+	.container-home{
+		width: 100%;
+		height: auto;
+	}
+	.container-section{
+		width: 100%;
+		height: auto;
+		background-color: #F7F7F7;
+	}
+	.container-top{
+		width: 100%;
+		height: 340rpx;
+		float: left;
+		image{
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+	}
+	.container-activ{
+		width: 100%;
+		height: 240rpx;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		margin: 24rpx 0;
+		float: left;
+		image{
+			width: 100%;
+			height: 240rpx;
+			display: block;
+		}
+	}
+</style>

pages/login/components/activeTeamCom.vue

@@ -16,9 +16,7 @@
                 <view class="title">
                     {{ module.title }}
                 </view>
-                <view class="cont text-line" v-if="module.content">
-                    {{ module.content && module.content.match(/[\u4e00-\u9fa5]/g).join('') }}
-                </view>
+                <view class="cont text-line" v-if="module.content" v-html="module.content.replace(/<[^>]+>/g, '').replace(/[ ]|[&nbsp;]/g, '')"></view>
             </view>
         </view>
     </view>

pages/login/components/growthCommunity.vue

@@ -19,7 +19,7 @@
                             :key="item.id"
                             @click="$emit('playVideo', item)"
                             :id="`item${index}`"
-                            v-if="item.appStatus == '1'"
+                            v-if="item.appStatus == '1' && index < 4"
                         >
                             <view class="player">
                                 <image src="https://static.caimei365.com/app/img/supplier-login/player.png" class="player-img"  mode=""></image>
@@ -32,7 +32,7 @@
                     </scroll-view>
                 </view>
             </view>
-            <view class="item-dots"><page-dots :pageAll="videoList.length" :isActive="isVideo" @hanlder-click="hanlderVideoClick" /></view>
+            <view class="item-dots"><page-dots :pageAll="pageAll(videoList.length)" :isActive="isVideo" @hanlder-click="hanlderVideoClick" /></view>
             <view class="enterprise">
                 <view class="title">采美资讯</view>
                 <view class="more" @click="handlerMore(3)">更多 ></view>
@@ -50,18 +50,18 @@
                             :key="item.id"
                             @click="handlerTramp(item)"
                             :id="`item${index}`"
-                            v-if="item.appStatus == '1'"
+                            v-if="item.appStatus == '1' && index < 4"
                         >
                             <view class="img-item"><image :src="item.headAppBanner" mode="" class="img"></image></view>
                             <view class="articleContent">
                                 <view class="text">{{ item.title }}</view>
-                                <view class="article-con">{{ item.content.match(/[\u4e00-\u9fa5]/g).join('') }}</view>
+                                <view class="article-con" v-html="item.content.replace(/<[^>]+>/g, '').replace(/[ ]|[&nbsp;]/g, '')"></view>
                             </view>
                         </view>
                     </scroll-view>
                 </view>
             </view>
-            <view class="item-dots"><page-dots :pageAll="articelList.length" :isActive="isArtical" @hanlder-click="hanlderClick" /></view>
+            <view class="item-dots"><page-dots :pageAll="pageAll(articelList.length)" :isActive="isArtical" @hanlder-click="hanlderClick" /></view>
         </view>
     </view>
 </template>
@@ -105,6 +105,9 @@ export default {
         }
     },
     methods: {
+        pageAll (len) {
+            return len > 4 ? 4 : len
+        },
         handlerTramp($event) {
             const list = this.community_article_list.filter(e => e.id === $event.id)
             let data = list[0].content.replace(/<img/g, '<img style="width: 100%;height: 200px"')