添加模板

components/cm-module/articleTemplate/templateA.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="container article-list">
+		<view class="section clearfix">
+			<image :src="coverUrl" mode="aspectFit" class="cover"></image>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section clearfix">
+			<image :src="coverUrl" mode="aspectFit" class="cover"></image>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section clearfix">
+			<image :src="coverUrl" mode="aspectFit" class="cover"></image>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section clearfix">
+			<image :src="coverUrl" mode="aspectFit" class="cover"></image>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			coverUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/8df647e0-69c4-4ea5-ac2f-648218096656.jpg'
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.article-list {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.section {
+		width: 702rpx;
+		height: 250rpx;
+		background: #ffffff;
+		margin-bottom: 24rpx;
+		box-sizing: border-box;
+		padding: 24rpx;
+		border-radius: 16rpx;
+		.cover {
+			float: left;
+			width: 202rpx;
+			height: 202rpx;
+			margin-right: 20rpx;
+		}
+		.article-text {
+			width: 432rpx;
+			float: left;
+			.title {
+				font-size: 26rpx;
+				height: 37rpx;
+				color: #3a3a3a;
+				margin-bottom: 18rpx;
+			}
+			.content {
+				font-size: 24rpx;
+				line-height: 38rpx;
+				color: #8a8a8a;
+				word-break: break-all;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-inline-box;
+				-webkit-line-clamp: 4;
+				-webkit-box-orient: vertical;
+			}
+		}
+	}
+}
+</style>

components/cm-module/articleTemplate/templateB.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="container article-list">
+		<view class="section clearfix">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section clearfix">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			coverUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.article-list {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.section {
+		width: 702rpx;
+		height: 546rpx;
+		background: #ffffff;
+		margin-bottom: 24rpx;
+		box-sizing: border-box;
+		border-radius: 16rpx;
+		.cover {
+			width: 702rpx;
+			height: 360rpx;
+			border-radius: 16rpx 16rpx 0 0;
+			overflow: hidden;
+			.cover-gg{
+				width: 702rpx;
+				height: 360rpx;
+			}
+		}
+		.article-text {
+			width: 702rpx;
+			box-sizing: border-box;
+			padding: 28rpx 30rpx 28rpx;
+			.title {
+				font-size: 26rpx;
+				height: 37rpx;
+				color: #3a3a3a;
+				margin-bottom: 16rpx;
+			}
+			.content {
+				font-size: 24rpx;
+				line-height: 40rpx;
+				color: #8a8a8a;
+				word-break: break-all;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-inline-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+		}
+	}
+}
+</style>

components/cm-module/articleTemplate/templateC.vue

