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', '8']
        }
    },
    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}`
            )
        }
    }
}
</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>