caimei-applets-caimei/pages/h5/activity/components/active-floor.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="showMore(page)" @click="NavToDetailPage(page)">
                        <text>更多</text>
                        <text class="iconfont icon-xiayibu"></text>
                    </view>
                </view>
                <view class="tui-sub__desc">{{ page.detail }}</view>
            </view>
            <!-- 图文模板 -->
            <template v-if="page.floorContent.templateType == '3'">
                <articleA :pageData="page" :userIdentity="userIdentity"></articleA>
            </template>
            <template v-if="page.floorContent.templateType == '4'">
                <articleB :pageData="page" :userIdentity="userIdentity"></articleB>
            </template>
            <template v-if="page.floorContent.templateType == '5'">
                <articleC :pageData="page" :userIdentity="userIdentity"></articleC>
            </template>
            <template v-if="page.floorContent.templateType == '6'">
                <articleD :pageData="page" :userIdentity="userIdentity"></articleD>
            </template>
            <!-- 图片模板 -->
            <template v-if="page.floorContent.templateType == '1'">
                <pictureA :pageData="page" :userIdentity="userIdentity"></pictureA>
            </template>
            <template v-if="page.floorContent.templateType == '2'">
                <pictureB :pageData="page" :userIdentity="userIdentity"></pictureB>
            </template>
            <template v-if="page.floorContent.templateType == '7'">
                <pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
            </template>
            <template v-if="page.floorContent.templateType == '8'">
                <pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
            </template>
            <template v-if="page.floorContent.templateType == '9'">
                <pictureE :pageData="page" :userIdentity="userIdentity"></pictureE>
            </template>
            <template v-if="page.floorContent.templateType == '10'">
                <pictureF :pageData="page" :userIdentity="userIdentity"></pictureF>
            </template>
            <!-- 产品模板 -->
            <template v-if="page.floorContent.templateType == '11'">
                <productI :pageData="page" :userIdentity="userIdentity"></productI>
            </template>
            <template v-if="page.floorContent.templateType == '12'">
                <productJ :pageData="page" :userIdentity="userIdentity"></productJ>
            </template>
            <template v-if="page.floorContent.templateType == '13'">
                <productK :pageData="page" :userIdentity="userIdentity"></productK>
            </template>
            <template v-if="page.floorContent.templateType == '14'">
                <productG :pageData="page" :userIdentity="userIdentity"></productG>
            </template>
            <template v-if="page.floorContent.templateType == '15'">
                <productD :pageData="page" :userIdentity="userIdentity"></productD>
            </template>
            <template v-if="page.floorContent.templateType == '16'">
                <productC :pageData="page" :userIdentity="userIdentity"></productC>
            </template>
            <template v-if="page.floorContent.templateType == '17'">
                <productB :pageData="page" :userIdentity="userIdentity"></productB>
            </template>
            <template v-if="page.floorContent.templateType == '18'">
                <productA :pageData="page" :userIdentity="userIdentity"></productA>
            </template>
            <template v-if="page.floorContent.templateType == '19'">
                <productE :pageData="page" :userIdentity="userIdentity"></productE>
            </template>
            <template v-if="page.floorContent.templateType == '20'">
                <productF :pageData="page" :userIdentity="userIdentity"></productF>
            </template>
            <template v-if="page.floorContent.templateType == '21'">
                <productH :pageData="page" :userIdentity="userIdentity"></productH>
            </template>
            <!-- 直播模板 -->
            <template v-if="page.floorContent.templateType == '22'">
                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
            </template>
            <template v-if="page.floorContent.templateType == '23'">
                <liveC :pageData="page" :userIdentity="userIdentity"></liveC>
            </template>
            <template v-if="page.floorContent.templateType == '24'">
                <liveA :pageData="page" :userIdentity="userIdentity"></liveA>
            </template>
            <template v-if="page.floorContent.templateType == '25'">
                <liveB :pageData="page" :userIdentity="userIdentity"></liveB>
            </template>
            <!-- 视频模板 -->
            <template v-if="isTemplate(['26', '30'], page)">
                <videoA :pageData="page" :userIdentity="userIdentity"></videoA>
            </template>
            <template v-if="isTemplate(['27', '31'], page)">
                <videoB :pageData="page" :userIdentity="userIdentity"></videoB>
            </template>
            <template v-if="isTemplate(['28', '32'], page)">
                <videoC :pageData="page" :userIdentity="userIdentity"></videoC>
            </template>
            <template v-if="isTemplate(['29', '33'], page)">
                <videoD :pageData="page" :userIdentity="userIdentity"></videoD>
            </template>
        </view>
    </view>
