Merge remote-tracking branch 'remotes/origin/developer' into developerA

# Conflicts:
#	pages.json

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>

components/cm-share-popup/cm-seller-modal.vue

@@ -2,7 +2,11 @@
     <view class="seller-card" v-if="userId > 0">
         <view class="seller-card-mine" v-if="!modal" @click="changeModal">
             <image
-                :src="userInfo.image.length > 12 ? userInfo.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png'"
+                :src="
+                    userInfo.image && userInfo.image.length > 12
+                        ? userInfo.image
+                        : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
+                "
                 style="width: 100%;height: 100%;object-fit: contain;border-radius: 50%;"
                 mode=""
             ></image>
@@ -29,7 +33,9 @@
                             <view class="card-head">
                                 <image
                                     :src="
-                                        userInfo.image.length > 12 ? userInfo.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
+                                        userInfo.image && userInfo.image.length > 12
+                                            ? userInfo.image
+                                            : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
                                     "
                                     mode=""
                                     class="head"
@@ -40,7 +46,12 @@
                                     <view class="card-name">{{ userInfo.linkMan }}</view>
                                     <view class="card-info-tab">客户经理</view>
                                 </view>
-                                <view class="card-info-iphone">{{ userInfo.contractMobile && userInfo.contractMobile.replace(/(?=(\d{4})+$)/g,"-") }}</view>
+                                <view class="card-info-iphone">
+                                    {{
+                                        userInfo.contractMobile &&
+                                            userInfo.contractMobile.replace(/(?=(\d{4})+$)/g, '-')
+                                    }}
+                                </view>
                             </view>
                         </view>
                         <view class="card-qrcode">
@@ -53,9 +64,7 @@
                                 ></image>
                             </view>
                             <view class="tips">
-                                <view>
-                                    长按或扫二维码
-                                </view>
+                                <view>长按或扫二维码</view>
                                 <view style="white-space: nowrap;">——联系我——</view>
                             </view>
                         </view>
@@ -133,13 +142,13 @@ export default {
         color: #fff;
         font-size: 18rpx;
         font-weight: bold;
-        background-color: #FF5B00;
+        background-color: #ff5b00;
         bottom: 0;
         left: 0;
         border-radius: 20rpx;
         text-align: center;
         line-height: 30rpx;
-        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255,92,0,0.16);
+        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255, 92, 0, 0.16);
         transform: translate(-12%, 70%);
     }
 }

components/cm-share-popup/cm-share-popup.vue

@@ -66,7 +66,7 @@ export default {
     methods: {
         async getUserInfo() {
             const { data } = await this.SellerService.GetSellerHome({ userId: this.userInfo.userId })
-            this.posterData.image = this.posterData.image.length > 12 ? this.posterData.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png' // 用户头像
+            this.posterData.image = data.image.length > 22 ? data.image : 'https://static.caimei365.com/app/img/icon/default-head-new.png' // 用户头像
             this.posterData.qrCode = data.qrCode // 用户二维码
             this.posterData.linkMan = data.linkMan // 用户名
             this.posterData.contractMobile = data.contractMobile // 用户手机号

main.js

@@ -1,68 +1,68 @@
-import Vue from 'vue'
-import store from './store'
-import App from './App'
-import './services/index.js'
-import * as Api from '@/common/config/caimeiApi.js'
-import * as Regs from '@/common/config/common.js'
-import { dateFormat } from './utils/util.js'
-import ResidenceTime from './plugins/simple-residence-time'
-import residence from './utils/residence.js'
-
-// 友盟
-import Uma from './plugins/uma'
-
-// 公共组件 全局组件
-import { msg, modal, prePage, boundingClientRect } from './utils/util'
-import cuCustom from './components/cm-custom/cu-custom.vue'
-import auCustom from './components/cm-custom/au-custom.vue'
-import cmCustom from './components/cm-custom/cm-custom.vue'
-import scrollTop from '@/components/cm-module/scrollTop/scrollTop.vue'
-import CityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' //全局注册地址组件
-
-
-Vue.component('cu-custom', cuCustom)
-Vue.component('au-custom', auCustom)
-Vue.component('cm-custom', cmCustom)
-Vue.component('scroll-top', scrollTop)
-Vue.component('city-Picker', CityPicker)
-
-Vue.prototype.$getStorage = function(key) {
-    var userParam = uni.getStorageSync(key)
-    if (userParam != null && userParam != '' && userParam != undefined) {
-        return userParam
-    } else {
-        return null
-    }
-}
-
-// 格式化时间
-Vue.filter('dateFormat', function(value) {
-    if (!value) return '未知'
-    if (value instanceof Date) {
-        return dateFormat(value, 'yyyy-MM-dd')
-    } else {
-        value = new Date(value)
-        return dateFormat(value, 'yyyy-MM-dd')
-    }
-})
-
-// Vue实例化
-Vue.config.productionTip = false
-Vue.prototype.$fire = new Vue()
-Vue.prototype.$store = store
-Vue.prototype.$util = { msg, prePage, modal, boundingClientRect }
-Vue.prototype.$api = Api
-Vue.prototype.$reg = Regs
-Vue.prototype.$Static = 'https://static.caimei365.com/app/img/'
-
-App.mpType = 'app'
-
-// 使用插件
-Vue.use(Uma)
-Vue.use(ResidenceTime, residence)
-
-
-const app = new Vue({
-    ...App
-})
-app.$mount()
+import Vue from 'vue'
+import store from './store'
+import App from './App'
+import './services/index.js'
+import * as Api from '@/common/config/caimeiApi.js'
+import * as Regs from '@/common/config/common.js'
+import { dateFormat } from './utils/util.js'
+import ResidenceTime from './plugins/simple-residence-time'
+import residence from './utils/residence.js'
+
+// 友盟
+import Uma from './plugins/uma'
+
+// 公共组件 全局组件
+import { msg, modal, prePage, boundingClientRect } from './utils/util'
+import cuCustom from './components/cm-custom/cu-custom.vue'
+import auCustom from './components/cm-custom/au-custom.vue'
+import cmCustom from './components/cm-custom/cm-custom.vue'
+import scrollTop from '@/components/cm-module/scrollTop/scrollTop.vue'
+import CityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue' //全局注册地址组件
+
+
+Vue.component('cu-custom', cuCustom)
+Vue.component('au-custom', auCustom)
+Vue.component('cm-custom', cmCustom)
+Vue.component('scroll-top', scrollTop)
+Vue.component('city-Picker', CityPicker)
+
+Vue.prototype.$getStorage = function(key) {
+    var userParam = uni.getStorageSync(key)
+    if (userParam != null && userParam != '' && userParam != undefined) {
+        return userParam
+    } else {
+        return null
+    }
+}
+
+// 格式化时间
+Vue.filter('dateFormat', function(value) {
+    if (!value) return '未知'
+    if (value instanceof Date) {
+        return dateFormat(value, 'yyyy-MM-dd')
+    } else {
+        value = new Date(value)
+        return dateFormat(value, 'yyyy-MM-dd')
+    }
+})
+
+// Vue实例化
+Vue.config.productionTip = false
+Vue.prototype.$fire = new Vue()
+Vue.prototype.$store = store
+Vue.prototype.$util = { msg, prePage, modal, boundingClientRect }
+Vue.prototype.$api = Api
+Vue.prototype.$reg = Regs
+Vue.prototype.$Static = 'https://static.caimei365.com/app/img/'
+
+App.mpType = 'app'
+
+// 使用插件
+Vue.use(Uma)
+Vue.use(ResidenceTime, residence)
+
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

pages.json

@@ -281,6 +281,11 @@
                     "style": {
                         "navigationBarTitleText": "美业参谋"
                     }
+                }, {
+                    "path": "supplier_more",
+                    "style": {
+                        "navigationBarTitleText": "美业参谋-更多"
+                    }
                 }
 			]
 		},
@@ -736,7 +741,7 @@
 				{
 					"path": "club/club-visit",
 					"style": {
-						"navigationBarTitleText": "商城访问记录",
+						"navigationBarTitleText": "访问记录",
 						"navigationStyle": "custom"
 					}
 				},
@@ -759,15 +764,15 @@
 					}
 				},
 				{
-					"path": "club/club-detail",
+					"path": "club/club-info",
 					"style": {
-						"navigationBarTitleText": "资料详情"
+						"navigationBarTitleText": "商城访问记录"
 					}
 				},
 				{
-					"path": "club/club-inactive-list",
+					"path": "club/club-detail",
 					"style": {
-						"navigationBarTitleText": "不活跃机构"
+						"navigationBarTitleText": "资料详情"
 					}
 				},
 				{
@@ -1347,3 +1352,4 @@
 		}]
 	}
 }
+

pages/goods/product.vue

