caimei-applets-store/components/views/cm-coupon-area/cm-coupon-area.vue

<template>
    <view class="coupon-area">
        <cm-simple-swiper
            @change="onChange"
            :current="current"
            :circular="true"
            :swiperHeight="swiperHeight"
            :data="couponList"
            :rows="swiperRows"
            :columns="1"
            :gapY="16"
            :autoplay="false"
        >
            <template v-slot:slide="{ row }">
                <view class="swiper-slide">
                    <cm-coupon :couponData="row" :controlType="row.controlType" @click="onCouponClick"></cm-coupon>
                </view>
            </template>
        </cm-simple-swiper>
    </view>
</template>

<script>
// 测试数据
import { fetchReceivedCouponList } from '@/services/api/coupon.js'
export default {
    name: 'cm-coupon-area',
    props: {
        couponList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            current: 0
        }
    },
    computed: {
        swiperRows() {
            return this.couponList.length === 1 ? 1 : 2
        },
        swiperHeight() {
            return 250 * this.swiperRows
        }
    },
    methods: {
        onChange(e) {
            this.current = e.current
        },
        onCouponClick(coupon) {
            this.$emit('click', coupon)
        }
    }
}
</script>

<style lang="scss" scoped>
.swiper-slide {
    box-sizing: border-box;
    padding: 12rpx 0;
}
</style>