</template>

<script>
//引入产品模板
import productA from '@/components/cm-module/pageTemplate/templateA.vue'
import productB from '@/components/cm-module/pageTemplate/templateB.vue'
import productC from '@/components/cm-module/pageTemplate/templateC.vue'
import productD from '@/components/cm-module/pageTemplate/templateD.vue'
import productE from '@/components/cm-module/pageTemplate/templateE.vue'
import productF from '@/components/cm-module/pageTemplate/templateF.vue'
import productG from '@/components/cm-module/pageTemplate/templateG.vue'
import productH from '@/components/cm-module/pageTemplate/templateH.vue'
import productI from '@/components/cm-module/pageTemplate/templateI.vue'
import productJ from '@/components/cm-module/pageTemplate/templateJ.vue'
import productK from '@/components/cm-module/pageTemplate/templateK.vue'
//引入图片模板
import pictureA from './template-picture/templateA.vue'
import pictureB from './template-picture/templateB.vue'
import pictureC from './template-picture/templateC.vue'
import pictureD from './template-picture/templateD.vue'
import pictureE from './template-picture/templateE.vue'
import pictureF from './template-picture/templateF.vue'
import pictureG from './template-picture/templateG.vue'
import pictureH from './template-picture/templateH.vue'
//引入图文模板
import articleA from './template-article/templateA.vue'
import articleB from './template-article/templateB.vue'
import articleC from './template-article/templateC.vue'
import articleD from './template-article/templateD.vue'
// 直播楼层模板
import liveA from './template-live/templateA.vue'
import liveB from './template-live/templateB.vue'
import liveC from './template-live/templateC.vue'
// 视频模板
import videoA from './template-video/templateA.vue'
import videoB from './template-video/templateB.vue'
import videoC from './template-video/templateC.vue'
import videoD from './template-video/templateD.vue'

export default {
    name: 'pageFloor',
    components: {
        productA,
        productB,
        productC,
        productD,
        productE,
        productF,
        productG,
        productH,
        productI,
        productJ,
        productK,
        pictureA,
        pictureB,
        pictureC,
        pictureD,
        pictureE,
        pictureF,
        pictureG,
        pictureH,
        articleA,
        articleB,
        articleC,
        articleD,
        liveA,
        liveC,
        liveB,
        videoA,
        videoB,
        videoC,
        videoD
    },
    props: {
        list: {
            type: Array
        },
        pageType: {
            type: Number
        },
        userIdentity: {
            type: Number
        }
    },
    data() {
        return {
            pageFloorList: [],
            isSwiperTemp: ['1', '2', '9', '21', '5', '7', '22', '23', '24', '25', '27', '32']
        }
    },
    created() {
        this.initData(this.list)
    },
    methods: {
        initData(data) {
            this.pageFloorList = data
        },
        NavToDetailPage(page) {
            //跳转
            this.$api.navigateTo(
                `/pages/h5/activity/activity-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${page.title}`
            )
        },
        showMore(page) {
            // if(page.floorContent.templateType)
            if (page.floorContent.templateType == 10) {
                if (page.floorImageList.length <= 1) {
                    return false
                }
            }
            return !this.isSwiperTemp.includes(page.floorContent.templateType)
        },
        isTemplate(temp = [], page) {
            const templateType = page?.floorContent?.templateType
            return templateType && temp.includes(templateType) 
        }
    }
}
</script>

<style lang="scss">
.page-content {
    background-color: #f7f7f7;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24rpx;
    float: left;
}
.tui-group-name {
    width: 100%;
    height: 92rpx;
    padding: 20rpx 0;
}
.tui-group-title {
    width: 100%;
    float: left;
    .tui-group-l {
        float: left;
        font-size: 34rpx;
        font-weight: bold;
        text-align: left;
        line-height: 49rpx;
        color: #333;
    }
    .tui-group-r {
        float: right;
        font-size: $font-size-26;
        text-align: right;
        line-height: 49rpx;
        color: #999999;
        .icon-xiayibu {
            font-size: $font-size-30;
            color: #999999;
        }
    }
}
.tui-sub__desc {
    width: 100%;
    float: left;
    color: rgba(153, 153, 153, 0.9);
    font-size: $font-size-26;
}
</style>