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

<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="isSwiperTemp.indexOf(page.floorContent.templateType) === -1"
						@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="page.floorContent.templateType == '26'">
            	<pictureH :pageData="page" :userIdentity="userIdentity"></pictureH>
            </template>
            <template v-if="page.floorContent.templateType == '27'">
            	<pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
            </template>
            <template v-if="page.floorContent.templateType == '28'">
            	<pictureG :pageData="page" :userIdentity="userIdentity"></pictureG>
            </template>
            <template v-if="page.floorContent.templateType == '29'">
            	<pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
            </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 '@/components/cm-module/pcitureTemplate/templateA.vue'
import pictureB from '@/components/cm-module/pcitureTemplate/templateB.vue'
import pictureC from '@/components/cm-module/pcitureTemplate/templateC.vue'
import pictureD from '@/components/cm-module/pcitureTemplate/templateD.vue'
import pictureE from '@/components/cm-module/pcitureTemplate/templateE.vue'
import pictureF from '@/components/cm-module/pcitureTemplate/templateF.vue'
import pictureG from '@/components/cm-module/pcitureTemplate/templateG.vue'
import pictureH from '@/components/cm-module/pcitureTemplate/templateH.vue'
//引入图文模板
import articleA from '@/components/cm-module/articleTemplate/templateA.vue'
import articleB from '@/components/cm-module/articleTemplate/templateB.vue'
import articleC from '@/components/cm-module/articleTemplate/templateC.vue'
import articleD from '@/components/cm-module/articleTemplate/templateD.vue'
// 直播楼层模板
import liveA from '@/components/cm-module/liveTemplate/templateA.vue' 
import liveB from '@/components/cm-module/liveTemplate/templateB.vue' 
import liveC from '@/components/cm-module/liveTemplate/templateC.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
	},
	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']
		}
	},
	created() {
		this.initData(this.list)
	},
	computed: {},
	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
				}`
			)
		}
	}
}
</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>