caimei-applets-caimei/components/cm-module/liveTemplate/components/swiper-temp1.vue

<template>
    <view class="section_page_main clearfix">
        <view class="recommend-list">
            <swiper
                class="tui-banner-swiper"
                :autoplay="true"
                :interval="5000"
                :duration="500"
                :circular="true"
                @change="swiperChange"
                :class="{ minHeigth: hasLessImage }"
            >
                <swiper-item class="clearfix" v-for="(item, index1) in list" :key="index1">
                    <view
                        class="img-box"
                        v-for="(product, index2) in item"
                        :key="index2"
                        @click="navigaitionTo(product)"
                    >
                        <view class="cm-cover" :class="'color' + checkDisplayDate">{{coverText[checkDisplayDate]}}</view>
                        <image :src="product.appletsImage" mode="scaleToFill"></image>
                    </view>
                </swiper-item>
            </swiper>
            <view class="swiper__recommenddots-box" v-if="list.length > 1">
                <view
                    v-for="(item, idx) in list"
                    :key="idx"
                    :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
                    :data-index="swiperCurrent"
                    class="swiper__dots-item"
                >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import caimeiApi from '@/common/config/caimeiApi.js'
export default {
    name: 'SwiperTemp',
    props: {
        floorImageList: {
            type: Array
        },
        displayDate: String
    },
    data() {
        return {
            list: [],
            swiperCurrent: 0,
            pageSize: 4,
            imageCount: 0,
            coverText: ['未开始', '已开始', '已结束']
        }
    },
    created() {
        this.initData()
    },
    computed: {
        hasLessImage() {
            return this.imageCount <= 2
        },
        checkDisplayDate() {
            const nowDate = new Date().getTime()
            const displayDate = new Date(this.displayDate).getTime()
            const oneDay = 60 * 60 * 24 * 1000
            // 未开始
            if (nowDate < displayDate) {
                return 0
            }
            // 已开始
            if (nowDate > displayDate && nowDate < displayDate + oneDay) {
                return 1
            }
            // 已结束
            if (nowDate > displayDate + oneDay) {
                return 2
            }
        }
    },
    methods: {
        initData() {
            this.imageCount = this.floorImageList.length
            while (this.floorImageList.length > 0) {
                this.list.push(this.floorImageList.splice(0, this.pageSize))
            }
        },
        swiperChange(e) {
            //轮播切换
            const index = e.detail.current
            this.swiperCurrent = index
        },
        navigaitionTo(item) {
            if (item.adsImage === '' && item.linkType === -1) {
                return
            } else if (item.linkType === -1) {
                uni.navigateTo({
                    url: `/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
                })
            } else {
                caimeiApi.FlooryNavigateTo(item)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.minHeigth {
    height: 250rpx !important;
}
.section_page_main {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    .recommend-list {
        width: 100%;
        position: relative;
        padding-bottom: 20rpx;
        .tui-banner-swiper {
            height: 550rpx;
            width: 100%;
            margin: 0 auto;
            background: #f7f7f7;
            overflow: hidden;
            transform: translateY(0);
            .img-box {
                position: relative;
                width: 339rpx;
                height: 240rpx;
                float: left;
                margin: 24rpx 24rpx 0 0;
                overflow: hidden;
                border-radius: 16rpx;
                image {
                    width: 339rpx;
                    height: 240rpx;
                }
                &:nth-child(2n) {
                    margin-right: 0;
                }
                &:nth-child(1),
                &:nth-child(2) {
                    margin-top: 0;
                }
                .cm-cover {
                    position: absolute;
                    width: 96rpx;
                    height: 40rpx;
                    top: 0;
                    right: 0;
                    border-radius: 0 16rpx 0 16rpx;
                    color: #fff;
                    font-size: 24rpx;
                    text-align: center;
                    line-height: 36rpx;
                    &.color2 {
                        background: rgba(0, 0, 0, 0.5);
                    }
                    &.color1 {
                        background: rgb(255, 92, 0);
                    }
                    &.color0 {
                        background: rgb(30, 206, 112);
                    }
                }
            }
        }
    }
    .swiper__recommenddots-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        .swiper__dots-item {
            width: 8rpx;
            height: 8rpx;
            border-radius: 100%;
            margin-left: 6px;
            background-color: rgba(225, 86, 22, 0.3);
        }
        .swiper__dots-long {
            width: 32rpx;
            height: 8rpx;
            border-radius: 4rpx;
            background-color: #e15616;
            transition: all 0.4s;
        }
    }
}
</style>