yihuo/pages/award/banner.vue

<template>
    <view>
        <view v-if="banners && banners.length > 0" class="swiper-wrapper">
            <swiper class="swiper" :style="{height: itemHeight}" circular :duration="400" autoplay :interval="3000"
                @change="change">
                <swiper-item class="swiper-item" :style="{height: itemHeight}" v-for="(item, index) in banners" :key="index"
                    @click="showNext(item)">
                    <image :src="item.cover" webp class="image" :style="{height: itemHeight}" mode="aspectFill" />
                </swiper-item>
            </swiper>
            <view class="dot-wrapper translateX flex-align-around">
                <view v-for="item in banners.length" :key="item" class="dot" :class="[active === item && 'active']"></view>
            </view>
        </view>
    </view>

</template>

<script>
export default {
    data() {
        return {
            active: 0
        }
    },
    computed: {
        itemHeight() {
            let width = this.$store.state.systemInfo.screenWidth - uni.upx2px(56)
            return Math.floor((210 / 1053) * width) + 'px'
        },
        banners() {
            if (!this.$store.state.pageConfig || !this.$store.state.pageConfig['magic_luck']) {
                return null
            }
            let components = this.$store.state.pageConfig['magic_luck'].components
            if (!components || components.length === 0) return null
            let data = null
            for (let i = 0; i < components.length; i++) {
                if (components[i].type === 'capsule') {
                    data = components[i].elements
                }
            }
            if(!!this.$store.state.hide) {
                data.forEach((item, index) => {
                    if (item.path && item.path.params && item.path.params.url === 'hidden_activity') {
                        data.splice(index, 1);
                    }
                })
            }
            return data
        }
    },
    methods: {
        change(e) {
            this.active = e.detail.current
        },
        showNext(item) {
            this.$common.showNext(item)
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper-wrapper {
    margin: 20rpx 28rpx 0;
    overflow: hidden;
    border-radius: 20rpx;
    position: relative;
    .swiper {
        width: 100%;
        border-radius: 20rpx;
        overflow: hidden;
        .swiper-item {
            width: 100%;
            border-radius: 20rpx;
            overflow: hidden;
            .image {
                width: 100%;
                border-radius: 20rpx;
            }
        }
    }
    .dot-wrapper {
        position: absolute;
        bottom: 8rpx;
        width: 60rpx;
        height: 8rpx;
        .dot {
            width: 8rpx;
            height: 8rpx;
            border-radius: 4rpx;
            background: rgba($color: #000000, $alpha: 0.4);
            &.active {
                background: #fff;
            }
        }
    }
}
</style>