caimei-applets-caimei/components/cm-module/liveTemplate/templateA.vue

<template>
    <view class="live-container">
        <view class="cm-tabs">
            <view
                class="cm-tab-item"
                :class="{ on: index === currentTab }"
                v-for="(tab, index) in tablist"
                :key="index"
                @click="handleTabChange(index)"
                >{{ tab.title | dateFormat }}</view
            >
        </view>
        <!-- 轮播图区域 -->
        <view class="cm-swiper-list">
            <swiper-temp
                :displayDate="pageData.floorContent.displayDate1"
                :floorImageList="pageData.floorImageList"
                v-show="currentTab === 0"
            ></swiper-temp>
            <swiper-temp
                :displayDate="pageData.floorContent.displayDate2"
                :floorImageList="pageData.floorImageList2"
                v-show="currentTab === 1"
            ></swiper-temp>
            <swiper-temp
                :displayDate="pageData.floorContent.displayDate3"
                :floorImageList="pageData.floorImageList3"
                v-show="currentTab === 2"
            ></swiper-temp>
        </view>
    </view>
</template>

<script>
import SwiperTemp from './components/swiper-temp1.vue'
export default {
    components: { SwiperTemp },
    props: {
        pageData: {
            type: Object
        },
        userIdentity: {
            type: Number
        }
    },
    data() {
        return {
            tablist: [],
            currentTab: 0
        }
    },
    filters: {
        dateFormat(val) {
            // 2021-08-16 00:00:00
            const str = val.split(' ')[0].split('-')
            return str[1] + '-' + str[2]
        }
    },
    created() {
        this.initTabs()
    },
    methods: {
        // 初始化tab列表
        initTabs() {
            for (let i = 1; i < 4; i++) {
                this.tablist.push({ title: this.pageData.floorContent['displayDate' + i] })
            }
        },
        // tab点击事件
        handleTabChange(index) {
            this.currentTab = index
        }
    }
}
</script>

<style scoped lang="scss">
.live-container {
    position: relative;
}
.cm-tabs {
    position: absolute;
    border-radius: 18rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250rpx;
    top: -80rpx;
    right: 0;
    .cm-tab-item {
        width: 80rpx;
        font-size: 20rpx;
        line-height: 36rpx;
        text-align: center;
        background: #fff;
        &.on {
            color: #fff;
            background: rgb(255, 92, 0);
        }
    }
}
</style>