@@ -0,0 +1,105 @@
+<template>
+	<scroll-view scroll-x="true" class="container article-list">
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			coverUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.article-list {
+	width: 750rpx;
+	margin-left: -24rpx;
+	height: auto;
+	box-sizing: border-box;
+	white-space: nowrap;
+	.section {
+		display: inline-block;
+		width: 310rpx;
+		height: 392rpx;
+		background: #ffffff;
+		box-sizing: border-box;
+		border-radius: 16rpx;
+		margin-right: 24rpx;
+		&:first-child{
+			margin-left: 24rpx;
+		}
+		.cover {
+			width: 310rpx;
+			height: 220rpx;
+			border-radius: 16rpx 16rpx 0 0;
+			overflow: hidden;
+			.cover-gg{
+				width: 310rpx;
+				height: 220rpx;
+			}
+		}
+		.article-text {
+			width: 310rpx;
+			box-sizing: border-box;
+			padding: 24rpx;
+			.title {
+				font-size: 26rpx;
+				height: 37rpx;
+				color: #3a3a3a;
+				margin-bottom: 16rpx;
+			}
+			.content {
+				white-space: normal;
+				font-size: 24rpx;
+				line-height: 40rpx;
+				color: #8a8a8a;
+				word-break: break-all;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-inline-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+		}
+	}
+}
+</style>

components/cm-module/articleTemplate/templateD.vue

@@ -0,0 +1,118 @@
+<template>
+	<view class="container article-list">
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+		<view class="section">
+			<view class="cover">
+				<image :src="coverUrl" mode="widthFix" class="cover-gg"></image>
+			</view>
+			<view class="article-text">
+				<view class="title">11月上海美博会预告</view>
+				<view class="content">
+					第46届中国(上海)国际美博会即将开幕来 自世界各地的美业人将带着最新的美容科
+					技汇聚在广州琶洲国际会展中心，届时参 展人数将突破100万，即使广如26万平...
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			coverUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.article-list {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.section {
+		width: 339rpx;
+		height: 412rpx;
+		background: #ffffff;
+		box-sizing: border-box;
+		border-radius: 16rpx;
+		float: left;
+		margin-right: 24rpx;
+		margin-top: 24rpx;
+		&:nth-child(2n){
+			margin-right: 0;
+		}
+		&:nth-child(1),&:nth-child(2){
+			margin-top: 0;
+		}
+		.cover {
+			width: 339rpx;
+			height: 240rpx;
+			border-radius: 16rpx 16rpx 0 0;
+			overflow: hidden;
+			.cover-gg{
+				width: 339rpx;
+				height: 240rpx;
+			}
+		}
+		.article-text {
+			width: 339rpx;
+			box-sizing: border-box;
+			padding: 24rpx;
+			.title {
+				font-size: 26rpx;
+				height: 37rpx;
+				color: #3a3a3a;
+				margin-bottom: 16rpx;
+			}
+			.content {
+				font-size: 24rpx;
+				line-height: 40rpx;
+				color: #8a8a8a;
+				word-break: break-all;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-inline-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+		}
+	}
+}
+</style>

components/cm-module/homeIndex/pageFloor.vue

@@ -1,140 +1,165 @@
 <template>
 	<view>
-		<view class="page-content clearfix" v-for="(page,index) in pageFloorList" :key="index">
+		<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="page.floorContent.templateType != '8'" @click="NavToDetailPage(page)">
-						<text>更多</text>
-						<text class="iconfont icon-xiayibu"></text>
+					<view
+						class="tui-group-r"
+						v-if="page.floorContent.templateType != '8'"
+						@click="NavToDetailPage(page)"
+					>
+						<text>更多</text> <text class="iconfont icon-xiayibu"></text>
 					</view>
-					
 				</view>
 				<view class="tui-sub__desc">{{ page.detail }}</view>
 			</view>
+
+			<!-- 图文列表END -->
 			<template v-if="page.floorContent.templateType == '1'">
 				<templateA :pageData="page" :userIdentity="userIdentity"></templateA>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '2'">
 				<templateB :pageData="page" :userIdentity="userIdentity"></templateB>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '3'">
 				<templateC :pageData="page" :userIdentity="userIdentity"></templateC>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '4'">
 				<templateD :pageData="page" :userIdentity="userIdentity"></templateD>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '5'">
 				<templateE :pageData="page" :userIdentity="userIdentity"></templateE>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '6'">
 				<templateF :pageData="page" :userIdentity="userIdentity"></templateF>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '7'">
 				<templateG :pageData="page" :userIdentity="userIdentity"></templateG>
-			</template>	 
+			</template>
 			<template v-if="page.floorContent.templateType == '8'">
 				<templateH :pageData="page" :userIdentity="userIdentity"></templateH>
-			</template>	  
+			</template>
+			<!-- 新增模板 -->
+			<template v-if="page.floorContent.templateType == '9'">
+				<templateI :pageData="page" :userIdentity="userIdentity"></templateI>
+			</template>
+			<template v-if="page.floorContent.templateType == '10'">
+				<templateJ :pageData="page" :userIdentity="userIdentity"></templateJ>
+			</template>
+			<template v-if="page.floorContent.templateType == '11'">
+				<templateK :pageData="page" :userIdentity="userIdentity"></templateK>
+			</template>
 		</view>
 	</view>
 </template>
 
 <script>
-	import templateA from '@/components/cm-module/pageTemplate/templateA.vue'
-	import templateB from '@/components/cm-module/pageTemplate/templateB.vue'
-	import templateC from '@/components/cm-module/pageTemplate/templateC.vue'
-	import templateD from '@/components/cm-module/pageTemplate/templateD.vue'
-	import templateE from '@/components/cm-module/pageTemplate/templateE.vue'
-	import templateF from '@/components/cm-module/pageTemplate/templateF.vue'
-	import templateG from '@/components/cm-module/pageTemplate/templateG.vue'
-	import templateH from '@/components/cm-module/pageTemplate/templateH.vue'
-	export default{
-		name:"pageFloor",
-		components:{
-			templateA,
-			templateB,
-			templateC,
-			templateD,
-			templateE,
-			templateF,
-			templateG,
-			templateH,
-		},
-		props:{
-			list:{
-				type:Array
-			},
-			pageType:{
-				type:Number
-			},
-			userIdentity:{
-				type:Number
-			}
-		},
-		data() {
-			return{
-				pageFloorList:[]
-			}
+import templateA from '@/components/cm-module/pageTemplate/templateA.vue'
+import templateB from '@/components/cm-module/pageTemplate/templateB.vue'
+import templateC from '@/components/cm-module/pageTemplate/templateC.vue'
+import templateD from '@/components/cm-module/pageTemplate/templateD.vue'
+import templateE from '@/components/cm-module/pageTemplate/templateE.vue'
+import templateF from '@/components/cm-module/pageTemplate/templateF.vue'
+import templateG from '@/components/cm-module/pageTemplate/templateG.vue'
+import templateH from '@/components/cm-module/pageTemplate/templateH.vue'
+import templateI from '@/components/cm-module/pageTemplate/templateI.vue'
+import templateJ from '@/components/cm-module/pageTemplate/templateJ.vue'
+import templateK from '@/components/cm-module/pageTemplate/templateK.vue'
+import pictureE from '@/components/cm-module/pcitureTemplate/templateE.vue'
+export default {
+	name: 'pageFloor',
+	components: {
+		templateA,
+		templateB,
+		templateC,
+		templateD,
+		templateE,
+		templateF,
+		templateG,
+		templateH,
+		templateI,
+		templateJ,
+		templateK,
+		pictureE
+	},
+	props: {
+		list: {
+			type: Array
 		},
-		created(){
-			this.initData(this.list)
+		pageType: {
+			type: Number
 		},
-		computed: {
-	
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			pageFloorList: []
+		}
+	},
+	created() {
+		this.initData(this.list)
+	},
+	computed: {},
+	methods: {
+		initData(data) {
+			this.pageFloorList = data
 		},
-		methods:{
-			initData(data){
-				this.pageFloorList = data
-			},
-			NavToDetailPage(page) {//跳转
-				this.$api.navigateTo(`/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${page.title}`)
-			}
+		NavToDetailPage(page) {
+			//跳转
+			this.$api.navigateTo(
+				`/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
+					page.title
+				}`
+			)
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.page-content{
-		background-color: #F7F7F7;
-		width: 100%;
-		height: auto;
-		box-sizing: border-box;
-		padding: 0 24rpx;
+.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-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;
+	.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;
-			.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;
-	}
+}
+.tui-sub__desc {
+	width: 100%;
+	float: left;
+	color: rgba(153, 153, 153, 0.9);
+	font-size: $font-size-26;
+}
 </style>

components/cm-module/pageTemplate/templateI.vue

@@ -0,0 +1,490 @@
+<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_02">
+			<image
+				class="item-img-gg"
+				:src="floorData.floorContent.appletsAdsImage2"
+				@click="
+					BannerNavigateTo(
+						floorData.floorContent.linkType2,
+						floorData.floorContent.linkParam2.id
+							? floorData.floorContent.linkParam2.id
+							: '',
+						floorData.floorContent.adsLink2,
+						floorData.floorContent.linkParam2.keyword
+							? floorData.floorContent.linkParam2.keyword
+							: ''
+					)
+				"
+				mode="aspectFill"
+			>
+			</image>
+		</view>
+		<view class="floor-item ad_03">
+			<image
+				class="item-img-gg"
+				:src="floorData.floorContent.appletsAdsImage3"
+				@click="
+					BannerNavigateTo(
+						floorData.floorContent.linkType3,
+						floorData.floorContent.linkParam3.id
+							? floorData.floorContent.linkParam3.id
+							: '',
+						floorData.floorContent.adsLink3,
+						floorData.floorContent.linkParam3.keyword
+							? floorData.floorContent.linkParam3.keyword
+							: ''
+					)
+				"
+				mode="aspectFill"
+			>
+			</image>
+		</view>
+		<view
+			class="floor-item ad_04 clearfix"
+			v-for="(item, idx) in floorData.floorImageList"
+			v-if="idx < 2"
+			:key="idx"
+			@click.stop="navToDetailPage(item)"
+		>
+			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
+			<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">
+					<view class="floor-item-act">
+						<template v-if="userIdentity === 3">
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text
+										v-if="
+											hasLogin &&
+												item.product.price1TextFlag != 1 &&
+												item.product.shopID == shopId
+										"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text v-if="hasLogin && item.product.price1TextFlag != 1"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+					</view>
+					<view v-if="hasLogin">
+						<template v-if="item.product.productCategory == 1">
+							<template v-if="userIdentity == 3">
+								<template v-if="item.product.shopID == shopId">
+									<view
+										class="title-none"
+										v-if="item.product.price1TextFlag === '1'"
+									>
+										<text class="p big">￥未公开价格</text>
+									</view>
+									<view
+										class="price tui-skeleton-rect"
+										v-else
+										:class="
+											PromotionsFormat(item.product.promotions) ? 'none' : ''
+										"
+									>
+										<text class="p sm">￥</text>
+										<text class="p big">{{
+											(PromotionsFormat(item.product.promotions)
+												? item.product.price1
+												: item.product.retailPrice) | NumFormat
+										}}</text>
+									</view>
+								</template>
+								<template v-else>
+									<view class="no-price">
+										<view class="p-stars">
+											<text class="p-no">￥</text>
+											<uni-grader
+												:grade="Number(item.product.price1Grade)"
+												:margin="14"
+											></uni-grader>
+										</view>
+									</view>
+								</template>
+							</template>
+							<template v-else-if="userIdentity === 4">
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view class="title-none" v-if="item.product.price1TextFlag === '2'">
+									<text class="p big">￥价格仅会员可见</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-if="item.product.price1TextFlag === '0'"
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+							<template v-else>
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-else
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+						</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.retailPrice | 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.price1Grade)"
+									: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'
+export default {
+	name: 'templateD',
+	components: {
+		uniGrader
+	},
+	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.$api.getStorage().then(resolve => {
+				this.shopId = resolve.shopId ? resolve.shopId : 0
+			})
+			this.floorData = data
+			// console.log(this.floorData)
+		},
+		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;
+			margin-right: 0;
+			.item-img-gg {
+				width: 100%;
+				height: 240rpx;
+				display: block;
+				border-radius: 16rpx;
+			}
+		}
+		&:nth-child(odd) {
+			margin-right: 0;
+		}
+
+		&.ad_02,&.ad_03{
+			width: 339rpx;
+			height: 260rpx;
+			.item-img-gg {
+				width: 339rpx;
+				height: 260rpx;
+				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;
+		}
+		.floor-tags {
+			height: 28rpx;
+			border-radius: 6rpx;
+			background-color: #ffffff;
+			line-height: 28rpx;
+			color: $color-system;
+			text-align: center;
+			display: inline-block;
+			padding: 0 16rpx;
+			font-size: $font-size-20;
+			border: 1px solid #e15616;
+			float: left;
+		}
+		.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/templateJ.vue

@@ -0,0 +1,506 @@
+<template>
+	<view class="section_page_main clearfix">
+		<view class="floor-item-ad clearfix">
+			<view class="floor-item-left">
+				<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_right">
+				<image
+					class="item-img-gg"
+					:src="floorData.floorContent.appletsAdsImage2"
+					@click="
+						BannerNavigateTo(
+							floorData.floorContent.linkType2,
+							floorData.floorContent.linkParam2.id
+								? floorData.floorContent.linkParam2.id
+								: '',
+							floorData.floorContent.adsLink2,
+							floorData.floorContent.linkParam2.keyword
+								? floorData.floorContent.linkParam2.keyword
+								: ''
+						)
+					"
+					mode="aspectFill"
+				>
+				</image>
+				<image
+					class="item-img-gg"
+					:src="floorData.floorContent.appletsAdsImage3"
+					@click="
+						BannerNavigateTo(
+							floorData.floorContent.linkType3,
+							floorData.floorContent.linkParam3.id
+								? floorData.floorContent.linkParam3.id
+								: '',
+							floorData.floorContent.adsLink3,
+							floorData.floorContent.linkParam3.keyword
+								? floorData.floorContent.linkParam3.keyword
+								: ''
+						)
+					"
+					mode="aspectFill"
+				>
+				</image>
+			</view>
+		</view>
+
+		<view
+			class="floor-item ad_04 clearfix"
+			v-for="(item, idx) in floorData.floorImageList"
+			v-if="idx < 2"
+			:key="idx"
+			@click.stop="navToDetailPage(item)"
+		>
+			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
+			<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">
+					<view class="floor-item-act">
+						<template v-if="userIdentity === 3">
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text
+										v-if="
+											hasLogin &&
+												item.product.price1TextFlag != 1 &&
+												item.product.shopID == shopId
+										"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text v-if="hasLogin && item.product.price1TextFlag != 1"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+					</view>
+					<view v-if="hasLogin">
+						<template v-if="item.product.productCategory == 1">
+							<template v-if="userIdentity == 3">
+								<template v-if="item.product.shopID == shopId">
+									<view
+										class="title-none"
+										v-if="item.product.price1TextFlag === '1'"
+									>
+										<text class="p big">￥未公开价格</text>
+									</view>
+									<view
+										class="price tui-skeleton-rect"
+										v-else
+										:class="
+											PromotionsFormat(item.product.promotions) ? 'none' : ''
+										"
+									>
+										<text class="p sm">￥</text>
+										<text class="p big">{{
+											(PromotionsFormat(item.product.promotions)
+												? item.product.price1
+												: item.product.retailPrice) | NumFormat
+										}}</text>
+									</view>
+								</template>
+								<template v-else>
+									<view class="no-price">
+										<view class="p-stars">
+											<text class="p-no">￥</text>
+											<uni-grader
+												:grade="Number(item.product.price1Grade)"
+												:margin="14"
+											></uni-grader>
+										</view>
+									</view>
+								</template>
+							</template>
+							<template v-else-if="userIdentity === 4">
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view class="title-none" v-if="item.product.price1TextFlag === '2'">
+									<text class="p big">￥价格仅会员可见</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-if="item.product.price1TextFlag === '0'"
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+							<template v-else>
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-else
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+						</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.retailPrice | 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.price1Grade)"
+									: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'
+export default {
+	name: 'templateD',
+	components: {
+		uniGrader
+	},
+	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.$api.getStorage().then(resolve => {
+				this.shopId = resolve.shopId ? resolve.shopId : 0
+			})
+			this.floorData = data
+			// console.log(this.floorData)
+		},
+		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-ad{
+		width: 100%;
+		margin-bottom: 24rpx;
+		.floor-item-left,.floor_item_right{
+			width: 339rpx;
+			height: 516rpx;
+		}
+		.floor-item-left{
+			margin-right: 20rpx;
+			float: left;
+			.item-img-gg{
+				width: 339rpx;
+				height: 516rpx;
+				border-radius: 16rpx;
+			}
+		}
+		.floor_item_right{
+			float: left;
+			.item-img-gg {
+				width: 100%;
+				height: 246rpx;
+				display: block;
+				border-radius: 16rpx;
+				&:nth-child(1){
+					margin-bottom:24rpx;
+				}
+			}
+		}
+	}
+	.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(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;
+		}
+		.floor-tags {
+			height: 28rpx;
+			border-radius: 6rpx;
+			background-color: #ffffff;
+			line-height: 28rpx;
+			color: $color-system;
+			text-align: center;
+			display: inline-block;
+			padding: 0 16rpx;
+			font-size: $font-size-20;
+			border: 1px solid #e15616;
+			float: left;
+		}
+		.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/templateK.vue

@@ -0,0 +1,559 @@
+<template>
+	<view class="section_page_main clearfix">
+		<view class="floor-item-ad clearfix">
+			<view class="floor-item-left">
+				<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_right">
+				<image
+					class="item-img-gg"
+					:src="floorData.floorContent.appletsAdsImage2"
+					@click="
+						BannerNavigateTo(
+							floorData.floorContent.linkType2,
+							floorData.floorContent.linkParam2.id
+								? floorData.floorContent.linkParam2.id
+								: '',
+							floorData.floorContent.adsLink2,
+							floorData.floorContent.linkParam2.keyword
+								? floorData.floorContent.linkParam2.keyword
+								: ''
+						)
+					"
+					mode="aspectFill"
+				>
+				</image>
+				<image
+					class="item-img-gg"
+					:src="floorData.floorContent.appletsAdsImage3"
+					@click="
+						BannerNavigateTo(
+							floorData.floorContent.linkType3,
+							floorData.floorContent.linkParam3.id
+								? floorData.floorContent.linkParam3.id
+								: '',
+							floorData.floorContent.adsLink3,
+							floorData.floorContent.linkParam3.keyword
+								? floorData.floorContent.linkParam3.keyword
+								: ''
+						)
+					"
+					mode="aspectFill"
+				>
+				</image>
+			</view>
+		</view>
+		
+		<view class="floor-item-ad ad-row2 clearfix">
+			<image
+				class="item-img-gg"
+				:src="floorData.floorContent.appletsAdsImage2"
+				@click="
+					BannerNavigateTo(
+						floorData.floorContent.linkType2,
+						floorData.floorContent.linkParam2.id
+							? floorData.floorContent.linkParam2.id
+							: '',
+						floorData.floorContent.adsLink2,
+						floorData.floorContent.linkParam2.keyword
+							? floorData.floorContent.linkParam2.keyword
+							: ''
+					)
+				"
+				mode="aspectFill"
+			>
+			</image>
+			<image
+				class="item-img-gg"
+				:src="floorData.floorContent.appletsAdsImage3"
+				@click="
+					BannerNavigateTo(
+						floorData.floorContent.linkType3,
+						floorData.floorContent.linkParam3.id
+							? floorData.floorContent.linkParam3.id
+							: '',
+						floorData.floorContent.adsLink3,
+						floorData.floorContent.linkParam3.keyword
+							? floorData.floorContent.linkParam3.keyword
+							: ''
+					)
+				"
+				mode="aspectFill"
+			>
+			</image>
+		</view>
+		
+		<view
+			class="floor-item ad_04 clearfix"
+			v-for="(item, idx) in floorData.floorImageList"
+			v-if="idx < 2"
+			:key="idx"
+			@click.stop="navToDetailPage(item)"
+		>
+			<image class="item-img tui-skeleton-fillet" :src="item.image" mode="aspectFill"></image>
+			<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">
+					<view class="floor-item-act">
+						<template v-if="userIdentity === 3">
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text
+										v-if="
+											hasLogin &&
+												item.product.price1TextFlag != 1 &&
+												item.product.shopID == shopId
+										"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+						<template v-else>
+							<template v-if="item.product.actStatus === 1">
+								<view
+									class="floor-tags"
+									v-if="PromotionsFormat(item.product.promotions)"
+								>
+									{{ item.product.promotions.name }}
+									<text v-if="hasLogin && item.product.price1TextFlag != 1"
+										>:￥{{ item.product.retailPrice | NumFormat }}</text
+									>
+								</view>
+								<view class="floor-tags" v-else>{{
+									item.product.promotions.name
+								}}</view>
+							</template>
+							<template
+								v-if="
+									item.product.actStatus === 0 &&
+										item.product.ladderPriceFlag === 1
+								"
+							>
+								<view class="floor-tags">阶梯价格</view>
+							</template>
+						</template>
+					</view>
+					<view v-if="hasLogin">
+						<template v-if="item.product.productCategory == 1">
+							<template v-if="userIdentity == 3">
+								<template v-if="item.product.shopID == shopId">
+									<view
+										class="title-none"
+										v-if="item.product.price1TextFlag === '1'"
+									>
+										<text class="p big">￥未公开价格</text>
+									</view>
+									<view
+										class="price tui-skeleton-rect"
+										v-else
+										:class="
+											PromotionsFormat(item.product.promotions) ? 'none' : ''
+										"
+									>
+										<text class="p sm">￥</text>
+										<text class="p big">{{
+											(PromotionsFormat(item.product.promotions)
+												? item.product.price1
+												: item.product.retailPrice) | NumFormat
+										}}</text>
+									</view>
+								</template>
+								<template v-else>
+									<view class="no-price">
+										<view class="p-stars">
+											<text class="p-no">￥</text>
+											<uni-grader
+												:grade="Number(item.product.price1Grade)"
+												:margin="14"
+											></uni-grader>
+										</view>
+									</view>
+								</template>
+							</template>
+							<template v-else-if="userIdentity === 4">
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view class="title-none" v-if="item.product.price1TextFlag === '2'">
+									<text class="p big">￥价格仅会员可见</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-if="item.product.price1TextFlag === '0'"
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+							<template v-else>
+								<view class="title-none" v-if="item.product.price1TextFlag === '1'">
+									<text class="p big">￥未公开价格</text>
+								</view>
+								<view
+									class="price tui-skeleton-rect"
+									v-else
+									:class="PromotionsFormat(item.product.promotions) ? 'none' : ''"
+								>
+									<text class="p sm">￥</text>
+									<text class="p big">{{
+										(PromotionsFormat(item.product.promotions)
+											? item.product.price1
+											: item.product.retailPrice) | NumFormat
+									}}</text>
+								</view>
+							</template>
+						</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.retailPrice | 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.price1Grade)"
+									: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'
+export default {
+	name: 'templateD',
+	components: {
+		uniGrader
+	},
+	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.$api.getStorage().then(resolve => {
+				this.shopId = resolve.shopId ? resolve.shopId : 0
+			})
+			this.floorData = data
+			// console.log(this.floorData)
+		},
+		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-ad{
+		width: 100%;
+		margin-bottom: 20rpx;
+		.floor-item-left,.floor_item_right{
+			width: 339rpx;
+			height: 516rpx;
+		}
+		.floor-item-left{
+			margin-right: 20rpx;
+			float: left;
+			.item-img-gg{
+				width: 339rpx;
+				height: 516rpx;
+				border-radius: 16rpx;
+			}
+		}
+		.floor_item_right{
+			float: left;
+			.item-img-gg {
+				width: 100%;
+				height: 246rpx;
+				display: block;
+				border-radius: 16rpx;
+				&:nth-child(1){
+					margin-bottom:24rpx;
+				}
+			}
+		}
+		&.ad-row2{
+			width: 100%;
+			margin: 24rpx 0;
+			.item-img-gg {
+				width: 339rpx;
+				height: 246rpx;
+				float: left;
+				display: block;
+				border-radius: 16rpx;
+				&:nth-child(1){
+					margin-right: 20rpx;
+				}
+			}
+		}
+	}
+	.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(even) {
+			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;
+		}
+		.floor-tags {
+			height: 28rpx;
+			border-radius: 6rpx;
+			background-color: #ffffff;
+			line-height: 28rpx;
+			color: $color-system;
+			text-align: center;
+			display: inline-block;
+			padding: 0 16rpx;
+			font-size: $font-size-20;
+			border: 1px solid #e15616;
+			float: left;
+		}
+		.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/pcitureTemplate/templateA.vue

@@ -0,0 +1,234 @@
+<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"
+			>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></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'
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			shopId: 0,
+			productList: [1, 2],
+			current: 100,
+			swiperCurrent: 0,
+			pageSize: 4,
+			testImgUrl:
+				'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/8df647e0-69c4-4ea5-ac2f-648218096656.jpg'
+		}
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	created() {
+		// this.initData(this.pageData)
+	},
+	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
+			})
+			if (data.floorImageList.length > 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: 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: #e15616;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

components/cm-module/pcitureTemplate/templateB.vue

@@ -0,0 +1,221 @@
+<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"
+			>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></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'
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			shopId: 0,
+			productList: [1, 2],
+			current: 100,
+			swiperCurrent: 0,
+			pageSize: 4,
+			testImgUrl:
+				'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/8df647e0-69c4-4ea5-ac2f-648218096656.jpg'
+		}
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	created() {
+		// this.initData(this.pageData)
+	},
+	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
+			})
+			if (data.floorImageList.length > 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: 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 {
+				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;
+				}
+			}
+		}
+	}
+	.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: #e15616;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

