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="500"
            :data="testList"
            :rows="2"
            :columns="1"
            :gapY="16"
            :autoplay="false"
        >
            <template v-slot:slide="{ row }">
                <view class="swiper-slide">
                    <cm-coupon :couponData="row" controlType="receive"></cm-coupon>
                </view>
            </template>
        </cm-simple-swiper>
    </view>
</template>

<script>
// 测试数据
import { fetchReceivedCouponList } from '@/services/api/coupon.js'
export default {
    name: 'cm-coupon-area',
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            current: 0,
            testList: []
        }
    },
    async created() {
        try {
            const params = {
                status: 0,
                userId: this.$store.getters.userId,
                pageNum: 1,
                pageSize: 10
            }
            const res = await fetchReceivedCouponList(params)
            this.testList = res.data.list
        } catch (e) {
            //TODO handle the exception
        }
    },
    methods: {
        onChange(e) {
            this.current = e.current
        }
    }
}
</script>

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