@@ -1,3042 +1,3042 @@
-<template>
-	<view
-		class="product "
-		:style="{
-			paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
-			paddingTop: CustomBar + 'px'
-		}"
-	>
-		<custom-p
-			v-if="isHeaderPoduct"
-			:systeminfo="systeminfo"
-			:navbar-data="nvabarData"
-			:headerBtnPosi="headerBtnPosi"
-			:headerColor="headerColor"
-			:type="isShareType"
-			:page="backPage"
-		/>
-		<view
-			class="product-topnav"
-			id="topBar"
-			v-show="isNavbarFiexd"
-			:class="navbarFiexd"
-			:style="{ top: CustomBar - 2 + 'px' }"
-		>
-			<view class="search-input">
-				<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
-					<view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
-					<view class="search-text">搜索商品/项目仪器</view>
-				</view>
-			</view>
-			<view class="navbar">
-				<view
-					class="nav-item tui-skeleton-fillet"
-					:class="{ current: tabCurrentIndex === 0 }"
-					@click="tabClick(0)"
-				>
-					<text>详情</text> <text class="line"></text>
-				</view>
-				<view
-					class="nav-item tui-skeleton-fillet"
-					:class="{ current: tabCurrentIndex === 1 }"
-					@click="tabClick(1)"
-				>
-					<text>服务项目</text> <text class="line"></text>
-				</view>
-				<view
-					class="nav-item tui-skeleton-fillet"
-					:class="{ current: tabCurrentIndex === 2 }"
-					@click="tabClick(2)"
-					v-if="product.qualificationImg"
-				>
-					<text>商品资质</text> <text class="line"></text>
-				</view>
-				<view
-					class="nav-item tui-skeleton-fillet"
-					:class="{ current: tabCurrentIndex === 3 }"
-					@click="tabClick(3)"
-				>
-					<text>推荐</text> <text class="line"></text>
-				</view>
-				<view
-					class="nav-item tui-skeleton-fillet"
-					:class="{ current: tabCurrentIndex === 4 }"
-					@click="tabClick(4)"
-					v-if="product.archiveId !== 0"
-				>
-					<text>相关资料</text> <text class="line"></text>
-				</view>
-			</view>
-		</view>
-		<tui-skeleton
-			v-if="skeletonShow"
-			backgroundColor="#fafafa"
-			borderRadius="10rpx"
-			:isLoading="true"
-			:loadingType="5"
-		/>
-		<template v-else>
-			<view class="cart-content empty" v-if="isInvalid">
-				<view class="empty-container">
-					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
-					<text class="error-text">商品已失效，去商城逛逛别的吧~</text>
-					<view class="login-btn" @click="goIndex">去商城</view>
-				</view>
-			</view>
-			<view class="container-product tui-skeleton" v-else>
-				<view class="container-product-main">
-					<view class="product-top">
-						<view class="banner-section">
-							<view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
-							<view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
-							<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
-								<swiper
-									class="banner tui-banner tui-skeleton-rect"
-									@change="swiperChange"
-									:duration="800"
-									:autoplay="false"
-									:circular="true"
-								>
-									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
-										<image :src="item" @click="previewImg(index)" class="product-img" />
-									</swiper-item>
-								</swiper>
-								<view class="swiper__dots-box">
-									<tui-tag
-										padding="12rpx 24rpx"
-										type="translucent"
-										shape="circleLeft"
-										size="32rpx"
-										:scaleMultiple="0.82"
-										originRight
-									>
-										{{ current + 1 }}/{{ productImage && productImage.length }}
-									</tui-tag>
-								</view>
-							</uni-swiper-dot>
-						</view>
-						<view class="product-wrap clearfix">
-							<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
-								<view class="wrap-top-price">
-									<cm-price
-										v-if="isRequest"
-										:product="product"
-										:userIdentity="userIdentity"
-										:shopID="shopID"
-										:promotions="product.promotions"
-										:ladderPriceList="ladderPriceList"
-									/>
-								</view>
-								<view class="p-title tui-skeleton-fillet">
-									<view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
-									<view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
-										{{ product.name == undefined ? '' : product.name }}
-									</view>
-									<button
-										open-type="share"
-										class="p-title-share tui-share-position"
-										@tap="onShare"
-										v-if="userInfo.userIdentity !== 1"
-									>
-										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
-										<view class="">分享</view>
-									</button>
-									<button class="p-title-share tui-share-position" @click="handleShare" v-else>
-										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
-										<view class="">分享</view>
-									</button>
-								</view>
-								<view class="wrap-label" v-if="product.tagsList && product.tagsList.length > 0">
-									<view
-										class="label-a tui-skeleton-fillet"
-										v-for="(label, index) in product.tagsList"
-										:key="index"
-									>
-										{{ label }}
-									</view>
-								</view>
-								<view class="product-seve" v-if="hasLogin">
-									<text class="label">采美承诺：</text>
-									<text class="iconfont icon-dui tui-skeleton-rect">
-										<text class="text">无忧退货</text>
-									</text>
-									<text class="iconfont icon-dui tui-skeleton-rect">
-										<text class="text">快速退款</text>
-									</text>
-									<text class="iconfont icon-dui tui-skeleton-rect">
-										<text class="text">正品保证</text>
-									</text>
-								</view>
-								<view
-									class="productRemarks"
-									v-if="product.productRemarks != '' && product.productRemarks != null"
-								>
-									备注:{{ product.productRemarks }}
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="product-item-none" v-if="goodsData.isNoneDisabled">
-						<image class="none-image" :src="productNoneImage" mode=""></image>
-						<view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
-						<view class="none-text">咨询类似商品，请联系客服!</view>
-					</view>
-					<!-- 选择规格 -->
-					<view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
-						<text class="title">选择：</text> <text class="name">共{{ skusCount }}种规格可选</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 参数 -->
-					<view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
-						<text class="title">参数：</text> <text class="name">品牌 分类...</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 特殊商品退货须知 -->
-					<view class="return-instructions" v-if="returnGoodsStutas">
-						<cm-return-instructions :content="helpContent"></cm-return-instructions>
-					</view>
-					<!-- 配套商品 -->
-					<view
-						class="product-supporting"
-						v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
-						@click.stop="handleSupporting"
-					>
-						<view class="product-supporting-title">配套商品({{ supportingNum }})</view>
-						<view class="product-supporting-list">
-							<view
-								class="list"
-								v-for="(supporting, index) in supportingList"
-								:key="index"
-								v-if="index < 4"
-							>
-								<image class="list-image" :src="supporting.image" mode=""></image>
-							</view>
-							<text class="iconfont icon-xiayibu"></text>
-						</view>
-					</view>
-					<!-- 优惠券 -->
-					<view
-						class="product-parameter coupon"
-						v-if="isShowButton && productCoupon.length > 0"
-						@click="showPopup(2)"
-					>
-						<text class="title">优惠券：</text>
-						<view class="coupon">
-							<text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
-								满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
-							</text>
-						</view>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 仪器培训方案 -->
-					<view
-						class="product-parameter"
-						@click="showPopup(1)"
-						v-if="product.commodityType == 2 && product.trainingMethod"
-					>
-						<text class="title">培训方案：</text>
-						<text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<!-- 供应商 -->
-					<view class="product-supplier" @click="goSupplier">
-						<view class="logo">
-							<img
-								:src="
-									shop.logo
-										? shop.logo
-										: 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
-								"
-								alt=""
-							/>
-						</view>
-						<view class="main">
-							<view class="name">{{ shop.name }}</view>
-							<view class="massgs">
-								<view class="label">满意度:</view>
-								<view class="p-stars">
-									<uni-stars
-										:stars="6"
-										:iconClass="iconClass"
-										:iconColor="iconColor"
-										:fontSize="36"
-										:widthInfo="176"
-									></uni-stars>
-								</view>
-								<view class="acount">
-									<text>{{ shop.normalNum }}</text> 件商品
-								</view>
-							</view>
-						</view>
-						<view class="right" v-if="!isShowCaimeiShop"><text class="iconfont icon-xiayibu"></text></view>
-					</view>
-				</view>
-				<!-- 商品详情 -->
-				<view v-show="tabCurrentIndex !== 4">
-					<view class="product-details product-details0">
-						<view class="title"><view class="title-tab">商品详情</view></view>
-						<view class="content tui-banner product-rich-text tui-skeleton-rect">
-							<template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
-								<mp-html :content="html" :tag-style="tagStyle" />
-							</template>
-							<view class="product-rich-text-none" v-else>暂无商品信息</view>
-						</view>
-					</view>
-					<!-- 服务项目 -->
-					<view class="product-details service product-details1">
-						<view class="title"><view class="title-tab">服务项目</view></view>
-						<view
-							class="content service"
-							v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
-						>
-							<cm-service :product="product.productDetail" v-if="isRequest" />
-						</view>
-						<view class="content-none" v-else><text>暂无服务项目</text></view>
-					</view>
-					<!-- 商品资质 -->
-					<view class="product-details qualifications product-details2" v-if="product.qualificationImg">
-						<view class="title"><view class="title-tab">商品资质</view></view>
-						<view class="product-details-image">
-							<view class="product-details-table clearfix" v-if="product.qualificationNo">
-								<view class="ladder-tr">
-									<view class="ladder-item-td th">证书编号</view>
-									<view class="ladder-item-td th">产品名称</view>
-									<view class="ladder-item-td th">详情</view>
-								</view>
-								<view class="ladder-tr">
-									<view class="ladder-item-td">
-										<view class="te-text">{{ product.qualificationNo }}</view>
-									</view>
-									<view class="ladder-item-td">
-										<view class="te-text">{{ product.productName }}</view>
-									</view>
-									<view class="ladder-item-td">
-										<view class="te-text last">{{ product.qualificationLink }}</view>
-										<view class="te-copy">
-											<text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
-												复制
-											</text>
-										</view>
-									</view>
-								</view>
-							</view>
-							<image
-								class="qualificationImg-image"
-								:src="product.qualificationImg"
-								mode="aspectFill"
-								@click="previewImg1(product.qualificationImg)"
-							></image>
-						</view>
-					</view>
-					<!-- 相关推荐 -->
-					<view class="product-details recommend product-details3">
-						<view class="title"><view class="title-tab">相关推荐</view></view>
-						<view class="content hot">
-							<cm-recommend
-								:query-productid="product.productId"
-								:query-type="product.recommendType"
-								v-if="isRequest"
-							/>
-						</view>
-					</view>
-				</view>
-				<!-- 相关资料 -->
-				<view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
-					<cm-product-doc
-						@previewImage="changePreViewImageStatus"
-						:archiveId="product.archiveId"
-						:userId="userId"
-					/>
-				</view>
-				<!-- 优惠券 -->
-				<tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">优惠券</view>
-						<view class="tui-popup-close" @click="hidePopup(2)">
-							<text class="iconfont icon-iconfontguanbi"></text>
-						</view>
-						<view class="tui-popup-tabs">
-							<coupon-tabs
-								:tabs="navbar"
-								:currentTab="currentTab > 2 ? 0 : currentTab"
-								@change="couponChange"
-								:itemWidth="100 / navbar.length + '%'"
-								selectedColor="#FF5B00"
-								sliderBgColor="#FF5B00"
-							/>
-						</view>
-						<div class="tui-popup-main coupon">
-							<scroll-view class="tui-popup-scroll" scroll-y="true">
-								<view class="coupon-empty" v-if="isCouponEmpty">
-									<image
-										class="empty-container-image"
-										:src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
-									></image>
-									<text class="error-text">暂无可领的优惠券~</text>
-								</view>
-								<template v-else>
-									<view
-										v-for="(coupon, index) in productCouponList"
-										:key="index"
-										:id="coupon.couponId"
-										class="coupon-list"
-									>
-										<view class="list-cell-le">
-											<view class="coupon-maxMoney">
-												<text class="small">￥</text> {{ coupon.couponAmount }}
-											</view>
-											<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
-										</view>
-										<view class="list-cell-ri">
-											<view class="list-cell-top">
-												<view class="list-cell-type">
-													<view class="list-cell-tags">
-														<template v-if="coupon.moneyCouponFlag == 1">
-															<text class="tags" v-if="coupon.moneyCouponType == 1">
-																意向{{ coupon.couponType | TypeFormat }}
-															</text>
-															<text class="tags" v-else>
-																定向{{ coupon.couponType | TypeFormat }}
-															</text>
-														</template>
-														<template v-else>
-															<text class="tags">
-																{{ coupon.couponType | TypeFormat }}
-															</text>
-														</template>
-													</view>
-													<view class="list-cell-texts">
-														<text v-if="coupon.couponType == 0">
-															{{
-																coupon.productType && coupon.productType == 1
-																	? '全商城商品通用'
-																	: '仅可购买指定商品'
-															}}
-														</text>
-														<text v-if="coupon.couponType == 1">
-															{{
-																coupon.categoryType == 1
-																	? '仅限购买产品类商品'
-																	: '仅限购买仪器类商品'
-															}}
-														</text>
-														<text v-if="coupon.couponType == 3">
-															仅限购买店铺【{{ coupon.shopName }}】的商品
-														</text>
-														<text v-if="coupon.couponType == 4 || coupon.couponType == 2">
-															全商城商品通用
-														</text>
-													</view>
-												</view>
-												<view class="list-cell-btn">
-													<view class="icon-used">
-														<template v-if="coupon.couponBtnType == 0">
-															<template v-if="coupon.couponPayWay == 2">
-																<view class="icon-used-text">
-																	{{ coupon.moneyCouponPrice }}采美豆
-																</view>
-																<view
-																	class="icon-used-btn receive"
-																	@click="toDeductCoupon(coupon)"
-																>
-																	抵扣
-																</view>
-															</template>
-															<template v-else-if="coupon.couponPayWay == 1">
-																<view class="icon-used-text">购买</view>
-																<view
-																	class="icon-used-btn receive"
-																	@click="toPayCoupon(coupon)"
-																>
-																	￥{{ coupon.moneyCouponPrice }}
-																</view>
-															</template>
-															<template v-else>
-																<view
-																	class="icon-used-btn receive"
-																	@click="receiveCoupon(coupon)"
-																>
-																	领取
-																</view>
-															</template>
-														</template>
-														<view
-															class="icon-used-btn make"
-															v-if="coupon.couponBtnType == 1"
-														>
-															已领取
-														</view>
-													</view>
-												</view>
-											</view>
-											<view class="list-cell-time">
-												{{ coupon.startDate }} - {{ coupon.endDate }}
-											</view>
-										</view>
-									</view>
-								</template>
-							</scroll-view>
-						</div>
-					</view>
-				</tui-bottom-popup>
-				<!-- 培训方案 -->
-				<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
-					<view class="tui-popup-box clearfix">
-						<view class="title">培训方案</view>
-						<div class="tui-popup-main">
-							<scroll-view class="tui-popup-scroll train" scroll-y="true">
-								<view class="content-tr">
-									<view class="content-td">培训方式：</view>
-									<view class="content-th">
-										{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}
-									</view>
-								</view>
-								<view class="content-tr">
-									<view class="content-td">培训费用：</view>
-									<view class="content-th">
-										{{ product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含' }}
-									</view>
-								</view>
-							</scroll-view>
-						</div>
-						<view
-							class="tui-right-flex tui-popup-btn"
-							:style="{ paddingBottom: isIphoneX ? '68rpx' : '.34rpx' }"
-						>
-							<view class="tui-flex-1"><view class="tui-button" @click="hidePopup(1)">收起</view></view>
-						</view>
-					</view>
-				</tui-bottom-popup>
-				<!-- 底部按钮 -->
-				<view class="menu" v-if="isShowButton">
-					<view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
-						<view class="bottom-le">
-							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
-								<image src="../../static/icon-home-active@3x.png"></image> <text>首页</text>
-							</view>
-							<view class="item-bt" @click="handleCollection">
-								<image
-									:src="
-										collectionType
-											? StaticUrl + 'icon/icon-collection@2x.png'
-											: StaticUrl + 'icon/icon-collection-none@2x.png'
-									"
-								></image>
-								<text>{{ collectionType ? '已收藏' : '收藏' }}</text>
-							</view>
-							<view class="item-bt" @click="buyProductCart()">
-								<image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
-								<text>购物车</text>
-								<text
-									v-if="hasLogin && bottomCartNumber > 0"
-									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
-									:class="[bottomCartNumber < 10 ? 'goleft' : '']"
-								>
-									{{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
-								</text>
-								<view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
-							</view>
-						</view>
-						<view class="bottom-ri">
-							<button
-								:disabled="goodsData.disabled"
-								class="btn btn-cart"
-								:class="[goodsData.disabled ? 'disabled' : '']"
-								@tap.stop="btnGetConfirm('add')"
-							>
-								加入购物车
-							</button>
-							<button
-								:disabled="goodsData.disabled"
-								class="btn btn-bay"
-								:class="[goodsData.disabled ? 'disabled' : '']"
-								@tap.stop="btnGetConfirm('buy')"
-							>
-								立即购买
-							</button>
-						</view>
-					</view>
-				</view>
-				<!-- 侧边 -->
-				<scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
-			</view>
-		</template>
-		<!-- 商品参数 -->
-		<cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product" />
-		<!-- 选择规格弹窗 -->
-		<cm-unit-popup
-			v-if="popupShow3"
-			:popupShow="popupShow3"
-			:skuProduct="skuProduct"
-			:productCoupon="productCoupon"
-			:type="unitPopupType"
-			:btnType="btnType"
-			:goodsData="goodsData"
-			@buyConfirm="handleBuyConfirm"
-			@skuClick="handleSkuClick"
-		/>
-		<!-- 弹窗提示 -->
-		<tui-modal
-			:show="modal"
-			@click="handleClick"
-			@cancel="hideMobel"
-			:content="contentModalText"
-			:button="modalButton"
-			color="#333"
-			:size="32"
-			shape="circle"
-			:maskClosable="false"
-		/>
-		<!-- 商品详情可见度弹窗提醒 -->
-		<cm-product-modal
-			v-if="showModal"
-			:showModal="showModal"
-			:commodityDetailsFlag="product.commodityDetailsFlag"
-			:isShareType="isShareType"
-			:userIdentity="userIdentity"
-			:firstClubType="firstClubType"
-		/>
-		<!-- 供应商收集用户信息弹窗 -->
-		<cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml" :advertisement="advertisement" />
-
-		<!-- 分享弹窗 -->
-		<cm-share-popup ref="sharePopup" :data="posterData" type="product" />
-
-		<!-- 协销名片 -->
-		<cm-seller-modal :suid="suid" />
-	</view>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import customP from './components/cm-header.vue' //自定义导航
-import cmPrice from './components/cm-price.vue' //价格显示
-import cmAttributes from './components/cm-attributes.vue' //规格信息
-import cmRecommend from './components/recommend' //相关推荐
-import cmParameter from './components/cm-parameter' //相关参数
-import cmService from './components/cm-service' //服务项目
-import cmProductDoc from './components/cm-product-doc.vue'
-import cmProductModal from './components/cm-product-modal.vue'
-import cmPramsPopup from './components/cm-prams-popup.vue'
-import cmUnitPopup from './components/cm-unit-popup.vue'
-import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
-import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
-import cmReturnInstructions from './components/cm-return-instructions.vue'
-import authorize from '@/common/config/authorize.js'
-import wxLogin from '@/common/config/wxLogin.js'
-import { debounce } from '@/common/config/common.js'
-import payMixins from '@/mixins/payMixins.js'
-import proMixins from './mixins/proMixins.js'
-import cmSrsMixins from '@/utils/cmSrsMixins.js'
-import thorui from '@/components/clipboard/clipboard.thorui.js'
-import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
-import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
-import { queryParse } from './mixins/share.helper.js'
-var isPreviewImg
-export default {
-	mixins: [payMixins, proMixins, cmSrsMixins],
-	components: {
-		customP,
-		cmRecommend,
-		cmPrice,
-		cmAttributes,
-		cmParameter,
-		cmService,
-		couponTabs,
-		cmProductDoc,
-		cmPramsPopup,
-		cmUnitPopup,
-		cmProductModal,
-		cmRossPopup,
-		cmReturnInstructions,
-		cmSharePopup,
-		cmSellerModal
-	},
-	data() {
-		return {
-			StaticUrl: this.$Static, //静态图片路径
-			clickPath: '/pages/search/search',
-			html: '',
-			productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
-			mode: 'round',
-			iconClass: 'icon-aixin',
-			iconColor: '#ff9100',
-			specClass: '', // 规格弹窗css类，控制开关动画
-			isBtnType: '',
-			isRequest: false,
-			isScrollTop: false,
-			current: 0,
-			isShareType: '',
-			isHeaderPoduct: false,
-			isNavbarFiexd: false,
-			navbarFiexd: 'none',
-			ladderPriceFlag: '',
-			ladderPriceList: '',
-			isInvalid: false,
-			isEvaluate: false,
-			isAnimation: false,
-			skeletonShow: true,
-			isStock: false,
-			disabled: false,
-			isNoneDisabled: false,
-			tabCurrentIndex: 0,
-			userId: 0,
-			shopId: 0,
-			shopID: 0,
-			typeId: 0,
-			vipFlag: 0,
-			firstClubType: 0,
-			productId: 0,
-			skusCount: 0, // 规格种类
-			userIdentity: 0, // 用户类型
-			goodsData: {}, // 自定义数据
-			shop: {}, //供应商信息
-			product: {}, //采美
-			productImage: [],
-			retailPrice: 0,
-			stock: 0,
-			number: 0,
-			minBuyNumber: 0,
-			productsList: [],
-			goodListData: [],
-			productCoupon: [], // 优惠券
-			productCouponList: [], // 优惠券弹窗列表
-			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
-			systeminfo: this.setSysteminfo(), // 获取设备信息
-			windowHeight: '',
-			headerColor: false,
-			backPage: 1,
-			nvabarData: {
-				// 顶部自定义导航
-				showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
-				title: '' // 导航栏 中间的标题
-			},
-			linkPath: '',
-			CustomBar: this.CustomBar, // 顶部导航栏高度
-			popupShow0: false, // 参数弹窗
-			popupShow1: false, // 培训方案
-			popupShow2: false, // 优惠券
-			popupShow3: false, // 购买弹窗
-			tabSelectFlag: false,
-			sectionPropsArr: [],
-			scrollTopArray: [],
-			winHeight: '',
-			isShowButton: true,
-			isCouponEmpty: false,
-			currentTab: 0,
-			couponParam: {
-				// 获取弹窗优惠券领取参数
-				userId: 0,
-				productId: 0,
-				status: 1,
-				source: 2
-			},
-			bottomCartNumber: 0,
-			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
-			isPreviewImage: false,
-			opentype: '',
-			collectionType: false,
-			isShowSupportingList: false,
-			supportingList: [],
-			supportingNum: 0, // 组合商品总数
-			contentModalText: '', //操作文字提示语句
-			modal: false,
-			modalButton: [
-				{
-					text: '取消',
-					type: 'gray',
-					plain: true //是否空心
-				},
-				{
-					text: '去升级',
-					customStyle: {
-						color: '#fff',
-						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
-					},
-					plain: false
-				}
-			],
-			showModal: false,
-			isShowCaimeiShop: false,
-			unitPopupType: 0, // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
-			returnGoodsStutas: false,
-			helpContent: '',
-			posterData: {}, // 商品详情
-			suid: 0, // 协销id
-			scene: {}, //获取二维码参数
-			options: {}
-		}
-	},
-	computed: {
-		...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
-	},
-	filters: {
-		TypeFormat(value) {
-			switch (value) {
-				case 0:
-					return '活动券'
-					break
-				case 1:
-					return '品类券'
-					break
-				case 2:
-					return '用户专享券'
-					break
-				case 3:
-					return '店铺券'
-					break
-				case 4:
-					return '新用户券'
-					break
-			}
-		}
-	},
-	watch: {
-		isNavbarFiexd(val) {
-			if (!this.isRequest || !val) return
-			let timer = null
-			clearTimeout(timer)
-			timer = setTimeout(() => {
-				if (this.sectionPropsArr.length > 0) return
-				this.getSectionProps()
-			}, 200)
-		}
-	},
-	onLoad(option) {
-		if (option.scene) {
-			// 识别小程序二维码
-			this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
-		}
-		this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId =
-			option.id || this.scene.id //获取商品ID
-		if (option.typeId) {
-			this.typeId = option.typeId
-		}
-		this.opentype = option.open
-		this.isShareType = option.type
-		this.linkPath = option.path
-		this.isHeaderPoduct = true
-		if (option.page == 2) {
-			this.backPage = option.page
-		}
-		this.options = option.scene ? this.scene : option
-		this.getWinHeight()
-	},
-	onReady() {
-		if (this.opentype == 'caimei') {
-			// 跳转到资料详情
-			uni.showLoading({
-				title: '加载中'
-			})
-			setTimeout(() => {
-				this.isNavbarFiexd = true
-				this.tabClick(4)
-				uni.hideLoading()
-			}, 2000)
-		}
-		console.log('是iPhoneX', this.isIphoneX)
-	},
-	methods: {
-		async initGetStotage() {
-			// 初始化
-			const userInfo = await this.$api.getStorage()
-			this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
-			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
-			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
-			this.shopID = userInfo.shopId ? userInfo.shopId : 0
-			this.firstClubType = this.clubType
-			if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
-				this.isShowButton = true
-			} else {
-				this.isShowButton = false
-			}
-			if (isPreviewImg) {
-				isPreviewImg = false
-				return
-			} else {
-				this.initData()
-			}
-		},
-		initData() {
-			// 初始化商品详情查询
-			this.ProductService.QueryProductDetils({
-				userId: this.userId,
-				productId: this.productId,
-				identity: this.identity,
-				typeId: this.typeId
-			})
-				.then(response => {
-					let productLabel = ''
-					this.productImage = []
-					this.shop = response.data.shop
-					this.shopId = response.data.shopId
-					const dataStr = JSON.stringify(response.data)
-					this.product = JSON.parse(dataStr)
-					this.skuProduct = JSON.parse(dataStr)
-					this.skusCount = this.product.skus.length
-					this.addParams.skuId = this.product.skuId
-					if (this.product.tinyTypeName) {
-						productLabel = this.product.tinyTypeName
-					} else if (!this.product.tinyTypeName && this.product.smallTypeName) {
-						productLabel = this.product.smallTypeName
-					} else {
-						productLabel = this.product.bigTypeName
-					}
-					//设置统计数据标签
-					if (this.product.relatedLabels) {
-						uni.setStorageSync('productLabel', this.product.relatedLabels)
-					} else {
-						uni.setStorageSync(
-							'productLabel',
-							`${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
-						)
-					}
-					//校验是否为ross
-					this.checkedIsRossSet()
-					//判断是否可以跳转供应商主页
-					if (this.product.shopType === 2) {
-						this.isShowCaimeiShop = true
-					}
-					// 判断是否显示已收藏
-					if (this.product.userLike && this.product.userLike == 1) {
-						this.collectionType = true
-					} else {
-						this.collectionType = false
-					}
-					//已删除/已冻结
-					if (this.product.validFlag === 0 || this.product.validFlag == 10) {
-						this.isInvalid = true
-					} else if (this.product.validFlag === 9) {
-						if (this.userIdentity == 1) {
-							this.isInvalid = false
-						} else {
-							this.isInvalid = true
-						}
-					}
-					this.ladderPriceFlag = this.product.ladderPriceFlag
-					this.html = this.adaptRichTextImg(this.product)
-					this.stock = this.product.stock
-					this.number = this.product.minBuyNumber
-					this.minBuyNumber = this.product.minBuyNumber
-
-					//处理商品图片列表
-					this.product.imageList.forEach(item => {
-						this.productImage.push(item.image)
-					})
-					//处理阶梯价格
-					if (this.product.ladderPriceList != null) {
-						this.ladderPriceList = this.product.ladderPriceList
-					}
-					//拆分金额并转千分位格式显示
-					if (this.product.price != null) {
-						this.retailPrice = this.product.price.toFixed(2)
-					}
-					//处理下架商品和售罄商品
-					if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
-						this.isNoneDisabled = true
-						this.disabled = true
-					} else {
-						this.disabled = false
-						this.isNoneDisabled = false
-						this.goodsData.disabledText = ''
-					}
-					if (this.product.priceFlag == 1) {
-						this.disabled = true
-					} else if (this.product.priceFlag == 2) {
-						if (this.userIdentity == 4 && this.vipFlag != 1) {
-							this.disabled = true
-						} else {
-							this.disabled = false
-						}
-					} else if (this.product.priceFlag == 3) {
-						if (this.userIdentity == 4) {
-							this.disabled = true
-						} else if (this.userIdentity == 2 && this.firstClubType != 1) {
-							this.disabled = true
-						} else {
-							this.disabled = false
-						}
-					} else {
-						this.disabled = false
-					}
-					this.goodsData.disabled = this.disabled
-					this.goodsData.isNoneDisabled = this.isNoneDisabled
-					if (this.product.validFlag == 3) {
-						this.goodsData.disabledText = '下架'
-					}
-					if (this.product.validFlag == 10) {
-						this.goodsData.disabledText = '停售'
-					}
-					if (this.product.saleOutFlag === 1) {
-						this.goodsData.disabledText = '售罄'
-					}
-					console.log(this.disabled)
-					// setTimeout(() => {
-					//     this.getSectionProps()
-					// }, 2000)
-					this.handleShowProductType(this.product.commodityDetailsFlag)
-					if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
-						this.ProductCartNumber()
-					}
-					this.queryProductDetilsCoupons()
-					this.getCommodityCombinationList()
-					// 特殊商品退货须知
-					this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
-					this.helpContent = response.data.helpContent
-
-					setTimeout(() => {
-						this.skeletonShow = false
-						this.isRequest = true
-					}, 1000)
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-				})
-		},
-		handleShowProductType(flag = '') {
-			// 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
-			const flagMap = {
-				'2': true,
-				'3': true,
-				'4': true
-			}
-			if (!this.hasLogin) {
-				this.showModal = flagMap[flag]
-				return
-			}
-			if (this.vipFlag === 1) {
-				this.showModal = false
-				return
-			}
-			if (flag === 3 && this.userIdentity === 4) {
-				this.showModal = true
-				return
-			}
-			if (flag === 4 && this.userIdentity === 4) {
-				this.showModal = true
-				return
-			}
-			if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
-				this.showModal = true
-				return
-			}
-		},
-		hideMobel1() {
-			this.modal1 = false
-			this.$api.navigateBack(1)
-		},
-
-		adaptRichTextImg(product) {
-			// 商品详情
-			let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
-			let html = ''
-			if (product.productDetailChose == 1) {
-				// 同资质机构显示商品详情
-				html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
-			} else {
-				if (this.hasLogin && this.userIdentity != 4) {
-					html = product.productDetail
-						? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
-						: defaulHtml
-				} else {
-					if (product.productDetail.commonDetailInfo) {
-						html = product.productDetail
-							? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
-							: defaulHtml
-					} else {
-						html = defaulHtml
-					}
-				}
-			}
-			return html
-		},
-		getCommodityCombinationList() {
-			// 初始化商品详情配套商品
-			this.ProductService.getCommodityCombinationList({
-				userId: this.userId,
-				productId: this.productId,
-				source: 2,
-				pageNum: 1,
-				pageSize: 4
-			})
-				.then(response => {
-					const data = response.data
-					this.supportingList = data.results
-					this.supportingNum = data.totalRecord
-					if (this.supportingList.length > 0) {
-						if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
-							this.isShowSupportingList = true
-						}
-					}
-				})
-				.catch(error => {
-					console.log('获取组合商品列表失败')
-				})
-		},
-		queryProductDetilsCoupons() {
-			// 初始化商品详情优惠券信息
-			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
-				.then(response => {
-					this.productCoupon = response.data.list
-				})
-				.catch(error => {
-					console.log('获取优惠券列表失败')
-				})
-		},
-		queryPopupCoupons() {
-			// 获取弹窗优惠券列表
-			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
-				.then(response => {
-					let data = response.data
-					this.navbar[0].num = data.notCouponNum
-					this.navbar[1].num = data.couponNum
-					if (data.couponList && data.couponList.length > 0) {
-						this.productCouponList = data.couponList
-						this.isCouponEmpty = false
-					} else {
-						this.isCouponEmpty = true
-					}
-				})
-				.catch(error => {
-					console.log('获取优惠券列表失败')
-				})
-		},
-		ProductCartNumber() {
-			// 获取用户购物车储量
-			this.ProductService.ProductCartNumber({ userId: this.userId })
-				.then(response => {
-					this.bottomCartNumber = response.data
-				})
-				.catch(error => {
-					console.log('获取购物车数量失败')
-				})
-		},
-		receiveCoupon(coupon) {
-			// 点击优惠券领取按钮,友盟埋点收集领取优惠券
-			if (process.env.NODE_ENV != 'development') {
-				this.$uma.trackEvent('Um_Event_productCouponReceive', {
-					Um_Key_PageName: '商品详情',
-					Um_Key_EvenName: '领取优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`
-				})
-			}
-			this.ProductService.ReceiveCoupon({
-				userId: this.couponParam.userId,
-				couponId: coupon.couponId,
-				source: 1
-			})
-				.then(response => {
-					this.$util.msg('领取成功', 1500, true, 'success')
-					setTimeout(() => {
-						this.currentTab = 1
-						this.couponParam.status = 2
-						this.queryPopupCoupons()
-					}, 1500)
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-				})
-		},
-		toDeductCoupon(coupon) {
-			// 点击采美豆抵扣优惠券
-			if (process.env.NODE_ENV != 'development') {
-				this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
-					Um_Key_PageName: '领券中心',
-					Um_Key_EvenName: '抵扣优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`
-				})
-			}
-			if (this.hasLogin) {
-				if (this.userIdentity === 1 || this.userIdentity === 3) {
-					this.$util.msg('您的身份暂不支持领取优惠券', 2000)
-					return
-				}
-				this.WeChatPayCouponBeans(coupon)
-			} else {
-				this.$api.navigateTo('/pages/login/login')
-			}
-		},
-		WeChatPayCouponBeans(coupon) {
-			// 采美豆抵扣优惠券
-			this.PayService.WeChatPayCouponBeans({
-				source: 1, //领取渠道 1 小程序  2 网站
-				userId: this.couponParam.userId,
-				couponId: coupon.couponId
-			})
-				.then(response => {
-					this.$util.msg('抵扣成功', 1500)
-					setTimeout(() => {
-						this.currentTab = 1
-						this.couponParam.status = 2
-						this.queryPopupCoupons()
-					}, 1500)
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-				})
-		},
-		toPayCoupon(coupon) {
-			// 点击购买优惠券,友盟埋点收集购买优惠券
-			if (process.env.NODE_ENV != 'development') {
-				this.$uma.trackEvent('Um_Event_productCouponBuy', {
-					Um_Key_PageName: '商品详情',
-					Um_Key_EvenName: '购买优惠券',
-					Um_Key_CouponId: `${coupon.couponId}`
-				})
-			}
-			this.createCouponRecord(coupon)
-		},
-		createCouponRecord(coupon) {
-			// 生成购买优惠券记录Id
-			this.PayService.WeChatCouponRecord({
-				userId: this.userId,
-				couponId: coupon.couponId
-			})
-				.then(response => {
-					this.MiniWxPayFor(coupon, response.data.couponRecordId)
-				})
-				.catch(error => {
-					if (error.code == -1) {
-						//个人机构不能购买
-						this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
-						this.modal = true
-					} else if (error.code == -2) {
-						//会员机构不是医美机构不能购买
-						this.$util.msg('该优惠券仅限医美机构购买', 2000)
-					}
-				})
-		},
-		async MiniWxPayFor(coupon, couponRecordId) {
-			const wechatcode = await authorize.getCode('weixin')
-			const params = {
-				userId: this.userId,
-				couponId: coupon.couponId,
-				couponRecordId: couponRecordId,
-				payType: 'XCX',
-				code: wechatcode,
-				source: 1 //支付来源 1 小程序 2 WWW
-			}
-			this.weChatMiniCouponWxPay(
-				params,
-				'Um_Event_productCouponPay',
-				'商品详情',
-				'线上支付优惠券',
-				coupon.couponId,
-				this.userId
-			)
-		},
-		hideMobel() {
-			this.modal = false
-		},
-		handleClick(e) {
-			//个人机构跳转升级页面
-			if (e.index == 1) {
-				this.$api.navigateTo('/pages/login/apply')
-			}
-			this.modal = false
-		},
-		swiperChange(e) {
-			//顶部商品图片切换
-			const index = e.detail.current
-			this.current = index
-		},
-		previewImg1(url) {
-			let mentuzArray = []
-			mentuzArray.push(url)
-			uni.previewImage({
-				urls: mentuzArray,
-				current: 0
-			})
-		},
-		previewImg(index) {
-			//顶部商品图片预览
-			isPreviewImg = true
-			let previewUrls = this.productImage
-			uni.previewImage({
-				current: index, //图片索引
-				urls: previewUrls, //必须是http图片，本地图片无效
-				longPressActions: ''
-			})
-		},
-		//商品详情&&供应商信息tab切换
-		tabClick(index) {
-			// 重新标记
-			this.getSectionProps()
-			this.tabCurrentIndex = index
-			this.tabSelectFlag = true
-			let timer = null
-			clearTimeout(timer)
-			// 点击tab 300ms才执行跳转，避免出错（来回跳动）
-			timer = setTimeout(() => {
-				this.tabClickAction(index)
-			}, 500)
-		},
-		// 跳转执行
-		tabClickAction(index) {
-			const that = this
-			if (index === 4) {
-				return uni.pageScrollTo({
-					duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
-					scrollTop: this.sectionPropsArr[0].scrollTop
-				})
-			}
-			uni.pageScrollTo({
-				duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
-				scrollTop: this.sectionPropsArr[index].scrollTop,
-				success() {
-					setTimeout(() => {
-						that.tabSelectFlag = false
-					}, 300)
-				}
-			})
-		},
-		handleContact(e) {
-			//跳转小程序客服
-			console.log(e.detail.path)
-			console.log(e.detail.query)
-		},
-		buyProductCart() {
-			//底部购物车按钮点击
-			if (this.hasLogin) {
-				// 友盟埋点商品详情购物车入口点击事件
-				if (process.env.NODE_ENV != 'development') {
-					this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
-						Um_Key_PageName: '去购物车',
-						Um_Key_SourcePage: '商品详情购物车入口'
-					})
-				}
-				this.$api.navigateTo('/pages/goods/cart')
-			} else {
-				this.$api.navigateTo('/pages/login/login?type=1')
-			}
-		},
-		btnGetConfirm(type) {
-			//加入购物车&&立即购买点击
-			if (this.hasLogin) {
-				this.btnType = type
-				this.popupShow3 = true
-				this.unitPopupType = 1
-			} else {
-				this.$api.navigateTo('/pages/login/login?type=1')
-			}
-		},
-		getAddProductCart() {
-			//增加购物车成功和toast弹窗提示成功
-			this.ProductService.shoppingAddCart({
-				productId: this.productId,
-				userId: this.userId,
-				productCount: this.number,
-				source: 2
-			})
-				.then(response => {
-					this.specClass = 'hide'
-					this.$util.msg('加入购物车成功', 1500, true, 'success')
-					this.isAnimation = true
-					setTimeout(() => {
-						this.specClass = 'none'
-					}, 200)
-					setTimeout(() => {
-						this.isAnimation = false
-					}, 2000)
-					this.bottomCartNumber = response.data
-				})
-				.catch(error => {
-					console.log('error', error.msg)
-				})
-		},
-		setHeaderBtnPosi() {
-			// 获得胶囊按钮位置信息
-			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
-			return headerBtnPosi
-		},
-		setSysteminfo() {
-			let systeminfo
-			uni.getSystemInfo({
-				// 获取设备信息
-				success: res => {
-					systeminfo = res
-				}
-			})
-			return systeminfo
-		},
-		goIndex() {
-			//商城首页
-			uni.switchTab({
-				url: '/pages/tabBar/home/index'
-			})
-		},
-		goSupplier() {
-			//跳供应商资料页
-			if (!this.isShowCaimeiShop) {
-				this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + this.shopId)
-			}
-		},
-		discard() {
-			//丢弃
-		},
-		onShare(res) {
-			//分享转发
-			if (res.from === 'button') {
-				// 来自页面内转发按钮
-			}
-			return {
-				title: `${this.product.name}`,
-				path: `pages/goods/product?type=share&id=${this.productId}`,
-				imageUrl: `${this.productImage[0]}`
-			}
-		},
-		// 分享海报
-		handleShare() {
-			this.posterData = {
-				productName: this.product.name,
-				productImage: this.productImage[0],
-				suid: this.suid,
-				path: 'pages/goods/product',
-				id: this.productId
-			}
-			this.$refs.sharePopup.open()
-		},
-		handleCollection() {
-			// 收藏
-			if (this.hasLogin) {
-				this.ProductService.getProductUserLike({
-					userId: this.userId,
-					productId: this.product.productId
-				})
-					.then(response => {
-						this.collectionType = !this.collectionType
-						this.$util.msg(response.data, 1500, true, 'success')
-					})
-					.catch(error => {
-						this.$util.msg(error.msg, 2000)
-					})
-			} else {
-				this.$api.navigateTo('/pages/login/login')
-			}
-		},
-		showPopup(index) {
-			switch (index) {
-				case 0:
-					this.popupShow0 = true
-					break
-				case 1:
-					this.popupShow1 = true
-					break
-				case 2:
-					if (this.hasLogin) {
-						this.queryPopupCoupons()
-						this.popupShow2 = true
-					} else {
-						this.$api.navigateTo('/pages/login/login')
-					}
-					break
-				case 3:
-					this.popupShow3 = true
-					this.unitPopupType = 2
-					break
-			}
-		},
-		hidePopup(index) {
-			switch (index) {
-				case 0:
-					this.popupShow0 = false
-					break
-				case 1:
-					this.popupShow1 = false
-					break
-				case 2:
-					this.popupShow2 = false
-					break
-				case 3:
-					this.popupShow3 = false
-					break
-			}
-		},
-		couponChange(e) {
-			this.currentTab = e.index
-			switch (this.currentTab) {
-				case 0:
-					this.couponParam.status = 1
-					this.queryPopupCoupons()
-					break
-				case 1:
-					this.couponParam.status = 2
-					this.queryPopupCoupons()
-					break
-			}
-		},
-		handleSupporting() {
-			// 跳转组合商品页面
-			this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
-		},
-		// 获取每个tab对应区域的区间
-		async getSectionProps() {
-			const sectionPropsArr = [],
-				scrollTopArray = [],
-				className = 'product-details'
-
-			// 获取相关节点元素信息
-			const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
-			const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
-			const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
-			/*
-                说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
-                     scrollTop = 上一个的scrollTop + 上一个的高度
-            */
-			productDetail.forEach((item, index) => {
-				// 上一个 prdocut-details 的 scrollTop 值
-				const prev = sectionPropsArr[index - 1]
-				const prevScrollTop = prev ? prev.scrollTop : productMain.height
-				// 上一个 prdocut-details 的高度
-				const add = productDetail[index - 1]
-				// 第一个需要减去tabs的高度
-				const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
-				sectionPropsArr.push({
-					className: `${className}${index}`,
-					scrollTop: prevScrollTop + addHeight
-				})
-				// - topBar.height
-			})
-			this.sectionPropsArr = sectionPropsArr
-			console.log('更新tab影响区域', this.sectionPropsArr)
-		},
-		//当滑动时也能同步激活tab
-		activeTab: debounce(
-			(top, _this) => {
-				const { sectionPropsArr } = _this
-				if (sectionPropsArr && sectionPropsArr.length > 0) {
-					sectionPropsArr.forEach((item, index) => {
-						// 当前位置为开始位置， 下个起始位置为结束位置
-						const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
-						const next = sectionPropsArr[index + 1]
-						const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
-						if (top >= openInterval && top < closedInterval) {
-							_this.tabCurrentIndex = index
-						}
-					})
-				}
-			},
-			100,
-			true
-		),
-		debounce(fn, delay) {
-			let timer = null //借助闭包
-			return function() {
-				if (timer) {
-					clearTimeout(timer)
-				}
-				timer = setTimeout(fn, delay) // 简化写法
-			}
-		},
-		clipboard(data) {
-			thorui.getClipboardData(data, res => {
-				if (res) {
-					this.$util.msg('复制成功', 2000, true, 'success')
-				} else {
-					this.$util.msg('复制失败', 2000, true, 'none')
-				}
-			})
-		},
-		getWinHeight() {
-			this.winHeight = wx.getSystemInfoSync().windowHeight
-		},
-		changePreViewImageStatus(falg) {
-			this.isPreviewImage = falg
-		}
-	},
-	onPageScroll(e) {
-		//实时获取到滚动的值
-		const { scrollTop } = e
-		this.debounce(this.getSectionProps(), 1000)
-		if (!this.tabSelectFlag) {
-			this.activeTab(scrollTop, this)
-		}
-		if (e.scrollTop > 60) {
-			this.headerColor = true
-			this.navbarFiexd = 'fixed'
-			this.isNavbarFiexd = true
-			this.nvabarData = {
-				showCapsule: 1,
-				title: '商品详情'
-			}
-		} else {
-			this.headerColor = false
-			this.isNavbarFiexd = false
-			this.navbarFiexd = 'none'
-			this.nvabarData = {
-				showCapsule: 1,
-				title: ''
-			}
-		}
-		if (e.scrollTop > 700) {
-			this.isScrollTop = true
-		} else {
-			this.isScrollTop = false
-		}
-	},
-	onShareAppMessage(res) {
-		//分享转发
-		if (res.from === 'button') {
-			// 来自页面内转发按钮
-		}
-		return {
-			title: `${this.product.name}`,
-			path: `pages/goods/product?type=4&id=${this.productId}&suid=${
-				this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
-			}&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
-			imageUrl: `${this.productImage[0]}`
-		}
-	},
-	onShow() {
-		wxLogin.wxLoginAuthorize()
-		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
-		if (!this.isPreviewImage) {
-			this.initGetStotage()
-		}
-		this.isPreviewImage = false
-		const suid = this.options.suid
-			? this.options.suid
-			: this.scene.suid
-			? this.scene.suid
-			: uni.getStorageSync('suid') * 1
-			? uni.getStorageSync('suid') * 1
-			: 0 // 协销userId
-		const spId = this.options.spId
-			? this.options.spId
-			: this.scene.spId
-			? this.scene.spId
-			: uni.getStorageSync('spId') * 1
-			? uni.getStorageSync('spId') * 1
-			: 0 // 协销id
-		const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
-		if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) {
-			// 分享进入 且 用户非协销 或不是从分享进入有缓存
-			if (
-				!uni.getStorageSync('spUserId') ||
-				uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1
-			) {
-				// 如果未分配或者分配相同
-				this.suid = suid
-				uni.setStorageSync('suid', suid)
-				uni.setStorageSync('spId', spId)
-			} else {
-				uni.setStorageSync('suid', 0)
-				this.suid = 0
-				uni.setStorageSync('spId', 0)
-			}
-		}
-		console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
-	}
-}
-</script>
-
-<style lang="scss">
-page {
-	background-color: #ffffff;
-}
-.banner-section {
-	width: 100%;
-	height: 750rpx;
-	position: relative;
-	.cm-product-tags {
-		position: absolute;
-		right: 30rpx;
-		top: 0;
-		z-index: 999;
-	}
-	.cm-product-type {
-		width: 64rpx;
-		height: 64rpx;
-		text-align: justify;
-		box-sizing: border-box;
-		padding: 10rpx;
-		border-radius: 0 0 8rpx 8rpx;
-		background-color: #33ccbf;
-		font-size: $font-size-22;
-		color: #ffffff;
-		line-height: 25rpx;
-		position: absolute;
-		left: 30rpx;
-		top: 0;
-		z-index: 999;
-	}
-	.cm-product-cover {
-		width: 120rpx;
-		height: 77rpx;
-		line-height: 57rpx;
-		font-size: 24rpx;
-		color: #fff;
-		text-align: center;
-		background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
-		background-size: 120rpx;
-		float: left;
-		position: absolute;
-		right: 30rpx;
-		top: 0;
-		z-index: 999;
-	}
-}
-.banner {
-	width: 100%;
-	height: 750rpx;
-	.product-img {
-		width: 750rpx;
-	}
-	image {
-		width: 100%;
-		height: 100%;
-	}
-	.banner-item {
-		position: relative;
-	}
-}
-.swiper__dots-box {
-	position: absolute;
-	color: #fff;
-	bottom: 30rpx;
-	right: 0;
-}
-.product-wrap {
-	width: 100%;
-	height: auto;
-	padding: 24rpx 0 0 0;
-	background-color: #ffffff;
-	border-bottom: 20rpx solid #f7f7f7;
-	.productRemarks {
-		height: 48rpx;
-		width: 100%;
-		float: left;
-		line-height: 48rpx;
-		font-size: 24rpx;
-		color: #999999;
-		text-align: left;
-	}
-	.wrap-top {
-		width: 702rpx;
-		padding: 0 24rpx;
-		height: auto;
-		float: left;
-		padding-bottom: 20rpx;
-		border-bottom: 1px solid #f8f8f8;
-		&.none {
-			.p-title {
-				color: #999999;
-			}
-		}
-		.p-title {
-			width: 100%;
-			height: auto;
-			float: left;
-			position: relative;
-			.p-title-name {
-				width: 602rpx;
-				height: auto;
-				float: left;
-				line-height: 48rpx;
-				font-size: $font-size-28;
-				color: $text-color;
-				-o-text-overflow: ellipsis;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				word-break: break-all;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
-				overflow: hidden;
-				&.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: 6rpx;
-			}
-			.p-title-share {
-				width: 96rpx;
-				height: 96rpx;
-				position: absolute;
-				right: 0;
-				text-align: center;
-				color: #999999;
-				font-size: $font-size-24;
-				box-sizing: border-box;
-				display: block;
-				background: transparent;
-				border-radius: 0;
-				border: 0;
-				margin: 0;
-				padding: 8rpx 0;
-				z-index: 20;
-				.icon-fenxiang1 {
-					font-size: $font-size-34;
-				}
-			}
-			.tui-share-btn::after {
-				border: 0;
-			}
-		}
-		.wrap-main-text {
-			line-height: 56rpx;
-			color: #ff2a2a;
-			font-size: $font-size-26;
-			display: block;
-			float: left;
-			font-weight: normal;
-		}
-		.wrap-main-none {
-			display: block;
-			width: 256rpx;
-			height: 44rpx;
-			padding-left: 20rpx;
-			border-radius: 11rpx;
-			background: $btn-confirm;
-			float: right;
-			line-height: 44rpx;
-			color: #ffffff;
-			text-align: center;
-			font-size: $font-size-24;
-		}
-
-		.p-price-none {
-			height: 44rpx;
-			line-height: 44rpx;
-			float: left;
-			font-size: $font-size-24;
-			color: #666;
-			text-decoration: line-through;
-			margin-left: 8rpx;
-		}
-		.p-minBuy {
-			height: 44rpx;
-			line-height: 44rpx;
-			float: right;
-			padding: 0 18rpx;
-			border-radius: 22rpx;
-			background-color: #f7f7f7;
-			color: #7f7f7f;
-			font-size: 24rpx;
-			text-align: center;
-			.min-text {
-				margin: 0 6rpx;
-			}
-		}
-		.p-login {
-			height: 56rpx;
-			line-height: 56rpx;
-			color: $color-system;
-			font-size: $font-size-24;
-			&.grade {
-				.price-left {
-					float: left;
-					.none {
-						display: block;
-						font-size: $font-size-20;
-						line-height: 48rpx;
-						color: #4a4b54;
-						float: left;
-						font-weight: bold;
-						margin-left: 5rpx;
-						text {
-							letter-spacing: 4rpx;
-							font-size: $font-size-32;
-						}
-					}
-				}
-			}
-			.p-no {
-				float: left;
-				margin-right: 5rpx;
-				font-size: $font-size-28;
-				color: $text-color;
-			}
-			.p-login-btn {
-				display: block;
-				height: 44rpx;
-				padding: 0 10rpx 0 20rpx;
-				border-radius: 11rpx;
-				background: $btn-confirm;
-				float: right;
-				line-height: 44rpx;
-				color: #ffffff;
-				text-align: center;
-				font-size: $font-size-24;
-			}
-		}
-	}
-	.wrap-label {
-		float: left;
-		width: 85%;
-		box-sizing: border-box;
-		.label-a {
-			padding: 0 18rpx;
-			line-height: 32rpx;
-			font-size: $font-size-20;
-			color: $color-system;
-			text-align: center;
-			border-radius: 6rpx;
-			background: #ffe6dc;
-			margin: 0 20rpx 15rpx 0;
-			display: inline-block;
-		}
-	}
-	.wrap-top-price {
-		float: left;
-		width: 100%;
-		box-sizing: border-box;
-		.wrap-main-item {
-			width: 100%;
-			height: 56rpx;
-			.p-price {
-				height: 56rpx;
-				line-height: 56rpx;
-				float: left;
-				color: #ff2a2a;
-				font-weight: bold;
-				&.none {
-					text-decoration: line-through;
-					color: #999999;
-					font-weight: normal;
-				}
-				.txt {
-					margin: 0 2rpx;
-				}
-				.txt.sm {
-					font-size: $font-size-26;
-				}
-				.txt.big {
-					font-size: $font-size-34;
-				}
-			}
-			.p-right-price {
-				height: 56rpx;
-				line-height: 56rpx;
-				float: right;
-				color: #999999;
-				font-size: $font-size-30;
-				.none {
-					font-size: $font-size-26;
-					text-decoration: line-through;
-				}
-			}
-		}
-		.floor-item-act {
-			height: 56rpx;
-			text-align: center;
-			box-sizing: border-box;
-			float: left;
-			padding: 10rpx 0;
-			margin-left: 10rpx;
-		}
-		.floor-item-btn {
-			float: right;
-			height: 40rpx;
-			margin-top: 8rpx;
-			margin-left: 10rpx;
-			.btn {
-				line-height: 40rpx;
-				padding: 0 20rpx;
-				height: 40rpx;
-				background: $btn-confirm;
-				color: #ffffff;
-				font-size: $font-size-20;
-				border-radius: 4rpx;
-			}
-		}
-	}
-	.wrap-info {
-		float: left;
-		width: 702rpx;
-		padding: 24rpx 24rpx 0 24rpx;
-		border-bottom: 1px solid #f8f8f8;
-		.info-viewT {
-			width: 100%;
-			min-height: 40rpx;
-			font-size: $font-size-28;
-			color: $text-color;
-			line-height: 40rpx;
-			text-align: left;
-			&.none {
-				color: #999999;
-			}
-			.info-viewL {
-				min-width: 350rpx;
-				float: left;
-				margin-bottom: 24rpx;
-			}
-			.info-viewR {
-				min-width: 352rpx;
-				float: left;
-				margin-bottom: 24rpx;
-			}
-		}
-		.info-viewB {
-			width: 100%;
-			height: auto;
-		}
-		.info-f {
-			width: 50%;
-			float: left;
-			font-size: $font-size-28;
-			color: $text-color;
-			line-height: 40rpx;
-			margin-bottom: 24rpx;
-			text-align: left;
-		}
-	}
-}
-.product-seve {
-	width: 100%;
-	height: 60rpx;
-	background-color: #ffffff;
-	position: relative;
-	display: flex;
-	line-height: 60rpx;
-	.label {
-		font-size: $font-size-28;
-		color: #333333;
-	}
-	.iconfont {
-		color: #fea785;
-		margin-right: 20rpx;
-		font-size: $font-size-22;
-	}
-	.text {
-		font-size: $font-size-22;
-		color: #fea785;
-		margin-left: 10rpx;
-	}
-}
-.product-item-none {
-	min-height: 348rpx;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	border-bottom: 20rpx solid #f7f7f7;
-	box-sizing: border-box;
-	padding: 40rpx 0;
-	.none-image {
-		width: 284rpx;
-		height: 225rpx;
-	}
-	.none-text {
-		text-align: center;
-		font-size: $font-size-28;
-		color: #fea785;
-		line-height: 40rpx;
-	}
-}
-.product-supporting {
-	width: 100%;
-	height: 274rpx;
-	box-sizing: border-box;
-	padding: 30rpx 24rpx;
-	background-color: #ffffff;
-	border-bottom: 20rpx solid #f7f7f7;
-	.product-supporting-title {
-		width: 100%;
-		height: 40rpx;
-		text-align: left;
-		line-height: 40rpx;
-		font-size: $font-size-28;
-		color: #333333;
-	}
-	.product-supporting-list {
-		width: 100%;
-		height: 154rpx;
-		box-sizing: border-box;
-		padding: 13rpx 0;
-		position: relative;
-		.icon-xiayibu {
-			line-height: 154rpx;
-			display: inline-block;
-			position: absolute;
-			width: 80rpx;
-			top: 0;
-			right: 0;
-			color: #b2b2b2;
-			text-align: right;
-		}
-		.list {
-			width: 128rpx;
-			height: 128rpx;
-			margin-right: 24rpx;
-			float: left;
-			border: 1px solid #e1e1e1;
-			border-radius: 8rpx;
-			.list-image {
-				width: 100%;
-				height: 100%;
-				display: block;
-				border-radius: 8rpx;
-			}
-		}
-	}
-}
-.return-instructions {
-	padding: 0 24rpx;
-	border-bottom: 20rpx solid #f7f7f7;
-}
-.product-parameter {
-	width: 702rpx;
-	height: 90rpx;
-	padding: 0 24rpx;
-	background-color: #ffffff;
-	position: relative;
-	border-bottom: 20rpx solid #f7f7f7;
-	&.coupon {
-		.title {
-			color: #f94b4b;
-		}
-		.icon-xiayibu {
-			color: #f94b4b;
-		}
-		.coupon {
-			float: right;
-			box-sizing: border-box;
-			padding: 29rpx 0;
-			padding-right: 35rpx;
-			.tags {
-				height: 32rpx;
-				box-sizing: border-box;
-				border-radius: 8rpx;
-				background-color: #fff1eb;
-				line-height: 28rpx;
-				color: #f94b4b;
-				text-align: center;
-				display: inline-block;
-				padding: 0 10rpx;
-				font-size: $font-size-20;
-				border: 1px solid #f94b4b;
-				float: right;
-				margin: 0 6rpx;
-			}
-		}
-	}
-	.title {
-		line-height: 90rpx;
-		display: inline-block;
-		float: left;
-		font-size: $font-size-28;
-		color: #666666;
-	}
-	.name {
-		line-height: 90rpx;
-		display: inline-block;
-		float: left;
-		font-size: $font-size-28;
-		color: $text-color;
-		padding-right: 48rpx;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		text-align: right;
-	}
-	.icon-xiayibu {
-		line-height: 90rpx;
-		display: inline-block;
-		position: absolute;
-		width: 48rpx;
-		top: 0;
-		right: 0;
-		color: #b2b2b2;
-	}
-}
-.product-supplier {
-	width: 100%;
-	height: 174rpx;
-	padding: 30rpx 24rpx;
-	box-sizing: border-box;
-	background-color: #ffffff;
-	position: relative;
-	box-sizing: border-box;
-	border-bottom: 20rpx solid #f7f7f7;
-	.logo {
-		width: 128rpx;
-		height: 92rpx;
-		float: left;
-		border: 1px solid #efefef;
-		border-radius: 6rpx;
-		image {
-			width: 100%;
-			height: 100%;
-			display: block;
-			border-radius: 6rpx;
-		}
-	}
-	.main {
-		width: 470rpx;
-		height: 92rpx;
-		float: left;
-		margin-left: 20rpx;
-		.name {
-			width: 100%;
-			line-height: 46rpx;
-			float: left;
-			font-size: $font-size-28;
-			color: $text-color;
-			float: right;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			text-align: left;
-		}
-		.massgs {
-			width: 100%;
-			line-height: 46rpx;
-			float: left;
-			font-size: $font-size-24;
-			color: #999999;
-			.label {
-				float: left;
-			}
-			.p-stars {
-				float: left;
-				margin-left: 20rpx;
-			}
-			.acount {
-				float: right;
-				text {
-					color: $color-system;
-				}
-			}
-		}
-	}
-
-	.icon-xiayibu {
-		line-height: 154rpx;
-		display: inline-block;
-		position: absolute;
-		width: 48rpx;
-		top: 0;
-		right: 0;
-		color: #b2b2b2;
-	}
-}
-.product-details {
-	width: 100%;
-	background: #ffffff;
-	border-bottom: 20rpx solid #f7f7f7;
-	&.recommend {
-		background-color: #f7f7f7;
-		border-bottom: none;
-		.title {
-			.title-tab {
-				background-color: #f7f7f7;
-				color: $text-color;
-			}
-		}
-	}
-	.product-details-image {
-		width: 100%;
-		min-height: 856rpx;
-		box-sizing: border-box;
-		padding: 0 24rpx;
-		.product-details-table {
-			width: 100%;
-			min-height: 160rpx;
-			border: 1px solid #e1e1e1;
-			border-radius: 10rpx;
-			.ladder-tr {
-				display: flex;
-				width: 100%;
-				justify-content: center;
-				height: 80rpx;
-				align-items: center;
-				border-bottom: 1px solid #e1e1e1;
-				&:last-child {
-					border-bottom: none;
-				}
-				.ladder-item-td {
-					height: 80rpx;
-					justify-content: center;
-					text-align: center;
-					box-sizing: border-box;
-					padding: 10rpx;
-					float: left;
-					.te-text {
-						line-height: 28rpx;
-						font-size: $font-size-24;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						word-break: break-all;
-						-webkit-box-orient: vertical;
-						-webkit-line-clamp: 2;
-						overflow: hidden;
-						color: #999999;
-						&.last {
-							width: 60%;
-							float: left;
-						}
-					}
-					.te-copy {
-						width: 40%;
-						float: right;
-						font-size: $font-size-24;
-						padding-top: 10rpx;
-						.clipboard {
-							width: 84rpx;
-							height: 36rpx;
-							background: #4688fa;
-							text-align: center;
-							font-size: $font-size-24;
-							color: #ffffff;
-							border-radius: 18rpx;
-							line-height: 36rpx;
-							display: inline-block;
-						}
-					}
-					&.th {
-						display: flex;
-						height: 80rpx;
-						align-items: center;
-						line-height: 80rpx;
-						font-size: 26rpx;
-						color: #666;
-					}
-					&:nth-child(1) {
-						width: 25%;
-						border-right: 1px solid #e1e1e1;
-					}
-					&:nth-child(2) {
-						width: 35%;
-						border-right: 1px solid #e1e1e1;
-					}
-					&:nth-child(3) {
-						width: 40%;
-					}
-				}
-			}
-		}
-		.qualificationImg-image {
-			width: 100%;
-			height: 856rpx;
-			display: block;
-		}
-	}
-	.product-rich-text-none {
-		box-sizing: border-box;
-		padding: 0 24rpx;
-		text-align: left;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 60rpx;
-		&.bold {
-			font-weight: bold;
-			color: #333333;
-		}
-	}
-	.content-none {
-		width: 100%;
-		height: 80rpx;
-		line-height: 80rpx;
-		text-align: left;
-		font-size: $font-size-26;
-		color: #999999;
-		box-sizing: border-box;
-		padding: 0 24rpx;
-	}
-	.title {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 0 24rpx;
-		.title-tab {
-			width: 100%;
-			height: 100rpx;
-			background: #fff;
-			z-index: 10;
-			font-size: $font-size-30;
-			text-align: left;
-			color: $text-color;
-			line-height: 100rpx;
-			font-weight: 600;
-		}
-		.title-msg {
-			width: 100%;
-			height: 236rpx;
-			padding: 18rpx;
-			background-color: rgba(225, 86, 22, 0.1);
-			color: $color-system;
-			box-sizing: border-box;
-			margin-bottom: 30rpx;
-			.tit {
-				line-height: 46rpx;
-				font-size: $font-size-24;
-				text-align: left;
-			}
-			.txt {
-				line-height: 38rpx;
-				font-size: $font-size-20;
-				text-align: justify;
-			}
-		}
-	}
-	.content {
-		width: 100%;
-		background-color: #ffffff;
-	}
-}
-.isLower {
-	width: 100%;
-	height: 116rpx;
-	line-height: 116rpx;
-	text-align: center;
-	color: #000000;
-	font-size: $font-size-32;
-	font-weight: bold;
-}
-.bottom-btn {
-	width: 100%;
-	height: 100rpx;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	background: #ffffff;
-	z-index: 99;
-	.bottom-le {
-		width: 300rpx;
-		height: 100rpx;
-		padding: 10rpx 20rpx 10rpx 0;
-		float: left;
-		box-sizing: border-box;
-		.item-bt {
-			width: 80rpx;
-			height: 100%;
-			margin-right: 15rpx;
-			display: flex;
-			float: left;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			font-size: $font-size-22;
-			color: $text-color;
-			line-height: 34rpx;
-			position: relative;
-			.animation-num {
-				font-size: $font-size-32;
-				color: #ff2a2a;
-				position: absolute;
-				top: -12rpx;
-				right: 4rpx;
-				font-weight: bold;
-			}
-			.animation {
-				animation: showAmnation 2.2s ease-in-out both;
-			}
-			.restion {
-				animation: hideAmnation 1s ease-in-out both;
-			}
-			.icon-num {
-				position: absolute;
-				right: -12rpx;
-				top: -5rpx;
-			}
-			.icon-num.goleft {
-				right: 2rpx;
-			}
-			&:last-child {
-				margin-right: 0;
-			}
-			image {
-				width: 44rpx;
-				height: 44rpx;
-			}
-			button.contact-btn {
-				width: 100%;
-				height: 100%;
-				margin: 0;
-				padding: 0;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				box-sizing: border-box;
-				font-size: $font-size-24;
-				text-align: center;
-				text-decoration: none;
-				line-height: 34rpx;
-				border-radius: 0;
-				-webkit-tap-highlight-color: transparent;
-				overflow: hidden;
-				color: $text-color;
-				background-color: #ffffff;
-			}
-		}
-	}
-	.bottom-ri {
-		width: 450rpx;
-		height: 100%;
-		float: right;
-		display: flex;
-		box-sizing: border-box;
-		padding: 13rpx 20rpx 13rpx 0;
-		.btn {
-			flex: 1;
-			width: 200rpx;
-			line-height: 80rpx;
-			text-align: center;
-			font-size: $font-size-24;
-			color: #ffffff;
-		}
-		.btn-cart {
-			background-color: #ffe6dc;
-			color: $color-system;
-			border-radius: 42rpx 0 0 42rpx;
-		}
-		.btn-cart.disabled {
-			background-color: #e1e1e1;
-			color: #ffffff;
-		}
-		.btn-bay {
-			background: linear-gradient(to right, #f28f31 0%, #ff5b00 100%);
-			border-radius: 0 42rpx 42rpx 0;
-		}
-		.btn-bay.disabled {
-			background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
-		}
-	}
-}
-.uni-badge--small {
-	-webkit-transform: scale(0.8);
-	-ms-transform: scale(0.8);
-	transform: scale(0.8);
-	-webkit-transform-origin: center center;
-	-ms-transform-origin: center center;
-	transform-origin: center center;
-}
-.uni-badge {
-	font-family: 'Helvetica Neue', Helvetica, sans-serif;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	font-size: 12px;
-	line-height: 1;
-	display: inline-block;
-	padding: 3px 6px;
-	color: #333;
-	border-radius: 100px;
-	background-color: #f1f1f1;
-}
-.uni-badge-error {
-	color: #fff;
-	background-color: #dd524d;
-}
-.product-topnav {
-	width: 100%;
-	height: 174rpx;
-	box-sizing: border-box;
-	background: #ffffff;
-	z-index: 990;
-	position: fixed;
-	opacity: 1;
-	left: 0;
-	&.fixed {
-		animation: showFixedColor 0.1s ease-in-out both;
-	}
-	&.none {
-		animation: hideFixedColor 0.1s ease-in-out both;
-	}
-	.navbar {
-		width: 100%;
-		height: 60rpx;
-		box-sizing: border-box;
-		padding: 0 24rpx;
-		display: flex;
-		.nav-item {
-			display: flex;
-			flex: 1;
-			justify-content: center;
-			align-items: center;
-			height: 60rpx;
-			font-size: $font-size-28;
-			color: $text-color;
-			position: relative;
-			float: left;
-			position: relative;
-			.line {
-				width: 60rpx;
-				height: 2px;
-				border-radius: 1px;
-				background: #ffffff;
-				position: absolute;
-				bottom: 0;
-				left: 50%;
-				margin-left: -30rpx;
-			}
-			&.current {
-				color: $color-system;
-				.line {
-					background: $color-system;
-				}
-			}
-		}
-	}
-	.search-input {
-		width: 100%;
-		height: 114rpx;
-		padding: 24rpx;
-		box-sizing: border-box;
-		.gosearch-btn {
-			width: 100%;
-			height: 100%;
-			border-radius: 40rpx;
-			margin: 0 auto;
-			font-size: 26rpx;
-			line-height: 66rpx;
-			color: #b2b2b2;
-			position: relative;
-			box-sizing: border-box;
-			padding-left: 66rpx;
-			&.fixed {
-				background: rgba(70, 70, 70, 0.1);
-			}
-			&.none {
-				background: rgba(70, 70, 70, 0.1);
-			}
-			.search-icon {
-				width: 66rpx;
-				height: 66rpx;
-				position: absolute;
-				left: 0;
-				top: 2rpx;
-				text-align: center;
-				line-height: 66rpx;
-				.icon-iconfonticonfontsousuo1 {
-					margin: 0 6rpx;
-					font-size: $font-size-34;
-					color: #b2b2b2;
-					z-index: 10;
-				}
-			}
-			.search-text {
-				font-size: $font-size-24;
-				line-height: 66rpx;
-				color: #b2b2b2;
-			}
-		}
-	}
-}
-
-@keyframes showFixedColor {
-	0% {
-		background: rgba(255, 255, 255, 0);
-	}
-	50% {
-		background: rgba(255, 255, 255, 0.5);
-	}
-	100% {
-		background: rgba(255, 255, 255, 1);
-	}
-}
-@keyframes hideFixedColor {
-	0% {
-		background: rgba(255, 255, 255, 1);
-	}
-	50% {
-		background: rgba(255, 255, 255, 0.5);
-	}
-	100% {
-		background: rgba(255, 255, 255, 0);
-	}
-}
-/* 加入购物模态层*/
-@keyframes showPopup {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-@keyframes hidePopup {
-	0% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0;
-	}
-}
-@keyframes showLayer {
-	0% {
-		transform: translateY(0);
-	}
-	100% {
-		transform: translateY(-100%);
-	}
-}
-@keyframes hideLayer {
-	0% {
-		transform: translateY(-100%);
-	}
-	100% {
-		transform: translateY(0);
-	}
-}
-@keyframes showAmnation {
-	0% {
-		top: -12rpx;
-		opacity: 0;
-	}
-	50% {
-		top: -60rpx;
-		opacity: 1;
-	}
-	100% {
-		top: -100rpx;
-		opacity: 0;
-	}
-}
-@keyframes hideAmnation {
-	0% {
-		top: -100rpx;
-		opacity: 0;
-	}
-	100% {
-		top: -12rpx;
-		opacity: 0;
-	}
-}
-.tui-popup-box {
-	position: relative;
-	box-sizing: border-box;
-	min-height: 220rpx;
-	padding: 40rpx 24rpx 0 24rpx;
-	.tui-popup-close {
-		width: 90rpx;
-		height: 90rpx;
-		position: absolute;
-		right: 0;
-		top: 24rpx;
-		line-height: 90rpx;
-		text-align: center;
-		color: #b2b2b2;
-		.icon-iconfontguanbi {
-			font-size: $font-size-40;
-		}
-	}
-	.title {
-		font-size: $font-size-34;
-		color: $text-color;
-		line-height: 88rpx;
-		text-align: center;
-		float: left;
-		width: 100%;
-		height: 88rpx;
-		font-weight: bold;
-	}
-	.tui-popup-main {
-		width: 100%;
-		float: left;
-		&.coupon {
-			padding-bottom: 40rpx;
-			.coupon-empty {
-				width: 100%;
-				height: 600rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: column;
-				position: fixed;
-				background: $bg-color;
-				.empty-container-image {
-					width: 150rpx;
-					height: 150rpx;
-					margin-bottom: 0;
-					margin-top: 0;
-				}
-				.error-text {
-					font-size: $font-size-28;
-					color: #999999;
-					line-height: 88rpx;
-				}
-			}
-		}
-		.tui-popup-scroll {
-			width: 100%;
-			height: 600rpx;
-			.coupon-list {
-				width: 100%;
-				height: 200rpx;
-				margin-top: 24rpx;
-				box-sizing: border-box;
-				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
-				background-size: cover;
-				&:last-child {
-					margin-bottom: 24rpx;
-				}
-				.list-cell-le {
-					width: 224rpx;
-					height: 100%;
-					box-sizing: border-box;
-					padding: 37rpx 0;
-					float: left;
-					.coupon-maxMoney {
-						width: 100%;
-						height: 78rpx;
-						line-height: 78rpx;
-						font-size: 56rpx;
-						color: #ffffff;
-						text-align: center;
-						.small {
-							font-size: $font-size-24;
-						}
-					}
-					.coupon-minMoney {
-						width: 100%;
-						height: 33rpx;
-						line-height: 33rpx;
-						font-size: $font-size-24;
-						color: #ffffff;
-						text-align: center;
-					}
-				}
-				.list-cell-ri {
-					width: 478rpx;
-					height: 100%;
-					box-sizing: border-box;
-					padding: 20rpx 24rpx 0 24rpx;
-					float: right;
-					.list-cell-top {
-						width: 100%;
-						height: 121rpx;
-						float: left;
-						border-bottom: 1px solid #e1e1e1;
-						.list-cell-type {
-							width: 286rpx;
-							height: 100%;
-							float: left;
-							.list-cell-tags {
-								width: 100%;
-								height: 32rpx;
-								margin-bottom: 7rpx;
-								.tags {
-									display: inline-block;
-									padding: 0 10rpx;
-									height: 32rpx;
-									line-height: 32rpx;
-									background-color: #ffdcce;
-									color: #f94b4b;
-									font-size: $font-size-20;
-									border-radius: 8rpx;
-									text-align: center;
-									float: left;
-								}
-							}
-							.list-cell-texts {
-								width: 100%;
-								height: auto;
-								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;
-								color: #333333;
-							}
-						}
-						.list-cell-btn {
-							width: 128rpx;
-							height: 100%;
-							float: right;
-							.icon-used {
-								width: 100%;
-								height: 100%;
-								box-sizing: border-box;
-								padding-top: 28rpx;
-								.icon-used-text {
-									width: 100%;
-									text-align: center;
-									line-height: 26rpx;
-									font-size: $font-size-20;
-									color: #f94b4b;
-								}
-								.icon-used-btn {
-									width: 128rpx;
-									height: 48rpx;
-									border-radius: 28rpx;
-									line-height: 48rpx;
-									font-size: $font-size-26;
-									text-align: center;
-									&.receive {
-										background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
-										color: #ffffff;
-									}
-									&.make {
-										border: solid 1px #f94b4b;
-										color: #f94b4b;
-									}
-								}
-							}
-						}
-					}
-					.list-cell-time {
-						width: 100%;
-						height: 58rpx;
-						line-height: 58rpx;
-						text-align: left;
-						font-size: $font-size-20;
-						color: #999999;
-					}
-				}
-			}
-			&.train {
-				height: 240rpx;
-			}
-			.content-tr {
-				width: 100%;
-				min-height: 58rpx;
-				line-height: 58rpx;
-				display: flex;
-				.content-td {
-					display: flex;
-					flex: 3;
-					font-size: $font-size-26;
-					color: #999999;
-					line-height: 58rpx;
-					text-align: left;
-				}
-				.content-th {
-					display: flex;
-					flex: 7;
-					font-size: $font-size-26;
-					color: #333333;
-					line-height: 58rpx;
-					text-align: left;
-					padding-left: 10rpx;
-				}
-			}
-		}
-	}
-	.tui-shopping-main {
-		width: 100%;
-		.layer-smimg {
-			width: 114rpx;
-			height: 114rpx;
-			float: left;
-			border-radius: 10rpx;
-			margin-right: 24rpx;
-			image {
-				width: 114rpx;
-				height: 114rpx;
-				border-radius: 10rpx;
-			}
-		}
-		.layer-nunbox {
-			justify-content: space-between;
-			align-items: center;
-			width: 536rpx;
-			height: auto;
-			float: left;
-			.layer-nunbox-t {
-				width: 100%;
-				height: 44rpx;
-				position: relative;
-				display: flex;
-				margin-bottom: 10rpx;
-				.text {
-					font-size: $font-size-24;
-					line-height: 48rpx;
-					color: #999999;
-				}
-				.layer-nunbox-text {
-					line-height: 44rpx;
-					font-size: $font-size-28;
-				}
-				.number-box {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					border: 2rpx solid #ffe6dc;
-					border-radius: 30rpx;
-					height: 48rpx;
-					margin-left: 20rpx;
-					.iconfont {
-						font-size: $font-size-24;
-						padding: 0 18rpx;
-						color: #999999;
-						text-align: center;
-						line-height: 48rpx;
-						font-weight: bold;
-						background: #fef6f3;
-						&.icon-jianhao {
-							border-radius: 30rpx 0 0 30rpx;
-						}
-						&.icon-jiahao {
-							border-radius: 0 30rpx 30rpx 0;
-						}
-					}
-					.btn-input {
-						width: 62rpx;
-						height: 48rpx;
-						line-height: 48rpx;
-						background: #ffffff;
-						border-radius: 4rpx;
-						text-align: center;
-						font-size: $font-size-28;
-					}
-				}
-				.product-step {
-					position: absolute;
-					left: 45rpx;
-					bottom: 0;
-					height: 44rpx;
-					background: #ffffff;
-				}
-			}
-			.layer-nunbox-b {
-				width: 100%;
-				height: 44rpx;
-				margin-top: 13rpx;
-			}
-			.text {
-				line-height: 44rpx;
-				font-size: $font-size-28;
-				.p {
-					color: #ff2a2a;
-				}
-				.p:first-child {
-					margin-left: 30rpx;
-				}
-				.p.sm {
-					font-size: $font-size-24;
-				}
-			}
-		}
-	}
-}
-.tui-popup-btn {
-	width: 100%;
-	height: auto;
-	float: left;
-	margin-top: 24rpx;
-	.tui-button {
-		width: 100%;
-		height: 88rpx;
-		background: $btn-confirm;
-		line-height: 88rpx;
-		text-align: center;
-		color: #ffffff;
-		font-size: $font-size-28;
-		border-radius: 44rpx;
-	}
-}
-/*富文本样式*/
-rich-text.p {
-	width: 702rpx !important;
-	padding: 0 24rpx;
-	text-align: justify;
-}
-rich-text.img {
-	width: 100%;
-	height: auto;
-}
-</style>
+<template>
+	<view
+		class="product "
+		:style="{
+			paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
+			paddingTop: CustomBar + 'px'
+		}"
+	>
+		<custom-p
+			v-if="isHeaderPoduct"
+			:systeminfo="systeminfo"
+			:navbar-data="nvabarData"
+			:headerBtnPosi="headerBtnPosi"
+			:headerColor="headerColor"
+			:type="isShareType"
+			:page="backPage"
+		/>
+		<view
+			class="product-topnav"
+			id="topBar"
+			v-show="isNavbarFiexd"
+			:class="navbarFiexd"
+			:style="{ top: CustomBar - 2 + 'px' }"
+		>
+			<view class="search-input">
+				<view class="gosearch-btn" :class="navbarFiexd" @click="this.$api.navigateTo(clickPath)">
+					<view class="search-icon"><text class="iconfont icon-iconfonticonfontsousuo1"></text></view>
+					<view class="search-text">搜索商品/项目仪器</view>
+				</view>
+			</view>
+			<view class="navbar">
+				<view
+					class="nav-item tui-skeleton-fillet"
+					:class="{ current: tabCurrentIndex === 0 }"
+					@click="tabClick(0)"
+				>
+					<text>详情</text> <text class="line"></text>
+				</view>
+				<view
+					class="nav-item tui-skeleton-fillet"
+					:class="{ current: tabCurrentIndex === 1 }"
+					@click="tabClick(1)"
+				>
+					<text>服务项目</text> <text class="line"></text>
+				</view>
+				<view
+					class="nav-item tui-skeleton-fillet"
+					:class="{ current: tabCurrentIndex === 2 }"
+					@click="tabClick(2)"
+					v-if="product.qualificationImg"
+				>
+					<text>商品资质</text> <text class="line"></text>
+				</view>
+				<view
+					class="nav-item tui-skeleton-fillet"
+					:class="{ current: tabCurrentIndex === 3 }"
+					@click="tabClick(3)"
+				>
+					<text>推荐</text> <text class="line"></text>
+				</view>
+				<view
+					class="nav-item tui-skeleton-fillet"
+					:class="{ current: tabCurrentIndex === 4 }"
+					@click="tabClick(4)"
+					v-if="product.archiveId !== 0 && userInfo.userIdentity !== 3"
+				>
+					<text>相关资料</text> <text class="line"></text>
+				</view>
+			</view>
+		</view>
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		/>
+		<template v-else>
+			<view class="cart-content empty" v-if="isInvalid">
+				<view class="empty-container">
+					<image class="empty-container-image" :src="productNoneImage" mode="aspectFit"></image>
+					<text class="error-text">商品已失效，去商城逛逛别的吧~</text>
+					<view class="login-btn" @click="goIndex">去商城</view>
+				</view>
+			</view>
+			<view class="container-product tui-skeleton" v-else>
+				<view class="container-product-main">
+					<view class="product-top">
+						<view class="banner-section">
+							<view class="cm-product-type" v-if="product.productType == 2">医疗器械</view>
+							<view class="cm-product-cover" v-if="product.appletsActType === 1"></view>
+							<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
+								<swiper
+									class="banner tui-banner tui-skeleton-rect"
+									@change="swiperChange"
+									:duration="800"
+									:autoplay="false"
+									:circular="true"
+								>
+									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
+										<image :src="item" @click="previewImg(index)" class="product-img" />
+									</swiper-item>
+								</swiper>
+								<view class="swiper__dots-box">
+									<tui-tag
+										padding="12rpx 24rpx"
+										type="translucent"
+										shape="circleLeft"
+										size="32rpx"
+										:scaleMultiple="0.82"
+										originRight
+									>
+										{{ current + 1 }}/{{ productImage && productImage.length }}
+									</tui-tag>
+								</view>
+							</uni-swiper-dot>
+						</view>
+						<view class="product-wrap clearfix">
+							<view class="wrap-top" :class="goodsData.isNoneDisabled ? 'none' : ''">
+								<view class="wrap-top-price">
+									<cm-price
+										v-if="isRequest"
+										:product="product"
+										:userIdentity="userIdentity"
+										:shopID="shopID"
+										:promotions="product.promotions"
+										:ladderPriceList="ladderPriceList"
+									/>
+								</view>
+								<view class="p-title tui-skeleton-fillet">
+									<view class="mclap-tag" v-if="product.beautyActFlag == '1'">美博会</view>
+									<view class="p-title-name" :class="product.beautyActFlag == '1' ? 'indent' : ''">
+										{{ product.name == undefined ? '' : product.name }}
+									</view>
+									<button
+										open-type="share"
+										class="p-title-share tui-share-position"
+										@tap="onShare"
+										v-if="userInfo.userIdentity !== 1"
+									>
+										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
+										<view class="">分享</view>
+									</button>
+									<button class="p-title-share tui-share-position" @click="handleShare" v-else>
+										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
+										<view class="">分享</view>
+									</button>
+								</view>
+								<view class="wrap-label" v-if="product.tagsList && product.tagsList.length > 0">
+									<view
+										class="label-a tui-skeleton-fillet"
+										v-for="(label, index) in product.tagsList"
+										:key="index"
+									>
+										{{ label }}
+									</view>
+								</view>
+								<view class="product-seve" v-if="hasLogin">
+									<text class="label">采美承诺：</text>
+									<text class="iconfont icon-dui tui-skeleton-rect">
+										<text class="text">无忧退货</text>
+									</text>
+									<text class="iconfont icon-dui tui-skeleton-rect">
+										<text class="text">快速退款</text>
+									</text>
+									<text class="iconfont icon-dui tui-skeleton-rect">
+										<text class="text">正品保证</text>
+									</text>
+								</view>
+								<view
+									class="productRemarks"
+									v-if="product.productRemarks != '' && product.productRemarks != null"
+								>
+									备注:{{ product.productRemarks }}
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="product-item-none" v-if="goodsData.isNoneDisabled">
+						<image class="none-image" :src="productNoneImage" mode=""></image>
+						<view class="none-text">此商品已{{ goodsData.disabledText }}，请浏览以下推荐商品~</view>
+						<view class="none-text">咨询类似商品，请联系客服!</view>
+					</view>
+					<!-- 选择规格 -->
+					<view class="product-parameter" v-if="isShowButton || userIdentity === 1" @click="showPopup(3)">
+						<text class="title">选择：</text> <text class="name">共{{ skusCount }}种规格可选</text>
+						<text class="iconfont icon-xiayibu"></text>
+					</view>
+					<!-- 参数 -->
+					<view class="product-parameter" @click="showPopup(0)" v-if="!goodsData.isNoneDisabled">
+						<text class="title">参数：</text> <text class="name">品牌 分类...</text>
+						<text class="iconfont icon-xiayibu"></text>
+					</view>
+					<!-- 特殊商品退货须知 -->
+					<view class="return-instructions" v-if="returnGoodsStutas">
+						<cm-return-instructions :content="helpContent"></cm-return-instructions>
+					</view>
+					<!-- 配套商品 -->
+					<view
+						class="product-supporting"
+						v-if="!goodsData.isNoneDisabled && isShowSupportingList && supportingList.length > 0"
+						@click.stop="handleSupporting"
+					>
+						<view class="product-supporting-title">配套商品({{ supportingNum }})</view>
+						<view class="product-supporting-list">
+							<view
+								class="list"
+								v-for="(supporting, index) in supportingList"
+								:key="index"
+								v-if="index < 4"
+							>
+								<image class="list-image" :src="supporting.image" mode=""></image>
+							</view>
+							<text class="iconfont icon-xiayibu"></text>
+						</view>
+					</view>
+					<!-- 优惠券 -->
+					<view
+						class="product-parameter coupon"
+						v-if="isShowButton && productCoupon.length > 0"
+						@click="showPopup(2)"
+					>
+						<text class="title">优惠券：</text>
+						<view class="coupon">
+							<text class="tags" v-for="(coupon, index) in productCoupon.slice(0, 3)" :key="index">
+								满{{ coupon.touchPrice }}减{{ coupon.couponAmount }}
+							</text>
+						</view>
+						<text class="iconfont icon-xiayibu"></text>
+					</view>
+					<!-- 仪器培训方案 -->
+					<view
+						class="product-parameter"
+						@click="showPopup(1)"
+						v-if="product.commodityType == 2 && product.trainingMethod"
+					>
+						<text class="title">培训方案：</text>
+						<text class="name">{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}</text>
+						<text class="iconfont icon-xiayibu"></text>
+					</view>
+					<!-- 供应商 -->
+					<view class="product-supplier" @click="goSupplier">
+						<view class="logo">
+							<img
+								:src="
+									shop.logo
+										? shop.logo
+										: 'https://static.caimei365.com/app/img/icon/icon-shoplogo.png'
+								"
+								alt=""
+							/>
+						</view>
+						<view class="main">
+							<view class="name">{{ shop.name }}</view>
+							<view class="massgs">
+								<view class="label">满意度:</view>
+								<view class="p-stars">
+									<uni-stars
+										:stars="6"
+										:iconClass="iconClass"
+										:iconColor="iconColor"
+										:fontSize="36"
+										:widthInfo="176"
+									></uni-stars>
+								</view>
+								<view class="acount">
+									<text>{{ shop.normalNum }}</text> 件商品
+								</view>
+							</view>
+						</view>
+						<view class="right" v-if="!isShowCaimeiShop"><text class="iconfont icon-xiayibu"></text></view>
+					</view>
+				</view>
+				<!-- 商品详情 -->
+				<view v-show="tabCurrentIndex !== 4">
+					<view class="product-details product-details0">
+						<view class="title"><view class="title-tab">商品详情</view></view>
+						<view class="content tui-banner product-rich-text tui-skeleton-rect">
+							<template v-if="!goodsData.isNoneDisabled && product.productDetail.detailInfo">
+								<mp-html :content="html" :tag-style="tagStyle" />
+							</template>
+							<view class="product-rich-text-none" v-else>暂无商品信息</view>
+						</view>
+					</view>
+					<!-- 服务项目 -->
+					<view class="product-details service product-details1">
+						<view class="title"><view class="title-tab">服务项目</view></view>
+						<view
+							class="content service"
+							v-if="product.productDetail.orderInfo || product.productDetail.serviceInfo"
+						>
+							<cm-service :product="product.productDetail" v-if="isRequest" />
+						</view>
+						<view class="content-none" v-else><text>暂无服务项目</text></view>
+					</view>
+					<!-- 商品资质 -->
+					<view class="product-details qualifications product-details2" v-if="product.qualificationImg">
+						<view class="title"><view class="title-tab">商品资质</view></view>
+						<view class="product-details-image">
+							<view class="product-details-table clearfix" v-if="product.qualificationNo">
+								<view class="ladder-tr">
+									<view class="ladder-item-td th">证书编号</view>
+									<view class="ladder-item-td th">产品名称</view>
+									<view class="ladder-item-td th">详情</view>
+								</view>
+								<view class="ladder-tr">
+									<view class="ladder-item-td">
+										<view class="te-text">{{ product.qualificationNo }}</view>
+									</view>
+									<view class="ladder-item-td">
+										<view class="te-text">{{ product.productName }}</view>
+									</view>
+									<view class="ladder-item-td">
+										<view class="te-text last">{{ product.qualificationLink }}</view>
+										<view class="te-copy">
+											<text class="clipboard" @click.stop="clipboard(product.qualificationLink)">
+												复制
+											</text>
+										</view>
+									</view>
+								</view>
+							</view>
+							<image
+								class="qualificationImg-image"
+								:src="product.qualificationImg"
+								mode="aspectFill"
+								@click="previewImg1(product.qualificationImg)"
+							></image>
+						</view>
+					</view>
+					<!-- 相关推荐 -->
+					<view class="product-details recommend product-details3">
+						<view class="title"><view class="title-tab">相关推荐</view></view>
+						<view class="content hot">
+							<cm-recommend
+								:query-productid="product.productId"
+								:query-type="product.recommendType"
+								v-if="isRequest"
+							/>
+						</view>
+					</view>
+				</view>
+				<!-- 相关资料 -->
+				<view class="product-details recommend product-details4" v-if="tabCurrentIndex === 4">
+					<cm-product-doc
+						@previewImage="changePreViewImageStatus"
+						:archiveId="product.archiveId"
+						:userId="userId"
+					/>
+				</view>
+				<!-- 优惠券 -->
+				<tui-bottom-popup :radius="true" :show="popupShow2" @close="hidePopup(2)">
+					<view class="tui-popup-box clearfix">
+						<view class="title">优惠券</view>
+						<view class="tui-popup-close" @click="hidePopup(2)">
+							<text class="iconfont icon-iconfontguanbi"></text>
+						</view>
+						<view class="tui-popup-tabs">
+							<coupon-tabs
+								:tabs="navbar"
+								:currentTab="currentTab > 2 ? 0 : currentTab"
+								@change="couponChange"
+								:itemWidth="100 / navbar.length + '%'"
+								selectedColor="#FF5B00"
+								sliderBgColor="#FF5B00"
+							/>
+						</view>
+						<div class="tui-popup-main coupon">
+							<scroll-view class="tui-popup-scroll" scroll-y="true">
+								<view class="coupon-empty" v-if="isCouponEmpty">
+									<image
+										class="empty-container-image"
+										:src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"
+									></image>
+									<text class="error-text">暂无可领的优惠券~</text>
+								</view>
+								<template v-else>
+									<view
+										v-for="(coupon, index) in productCouponList"
+										:key="index"
+										:id="coupon.couponId"
+										class="coupon-list"
+									>
+										<view class="list-cell-le">
+											<view class="coupon-maxMoney">
+												<text class="small">￥</text> {{ coupon.couponAmount }}
+											</view>
+											<view class="coupon-minMoney">满{{ coupon.touchPrice }}可用</view>
+										</view>
+										<view class="list-cell-ri">
+											<view class="list-cell-top">
+												<view class="list-cell-type">
+													<view class="list-cell-tags">
+														<template v-if="coupon.moneyCouponFlag == 1">
+															<text class="tags" v-if="coupon.moneyCouponType == 1">
+																意向{{ coupon.couponType | TypeFormat }}
+															</text>
+															<text class="tags" v-else>
+																定向{{ coupon.couponType | TypeFormat }}
+															</text>
+														</template>
+														<template v-else>
+															<text class="tags">
+																{{ coupon.couponType | TypeFormat }}
+															</text>
+														</template>
+													</view>
+													<view class="list-cell-texts">
+														<text v-if="coupon.couponType == 0">
+															{{
+																coupon.productType && coupon.productType == 1
+																	? '全商城商品通用'
+																	: '仅可购买指定商品'
+															}}
+														</text>
+														<text v-if="coupon.couponType == 1">
+															{{
+																coupon.categoryType == 1
+																	? '仅限购买产品类商品'
+																	: '仅限购买仪器类商品'
+															}}
+														</text>
+														<text v-if="coupon.couponType == 3">
+															仅限购买店铺【{{ coupon.shopName }}】的商品
+														</text>
+														<text v-if="coupon.couponType == 4 || coupon.couponType == 2">
+															全商城商品通用
+														</text>
+													</view>
+												</view>
+												<view class="list-cell-btn">
+													<view class="icon-used">
+														<template v-if="coupon.couponBtnType == 0">
+															<template v-if="coupon.couponPayWay == 2">
+																<view class="icon-used-text">
+																	{{ coupon.moneyCouponPrice }}采美豆
+																</view>
+																<view
+																	class="icon-used-btn receive"
+																	@click="toDeductCoupon(coupon)"
+																>
+																	抵扣
+																</view>
+															</template>
+															<template v-else-if="coupon.couponPayWay == 1">
+																<view class="icon-used-text">购买</view>
+																<view
+																	class="icon-used-btn receive"
+																	@click="toPayCoupon(coupon)"
+																>
+																	￥{{ coupon.moneyCouponPrice }}
+																</view>
+															</template>
+															<template v-else>
+																<view
+																	class="icon-used-btn receive"
+																	@click="receiveCoupon(coupon)"
+																>
+																	领取
+																</view>
+															</template>
+														</template>
+														<view
+															class="icon-used-btn make"
+															v-if="coupon.couponBtnType == 1"
+														>
+															已领取
+														</view>
+													</view>
+												</view>
+											</view>
+											<view class="list-cell-time">
+												{{ coupon.startDate }} - {{ coupon.endDate }}
+											</view>
+										</view>
+									</view>
+								</template>
+							</scroll-view>
+						</div>
+					</view>
+				</tui-bottom-popup>
+				<!-- 培训方案 -->
+				<tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
+					<view class="tui-popup-box clearfix">
+						<view class="title">培训方案</view>
+						<div class="tui-popup-main">
+							<scroll-view class="tui-popup-scroll train" scroll-y="true">
+								<view class="content-tr">
+									<view class="content-td">培训方式：</view>
+									<view class="content-th">
+										{{ product.trainingMethod == 1 ? '线上培训' : '线下培训' }}
+									</view>
+								</view>
+								<view class="content-tr">
+									<view class="content-td">培训费用：</view>
+									<view class="content-th">
+										{{ product.trainingType == 1 ? '￥' + product.trainingFee : '售价已包含' }}
+									</view>
+								</view>
+							</scroll-view>
+						</div>
+						<view
+							class="tui-right-flex tui-popup-btn"
+							:style="{ paddingBottom: isIphoneX ? '68rpx' : '.34rpx' }"
+						>
+							<view class="tui-flex-1"><view class="tui-button" @click="hidePopup(1)">收起</view></view>
+						</view>
+					</view>
+				</tui-bottom-popup>
+				<!-- 底部按钮 -->
+				<view class="menu" v-if="isShowButton">
+					<view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+						<view class="bottom-le">
+							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
+								<image src="../../static/icon-home-active@3x.png"></image> <text>首页</text>
+							</view>
+							<view class="item-bt" @click="handleCollection">
+								<image
+									:src="
+										collectionType
+											? StaticUrl + 'icon/icon-collection@2x.png'
+											: StaticUrl + 'icon/icon-collection-none@2x.png'
+									"
+								></image>
+								<text>{{ collectionType ? '已收藏' : '收藏' }}</text>
+							</view>
+							<view class="item-bt" @click="buyProductCart()">
+								<image src="https://static.caimei365.com/app/img/icon/icon-cart-active@3x.png"></image>
+								<text>购物车</text>
+								<text
+									v-if="hasLogin && bottomCartNumber > 0"
+									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
+									:class="[bottomCartNumber < 10 ? 'goleft' : '']"
+								>
+									{{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
+								</text>
+								<view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
+							</view>
+						</view>
+						<view class="bottom-ri">
+							<button
+								:disabled="goodsData.disabled"
+								class="btn btn-cart"
+								:class="[goodsData.disabled ? 'disabled' : '']"
+								@tap.stop="btnGetConfirm('add')"
+							>
+								加入购物车
+							</button>
+							<button
+								:disabled="goodsData.disabled"
+								class="btn btn-bay"
+								:class="[goodsData.disabled ? 'disabled' : '']"
+								@tap.stop="btnGetConfirm('buy')"
+							>
+								立即购买
+							</button>
+						</view>
+					</view>
+				</view>
+				<!-- 侧边 -->
+				<scroll-top :isScrollTop="isScrollTop" :bottom="200" v-show="tabCurrentIndex !== 3"></scroll-top>
+			</view>
+		</template>
+		<!-- 商品参数 -->
+		<cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product" />
+		<!-- 选择规格弹窗 -->
+		<cm-unit-popup
+			v-if="popupShow3"
+			:popupShow="popupShow3"
+			:skuProduct="skuProduct"
+			:productCoupon="productCoupon"
+			:type="unitPopupType"
+			:btnType="btnType"
+			:goodsData="goodsData"
+			@buyConfirm="handleBuyConfirm"
+			@skuClick="handleSkuClick"
+		/>
+		<!-- 弹窗提示 -->
+		<tui-modal
+			:show="modal"
+			@click="handleClick"
+			@cancel="hideMobel"
+			:content="contentModalText"
+			:button="modalButton"
+			color="#333"
+			:size="32"
+			shape="circle"
+			:maskClosable="false"
+		/>
+		<!-- 商品详情可见度弹窗提醒 -->
+		<cm-product-modal
+			v-if="showModal"
+			:showModal="showModal"
+			:commodityDetailsFlag="product.commodityDetailsFlag"
+			:isShareType="isShareType"
+			:userIdentity="userIdentity"
+			:firstClubType="firstClubType"
+		/>
+		<!-- 供应商收集用户信息弹窗 -->
+		<cmRossPopup v-if="showRossHtml" :popupShow="showRossHtml" :advertisement="advertisement" />
+
+		<!-- 分享弹窗 -->
+		<cm-share-popup ref="sharePopup" :data="posterData" type="product" />
+
+		<!-- 协销名片 -->
+		<cm-seller-modal :suid="suid" />
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import customP from './components/cm-header.vue' //自定义导航
+import cmPrice from './components/cm-price.vue' //价格显示
+import cmAttributes from './components/cm-attributes.vue' //规格信息
+import cmRecommend from './components/recommend' //相关推荐
+import cmParameter from './components/cm-parameter' //相关参数
+import cmService from './components/cm-service' //服务项目
+import cmProductDoc from './components/cm-product-doc.vue'
+import cmProductModal from './components/cm-product-modal.vue'
+import cmPramsPopup from './components/cm-prams-popup.vue'
+import cmUnitPopup from './components/cm-unit-popup.vue'
+import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
+import cmRossPopup from '@/components/cm-module/cm-ross/cm-ross-popup'
+import cmReturnInstructions from './components/cm-return-instructions.vue'
+import authorize from '@/common/config/authorize.js'
+import wxLogin from '@/common/config/wxLogin.js'
+import { debounce } from '@/common/config/common.js'
+import payMixins from '@/mixins/payMixins.js'
+import proMixins from './mixins/proMixins.js'
+import cmSrsMixins from '@/utils/cmSrsMixins.js'
+import thorui from '@/components/clipboard/clipboard.thorui.js'
+import cmSharePopup from '@/components/cm-share-popup/cm-share-popup.vue'
+import cmSellerModal from '@/components/cm-share-popup/cm-seller-modal.vue'
+import { queryParse } from './mixins/share.helper.js'
+var isPreviewImg
+export default {
+	mixins: [payMixins, proMixins, cmSrsMixins],
+	components: {
+		customP,
+		cmRecommend,
+		cmPrice,
+		cmAttributes,
+		cmParameter,
+		cmService,
+		couponTabs,
+		cmProductDoc,
+		cmPramsPopup,
+		cmUnitPopup,
+		cmProductModal,
+		cmRossPopup,
+		cmReturnInstructions,
+		cmSharePopup,
+		cmSellerModal
+	},
+	data() {
+		return {
+			StaticUrl: this.$Static, //静态图片路径
+			clickPath: '/pages/search/search',
+			html: '',
+			productNoneImage: 'https://static.caimei365.com/app/img/icon/icon-pnone.png',
+			mode: 'round',
+			iconClass: 'icon-aixin',
+			iconColor: '#ff9100',
+			specClass: '', // 规格弹窗css类，控制开关动画
+			isBtnType: '',
+			isRequest: false,
+			isScrollTop: false,
+			current: 0,
+			isShareType: '',
+			isHeaderPoduct: false,
+			isNavbarFiexd: false,
+			navbarFiexd: 'none',
+			ladderPriceFlag: '',
+			ladderPriceList: '',
+			isInvalid: false,
+			isEvaluate: false,
+			isAnimation: false,
+			skeletonShow: true,
+			isStock: false,
+			disabled: false,
+			isNoneDisabled: false,
+			tabCurrentIndex: 0,
+			userId: 0,
+			shopId: 0,
+			shopID: 0,
+			typeId: 0,
+			vipFlag: 0,
+			firstClubType: 0,
+			productId: 0,
+			skusCount: 0, // 规格种类
+			userIdentity: 0, // 用户类型
+			goodsData: {}, // 自定义数据
+			shop: {}, //供应商信息
+			product: {}, //采美
+			productImage: [],
+			retailPrice: 0,
+			stock: 0,
+			number: 0,
+			minBuyNumber: 0,
+			productsList: [],
+			goodListData: [],
+			productCoupon: [], // 优惠券
+			productCouponList: [], // 优惠券弹窗列表
+			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
+			systeminfo: this.setSysteminfo(), // 获取设备信息
+			windowHeight: '',
+			headerColor: false,
+			backPage: 1,
+			nvabarData: {
+				// 顶部自定义导航
+				showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
+				title: '' // 导航栏 中间的标题
+			},
+			linkPath: '',
+			CustomBar: this.CustomBar, // 顶部导航栏高度
+			popupShow0: false, // 参数弹窗
+			popupShow1: false, // 培训方案
+			popupShow2: false, // 优惠券
+			popupShow3: false, // 购买弹窗
+			tabSelectFlag: false,
+			sectionPropsArr: [],
+			scrollTopArray: [],
+			winHeight: '',
+			isShowButton: true,
+			isCouponEmpty: false,
+			currentTab: 0,
+			couponParam: {
+				// 获取弹窗优惠券领取参数
+				userId: 0,
+				productId: 0,
+				status: 1,
+				source: 2
+			},
+			bottomCartNumber: 0,
+			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
+			isPreviewImage: false,
+			opentype: '',
+			collectionType: false,
+			isShowSupportingList: false,
+			supportingList: [],
+			supportingNum: 0, // 组合商品总数
+			contentModalText: '', //操作文字提示语句
+			modal: false,
+			modalButton: [
+				{
+					text: '取消',
+					type: 'gray',
+					plain: true //是否空心
+				},
+				{
+					text: '去升级',
+					customStyle: {
+						color: '#fff',
+						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
+					},
+					plain: false
+				}
+			],
+			showModal: false,
+			isShowCaimeiShop: false,
+			unitPopupType: 0, // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
+			returnGoodsStutas: false,
+			helpContent: '',
+			posterData: {}, // 商品详情
+			suid: 0, // 协销id
+			scene: {}, //获取二维码参数
+			options: {}
+		}
+	},
+	computed: {
+		...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX', 'userInfo'])
+	},
+	filters: {
+		TypeFormat(value) {
+			switch (value) {
+				case 0:
+					return '活动券'
+					break
+				case 1:
+					return '品类券'
+					break
+				case 2:
+					return '用户专享券'
+					break
+				case 3:
+					return '店铺券'
+					break
+				case 4:
+					return '新用户券'
+					break
+			}
+		}
+	},
+	watch: {
+		isNavbarFiexd(val) {
+			if (!this.isRequest || !val) return
+			let timer = null
+			clearTimeout(timer)
+			timer = setTimeout(() => {
+				if (this.sectionPropsArr.length > 0) return
+				this.getSectionProps()
+			}, 200)
+		}
+	},
+	onLoad(option) {
+		if (option.scene) {
+			// 识别小程序二维码
+			this.scene = queryParse(decodeURIComponent(option.scene)) // 转码
+		}
+		this.productId = this.couponParam.productId = this.addParams.productId = this.handleProsId =
+			option.id || this.scene.id //获取商品ID
+		if (option.typeId) {
+			this.typeId = option.typeId
+		}
+		this.opentype = option.open
+		this.isShareType = option.type
+		this.linkPath = option.path
+		this.isHeaderPoduct = true
+		if (option.page == 2) {
+			this.backPage = option.page
+		}
+		this.options = option.scene ? this.scene : option
+		this.getWinHeight()
+	},
+	onReady() {
+		if (this.opentype == 'caimei') {
+			// 跳转到资料详情
+			uni.showLoading({
+				title: '加载中'
+			})
+			setTimeout(() => {
+				this.isNavbarFiexd = true
+				this.tabClick(4)
+				uni.hideLoading()
+			}, 2000)
+		}
+		console.log('是iPhoneX', this.isIphoneX)
+	},
+	methods: {
+		async initGetStotage() {
+			// 初始化
+			const userInfo = await this.$api.getStorage()
+			this.userId = this.couponParam.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
+			this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
+			this.vipFlag = userInfo.vipFlag ? userInfo.vipFlag : 0
+			this.shopID = userInfo.shopId ? userInfo.shopId : 0
+			this.firstClubType = this.clubType
+			if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
+				this.isShowButton = true
+			} else {
+				this.isShowButton = false
+			}
+			if (isPreviewImg) {
+				isPreviewImg = false
+				return
+			} else {
+				this.initData()
+			}
+		},
+		initData() {
+			// 初始化商品详情查询
+			this.ProductService.QueryProductDetils({
+				userId: this.userId,
+				productId: this.productId,
+				identity: this.identity,
+				typeId: this.typeId
+			})
+				.then(response => {
+					let productLabel = ''
+					this.productImage = []
+					this.shop = response.data.shop
+					this.shopId = response.data.shopId
+					const dataStr = JSON.stringify(response.data)
+					this.product = JSON.parse(dataStr)
+					this.skuProduct = JSON.parse(dataStr)
+					this.skusCount = this.product.skus.length
+					this.addParams.skuId = this.product.skuId
+					if (this.product.tinyTypeName) {
+						productLabel = this.product.tinyTypeName
+					} else if (!this.product.tinyTypeName && this.product.smallTypeName) {
+						productLabel = this.product.smallTypeName
+					} else {
+						productLabel = this.product.bigTypeName
+					}
+					//设置统计数据标签
+					if (this.product.relatedLabels) {
+						uni.setStorageSync('productLabel', this.product.relatedLabels)
+					} else {
+						uni.setStorageSync(
+							'productLabel',
+							`${productLabel}-${this.product.brandName ? this.product.brandName : ''}`
+						)
+					}
+					//校验是否为ross
+					this.checkedIsRossSet()
+					//判断是否可以跳转供应商主页
+					if (this.product.shopType === 2) {
+						this.isShowCaimeiShop = true
+					}
+					// 判断是否显示已收藏
+					if (this.product.userLike && this.product.userLike == 1) {
+						this.collectionType = true
+					} else {
+						this.collectionType = false
+					}
+					//已删除/已冻结
+					if (this.product.validFlag === 0 || this.product.validFlag == 10) {
+						this.isInvalid = true
+					} else if (this.product.validFlag === 9) {
+						if (this.userIdentity == 1) {
+							this.isInvalid = false
+						} else {
+							this.isInvalid = true
+						}
+					}
+					this.ladderPriceFlag = this.product.ladderPriceFlag
+					this.html = this.adaptRichTextImg(this.product)
+					this.stock = this.product.stock
+					this.number = this.product.minBuyNumber
+					this.minBuyNumber = this.product.minBuyNumber
+
+					//处理商品图片列表
+					this.product.imageList.forEach(item => {
+						this.productImage.push(item.image)
+					})
+					//处理阶梯价格
+					if (this.product.ladderPriceList != null) {
+						this.ladderPriceList = this.product.ladderPriceList
+					}
+					//拆分金额并转千分位格式显示
+					if (this.product.price != null) {
+						this.retailPrice = this.product.price.toFixed(2)
+					}
+					//处理下架商品和售罄商品
+					if (this.product.validFlag == 3 || this.product.saleOutFlag === 1) {
+						this.isNoneDisabled = true
+						this.disabled = true
+					} else {
+						this.disabled = false
+						this.isNoneDisabled = false
+						this.goodsData.disabledText = ''
+					}
+					if (this.product.priceFlag == 1) {
+						this.disabled = true
+					} else if (this.product.priceFlag == 2) {
+						if (this.userIdentity == 4 && this.vipFlag != 1) {
+							this.disabled = true
+						} else {
+							this.disabled = false
+						}
+					} else if (this.product.priceFlag == 3) {
+						if (this.userIdentity == 4) {
+							this.disabled = true
+						} else if (this.userIdentity == 2 && this.firstClubType != 1) {
+							this.disabled = true
+						} else {
+							this.disabled = false
+						}
+					} else {
+						this.disabled = false
+					}
+					this.goodsData.disabled = this.disabled
+					this.goodsData.isNoneDisabled = this.isNoneDisabled
+					if (this.product.validFlag == 3) {
+						this.goodsData.disabledText = '下架'
+					}
+					if (this.product.validFlag == 10) {
+						this.goodsData.disabledText = '停售'
+					}
+					if (this.product.saleOutFlag === 1) {
+						this.goodsData.disabledText = '售罄'
+					}
+					console.log(this.disabled)
+					// setTimeout(() => {
+					//     this.getSectionProps()
+					// }, 2000)
+					this.handleShowProductType(this.product.commodityDetailsFlag)
+					if ((this.hasLogin && this.userIdentity == 2) || this.userIdentity == 4) {
+						this.ProductCartNumber()
+					}
+					this.queryProductDetilsCoupons()
+					this.getCommodityCombinationList()
+					// 特殊商品退货须知
+					this.returnGoodsStutas = response.data.returnGoodsStutas && response.data.returnGoodsStutas === 2 // 1:可以 2:不可以
+					this.helpContent = response.data.helpContent
+
+					setTimeout(() => {
+						this.skeletonShow = false
+						this.isRequest = true
+					}, 1000)
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		handleShowProductType(flag = '') {
+			// 根据商品详情可见度显示弹窗 flag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
+			const flagMap = {
+				'2': true,
+				'3': true,
+				'4': true
+			}
+			if (!this.hasLogin) {
+				this.showModal = flagMap[flag]
+				return
+			}
+			if (this.vipFlag === 1) {
+				this.showModal = false
+				return
+			}
+			if (flag === 3 && this.userIdentity === 4) {
+				this.showModal = true
+				return
+			}
+			if (flag === 4 && this.userIdentity === 4) {
+				this.showModal = true
+				return
+			}
+			if (flag === 4 && this.userIdentity === 2 && this.firstClubType !== 1) {
+				this.showModal = true
+				return
+			}
+		},
+		hideMobel1() {
+			this.modal1 = false
+			this.$api.navigateBack(1)
+		},
+
+		adaptRichTextImg(product) {
+			// 商品详情
+			let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
+			let html = ''
+			if (product.productDetailChose == 1) {
+				// 同资质机构显示商品详情
+				html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
+			} else {
+				if (this.hasLogin && this.userIdentity != 4) {
+					html = product.productDetail
+						? this.$api.adaptRichTextImg(product.productDetail.detailInfo)
+						: defaulHtml
+				} else {
+					if (product.productDetail.commonDetailInfo) {
+						html = product.productDetail
+							? this.$api.adaptRichTextImg(product.productDetail.commonDetailInfo)
+							: defaulHtml
+					} else {
+						html = defaulHtml
+					}
+				}
+			}
+			return html
+		},
+		getCommodityCombinationList() {
+			// 初始化商品详情配套商品
+			this.ProductService.getCommodityCombinationList({
+				userId: this.userId,
+				productId: this.productId,
+				source: 2,
+				pageNum: 1,
+				pageSize: 4
+			})
+				.then(response => {
+					const data = response.data
+					this.supportingList = data.results
+					this.supportingNum = data.totalRecord
+					if (this.supportingList.length > 0) {
+						if (!this.hasLogin || this.userIdentity == 2 || this.userIdentity == 4) {
+							this.isShowSupportingList = true
+						}
+					}
+				})
+				.catch(error => {
+					console.log('获取组合商品列表失败')
+				})
+		},
+		queryProductDetilsCoupons() {
+			// 初始化商品详情优惠券信息
+			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
+				.then(response => {
+					this.productCoupon = response.data.list
+				})
+				.catch(error => {
+					console.log('获取优惠券列表失败')
+				})
+		},
+		queryPopupCoupons() {
+			// 获取弹窗优惠券列表
+			this.ProductService.QueryProductDetilsCoupons(this.couponParam)
+				.then(response => {
+					let data = response.data
+					this.navbar[0].num = data.notCouponNum
+					this.navbar[1].num = data.couponNum
+					if (data.couponList && data.couponList.length > 0) {
+						this.productCouponList = data.couponList
+						this.isCouponEmpty = false
+					} else {
+						this.isCouponEmpty = true
+					}
+				})
+				.catch(error => {
+					console.log('获取优惠券列表失败')
+				})
+		},
+		ProductCartNumber() {
+			// 获取用户购物车储量
+			this.ProductService.ProductCartNumber({ userId: this.userId })
+				.then(response => {
+					this.bottomCartNumber = response.data
+				})
+				.catch(error => {
+					console.log('获取购物车数量失败')
+				})
+		},
+		receiveCoupon(coupon) {
+			// 点击优惠券领取按钮,友盟埋点收集领取优惠券
+			if (process.env.NODE_ENV != 'development') {
+				this.$uma.trackEvent('Um_Event_productCouponReceive', {
+					Um_Key_PageName: '商品详情',
+					Um_Key_EvenName: '领取优惠券',
+					Um_Key_CouponId: `${coupon.couponId}`
+				})
+			}
+			this.ProductService.ReceiveCoupon({
+				userId: this.couponParam.userId,
+				couponId: coupon.couponId,
+				source: 1
+			})
+				.then(response => {
+					this.$util.msg('领取成功', 1500, true, 'success')
+					setTimeout(() => {
+						this.currentTab = 1
+						this.couponParam.status = 2
+						this.queryPopupCoupons()
+					}, 1500)
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		toDeductCoupon(coupon) {
+			// 点击采美豆抵扣优惠券
+			if (process.env.NODE_ENV != 'development') {
+				this.$uma.trackEvent('Um_Event_userCouponCollectionBuy', {
+					Um_Key_PageName: '领券中心',
+					Um_Key_EvenName: '抵扣优惠券',
+					Um_Key_CouponId: `${coupon.couponId}`
+				})
+			}
+			if (this.hasLogin) {
+				if (this.userIdentity === 1 || this.userIdentity === 3) {
+					this.$util.msg('您的身份暂不支持领取优惠券', 2000)
+					return
+				}
+				this.WeChatPayCouponBeans(coupon)
+			} else {
+				this.$api.navigateTo('/pages/login/login')
+			}
+		},
+		WeChatPayCouponBeans(coupon) {
+			// 采美豆抵扣优惠券
+			this.PayService.WeChatPayCouponBeans({
+				source: 1, //领取渠道 1 小程序  2 网站
+				userId: this.couponParam.userId,
+				couponId: coupon.couponId
+			})
+				.then(response => {
+					this.$util.msg('抵扣成功', 1500)
+					setTimeout(() => {
+						this.currentTab = 1
+						this.couponParam.status = 2
+						this.queryPopupCoupons()
+					}, 1500)
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		toPayCoupon(coupon) {
+			// 点击购买优惠券,友盟埋点收集购买优惠券
+			if (process.env.NODE_ENV != 'development') {
+				this.$uma.trackEvent('Um_Event_productCouponBuy', {
+					Um_Key_PageName: '商品详情',
+					Um_Key_EvenName: '购买优惠券',
+					Um_Key_CouponId: `${coupon.couponId}`
+				})
+			}
+			this.createCouponRecord(coupon)
+		},
+		createCouponRecord(coupon) {
+			// 生成购买优惠券记录Id
+			this.PayService.WeChatCouponRecord({
+				userId: this.userId,
+				couponId: coupon.couponId
+			})
+				.then(response => {
+					this.MiniWxPayFor(coupon, response.data.couponRecordId)
+				})
+				.catch(error => {
+					if (error.code == -1) {
+						//个人机构不能购买
+						this.contentModalText = '该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
+						this.modal = true
+					} else if (error.code == -2) {
+						//会员机构不是医美机构不能购买
+						this.$util.msg('该优惠券仅限医美机构购买', 2000)
+					}
+				})
+		},
+		async MiniWxPayFor(coupon, couponRecordId) {
+			const wechatcode = await authorize.getCode('weixin')
+			const params = {
+				userId: this.userId,
+				couponId: coupon.couponId,
+				couponRecordId: couponRecordId,
+				payType: 'XCX',
+				code: wechatcode,
+				source: 1 //支付来源 1 小程序 2 WWW
+			}
+			this.weChatMiniCouponWxPay(
+				params,
+				'Um_Event_productCouponPay',
+				'商品详情',
+				'线上支付优惠券',
+				coupon.couponId,
+				this.userId
+			)
+		},
+		hideMobel() {
+			this.modal = false
+		},
+		handleClick(e) {
+			//个人机构跳转升级页面
+			if (e.index == 1) {
+				this.$api.navigateTo('/pages/login/apply')
+			}
+			this.modal = false
+		},
+		swiperChange(e) {
+			//顶部商品图片切换
+			const index = e.detail.current
+			this.current = index
+		},
+		previewImg1(url) {
+			let mentuzArray = []
+			mentuzArray.push(url)
+			uni.previewImage({
+				urls: mentuzArray,
+				current: 0
+			})
+		},
+		previewImg(index) {
+			//顶部商品图片预览
+			isPreviewImg = true
+			let previewUrls = this.productImage
+			uni.previewImage({
+				current: index, //图片索引
+				urls: previewUrls, //必须是http图片，本地图片无效
+				longPressActions: ''
+			})
+		},
+		//商品详情&&供应商信息tab切换
+		tabClick(index) {
+			// 重新标记
+			this.getSectionProps()
+			this.tabCurrentIndex = index
+			this.tabSelectFlag = true
+			let timer = null
+			clearTimeout(timer)
+			// 点击tab 300ms才执行跳转，避免出错（来回跳动）
+			timer = setTimeout(() => {
+				this.tabClickAction(index)
+			}, 500)
+		},
+		// 跳转执行
+		tabClickAction(index) {
+			const that = this
+			if (index === 4) {
+				return uni.pageScrollTo({
+					duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+					scrollTop: this.sectionPropsArr[0].scrollTop
+				})
+			}
+			uni.pageScrollTo({
+				duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+				scrollTop: this.sectionPropsArr[index].scrollTop,
+				success() {
+					setTimeout(() => {
+						that.tabSelectFlag = false
+					}, 300)
+				}
+			})
+		},
+		handleContact(e) {
+			//跳转小程序客服
+			console.log(e.detail.path)
+			console.log(e.detail.query)
+		},
+		buyProductCart() {
+			//底部购物车按钮点击
+			if (this.hasLogin) {
+				// 友盟埋点商品详情购物车入口点击事件
+				if (process.env.NODE_ENV != 'development') {
+					this.$uma.trackEvent('Um_Event_ProductShoppingCart', {
+						Um_Key_PageName: '去购物车',
+						Um_Key_SourcePage: '商品详情购物车入口'
+					})
+				}
+				this.$api.navigateTo('/pages/goods/cart')
+			} else {
+				this.$api.navigateTo('/pages/login/login?type=1')
+			}
+		},
+		btnGetConfirm(type) {
+			//加入购物车&&立即购买点击
+			if (this.hasLogin) {
+				this.btnType = type
+				this.popupShow3 = true
+				this.unitPopupType = 1
+			} else {
+				this.$api.navigateTo('/pages/login/login?type=1')
+			}
+		},
+		getAddProductCart() {
+			//增加购物车成功和toast弹窗提示成功
+			this.ProductService.shoppingAddCart({
+				productId: this.productId,
+				userId: this.userId,
+				productCount: this.number,
+				source: 2
+			})
+				.then(response => {
+					this.specClass = 'hide'
+					this.$util.msg('加入购物车成功', 1500, true, 'success')
+					this.isAnimation = true
+					setTimeout(() => {
+						this.specClass = 'none'
+					}, 200)
+					setTimeout(() => {
+						this.isAnimation = false
+					}, 2000)
+					this.bottomCartNumber = response.data
+				})
+				.catch(error => {
+					console.log('error', error.msg)
+				})
+		},
+		setHeaderBtnPosi() {
+			// 获得胶囊按钮位置信息
+			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
+			return headerBtnPosi
+		},
+		setSysteminfo() {
+			let systeminfo
+			uni.getSystemInfo({
+				// 获取设备信息
+				success: res => {
+					systeminfo = res
+				}
+			})
+			return systeminfo
+		},
+		goIndex() {
+			//商城首页
+			uni.switchTab({
+				url: '/pages/tabBar/home/index'
+			})
+		},
+		goSupplier() {
+			//跳供应商资料页
+			if (!this.isShowCaimeiShop) {
+				this.$api.navigateTo('/pages/supplier/user/my-shop?shopId=' + this.shopId)
+			}
+		},
+		discard() {
+			//丢弃
+		},
+		onShare(res) {
+			//分享转发
+			if (res.from === 'button') {
+				// 来自页面内转发按钮
+			}
+			return {
+				title: `${this.product.name}`,
+				path: `pages/goods/product?type=share&id=${this.productId}`,
+				imageUrl: `${this.productImage[0]}`
+			}
+		},
+		// 分享海报
+		handleShare() {
+			this.posterData = {
+				productName: this.product.name,
+				productImage: this.productImage[0],
+				suid: this.suid,
+				path: 'pages/goods/product',
+				id: this.productId
+			}
+			this.$refs.sharePopup.open()
+		},
+		handleCollection() {
+			// 收藏
+			if (this.hasLogin) {
+				this.ProductService.getProductUserLike({
+					userId: this.userId,
+					productId: this.product.productId
+				})
+					.then(response => {
+						this.collectionType = !this.collectionType
+						this.$util.msg(response.data, 1500, true, 'success')
+					})
+					.catch(error => {
+						this.$util.msg(error.msg, 2000)
+					})
+			} else {
+				this.$api.navigateTo('/pages/login/login')
+			}
+		},
+		showPopup(index) {
+			switch (index) {
+				case 0:
+					this.popupShow0 = true
+					break
+				case 1:
+					this.popupShow1 = true
+					break
+				case 2:
+					if (this.hasLogin) {
+						this.queryPopupCoupons()
+						this.popupShow2 = true
+					} else {
+						this.$api.navigateTo('/pages/login/login')
+					}
+					break
+				case 3:
+					this.popupShow3 = true
+					this.unitPopupType = 2
+					break
+			}
+		},
+		hidePopup(index) {
+			switch (index) {
+				case 0:
+					this.popupShow0 = false
+					break
+				case 1:
+					this.popupShow1 = false
+					break
+				case 2:
+					this.popupShow2 = false
+					break
+				case 3:
+					this.popupShow3 = false
+					break
+			}
+		},
+		couponChange(e) {
+			this.currentTab = e.index
+			switch (this.currentTab) {
+				case 0:
+					this.couponParam.status = 1
+					this.queryPopupCoupons()
+					break
+				case 1:
+					this.couponParam.status = 2
+					this.queryPopupCoupons()
+					break
+			}
+		},
+		handleSupporting() {
+			// 跳转组合商品页面
+			this.$api.navigateTo(`/pages/goods/goods-supporting?productId=${this.productId}`)
+		},
+		// 获取每个tab对应区域的区间
+		async getSectionProps() {
+			const sectionPropsArr = [],
+				scrollTopArray = [],
+				className = 'product-details'
+
+			// 获取相关节点元素信息
+			const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
+			const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
+			const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
+			/*
+                说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
+                     scrollTop = 上一个的scrollTop + 上一个的高度
+            */
+			productDetail.forEach((item, index) => {
+				// 上一个 prdocut-details 的 scrollTop 值
+				const prev = sectionPropsArr[index - 1]
+				const prevScrollTop = prev ? prev.scrollTop : productMain.height
+				// 上一个 prdocut-details 的高度
+				const add = productDetail[index - 1]
+				// 第一个需要减去tabs的高度
+				const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
+				sectionPropsArr.push({
+					className: `${className}${index}`,
+					scrollTop: prevScrollTop + addHeight
+				})
+				// - topBar.height
+			})
+			this.sectionPropsArr = sectionPropsArr
+			console.log('更新tab影响区域', this.sectionPropsArr)
+		},
+		//当滑动时也能同步激活tab
+		activeTab: debounce(
+			(top, _this) => {
+				const { sectionPropsArr } = _this
+				if (sectionPropsArr && sectionPropsArr.length > 0) {
+					sectionPropsArr.forEach((item, index) => {
+						// 当前位置为开始位置， 下个起始位置为结束位置
+						const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
+						const next = sectionPropsArr[index + 1]
+						const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
+						if (top >= openInterval && top < closedInterval) {
+							_this.tabCurrentIndex = index
+						}
+					})
+				}
+			},
+			100,
+			true
+		),
+		debounce(fn, delay) {
+			let timer = null //借助闭包
+			return function() {
+				if (timer) {
+					clearTimeout(timer)
+				}
+				timer = setTimeout(fn, delay) // 简化写法
+			}
+		},
+		clipboard(data) {
+			thorui.getClipboardData(data, res => {
+				if (res) {
+					this.$util.msg('复制成功', 2000, true, 'success')
+				} else {
+					this.$util.msg('复制失败', 2000, true, 'none')
+				}
+			})
+		},
+		getWinHeight() {
+			this.winHeight = wx.getSystemInfoSync().windowHeight
+		},
+		changePreViewImageStatus(falg) {
+			this.isPreviewImage = falg
+		}
+	},
+	onPageScroll(e) {
+		//实时获取到滚动的值
+		const { scrollTop } = e
+		this.debounce(this.getSectionProps(), 1000)
+		if (!this.tabSelectFlag) {
+			this.activeTab(scrollTop, this)
+		}
+		if (e.scrollTop > 60) {
+			this.headerColor = true
+			this.navbarFiexd = 'fixed'
+			this.isNavbarFiexd = true
+			this.nvabarData = {
+				showCapsule: 1,
+				title: '商品详情'
+			}
+		} else {
+			this.headerColor = false
+			this.isNavbarFiexd = false
+			this.navbarFiexd = 'none'
+			this.nvabarData = {
+				showCapsule: 1,
+				title: ''
+			}
+		}
+		if (e.scrollTop > 700) {
+			this.isScrollTop = true
+		} else {
+			this.isScrollTop = false
+		}
+	},
+	onShareAppMessage(res) {
+		//分享转发
+		if (res.from === 'button') {
+			// 来自页面内转发按钮
+		}
+		return {
+			title: `${this.product.name}`,
+			path: `pages/goods/product?type=4&id=${this.productId}&suid=${
+				this.userInfo.userIdentity === 1 ? this.userInfo.userId : 0
+			}&spId=${this.userInfo.userIdentity === 1 ? this.userInfo.serviceProviderId : 0}`,
+			imageUrl: `${this.productImage[0]}`
+		}
+	},
+	onShow() {
+		wxLogin.wxLoginAuthorize()
+		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
+		if (!this.isPreviewImage) {
+			this.initGetStotage()
+		}
+		this.isPreviewImage = false
+		const suid = this.options.suid
+			? this.options.suid
+			: this.scene.suid
+			? this.scene.suid
+			: uni.getStorageSync('suid') * 1
+			? uni.getStorageSync('suid') * 1
+			: 0 // 协销userId
+		const spId = this.options.spId
+			? this.options.spId
+			: this.scene.spId
+			? this.scene.spId
+			: uni.getStorageSync('spId') * 1
+			? uni.getStorageSync('spId') * 1
+			: 0 // 协销id
+		const isShare = this.options.type == 4 ? true : this.scene.type == 4 ? true : false //是否从分享页进入
+		if ((isShare || uni.getStorageSync('suid') * 1 > 0) && this.userInfo.userIdentity !== 1) {
+			// 分享进入 且 用户非协销 或不是从分享进入有缓存
+			if (
+				!uni.getStorageSync('spUserId') ||
+				uni.getStorageSync('spUserId') * 1 === uni.getStorageSync('suid') * 1
+			) {
+				// 如果未分配或者分配相同
+				this.suid = suid
+				uni.setStorageSync('suid', suid)
+				uni.setStorageSync('spId', spId)
+			} else {
+				uni.setStorageSync('suid', 0)
+				this.suid = 0
+				uni.setStorageSync('spId', 0)
+			}
+		}
+		console.log(this.suid, "uni.getStorageSync('spId')", uni.getStorageSync('spId'))
+	}
+}
+</script>
+
+<style lang="scss">
+page {
+	background-color: #ffffff;
+}
+.banner-section {
+	width: 100%;
+	height: 750rpx;
+	position: relative;
+	.cm-product-tags {
+		position: absolute;
+		right: 30rpx;
+		top: 0;
+		z-index: 999;
+	}
+	.cm-product-type {
+		width: 64rpx;
+		height: 64rpx;
+		text-align: justify;
+		box-sizing: border-box;
+		padding: 10rpx;
+		border-radius: 0 0 8rpx 8rpx;
+		background-color: #33ccbf;
+		font-size: $font-size-22;
+		color: #ffffff;
+		line-height: 25rpx;
+		position: absolute;
+		left: 30rpx;
+		top: 0;
+		z-index: 999;
+	}
+	.cm-product-cover {
+		width: 120rpx;
+		height: 77rpx;
+		line-height: 57rpx;
+		font-size: 24rpx;
+		color: #fff;
+		text-align: center;
+		background: url(https://static.caimei365.com/app/img/icon2/cm_cover_bg_app.png) no-repeat center;
+		background-size: 120rpx;
+		float: left;
+		position: absolute;
+		right: 30rpx;
+		top: 0;
+		z-index: 999;
+	}
+}
+.banner {
+	width: 100%;
+	height: 750rpx;
+	.product-img {
+		width: 750rpx;
+	}
+	image {
+		width: 100%;
+		height: 100%;
+	}
+	.banner-item {
+		position: relative;
+	}
+}
+.swiper__dots-box {
+	position: absolute;
+	color: #fff;
+	bottom: 30rpx;
+	right: 0;
+}
+.product-wrap {
+	width: 100%;
+	height: auto;
+	padding: 24rpx 0 0 0;
+	background-color: #ffffff;
+	border-bottom: 20rpx solid #f7f7f7;
+	.productRemarks {
+		height: 48rpx;
+		width: 100%;
+		float: left;
+		line-height: 48rpx;
+		font-size: 24rpx;
+		color: #999999;
+		text-align: left;
+	}
+	.wrap-top {
+		width: 702rpx;
+		padding: 0 24rpx;
+		height: auto;
+		float: left;
+		padding-bottom: 20rpx;
+		border-bottom: 1px solid #f8f8f8;
+		&.none {
+			.p-title {
+				color: #999999;
+			}
+		}
+		.p-title {
+			width: 100%;
+			height: auto;
+			float: left;
+			position: relative;
+			.p-title-name {
+				width: 602rpx;
+				height: auto;
+				float: left;
+				line-height: 48rpx;
+				font-size: $font-size-28;
+				color: $text-color;
+				-o-text-overflow: ellipsis;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				word-break: break-all;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				&.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: 6rpx;
+			}
+			.p-title-share {
+				width: 96rpx;
+				height: 96rpx;
+				position: absolute;
+				right: 0;
+				text-align: center;
+				color: #999999;
+				font-size: $font-size-24;
+				box-sizing: border-box;
+				display: block;
+				background: transparent;
+				border-radius: 0;
+				border: 0;
+				margin: 0;
+				padding: 8rpx 0;
+				z-index: 20;
+				.icon-fenxiang1 {
+					font-size: $font-size-34;
+				}
+			}
+			.tui-share-btn::after {
+				border: 0;
+			}
+		}
+		.wrap-main-text {
+			line-height: 56rpx;
+			color: #ff2a2a;
+			font-size: $font-size-26;
+			display: block;
+			float: left;
+			font-weight: normal;
+		}
+		.wrap-main-none {
+			display: block;
+			width: 256rpx;
+			height: 44rpx;
+			padding-left: 20rpx;
+			border-radius: 11rpx;
+			background: $btn-confirm;
+			float: right;
+			line-height: 44rpx;
+			color: #ffffff;
+			text-align: center;
+			font-size: $font-size-24;
+		}
+
+		.p-price-none {
+			height: 44rpx;
+			line-height: 44rpx;
+			float: left;
+			font-size: $font-size-24;
+			color: #666;
+			text-decoration: line-through;
+			margin-left: 8rpx;
+		}
+		.p-minBuy {
+			height: 44rpx;
+			line-height: 44rpx;
+			float: right;
+			padding: 0 18rpx;
+			border-radius: 22rpx;
+			background-color: #f7f7f7;
+			color: #7f7f7f;
+			font-size: 24rpx;
+			text-align: center;
+			.min-text {
+				margin: 0 6rpx;
+			}
+		}
+		.p-login {
+			height: 56rpx;
+			line-height: 56rpx;
+			color: $color-system;
+			font-size: $font-size-24;
+			&.grade {
+				.price-left {
+					float: left;
+					.none {
+						display: block;
+						font-size: $font-size-20;
+						line-height: 48rpx;
+						color: #4a4b54;
+						float: left;
+						font-weight: bold;
+						margin-left: 5rpx;
+						text {
+							letter-spacing: 4rpx;
+							font-size: $font-size-32;
+						}
+					}
+				}
+			}
+			.p-no {
+				float: left;
+				margin-right: 5rpx;
+				font-size: $font-size-28;
+				color: $text-color;
+			}
+			.p-login-btn {
+				display: block;
+				height: 44rpx;
+				padding: 0 10rpx 0 20rpx;
+				border-radius: 11rpx;
+				background: $btn-confirm;
+				float: right;
+				line-height: 44rpx;
+				color: #ffffff;
+				text-align: center;
+				font-size: $font-size-24;
+			}
+		}
+	}
+	.wrap-label {
+		float: left;
+		width: 85%;
+		box-sizing: border-box;
+		.label-a {
+			padding: 0 18rpx;
+			line-height: 32rpx;
+			font-size: $font-size-20;
+			color: $color-system;
+			text-align: center;
+			border-radius: 6rpx;
+			background: #ffe6dc;
+			margin: 0 20rpx 15rpx 0;
+			display: inline-block;
+		}
+	}
+	.wrap-top-price {
+		float: left;
+		width: 100%;
+		box-sizing: border-box;
+		.wrap-main-item {
+			width: 100%;
+			height: 56rpx;
+			.p-price {
+				height: 56rpx;
+				line-height: 56rpx;
+				float: left;
+				color: #ff2a2a;
+				font-weight: bold;
+				&.none {
+					text-decoration: line-through;
+					color: #999999;
+					font-weight: normal;
+				}
+				.txt {
+					margin: 0 2rpx;
+				}
+				.txt.sm {
+					font-size: $font-size-26;
+				}
+				.txt.big {
+					font-size: $font-size-34;
+				}
+			}
+			.p-right-price {
+				height: 56rpx;
+				line-height: 56rpx;
+				float: right;
+				color: #999999;
+				font-size: $font-size-30;
+				.none {
+					font-size: $font-size-26;
+					text-decoration: line-through;
+				}
+			}
+		}
+		.floor-item-act {
+			height: 56rpx;
+			text-align: center;
+			box-sizing: border-box;
+			float: left;
+			padding: 10rpx 0;
+			margin-left: 10rpx;
+		}
+		.floor-item-btn {
+			float: right;
+			height: 40rpx;
+			margin-top: 8rpx;
+			margin-left: 10rpx;
+			.btn {
+				line-height: 40rpx;
+				padding: 0 20rpx;
+				height: 40rpx;
+				background: $btn-confirm;
+				color: #ffffff;
+				font-size: $font-size-20;
+				border-radius: 4rpx;
+			}
+		}
+	}
+	.wrap-info {
+		float: left;
+		width: 702rpx;
+		padding: 24rpx 24rpx 0 24rpx;
+		border-bottom: 1px solid #f8f8f8;
+		.info-viewT {
+			width: 100%;
+			min-height: 40rpx;
+			font-size: $font-size-28;
+			color: $text-color;
+			line-height: 40rpx;
+			text-align: left;
+			&.none {
+				color: #999999;
+			}
+			.info-viewL {
+				min-width: 350rpx;
+				float: left;
+				margin-bottom: 24rpx;
+			}
+			.info-viewR {
+				min-width: 352rpx;
+				float: left;
+				margin-bottom: 24rpx;
+			}
+		}
+		.info-viewB {
+			width: 100%;
+			height: auto;
+		}
+		.info-f {
+			width: 50%;
+			float: left;
+			font-size: $font-size-28;
+			color: $text-color;
+			line-height: 40rpx;
+			margin-bottom: 24rpx;
+			text-align: left;
+		}
+	}
+}
+.product-seve {
+	width: 100%;
+	height: 60rpx;
+	background-color: #ffffff;
+	position: relative;
+	display: flex;
+	line-height: 60rpx;
+	.label {
+		font-size: $font-size-28;
+		color: #333333;
+	}
+	.iconfont {
+		color: #fea785;
+		margin-right: 20rpx;
+		font-size: $font-size-22;
+	}
+	.text {
+		font-size: $font-size-22;
+		color: #fea785;
+		margin-left: 10rpx;
+	}
+}
+.product-item-none {
+	min-height: 348rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	border-bottom: 20rpx solid #f7f7f7;
+	box-sizing: border-box;
+	padding: 40rpx 0;
+	.none-image {
+		width: 284rpx;
+		height: 225rpx;
+	}
+	.none-text {
+		text-align: center;
+		font-size: $font-size-28;
+		color: #fea785;
+		line-height: 40rpx;
+	}
+}
+.product-supporting {
+	width: 100%;
+	height: 274rpx;
+	box-sizing: border-box;
+	padding: 30rpx 24rpx;
+	background-color: #ffffff;
+	border-bottom: 20rpx solid #f7f7f7;
+	.product-supporting-title {
+		width: 100%;
+		height: 40rpx;
+		text-align: left;
+		line-height: 40rpx;
+		font-size: $font-size-28;
+		color: #333333;
+	}
+	.product-supporting-list {
+		width: 100%;
+		height: 154rpx;
+		box-sizing: border-box;
+		padding: 13rpx 0;
+		position: relative;
+		.icon-xiayibu {
+			line-height: 154rpx;
+			display: inline-block;
+			position: absolute;
+			width: 80rpx;
+			top: 0;
+			right: 0;
+			color: #b2b2b2;
+			text-align: right;
+		}
+		.list {
+			width: 128rpx;
+			height: 128rpx;
+			margin-right: 24rpx;
+			float: left;
+			border: 1px solid #e1e1e1;
+			border-radius: 8rpx;
+			.list-image {
+				width: 100%;
+				height: 100%;
+				display: block;
+				border-radius: 8rpx;
+			}
+		}
+	}
+}
+.return-instructions {
+	padding: 0 24rpx;
+	border-bottom: 20rpx solid #f7f7f7;
+}
+.product-parameter {
+	width: 702rpx;
+	height: 90rpx;
+	padding: 0 24rpx;
+	background-color: #ffffff;
+	position: relative;
+	border-bottom: 20rpx solid #f7f7f7;
+	&.coupon {
+		.title {
+			color: #f94b4b;
+		}
+		.icon-xiayibu {
+			color: #f94b4b;
+		}
+		.coupon {
+			float: right;
+			box-sizing: border-box;
+			padding: 29rpx 0;
+			padding-right: 35rpx;
+			.tags {
+				height: 32rpx;
+				box-sizing: border-box;
+				border-radius: 8rpx;
+				background-color: #fff1eb;
+				line-height: 28rpx;
+				color: #f94b4b;
+				text-align: center;
+				display: inline-block;
+				padding: 0 10rpx;
+				font-size: $font-size-20;
+				border: 1px solid #f94b4b;
+				float: right;
+				margin: 0 6rpx;
+			}
+		}
+	}
+	.title {
+		line-height: 90rpx;
+		display: inline-block;
+		float: left;
+		font-size: $font-size-28;
+		color: #666666;
+	}
+	.name {
+		line-height: 90rpx;
+		display: inline-block;
+		float: left;
+		font-size: $font-size-28;
+		color: $text-color;
+		padding-right: 48rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		text-align: right;
+	}
+	.icon-xiayibu {
+		line-height: 90rpx;
+		display: inline-block;
+		position: absolute;
+		width: 48rpx;
+		top: 0;
+		right: 0;
+		color: #b2b2b2;
+	}
+}
+.product-supplier {
+	width: 100%;
+	height: 174rpx;
+	padding: 30rpx 24rpx;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	position: relative;
+	box-sizing: border-box;
+	border-bottom: 20rpx solid #f7f7f7;
+	.logo {
+		width: 128rpx;
+		height: 92rpx;
+		float: left;
+		border: 1px solid #efefef;
+		border-radius: 6rpx;
+		image {
+			width: 100%;
+			height: 100%;
+			display: block;
+			border-radius: 6rpx;
+		}
+	}
+	.main {
+		width: 470rpx;
+		height: 92rpx;
+		float: left;
+		margin-left: 20rpx;
+		.name {
+			width: 100%;
+			line-height: 46rpx;
+			float: left;
+			font-size: $font-size-28;
+			color: $text-color;
+			float: right;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			text-align: left;
+		}
+		.massgs {
+			width: 100%;
+			line-height: 46rpx;
+			float: left;
+			font-size: $font-size-24;
+			color: #999999;
+			.label {
+				float: left;
+			}
+			.p-stars {
+				float: left;
+				margin-left: 20rpx;
+			}
+			.acount {
+				float: right;
+				text {
+					color: $color-system;
+				}
+			}
+		}
+	}
+
+	.icon-xiayibu {
+		line-height: 154rpx;
+		display: inline-block;
+		position: absolute;
+		width: 48rpx;
+		top: 0;
+		right: 0;
+		color: #b2b2b2;
+	}
+}
+.product-details {
+	width: 100%;
+	background: #ffffff;
+	border-bottom: 20rpx solid #f7f7f7;
+	&.recommend {
+		background-color: #f7f7f7;
+		border-bottom: none;
+		.title {
+			.title-tab {
+				background-color: #f7f7f7;
+				color: $text-color;
+			}
+		}
+	}
+	.product-details-image {
+		width: 100%;
+		min-height: 856rpx;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		.product-details-table {
+			width: 100%;
+			min-height: 160rpx;
+			border: 1px solid #e1e1e1;
+			border-radius: 10rpx;
+			.ladder-tr {
+				display: flex;
+				width: 100%;
+				justify-content: center;
+				height: 80rpx;
+				align-items: center;
+				border-bottom: 1px solid #e1e1e1;
+				&:last-child {
+					border-bottom: none;
+				}
+				.ladder-item-td {
+					height: 80rpx;
+					justify-content: center;
+					text-align: center;
+					box-sizing: border-box;
+					padding: 10rpx;
+					float: left;
+					.te-text {
+						line-height: 28rpx;
+						font-size: $font-size-24;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						word-break: break-all;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+						color: #999999;
+						&.last {
+							width: 60%;
+							float: left;
+						}
+					}
+					.te-copy {
+						width: 40%;
+						float: right;
+						font-size: $font-size-24;
+						padding-top: 10rpx;
+						.clipboard {
+							width: 84rpx;
+							height: 36rpx;
+							background: #4688fa;
+							text-align: center;
+							font-size: $font-size-24;
+							color: #ffffff;
+							border-radius: 18rpx;
+							line-height: 36rpx;
+							display: inline-block;
+						}
+					}
+					&.th {
+						display: flex;
+						height: 80rpx;
+						align-items: center;
+						line-height: 80rpx;
+						font-size: 26rpx;
+						color: #666;
+					}
+					&:nth-child(1) {
+						width: 25%;
+						border-right: 1px solid #e1e1e1;
+					}
+					&:nth-child(2) {
+						width: 35%;
+						border-right: 1px solid #e1e1e1;
+					}
+					&:nth-child(3) {
+						width: 40%;
+					}
+				}
+			}
+		}
+		.qualificationImg-image {
+			width: 100%;
+			height: 856rpx;
+			display: block;
+		}
+	}
+	.product-rich-text-none {
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		text-align: left;
+		font-size: 24rpx;
+		color: #999999;
+		line-height: 60rpx;
+		&.bold {
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+	.content-none {
+		width: 100%;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: left;
+		font-size: $font-size-26;
+		color: #999999;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+	}
+	.title {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		.title-tab {
+			width: 100%;
+			height: 100rpx;
+			background: #fff;
+			z-index: 10;
+			font-size: $font-size-30;
+			text-align: left;
+			color: $text-color;
+			line-height: 100rpx;
+			font-weight: 600;
+		}
+		.title-msg {
+			width: 100%;
+			height: 236rpx;
+			padding: 18rpx;
+			background-color: rgba(225, 86, 22, 0.1);
+			color: $color-system;
+			box-sizing: border-box;
+			margin-bottom: 30rpx;
+			.tit {
+				line-height: 46rpx;
+				font-size: $font-size-24;
+				text-align: left;
+			}
+			.txt {
+				line-height: 38rpx;
+				font-size: $font-size-20;
+				text-align: justify;
+			}
+		}
+	}
+	.content {
+		width: 100%;
+		background-color: #ffffff;
+	}
+}
+.isLower {
+	width: 100%;
+	height: 116rpx;
+	line-height: 116rpx;
+	text-align: center;
+	color: #000000;
+	font-size: $font-size-32;
+	font-weight: bold;
+}
+.bottom-btn {
+	width: 100%;
+	height: 100rpx;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	background: #ffffff;
+	z-index: 99;
+	.bottom-le {
+		width: 300rpx;
+		height: 100rpx;
+		padding: 10rpx 20rpx 10rpx 0;
+		float: left;
+		box-sizing: border-box;
+		.item-bt {
+			width: 80rpx;
+			height: 100%;
+			margin-right: 15rpx;
+			display: flex;
+			float: left;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-size: $font-size-22;
+			color: $text-color;
+			line-height: 34rpx;
+			position: relative;
+			.animation-num {
+				font-size: $font-size-32;
+				color: #ff2a2a;
+				position: absolute;
+				top: -12rpx;
+				right: 4rpx;
+				font-weight: bold;
+			}
+			.animation {
+				animation: showAmnation 2.2s ease-in-out both;
+			}
+			.restion {
+				animation: hideAmnation 1s ease-in-out both;
+			}
+			.icon-num {
+				position: absolute;
+				right: -12rpx;
+				top: -5rpx;
+			}
+			.icon-num.goleft {
+				right: 2rpx;
+			}
+			&:last-child {
+				margin-right: 0;
+			}
+			image {
+				width: 44rpx;
+				height: 44rpx;
+			}
+			button.contact-btn {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				font-size: $font-size-24;
+				text-align: center;
+				text-decoration: none;
+				line-height: 34rpx;
+				border-radius: 0;
+				-webkit-tap-highlight-color: transparent;
+				overflow: hidden;
+				color: $text-color;
+				background-color: #ffffff;
+			}
+		}
+	}
+	.bottom-ri {
+		width: 450rpx;
+		height: 100%;
+		float: right;
+		display: flex;
+		box-sizing: border-box;
+		padding: 13rpx 20rpx 13rpx 0;
+		.btn {
+			flex: 1;
+			width: 200rpx;
+			line-height: 80rpx;
+			text-align: center;
+			font-size: $font-size-24;
+			color: #ffffff;
+		}
+		.btn-cart {
+			background-color: #ffe6dc;
+			color: $color-system;
+			border-radius: 42rpx 0 0 42rpx;
+		}
+		.btn-cart.disabled {
+			background-color: #e1e1e1;
+			color: #ffffff;
+		}
+		.btn-bay {
+			background: linear-gradient(to right, #f28f31 0%, #ff5b00 100%);
+			border-radius: 0 42rpx 42rpx 0;
+		}
+		.btn-bay.disabled {
+			background: linear-gradient(135deg, rgba(242, 143, 49, 0.5) 0%, rgba(225, 86, 22, 0.5) 100%);
+		}
+	}
+}
+.uni-badge--small {
+	-webkit-transform: scale(0.8);
+	-ms-transform: scale(0.8);
+	transform: scale(0.8);
+	-webkit-transform-origin: center center;
+	-ms-transform-origin: center center;
+	transform-origin: center center;
+}
+.uni-badge {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: #f1f1f1;
+}
+.uni-badge-error {
+	color: #fff;
+	background-color: #dd524d;
+}
+.product-topnav {
+	width: 100%;
+	height: 174rpx;
+	box-sizing: border-box;
+	background: #ffffff;
+	z-index: 990;
+	position: fixed;
+	opacity: 1;
+	left: 0;
+	&.fixed {
+		animation: showFixedColor 0.1s ease-in-out both;
+	}
+	&.none {
+		animation: hideFixedColor 0.1s ease-in-out both;
+	}
+	.navbar {
+		width: 100%;
+		height: 60rpx;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		display: flex;
+		.nav-item {
+			display: flex;
+			flex: 1;
+			justify-content: center;
+			align-items: center;
+			height: 60rpx;
+			font-size: $font-size-28;
+			color: $text-color;
+			position: relative;
+			float: left;
+			position: relative;
+			.line {
+				width: 60rpx;
+				height: 2px;
+				border-radius: 1px;
+				background: #ffffff;
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				margin-left: -30rpx;
+			}
+			&.current {
+				color: $color-system;
+				.line {
+					background: $color-system;
+				}
+			}
+		}
+	}
+	.search-input {
+		width: 100%;
+		height: 114rpx;
+		padding: 24rpx;
+		box-sizing: border-box;
+		.gosearch-btn {
+			width: 100%;
+			height: 100%;
+			border-radius: 40rpx;
+			margin: 0 auto;
+			font-size: 26rpx;
+			line-height: 66rpx;
+			color: #b2b2b2;
+			position: relative;
+			box-sizing: border-box;
+			padding-left: 66rpx;
+			&.fixed {
+				background: rgba(70, 70, 70, 0.1);
+			}
+			&.none {
+				background: rgba(70, 70, 70, 0.1);
+			}
+			.search-icon {
+				width: 66rpx;
+				height: 66rpx;
+				position: absolute;
+				left: 0;
+				top: 2rpx;
+				text-align: center;
+				line-height: 66rpx;
+				.icon-iconfonticonfontsousuo1 {
+					margin: 0 6rpx;
+					font-size: $font-size-34;
+					color: #b2b2b2;
+					z-index: 10;
+				}
+			}
+			.search-text {
+				font-size: $font-size-24;
+				line-height: 66rpx;
+				color: #b2b2b2;
+			}
+		}
+	}
+}
+
+@keyframes showFixedColor {
+	0% {
+		background: rgba(255, 255, 255, 0);
+	}
+	50% {
+		background: rgba(255, 255, 255, 0.5);
+	}
+	100% {
+		background: rgba(255, 255, 255, 1);
+	}
+}
+@keyframes hideFixedColor {
+	0% {
+		background: rgba(255, 255, 255, 1);
+	}
+	50% {
+		background: rgba(255, 255, 255, 0.5);
+	}
+	100% {
+		background: rgba(255, 255, 255, 0);
+	}
+}
+/* 加入购物模态层*/
+@keyframes showPopup {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes hidePopup {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes showLayer {
+	0% {
+		transform: translateY(0);
+	}
+	100% {
+		transform: translateY(-100%);
+	}
+}
+@keyframes hideLayer {
+	0% {
+		transform: translateY(-100%);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+@keyframes showAmnation {
+	0% {
+		top: -12rpx;
+		opacity: 0;
+	}
+	50% {
+		top: -60rpx;
+		opacity: 1;
+	}
+	100% {
+		top: -100rpx;
+		opacity: 0;
+	}
+}
+@keyframes hideAmnation {
+	0% {
+		top: -100rpx;
+		opacity: 0;
+	}
+	100% {
+		top: -12rpx;
+		opacity: 0;
+	}
+}
+.tui-popup-box {
+	position: relative;
+	box-sizing: border-box;
+	min-height: 220rpx;
+	padding: 40rpx 24rpx 0 24rpx;
+	.tui-popup-close {
+		width: 90rpx;
+		height: 90rpx;
+		position: absolute;
+		right: 0;
+		top: 24rpx;
+		line-height: 90rpx;
+		text-align: center;
+		color: #b2b2b2;
+		.icon-iconfontguanbi {
+			font-size: $font-size-40;
+		}
+	}
+	.title {
+		font-size: $font-size-34;
+		color: $text-color;
+		line-height: 88rpx;
+		text-align: center;
+		float: left;
+		width: 100%;
+		height: 88rpx;
+		font-weight: bold;
+	}
+	.tui-popup-main {
+		width: 100%;
+		float: left;
+		&.coupon {
+			padding-bottom: 40rpx;
+			.coupon-empty {
+				width: 100%;
+				height: 600rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				position: fixed;
+				background: $bg-color;
+				.empty-container-image {
+					width: 150rpx;
+					height: 150rpx;
+					margin-bottom: 0;
+					margin-top: 0;
+				}
+				.error-text {
+					font-size: $font-size-28;
+					color: #999999;
+					line-height: 88rpx;
+				}
+			}
+		}
+		.tui-popup-scroll {
+			width: 100%;
+			height: 600rpx;
+			.coupon-list {
+				width: 100%;
+				height: 200rpx;
+				margin-top: 24rpx;
+				box-sizing: border-box;
+				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
+				background-size: cover;
+				&:last-child {
+					margin-bottom: 24rpx;
+				}
+				.list-cell-le {
+					width: 224rpx;
+					height: 100%;
+					box-sizing: border-box;
+					padding: 37rpx 0;
+					float: left;
+					.coupon-maxMoney {
+						width: 100%;
+						height: 78rpx;
+						line-height: 78rpx;
+						font-size: 56rpx;
+						color: #ffffff;
+						text-align: center;
+						.small {
+							font-size: $font-size-24;
+						}
+					}
+					.coupon-minMoney {
+						width: 100%;
+						height: 33rpx;
+						line-height: 33rpx;
+						font-size: $font-size-24;
+						color: #ffffff;
+						text-align: center;
+					}
+				}
+				.list-cell-ri {
+					width: 478rpx;
+					height: 100%;
+					box-sizing: border-box;
+					padding: 20rpx 24rpx 0 24rpx;
+					float: right;
+					.list-cell-top {
+						width: 100%;
+						height: 121rpx;
+						float: left;
+						border-bottom: 1px solid #e1e1e1;
+						.list-cell-type {
+							width: 286rpx;
+							height: 100%;
+							float: left;
+							.list-cell-tags {
+								width: 100%;
+								height: 32rpx;
+								margin-bottom: 7rpx;
+								.tags {
+									display: inline-block;
+									padding: 0 10rpx;
+									height: 32rpx;
+									line-height: 32rpx;
+									background-color: #ffdcce;
+									color: #f94b4b;
+									font-size: $font-size-20;
+									border-radius: 8rpx;
+									text-align: center;
+									float: left;
+								}
+							}
+							.list-cell-texts {
+								width: 100%;
+								height: auto;
+								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;
+								color: #333333;
+							}
+						}
+						.list-cell-btn {
+							width: 128rpx;
+							height: 100%;
+							float: right;
+							.icon-used {
+								width: 100%;
+								height: 100%;
+								box-sizing: border-box;
+								padding-top: 28rpx;
+								.icon-used-text {
+									width: 100%;
+									text-align: center;
+									line-height: 26rpx;
+									font-size: $font-size-20;
+									color: #f94b4b;
+								}
+								.icon-used-btn {
+									width: 128rpx;
+									height: 48rpx;
+									border-radius: 28rpx;
+									line-height: 48rpx;
+									font-size: $font-size-26;
+									text-align: center;
+									&.receive {
+										background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
+										color: #ffffff;
+									}
+									&.make {
+										border: solid 1px #f94b4b;
+										color: #f94b4b;
+									}
+								}
+							}
+						}
+					}
+					.list-cell-time {
+						width: 100%;
+						height: 58rpx;
+						line-height: 58rpx;
+						text-align: left;
+						font-size: $font-size-20;
+						color: #999999;
+					}
+				}
+			}
+			&.train {
+				height: 240rpx;
+			}
+			.content-tr {
+				width: 100%;
+				min-height: 58rpx;
+				line-height: 58rpx;
+				display: flex;
+				.content-td {
+					display: flex;
+					flex: 3;
+					font-size: $font-size-26;
+					color: #999999;
+					line-height: 58rpx;
+					text-align: left;
+				}
+				.content-th {
+					display: flex;
+					flex: 7;
+					font-size: $font-size-26;
+					color: #333333;
+					line-height: 58rpx;
+					text-align: left;
+					padding-left: 10rpx;
+				}
+			}
+		}
+	}
+	.tui-shopping-main {
+		width: 100%;
+		.layer-smimg {
+			width: 114rpx;
+			height: 114rpx;
+			float: left;
+			border-radius: 10rpx;
+			margin-right: 24rpx;
+			image {
+				width: 114rpx;
+				height: 114rpx;
+				border-radius: 10rpx;
+			}
+		}
+		.layer-nunbox {
+			justify-content: space-between;
+			align-items: center;
+			width: 536rpx;
+			height: auto;
+			float: left;
+			.layer-nunbox-t {
+				width: 100%;
+				height: 44rpx;
+				position: relative;
+				display: flex;
+				margin-bottom: 10rpx;
+				.text {
+					font-size: $font-size-24;
+					line-height: 48rpx;
+					color: #999999;
+				}
+				.layer-nunbox-text {
+					line-height: 44rpx;
+					font-size: $font-size-28;
+				}
+				.number-box {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border: 2rpx solid #ffe6dc;
+					border-radius: 30rpx;
+					height: 48rpx;
+					margin-left: 20rpx;
+					.iconfont {
+						font-size: $font-size-24;
+						padding: 0 18rpx;
+						color: #999999;
+						text-align: center;
+						line-height: 48rpx;
+						font-weight: bold;
+						background: #fef6f3;
+						&.icon-jianhao {
+							border-radius: 30rpx 0 0 30rpx;
+						}
+						&.icon-jiahao {
+							border-radius: 0 30rpx 30rpx 0;
+						}
+					}
+					.btn-input {
+						width: 62rpx;
+						height: 48rpx;
+						line-height: 48rpx;
+						background: #ffffff;
+						border-radius: 4rpx;
+						text-align: center;
+						font-size: $font-size-28;
+					}
+				}
+				.product-step {
+					position: absolute;
+					left: 45rpx;
+					bottom: 0;
+					height: 44rpx;
+					background: #ffffff;
+				}
+			}
+			.layer-nunbox-b {
+				width: 100%;
+				height: 44rpx;
+				margin-top: 13rpx;
+			}
+			.text {
+				line-height: 44rpx;
+				font-size: $font-size-28;
+				.p {
+					color: #ff2a2a;
+				}
+				.p:first-child {
+					margin-left: 30rpx;
+				}
+				.p.sm {
+					font-size: $font-size-24;
+				}
+			}
+		}
+	}
+}
+.tui-popup-btn {
+	width: 100%;
+	height: auto;
+	float: left;
+	margin-top: 24rpx;
+	.tui-button {
+		width: 100%;
+		height: 88rpx;
+		background: $btn-confirm;
+		line-height: 88rpx;
+		text-align: center;
+		color: #ffffff;
+		font-size: $font-size-28;
+		border-radius: 44rpx;
+	}
+}
+/*富文本样式*/
+rich-text.p {
+	width: 702rpx !important;
+	padding: 0 24rpx;
+	text-align: justify;
+}
+rich-text.img {
+	width: 100%;
+	height: auto;
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+    <view class="growth-module">
+        <view v-if="active === 2" class="cell-1" @click="playVideo">
+            <view class="image">
+                <image :src="module.headAppBanner" mode=""></image>
+            </view>
+            <view class="content text-line">
+                {{ module.title }}
+            </view>
+        </view>
+        <view v-else class="cell-2" @click="handlerTramp(module)">
+            <view class="image">
+                <image :src="module.headAppBanner" mode=""></image>
+            </view>
+            <view class="content">
+                <view class="title">
+                    {{ module.title }}
+                </view>
+                <view class="cont text-line" v-if="module.content" v-html="module.content.replace(/<[^>]+>/g, '').replace(/[ ]|[&nbsp;]/g, '')"></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        module: {
+            type: Object,
+            default: () => ({})
+        },
+        active: {
+            type: Number,
+            default: () => 1
+        }
+    },
+    methods: {
+        handlerTramp($event) {
+            let data = $event.content.replace(/<img/g, '<img style="width: 100%;height: 200px"')
+            data = data.replace(/\<figure/g, '<div')
+            data = data.replace(/\<\/figure/g, '<\/div')
+            uni.setStorageSync('artForm', data)
+            uni.navigateTo({
+                url: '/pages/login/supplier_information'
+            })
+        },
+        // 视频播放
+        playVideo() {
+            this.$emit('playVideo', this.module)
+        },
+        // 视频关闭
+        closeVideo() {
+            this.showVideo = false
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.growth-module {
+    width: 322rpx;
+    height: 328rpx;
+    border: 1px solid #EAEAEA;
+    box-sizing: border-box;
+    .cell-1 {
+        .image {
+            height: 185rpx;
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            height: calc(100% - 220rpx);
+            font-size: 26rpx;
+            color: #333333;
+            line-height: 40rpx;
+            box-sizing: border-box;
+            padding: 30rpx 18rpx 0 18rpx;
+        }
+    }
+    .cell-2 {
+        .image {
+            height: 193rpx;
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .content {
+            height: calc(100% - 193rpx);
+            padding: 17rpx 0;
+            font-size: 22rpx;
+            color: #666666;
+            box-sizing: border-box;
+            .title {
+                border-left: 4rpx solid #FF5B00;
+                padding-left: 20rpx;
+                color: #333333;
+                font-size: 28rpx;
+            }
+            .cont {
+                padding-left: 20rpx;
+                line-height: 32rpx;
+            }
+        }
+    }
+}
+.text-line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    box-sizing: border-box;
+}
+</style>

pages/login/components/growthCommunity.vue

@@ -1,249 +1,264 @@
-<template>
-    <view class="growthcommunity">
-        <slot name="supplier-title"></slot>
-        <view class="negotiation">
-            <view class="enterprise">
-                <view class="title">美业企谈</view>
-                <view class="container">
-                    <scroll-view
-                        scroll-x="true"
-                        class="scroll-view"
-                        @scroll="scrollVideoHandler"
-                        :scroll-into-view="activeVideoMenu"
-                        scroll-with-animation="true"
-                    >
-                        <view
-                            class="video-item"
-                            v-for="(item, index) in videoList"
-                            :key="item.id"
-                            @click="$emit('playVideo', item)"
-                            :id="`item${index}`"
-                            v-if="item.appStatus == '1'"
-                        >
-                            <view class="player">
-                                <image src="https://static.caimei365.com/app/img/supplier-login/player.png" class="player-img"  mode=""></image>
-                            </view>
-                            <view class="img-item"><image :src="item.headAppBanner" mode="" class="img"></image></view>
-                            <view class="videotitle">
-                                <view class="text">{{ item.title }}</view>
-                            </view>
-                        </view>
-                    </scroll-view>
-                </view>
-            </view>
-            <view class="item-dots"><page-dots :pageAll="videoList.length" :isActive="isVideo" @hanlder-click="hanlderVideoClick" /></view>
-            <view class="enterprise">
-                <view class="title">采美资讯</view>
-                <view class="container">
-                    <scroll-view
-                        scroll-x="true"
-                        class="scroll-view"
-                        @scroll="scrollHandler"
-                        :scroll-into-view="activeMenu"
-                        scroll-with-animation="true"
-                    >
-                        <view
-                            class="video-item"
-                            v-for="(item, index) in articelList"
-                            :key="item.id"
-                            @click="handlerTramp(item)"
-                            :id="`item${index}`"
-                            v-if="item.appStatus == '1'"
-                        >
-                            <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>
-                        </view>
-                    </scroll-view>
-                </view>
-            </view>
-            <view class="item-dots"><page-dots :pageAll="articelList.length" :isActive="isArtical" @hanlder-click="hanlderClick" /></view>
-        </view>
-    </view>
-</template>
-
-<script>
-import PageDots from './swiper-dots.vue'
-export default {
-    props: {
-        videoList: {
-            type: Array,
-            default: () => []
-        },
-        articelList: {
-            type: Array,
-            default: () => []
-        }
-    },
-    components: {
-        PageDots
-    },
-    data() {
-        return {
-            isVideo: 0,
-            isArtical: 0,
-            activeMenu: 'item0',
-            activeVideoMenu: 'item0'
-        }
-    },
-    watch: {
-        videoList: {
-            handler(val) {
-                this.community_video_list = val
-            },
-            deep: true
-        },
-        articelList: {
-            handler(val) {
-                this.community_article_list = val
-            },
-            deep: true
-        }
-    },
-    methods: {
-        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"')
-            data = data.replace(/\<figure/g, '<div')
-            data = data.replace(/\<\/figure/g, '<\/div')
-            uni.setStorageSync('artForm', data)
-            uni.navigateTo({
-                url: '/pages/login/supplier_information'
-            })
-        },
-        scrollHandler($event) {
-            const data = Math.floor($event.detail.scrollLeft / 192)
-             this.isArtical = data
-        },
-        scrollVideoHandler($event) {
-            const data = Math.floor($event.detail.scrollLeft / 192)
-             this.isVideo = data
-        },
-        // 点击导航
-        hanlderClick($event) {
-            this.isArtical = $event
-            this.activeMenu = `item${$event}`
-        },
-        hanlderVideoClick($event) {
-            this.isVideo = $event
-            this.activeVideoMenu = `item${$event}`
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.img {
-    width: 100%;
-    height: 100%;
-}
-.growthcommunity {
-    padding: 1px;
-    box-sizing: border-box;
-    background-color: #fff;
-    .negotiation {
-        padding-left: 72rpx;
-    }
-}
-.enterprise {
-    position: relative;
-    margin-bottom: 50rpx;
-}
-.title {
-    color: #333333;
-    font-size: 32rpx;
-    margin-bottom: 34rpx;
-}
-.scroll-view {
-    white-space: nowrap;
-}
-.video-item {
-    width: 384rpx;
-    height: 376rpx;
-    background: #ffffff;
-    border: 1px solid #eaeaea;
-    display: inline-flex;
-    margin-right: 32rpx;
-    box-sizing: border-box;
-    flex-direction: column;
-    overflow-wrap: break-word;
-    white-space: normal;
-    position: relative;
-    .player {
-        height: calc(100% - 159rpx);
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: rgba(0, 0, 0, 0.3);
-        .player-img {
-            width: 60rpx;
-            height: 60rpx;
-        }
-    }
-    .img-item {
-        height: calc(100% - 159rpx);
-        width: 100%;
-    }
-    .videotitle {
-        width: 100%;
-        height: 159rpx;
-        font-size: 28rpx;
-        color: #333333;
-        padding: 40rpx 40rpx;
-        overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        .text {
-            width: 336rpx;
-            height: 90rpx;
-            overflow: hidden;
-            line-height: 48rpx;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow-wrap: break-word;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-        }
-    }
-    .articleContent {
-        .text {
-            margin-top: 24rpx;
-            box-sizing: border-box;
-            padding-left: 24rpx;
-            color: #333333;
-            font-size: 32rpx;
-            border-left: 2px solid #ff5b00;
-        }
-        .article-con {
-            margin-top: 18rpx;
-            width: 100%;
-            height: 62rpx;
-            box-sizing: border-box;
-            padding: 0 24rpx;
-            color: #666666;
-            font-size: 24rpx;
-            overflow: hidden;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow-wrap: break-word;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-        }
-    }
-}
-.item-dots {
-    height: 160rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: -20rpx;
-}
-</style>
+<template>
+    <view class="growthcommunity">
+        <slot name="supplier-title"></slot>
+        <view class="negotiation">
+            <view class="enterprise">
+                <view class="title">美业企谈</view>
+                <view class="more" @click="handlerMore(2)">更多 ></view>
+                <view class="container">
+                    <scroll-view
+                        scroll-x="true"
+                        class="scroll-view"
+                        @scroll="scrollVideoHandler"
+                        :scroll-into-view="activeVideoMenu"
+                        scroll-with-animation="true"
+                    >
+                        <view
+                            class="video-item"
+                            v-for="(item, index) in videoList"
+                            :key="item.id"
+                            @click="$emit('playVideo', item)"
+                            :id="`item${index}`"
+                            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>
+                            </view>
+                            <view class="img-item"><image :src="item.headAppBanner" mode="" class="img"></image></view>
+                            <view class="videotitle">
+                                <view class="text">{{ item.title }}</view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </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>
+                <view class="container">
+                    <scroll-view
+                        scroll-x="true"
+                        class="scroll-view"
+                        @scroll="scrollHandler"
+                        :scroll-into-view="activeMenu"
+                        scroll-with-animation="true"
+                    >
+                        <view
+                            class="video-item"
+                            v-for="(item, index) in articelList"
+                            :key="item.id"
+                            @click="handlerTramp(item)"
+                            :id="`item${index}`"
+                            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" v-html="item.content.replace(/<[^>]+>/g, '').replace(/[ ]|[&nbsp;]/g, '')"></view>
+                            </view>
+                        </view>
+                    </scroll-view>
+                </view>
+            </view>
+            <view class="item-dots"><page-dots :pageAll="pageAll(articelList.length)" :isActive="isArtical" @hanlder-click="hanlderClick" /></view>
+        </view>
+    </view>
+</template>
+
+<script>
+import PageDots from './swiper-dots.vue'
+export default {
+    props: {
+        videoList: {
+            type: Array,
+            default: () => []
+        },
+        articelList: {
+            type: Array,
+            default: () => []
+        }
+    },
+    components: {
+        PageDots
+    },
+    data() {
+        return {
+            isVideo: 0,
+            isArtical: 0,
+            activeMenu: 'item0',
+            activeVideoMenu: 'item0'
+        }
+    },
+    watch: {
+        videoList: {
+            handler(val) {
+                this.community_video_list = val
+            },
+            deep: true
+        },
+        articelList: {
+            handler(val) {
+                this.community_article_list = val
+            },
+            deep: true
+        }
+    },
+    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"')
+            data = data.replace(/\<figure/g, '<div')
+            data = data.replace(/\<\/figure/g, '<\/div')
+            uni.setStorageSync('artForm', data)
+            uni.navigateTo({
+                url: '/pages/login/supplier_information'
+            })
+        },
+        scrollHandler($event) {
+            const data = Math.floor($event.detail.scrollLeft / 192)
+             this.isArtical = data
+        },
+        scrollVideoHandler($event) {
+            const data = Math.floor($event.detail.scrollLeft / 192)
+             this.isVideo = data
+        },
+        // 点击导航
+        hanlderClick($event) {
+            this.isArtical = $event
+            this.activeMenu = `item${$event}`
+        },
+        hanlderVideoClick($event) {
+            this.isVideo = $event
+            this.activeVideoMenu = `item${$event}`
+        },
+        handlerMore ($event) {
+            if ($event === 1) return uni.navigateTo({ url: '/pages/login/supplier_more?active=' + $event})
+            else return uni.navigateTo({ url: '/pages/login/supplier_more?active=' + $event })
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.img {
+    width: 100%;
+    height: 100%;
+}
+.growthcommunity {
+    padding: 1px;
+    box-sizing: border-box;
+    background-color: #fff;
+    .negotiation {
+        padding-left: 72rpx;
+    }
+}
+.enterprise {
+    position: relative;
+    margin-bottom: 50rpx;
+    .more {
+        position: absolute;
+        right: 100rpx;
+        top: 4rpx;
+        font-size: 24rpx;
+    }
+}
+.title {
+    color: #333333;
+    font-size: 32rpx;
+    margin-bottom: 34rpx;
+}
+.scroll-view {
+    white-space: nowrap;
+}
+.video-item {
+    width: 384rpx;
+    height: 376rpx;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    display: inline-flex;
+    margin-right: 32rpx;
+    box-sizing: border-box;
+    flex-direction: column;
+    overflow-wrap: break-word;
+    white-space: normal;
+    position: relative;
+    .player {
+        height: calc(100% - 159rpx);
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        .player-img {
+            width: 60rpx;
+            height: 60rpx;
+        }
+    }
+    .img-item {
+        height: calc(100% - 159rpx);
+        width: 100%;
+    }
+    .videotitle {
+        width: 100%;
+        height: 159rpx;
+        font-size: 28rpx;
+        color: #333333;
+        padding: 40rpx 40rpx;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        .text {
+            width: 336rpx;
+            height: 90rpx;
+            overflow: hidden;
+            line-height: 48rpx;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow-wrap: break-word;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+        }
+    }
+    .articleContent {
+        .text {
+            margin-top: 24rpx;
+            box-sizing: border-box;
+            padding-left: 24rpx;
+            color: #333333;
+            font-size: 32rpx;
+            border-left: 2px solid #ff5b00;
+        }
+        .article-con {
+            margin-top: 18rpx;
+            width: 100%;
+            height: 62rpx;
+            box-sizing: border-box;
+            padding: 0 24rpx;
+            color: #666666;
+            font-size: 24rpx;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow-wrap: break-word;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+        }
+    }
+}
+.item-dots {
+    height: 160rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -20rpx;
+}
+</style>

pages/login/supplier_login.vue

@@ -1,462 +1,469 @@
-<template>
-    <view>
-        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" /></view>
-        <view class="container">
-            <scroll-view
-                class="scrollview"
-                @scroll="scrollView"
-                scroll-y="true"
-                :scroll-into-view="activeMenu"
-                :scroll-with-animation="true"
-            >
-                <view id="item0">
-                    <marke-service :bannersList="bannerList">
-                        <template #supplier-title>
-                            <supplier-title title="全生命周期陪跑服务" subtitle="采美，更专业的美业数字化营销服务" />
-                        </template>
-                    </marke-service>
-                </view>
-                <view id="item1">
-                    <Solution :isShareTimeline="isShareTimeline" @solutionModal="solutionModal">
-                        <template #supplier-title>
-                            <supplier-title title="解决方案" subtitle="满足企业全方位需求" />
-                        </template>
-                    </Solution>
-                </view>
-                <view id="item2">
-                    <basic-operation>
-                        <template #supplier-title>
-                            <supplier-title title="基础运营产品" subtitle="使企业走向数字化的基石" />
-                        </template>
-                    </basic-operation>
-                </view>
-                <view id="item3">
-                    <scenario-market>
-                        <template #supplier-title>
-                            <supplier-title title="场景营销工具" subtitle="多样化工具，全方位助力您的企业目标" />
-                        </template>
-                    </scenario-market>
-                </view>
-                <view id="item4">
-                    <success-cases :successList="successList">
-                        <template #supplier-title>
-                            <supplier-title
-                                title="成功案例"
-                                subtitle="了解已合作品牌的真实推广案例，借鉴成功经验<br />助力有效推广，实现商业目标"
-                            />
-                        </template>
-                    </success-cases>
-                </view>
-                <view id="item5">
-                    <caimei-about>
-                        <template #supplier-title>
-                            <supplier-title
-                                title="关于采美"
-                                subtitle="了解采美，合作共赢"
-                                titlecolor="#ffffff"
-                                subtitlecolor="#ffffff"
-                            />
-                        </template>
-                    </caimei-about>
-                </view>
-                <view id="item6">
-                    <growth-community @playVideo="playVideo" :videoList="videoList" :articelList="articelList">
-                        <template #supplier-title>
-                            <supplier-title title="增长社区" subtitle="数十年资深美业运营经验，教你快速成长" />
-                        </template>
-                    </growth-community>
-                </view>
-            </scroll-view>
-        </view>
-        <view class="supplier-slide" ref="supplierSlide" :style="{zIndex: isModalShow ? -1 : 20}">
-            <view class="user-cicle" @click="supplierLogin" v-if="!hasLogin || userInfo.userIdentity === 3">
-                <image
-                    style="width: 48rpx;height: 48rpx;"
-                    src="https://static.caimei365.com/app/img/supplier-login/userDefault_new.png"
-                    mode=""
-                ></image>
-                <view class="userLogin">{{ hasLogin ? userInfo.name : '登录/注册'}}</view>
-            </view>
-            <view class="slide">
-                <view
-                    class="slide-item"
-                    v-for="item in slideList"
-                    :key="item.id"
-                    v-if="item.isShow"
-                    @click="handlerChange(item)"
-                >
-                    <image class="slide-img" :src="item.slideBg" mode=""></image>
-                    <view class="slide-title">{{ item.title }}</view>
-                </view>
-            </view>
-        </view>
-        <tui-modal :show="show" custom @cancel="cancel">
-            <view class="tui-modal-custom">
-                <view class="tui-modal-custom-text">周一至周五 9:00~1800</view>
-                <view class="tui-modal-custom-phone" @click=";(modal = true), (show = false)">153-3889-7365</view>
-            </view>
-        </tui-modal>
-        <tui-modal :show="isPhone" class="qrcode" custom @cancel="cancel">
-            <view class="tui-modal-custom-qrcode">
-                <image
-                    style="width: 100%;height: 100%;"
-                    show-menu-by-longpress="true"
-                    src="https://static.caimei365.com/app/img/supplier-login/kefu_qr.jpg"
-                    mode=""
-                ></image>
-            </view>
-        </tui-modal>
-        <tui-modal :show="modal" custom @cancel="cancel">
-            <view class="tui-modal-custom-call">
-                <view class="tui-modal-custom-text">
-                    确定拨打
-                    <text style="color: #FF5B00;font-weight: bold;margin: 0 6rpx;">153-3889-7365</text>
-                    吗？
-                </view>
-                <view class="modal-btns">
-                    <tui-button
-                        class="cancel"
-                        type="black"
-                        @click="modal = false"
-                        height="72rpx"
-                        :size="28"
-                        plain
-                        shape="circle"
-                    >
-                        取消
-                    </tui-button>
-                    <tui-button
-                        class="determine"
-                        height="72rpx"
-                        :size="28"
-                        type="warning"
-                        shape="circle"
-                        @click="handleClick"
-                    >
-                        确定
-                    </tui-button>
-                </view>
-            </view>
-        </tui-modal>
-        <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
-    </view>
-</template>
-
-<script>
-import LoginMenu from './components/supplier-loginMenu.vue'
-import MarkeService from './components/markeServices.vue'
-import SupplierTitle from './components/supplier-title.vue'
-import Solution from './components/solution.vue'
-import BasicOperation from './components/basicOperationsProducts.vue'
-import ScenarioMarket from './components/scenarioMarketing.vue'
-import SuccessCases from './components/successCases.vue'
-import CaimeiAbout from './components/caimei-about.vue'
-import GrowthCommunity from './components/growthCommunity.vue'
-import CmVideo from './components/caimei-video.vue'
-import { mapState } from 'vuex'
-export default {
-    components: {
-        LoginMenu,
-        MarkeService,
-        SupplierTitle,
-        Solution,
-        BasicOperation,
-        ScenarioMarket,
-        SuccessCases,
-        CaimeiAbout,
-        GrowthCommunity,
-        CmVideo
-    },
-    data() {
-        return {
-            menuList: [
-                {
-                    id: 0,
-                    title: '营销服务'
-                },
-                {
-                    id: 1,
-                    title: '解决方案'
-                },
-                {
-                    id: 2,
-                    title: '运营产品'
-                },
-                {
-                    id: 3,
-                    title: '营销工具'
-                },
-                {
-                    id: 4,
-                    title: '成功案例'
-                },
-                {
-                    id: 5,
-                    title: '关于采美'
-                },
-                {
-                    id: 6,
-                    title: '增长社区'
-                }
-            ],
-            activeMenu: '', // 滚动到指定位置
-            show: false,
-            isPhone: false,
-            modal: false,
-            showVideo: false,
-            videoObj: {},
-            slideList: [
-                {
-                    id: 1,
-                    title: '电话联系',
-                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/phone.png',
-                    isShow: true
-                },
-                {
-                    id: 2,
-                    title: '微信客服',
-                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/qrcode.png',
-                    isShow: true
-                },
-                {
-                    id: 3,
-                    title: '',
-                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/scrolltop.png',
-                    isShow: false
-                }
-            ],
-            successList: [],
-            videoList: [],
-            articelList: [],
-            bannerList: [],
-            isShareTimeline: false, // 是否从朋友圈分享
-            isModalShow: false,
-        }
-    },
-    computed: {
-        ...mapState(['hasLogin', 'userInfo'])
-    },
-    watch: {},
-    onLoad(options) {
-        // 是否从朋友圈分享进入
-        if (options.isShareTimeline) {
-            this.isShareTimeline = options.isShareTimeline
-        } 
-        // 点击链接
-        uni.$on('changeLink', e => {
-            setTimeout(() => {
-                this.activeMenu = e
-            }, 500)
-        })
-    },
-    mounted() {
-        this.getSupplierLanding()
-    },
-    onShareAppMessage(res) {
-        return {
-            title: '更专业的美业数字化营销服务',
-            path: '/pages/login/supplier_login'
-        }
-    },
-    // 分享朋友圈
-    onShareTimeline() {
-        return {
-            title: '更专业的美业数字化营销服务',
-            path: '/pages/login/supplier_login',
-            query: 'isShareTimeline=' + true
-        }
-    },
-    methods: {
-        // 滚动事件
-        scrollPage($event) {
-            this.activeMenu = $event
-        },
-        scrollView(e) {
-            this.activeMenu = ''
-            if (e.detail.scrollTop < 50) {
-                this.slideList[2].isShow = false
-            } else {
-                this.slideList[2].isShow = true
-            }
-        },
-        handlerChange(e) {
-            const obj = {
-                1: () => (this.show = true),
-                2: () => (this.isPhone = true),
-                3: () => (this.activeMenu = 'item0')
-            }
-            obj[e.id]()
-        },
-        hideAlert() {
-            this.show = false
-        },
-        // 拨打电话
-        handleClick() {
-            uni.makePhoneCall({
-                phoneNumber: '153-3889-7365' //仅为示例
-            })
-            this.modal = false
-        },
-        cancel() {
-            this.modal = false
-            this.show = false
-            this.isPhone = false
-        },
-        // 视频播放
-        playVideo($event) {
-            this.videoObj = $event
-            this.showVideo = true
-        },
-        // 视频关闭
-        closeVideo() {
-            this.showVideo = false
-        },
-        // supplierLogin 登陆
-        supplierLogin() {
-            if (this.hasLogin) {
-                uni.navigateTo({
-                    url: '/pages/supplier/user/supplier?shopId=' + this.userInfo.shopId
-                })
-            } else {
-                uni.navigateTo({
-                    url: '/pages/login/login?state=1'
-                })
-            }
-        },
-        // solutionModal 方案解决模块
-        solutionModal(val) {
-            this.isModalShow = val
-        },
-        async getSupplierLanding() {
-            try {
-                const { data } = await this.UserService.supplierLoading({ source: 2 })
-                this.bannerList = data.banner
-                this.successList = data.landing.filter(e => e.type == '1')
-                this.videoList = data.landing.filter(e => e.type == '2')
-                this.articelList = data.landing.filter(e => e.type == '3')
-            } catch (error) {
-                console.log(error)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-    position: absolute;
-    bottom: 0;
-    height: auto;
-}
-.scrollview {
-    width: 100%;
-    height: calc(100vh - 120rpx);
-    background-color: #fff;
-    #item1 {
-        z-index: 20;
-    }
-}
-.supplier-slide {
-    position: fixed;
-    right: 40rpx;
-    box-sizing: border-box;
-    width: 100rpx;
-    bottom: 100rpx;
-    .user-cicle {
-        width: 100rpx;
-        height: 150rpx;
-        background: url(https://static.caimei365.com/app/img/supplier-login/userbg.png) center no-repeat;
-        border-radius: 36px;
-        margin-bottom: 40rpx;
-        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(51, 51, 51, 0.16);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: column;
-        font-size: 18rpx;
-        color: white;
-        box-sizing: border-box;
-        padding: 34rpx 0;
-        .userLogin {
-            width: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: center;
-        }
-    }
-    .slide {
-        width: 100rpx;
-        overflow: hidden;
-        border-radius: 50rpx;
-        background-color: #ff5b00;
-        box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(255, 91, 0, 0.3);
-        .slide-img {
-            width: 45rpx;
-            height: 45rpx;
-        }
-        .slide-item {
-            height: 140rpx;
-            width: 100rpx;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            box-sizing: border-box;
-            padding-top: 30rpx;
-            border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
-            .slide-title {
-                margin-top: 10rpx;
-                font-size: 20rpx;
-                color: #fff;
-            }
-        }
-        .slide-item:nth-child(3) {
-            padding-top: 45rpx !important;
-        }
-    }
-}
-.tui-modal-custom {
-    padding: 30rpx 80rpx;
-}
-.tui-modal-custom-text {
-    text-align: center;
-    color: #666666;
-    font-size: 28rpx;
-}
-.tui-modal-custom-phone {
-    margin-top: 62rpx;
-    text-align: center;
-    color: #ff5b00;
-    border-bottom: 1px solid #ff5b00;
-    font-size: 40rpx;
-    font-weight: bold;
-}
-.tui-modal-custom-call {
-    font-size: 32rpx;
-    color: #666666;
-    padding-top: 50rpx;
-}
-.qrcode {
-    ::v-deep .tui-modal-box {
-        width: auto !important;
-        padding: 6rpx !important;
-        border-radius: 0 !important;
-    }
-    .tui-modal-custom-qrcode {
-        width: 412rpx;
-        height: 412rpx;
-    }
-}
-.modal-btns {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 62rpx;
-    .cancel {
-        width: 200rpx !important;
-        color: #666666 !important;
-    }
-    .determine {
-        width: 200rpx !important;
-    }
-}
-</style>
+<template>
+    <view>
+        <view class="supplier_login"><login-menu :menuList="menuList" @scrollPage="scrollPage" ref="login-menu" /></view>
+        <view class="container">
+            <scroll-view
+                class="scrollview"
+                @scroll="scrollView"
+                scroll-y="true"
+                :scroll-into-view="activeMenu"
+                :scroll-with-animation="true"
+            >
+                <view id="item0">
+                    <marke-service :bannersList="bannerList">
+                        <template #supplier-title>
+                            <supplier-title title="全生命周期陪跑服务" subtitle="采美，更专业的美业数字化营销服务" />
+                        </template>
+                    </marke-service>
+                </view>
+                <view id="item1">
+                    <Solution :isShareTimeline="isShareTimeline" @solutionModal="solutionModal">
+                        <template #supplier-title>
+                            <supplier-title title="解决方案" subtitle="满足企业全方位需求" />
+                        </template>
+                    </Solution>
+                </view>
+                <view id="item2">
+                    <basic-operation>
+                        <template #supplier-title>
+                            <supplier-title title="基础运营产品" subtitle="使企业走向数字化的基石" />
+                        </template>
+                    </basic-operation>
+                </view>
+                <view id="item3">
+                    <scenario-market>
+                        <template #supplier-title>
+                            <supplier-title title="场景营销工具" subtitle="多样化工具，全方位助力您的企业目标" />
+                        </template>
+                    </scenario-market>
+                </view>
+                <view id="item4">
+                    <success-cases :successList="successList">
+                        <template #supplier-title>
+                            <supplier-title
+                                title="成功案例"
+                                subtitle="了解已合作品牌的真实推广案例，借鉴成功经验<br />助力有效推广，实现商业目标"
+                            />
+                        </template>
+                    </success-cases>
+                </view>
+                <view id="item5">
+                    <caimei-about>
+                        <template #supplier-title>
+                            <supplier-title
+                                title="关于采美"
+                                subtitle="了解采美，合作共赢"
+                                titlecolor="#ffffff"
+                                subtitlecolor="#ffffff"
+                            />
+                        </template>
+                    </caimei-about>
+                </view>
+                <view id="item6">
+                    <growth-community @playVideo="playVideo" :videoList="videoList" :articelList="articelList">
+                        <template #supplier-title>
+                            <supplier-title title="增长社区" subtitle="数十年资深美业运营经验，教你快速成长" />
+                        </template>
+                    </growth-community>
+                </view>
+            </scroll-view>
+        </view>
+        <view class="supplier-slide" ref="supplierSlide" :style="{zIndex: isModalShow ? -1 : 20}">
+            <view class="user-cicle" @click="supplierLogin" v-if="!hasLogin || userInfo.userIdentity === 3">
+                <image
+                    style="width: 48rpx;height: 48rpx;"
+                    src="https://static.caimei365.com/app/img/supplier-login/userDefault_new.png"
+                    mode=""
+                ></image>
+                <view class="userLogin">{{ hasLogin ? userInfo.name : '登录/注册'}}</view>
+            </view>
+            <view class="slide">
+                <view
+                    class="slide-item"
+                    v-for="item in slideList"
+                    :key="item.id"
+                    v-if="item.isShow"
+                    @click="handlerChange(item)"
+                >
+                    <image class="slide-img" :src="item.slideBg" mode=""></image>
+                    <view class="slide-title">{{ item.title }}</view>
+                </view>
+            </view>
+        </view>
+        <tui-modal :show="show" custom @cancel="cancel">
+            <view class="tui-modal-custom">
+                <view class="tui-modal-custom-text">周一至周五 9:00~1800</view>
+                <view class="tui-modal-custom-phone" @click=";(modal = true), (show = false)">153-3889-7365</view>
+            </view>
+        </tui-modal>
+        <tui-modal :show="isPhone" class="qrcode" custom @cancel="cancel">
+            <view class="tui-modal-custom-qrcode">
+                <image
+                    style="width: 100%;height: 100%;"
+                    show-menu-by-longpress="true"
+                    src="https://static.caimei365.com/app/img/supplier-login/kefu_qr.jpg"
+                    mode=""
+                ></image>
+            </view>
+        </tui-modal>
+        <tui-modal :show="modal" custom @cancel="cancel">
+            <view class="tui-modal-custom-call">
+                <view class="tui-modal-custom-text">
+                    确定拨打
+                    <text style="color: #FF5B00;font-weight: bold;margin: 0 6rpx;">153-3889-7365</text>
+                    吗？
+                </view>
+                <view class="modal-btns">
+                    <tui-button
+                        class="cancel"
+                        type="black"
+                        @click="modal = false"
+                        height="72rpx"
+                        :size="28"
+                        plain
+                        shape="circle"
+                    >
+                        取消
+                    </tui-button>
+                    <tui-button
+                        class="determine"
+                        height="72rpx"
+                        :size="28"
+                        type="warning"
+                        shape="circle"
+                        @click="handleClick"
+                    >
+                        确定
+                    </tui-button>
+                </view>
+            </view>
+        </tui-modal>
+        <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
+    </view>
+</template>
+
+<script>
+import LoginMenu from './components/supplier-loginMenu.vue'
+import MarkeService from './components/markeServices.vue'
+import SupplierTitle from './components/supplier-title.vue'
+import Solution from './components/solution.vue'
+import BasicOperation from './components/basicOperationsProducts.vue'
+import ScenarioMarket from './components/scenarioMarketing.vue'
+import SuccessCases from './components/successCases.vue'
+import CaimeiAbout from './components/caimei-about.vue'
+import GrowthCommunity from './components/growthCommunity.vue'
+import CmVideo from './components/caimei-video.vue'
+import { mapState } from 'vuex'
+export default {
+    components: {
+        LoginMenu,
+        MarkeService,
+        SupplierTitle,
+        Solution,
+        BasicOperation,
+        ScenarioMarket,
+        SuccessCases,
+        CaimeiAbout,
+        GrowthCommunity,
+        CmVideo
+    },
+    data() {
+        return {
+            menuList: [
+                {
+                    id: 0,
+                    title: '营销服务'
+                },
+                {
+                    id: 1,
+                    title: '解决方案'
+                },
+                {
+                    id: 2,
+                    title: '运营产品'
+                },
+                {
+                    id: 3,
+                    title: '营销工具'
+                },
+                {
+                    id: 4,
+                    title: '成功案例'
+                },
+                {
+                    id: 5,
+                    title: '关于采美'
+                },
+                {
+                    id: 6,
+                    title: '增长社区'
+                }
+            ],
+            activeMenu: '', // 滚动到指定位置
+            show: false,
+            isPhone: false,
+            modal: false,
+            showVideo: false,
+            videoObj: {},
+            slideList: [
+                {
+                    id: 1,
+                    title: '电话联系',
+                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/phone.png',
+                    isShow: true
+                },
+                {
+                    id: 2,
+                    title: '微信客服',
+                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/qrcode.png',
+                    isShow: true
+                },
+                {
+                    id: 3,
+                    title: '',
+                    slideBg: 'https://static.caimei365.com/app/img/supplier-login/scrolltop.png',
+                    isShow: false
+                }
+            ],
+            successList: [],
+            videoList: [],
+            articelList: [],
+            bannerList: [],
+            isShareTimeline: false, // 是否从朋友圈分享
+            isModalShow: false,
+        }
+    },
+    computed: {
+        ...mapState(['hasLogin', 'userInfo'])
+    },
+    watch: {},
+    onLoad(options) {
+        // 是否从朋友圈分享进入
+        if (options.isShareTimeline) {
+            this.isShareTimeline = options.isShareTimeline
+        } 
+        // 点击链接
+        uni.$on('changeLink', e => {
+            setTimeout(() => {
+                this.activeMenu = e
+            }, 500)
+        })
+        uni.$on('handlerChangeLink', e => {
+            setTimeout(() => {
+                this.$refs['login-menu'].activeMenu = e
+                this.$refs['login-menu'].isActive = Number(e.split('item')[1])
+                this.activeMenu = e
+            }, 500)
+        })
+    },
+    mounted() {
+        this.getSupplierLanding()
+    },
+    onShareAppMessage(res) {
+        return {
+            title: '更专业的美业数字化营销服务',
+            path: '/pages/login/supplier_login'
+        }
+    },
+    // 分享朋友圈
+    onShareTimeline() {
+        return {
+            title: '更专业的美业数字化营销服务',
+            path: '/pages/login/supplier_login',
+            query: 'isShareTimeline=' + true
+        }
+    },
+    methods: {
+        // 滚动事件
+        scrollPage($event) {
+            this.activeMenu = $event
+        },
+        scrollView(e) {
+            this.activeMenu = ''
+            if (e.detail.scrollTop < 50) {
+                this.slideList[2].isShow = false
+            } else {
+                this.slideList[2].isShow = true
+            }
+        },
+        handlerChange(e) {
+            const obj = {
+                1: () => (this.show = true),
+                2: () => (this.isPhone = true),
+                3: () => (this.activeMenu = 'item0')
+            }
+            obj[e.id]()
+        },
+        hideAlert() {
+            this.show = false
+        },
+        // 拨打电话
+        handleClick() {
+            uni.makePhoneCall({
+                phoneNumber: '153-3889-7365' //仅为示例
+            })
+            this.modal = false
+        },
+        cancel() {
+            this.modal = false
+            this.show = false
+            this.isPhone = false
+        },
+        // 视频播放
+        playVideo($event) {
+            this.videoObj = $event
+            this.showVideo = true
+        },
+        // 视频关闭
+        closeVideo() {
+            this.showVideo = false
+        },
+        // supplierLogin 登陆
+        supplierLogin() {
+            if (this.hasLogin) {
+                uni.navigateTo({
+                    url: '/pages/supplier/user/supplier?shopId=' + this.userInfo.shopId
+                })
+            } else {
+                uni.navigateTo({
+                    url: '/pages/login/login?state=1'
+                })
+            }
+        },
+        // solutionModal 方案解决模块
+        solutionModal(val) {
+            this.isModalShow = val
+        },
+        async getSupplierLanding() {
+            try {
+                const { data } = await this.UserService.supplierLoading({ source: 2 })
+                this.bannerList = data.banner
+                this.successList = data.landing.filter(e => e.type == '1')
+                this.videoList = data.landing.filter(e => e.type == '2')
+                this.articelList = data.landing.filter(e => e.type == '3')
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    position: absolute;
+    bottom: 0;
+    height: auto;
+}
+.scrollview {
+    width: 100%;
+    height: calc(100vh - 120rpx);
+    background-color: #fff;
+    #item1 {
+        z-index: 20;
+    }
+}
+.supplier-slide {
+    position: fixed;
+    right: 40rpx;
+    box-sizing: border-box;
+    width: 100rpx;
+    bottom: 100rpx;
+    .user-cicle {
+        width: 100rpx;
+        height: 150rpx;
+        background: url(https://static.caimei365.com/app/img/supplier-login/userbg.png) center no-repeat;
+        border-radius: 36px;
+        margin-bottom: 40rpx;
+        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(51, 51, 51, 0.16);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: column;
+        font-size: 18rpx;
+        color: white;
+        box-sizing: border-box;
+        padding: 34rpx 0;
+        .userLogin {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: center;
+        }
+    }
+    .slide {
+        width: 100rpx;
+        overflow: hidden;
+        border-radius: 50rpx;
+        background-color: #ff5b00;
+        box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(255, 91, 0, 0.3);
+        .slide-img {
+            width: 45rpx;
+            height: 45rpx;
+        }
+        .slide-item {
+            height: 140rpx;
+            width: 100rpx;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-sizing: border-box;
+            padding-top: 30rpx;
+            border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
+            .slide-title {
+                margin-top: 10rpx;
+                font-size: 20rpx;
+                color: #fff;
+            }
+        }
+        .slide-item:nth-child(3) {
+            padding-top: 45rpx !important;
+        }
+    }
+}
+.tui-modal-custom {
+    padding: 30rpx 80rpx;
+}
+.tui-modal-custom-text {
+    text-align: center;
+    color: #666666;
+    font-size: 28rpx;
+}
+.tui-modal-custom-phone {
+    margin-top: 62rpx;
+    text-align: center;
+    color: #ff5b00;
+    border-bottom: 1px solid #ff5b00;
+    font-size: 40rpx;
+    font-weight: bold;
+}
+.tui-modal-custom-call {
+    font-size: 32rpx;
+    color: #666666;
+    padding-top: 50rpx;
+}
+.qrcode {
+    ::v-deep .tui-modal-box {
+        width: auto !important;
+        padding: 6rpx !important;
+        border-radius: 0 !important;
+    }
+    .tui-modal-custom-qrcode {
+        width: 412rpx;
+        height: 412rpx;
+    }
+}
+.modal-btns {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 62rpx;
+    .cancel {
+        width: 200rpx !important;
+        color: #666666 !important;
+    }
+    .determine {
+        width: 200rpx !important;
+    }
+}
+</style>

pages/login/supplier_more.vue

@@ -0,0 +1,173 @@
+<template>
+    <view class="more">
+        <view class="supplier_login"><login-menu ref="login-menu" :menuList="menuList" @scrollPage="scrollPage" /></view>
+        <view class="more-bg">
+            <image src="https://static.caimei365.com/app/img/supplier-login/growth/banner.png" mode=""></image>
+        </view>
+        <view class="container">
+            <view class="tabs">
+                <view class="tab" :class="params.type === i.id ? 'active' : ''" v-for="i in activeTabs" :key="i.id" @click="handlerTabs(i)">
+                    {{ i.title }}
+                </view>
+            </view>
+            <view class="growth-module-list">
+                <active-team-com v-for="i in dataList" :key="i.id" :module="i" :active="params.type" @playVideo="playVideo"/>
+            </view>
+        </view>
+        <cm-video :show="showVideo" @closeClick="closeVideo" :videoObj="videoObj" />
+    </view>
+</template>
+
+<script>
+import LoginMenu from './components/supplier-loginMenu.vue'
+import activeTeamCom from './components/activeTeamCom.vue'
+import CmVideo from './components/caimei-video.vue'
+export default {
+    components: {
+        LoginMenu,
+        activeTeamCom,
+        CmVideo
+    },
+    data () {
+        return {
+            menuList: [
+                {
+                    id: 0,
+                    title: '营销服务'
+                },
+                {
+                    id: 1,
+                    title: '解决方案'
+                },
+                {
+                    id: 2,
+                    title: '运营产品'
+                },
+                {
+                    id: 3,
+                    title: '营销工具'
+                },
+                {
+                    id: 4,
+                    title: '成功案例'
+                },
+                {
+                    id: 5,
+                    title: '关于采美'
+                },
+                {
+                    id: 6,
+                    title: '增长社区'
+                }
+            ],
+            activeMenu: '',
+            isActive: 6,
+            activeTabs: [
+                {
+                    id: 2,
+                    title: '美业企谈'
+                },
+                {
+                    id: 3,
+                    title: '干货知识'
+                }
+            ],
+            dataList: [],
+            showVideo: false,
+            videoObj: {},
+            params: {
+                pageSize: 10,
+                pageNum: 1,
+                type: 2,
+                source: 2
+            },
+            hasNextPage: false
+        }
+    },
+    onLoad (option) {
+        this.handlerInit()
+        this.params.type = Number(option.active)
+        this.getSupplierLanding(this.params.type)
+    },
+    onPullDownRefresh() {
+        if (this.hasNextPage) {
+            this.getSupplierLanding(this.params.type)
+        }
+        uni.stopPullDownRefresh()
+    },
+    methods: {
+        // 滚动事件
+        scrollPage($event) {
+            this.activeMenu = $event
+            uni.$emit('handlerChangeLink', $event)
+            uni.navigateBack({ delta: 1 })
+        },
+        // init
+        handlerInit () {
+            this.$refs['login-menu'].activeMenu = 'item6'
+            this.$refs['login-menu'].isActive = 6
+        },
+        handlerTabs ($event) {
+            this.params.type = $event.id
+            this.params.pageNum = 1
+            this.dataList = []
+            this.getSupplierLanding(this.params.type)
+        },
+        async getSupplierLanding(active) {
+            try {
+                const { data } = await this.UserService.supplierMoreList(this.params)
+                this.dataList = [...this.dataList, ...data.list]
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 视频播放
+        playVideo($event) {
+            this.videoObj = $event
+            this.showVideo = true
+        },
+        // 视频关闭
+        closeVideo() {
+            this.showVideo = false
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.more {
+    .more-bg {
+        padding-top: 110rpx;
+        height: 360rpx;
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .container {
+        padding: 70rpx 33rpx;
+        box-sizing: border-box;
+        .tabs {
+            padding-bottom: 30rpx;
+            align-items: center;
+            display: flex;
+            box-sizing: border-box;
+            .tab {
+                color: #666666;
+                font-size: 32rpx;
+                margin-right: 56rpx;
+                &.active {
+                    color: #333333;
+                    font-weight: bold;
+                    border-bottom: 3rpx solid #FF5B00;
+                }
+            }
+        }
+        .growth-module-list {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 20rpx;
+        }
+    }
+}
+</style>

services/user.service.js

@@ -1013,5 +1013,15 @@ export default class UserService {
             data,
             isLoading: true
         })
+    }
+    /**
+     * 落地页更多列表
+     */
+    supplierMoreList(data = {}) {
+        return this.AjaxService.get({
+            url: '/user/landing/shopTypeInfo',
+            data,
+            isLoading: true
+        })
     }
 }