components/cm-module/pcitureTemplate/templateC.vue

@@ -0,0 +1,51 @@
+<template>
+	<scroll-view scroll-x="true" class="picture">
+		<view class="section">
+			<image :src="testImgUrl" mode="heightFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="heightFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="heightFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="heightFix"></image>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			testImgUrl:
+					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
+			
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.picture{
+	width: 750rpx;
+	margin-left: -24rpx;
+	white-space: nowrap;
+	.section{
+		display: inline-block;
+		margin-right: 24rpx;
+		width: 310rpx;
+		height: 240rpx;
+		overflow: hidden;
+		border-radius: 16rpx;
+		image{
+			width: 310rpx;
+			height: 240rpx;
+		}
+		&:first-child{
+			margin-left: 24rpx;
+		}
+	}
+}
+</style>

components/cm-module/pcitureTemplate/templateD.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="picture">
+		<view class="section">
+			<image :src="testImgUrl" mode="widthFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="widthFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="widthFix"></image>
+		</view>
+		<view class="section">
+			<image :src="testImgUrl" mode="widthFix"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+export default{
+	data(){
+		return{
+			testImgUrl:
+					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/fe0d2892-b934-4c98-842f-6682e07890a4.jpg'
+			
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.picture{
+	width: 100%;
+	.section{
+		margin-bottom: 24rpx;
+		width: 702rpx;
+		height: 360rpx;
+		overflow: hidden;
+		border-radius: 16rpx;
+		image{
+			width: 702rpx;
+			height: 360rpx;
+		}
+		&:first-child{
+			margin-top: 0;
+		}
+	}
+}
+</style>

components/cm-module/pcitureTemplate/templateE.vue

@@ -0,0 +1,208 @@
+<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"
+			>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+				</swiper-item>
+				<swiper-item class="clearfix">
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></image>
+					</view>
+					<view class="img-box">
+						<image :src="testImgUrl" mode="aspectFill"></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'
+export default {
+	name: 'templateH',
+	components: {
+		uniGrader
+	},
+	props: {
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			shopId: 0,
+			productList: [1, 2],
+			current: 100,
+			swiperCurrent: 0,
+			pageSize: 4,
+			testImgUrl:
+				'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad36ff8-4f90-4748-8ad3-ca265841c862/8df647e0-69c4-4ea5-ac2f-648218096656.jpg'
+		}
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	created() {
+		// this.initData(this.pageData)
+	},
+	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
+			})
+			if (data.floorImageList.length > 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: 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 {
+				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),
+				&:nth-child(2) {
+					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: #e15616;
+			transition: all 0.4s;
+		}
+	}
+}
+</style>

h5/pages/activity/activity-topci.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="container floor clearfix">
+		<!-- top -->
+		<view class="container-top"><image src="http://static.caimei365.com/app/meibohui/banner.jpg" mode=""></image></view>
+		<view class="container-activ" @click="LookMyCouponDetils"><image src="http://static.caimei365.com/app/meibohui/meibo_coupon_02.png" mode=""></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/cm-module/homeIndex/pageFloor.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:'',
+			}
+		},
+		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.GetInstrumentPageData();
+			}).catch(error =>{
+				this.GetInstrumentPageData();
+			})
+			setTimeout(()=>{
+				this.skeletonShow = false
+			},2000)
+		},
+		computed: {
+			...mapState(['hasLogin','userInfo','identity'])
+		},
+		methods:{
+			GetInstrumentPageData(){//获取楼层数据
+				this.CommonService.GetInstrumentPageData({pageId:this.pageId,userId:this.userID,source:2}).then(response =>{
+					let data = response.data
+					this.typeSort = data.page.typeSort
+					this.pageList = data.floorList
+					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
+			},
+		},
+		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/goods/good-floor?type=share&linkId=${this.pageId}`
+			}
+		},
+		onShow() {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #FFFFFF;
+	}
+	.container-home{
+		width: 100%;
+		height: auto;
+	}
+	.container-section{
+		width: 100%;
+		height: auto;
+		background-color: #F7F7F7;
+	}
+	.container-top{
+		width: 100%;
+		height: 500rpx;
+		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.json

@@ -561,6 +561,13 @@
 						"enablePullDownRefresh":true
 					}
 				},
+				{
+					"path": "pages/activity/activity-topci",
+					"style": {
+						"navigationBarTitleText": "活动专题页",
+						"enablePullDownRefresh":true
+					}
+				},
 				{
 					"path": "pages/activity/meobohui-booth",
 					"style": {

pages/tabBar/home/index.vue

@@ -154,6 +154,7 @@
 				this.CommonService.GetHomeInit({source:2}).then(response =>{
 					let data = response.data
 					this.navBarsList = data.topMenuList
+					console.log(this.navBarsList);
 					this.isNavRequest = true
 				}).catch(error =>{
 					this.$util.msg(error.msg,2000)