caimei-applets-caimei/components/cm-module/homeIndex/pageFloor.vue

<template>
	<view>
		<view class="page-content clearfix" v-for="(page, index) in list" :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>
				</view>
				<view class="tui-sub__desc">{{ page.detail }}</view>
			</view>

			<template v-if="page.floorContent.templateType == '1'">
				<templateA :pageData="page" :userIdentity="userIdentity"></templateA>
			</template>
			<template v-if="page.floorContent.templateType == '2'">
				<templateB :pageData="page" :userIdentity="userIdentity"></templateB>
			</template>
			<template v-if="page.floorContent.templateType == '3'">
				<templateC :pageData="page" :userIdentity="userIdentity"></templateC>
			</template>
			<template v-if="page.floorContent.templateType == '4'">
				<templateD :pageData="page" :userIdentity="userIdentity"></templateD>
			</template>
			<template v-if="page.floorContent.templateType == '5'">
				<templateE :pageData="page" :userIdentity="userIdentity"></templateE>
			</template>
			<template v-if="page.floorContent.templateType == '6'">
				<templateF :pageData="page" :userIdentity="userIdentity"></templateF>
			</template>
			<template v-if="page.floorContent.templateType == '7'">
				<templateG :pageData="page" :userIdentity="userIdentity"></templateG>
			</template>
			<template v-if="page.floorContent.templateType == '8'">
				<templateH :pageData="page" :userIdentity="userIdentity"></templateH>
			</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: []
		}
	},
	created() {
		
	},
	watch: {
		list: {
			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				this.list = el
			},
			deep: true
		}
	},
	methods: {
		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;
	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>