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">
                    <template v-if="row.type !== 'tip'">
                        <cm-coupon :couponData="row" :controlType="row.controlType" @click="onCouponClick"></cm-coupon>
                    </template>
                    <template v-else>
                        <view class="coupon-tip" :class="'coupon-tip-' + row.id" @click="onCouponTipClick(row)">
                            <view class="text" v-text="row.name"></view>
                            <view class="control">点击查看</view>
                        </view>
                    </template>
                </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)
        },
        onCouponTipClick(item) {
            this.$router.navigateTo('coupon/coupon-description?entryType=' + item.id)
        }
    }
}
</script>

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

.coupon-tip {
    $bg-entry-1: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-01.png');
    $bg-entry-2: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-02.png');
    $bg-entry-3: url('https://static.caimei365.com/app/mini-hehe/icon/bg-coupon-desc-entry-03.png');

    $width: 702rpx;
    $height: 200rpx;

    @extend .cm-flex-center;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    padding-left: 32rpx;
    width: $width;
    height: $height;
    background-position: center;
    background-repeat: no-repeat;
    background-size: $width $height;

    &.coupon-tip-1 {
        background-image: $bg-entry-1;
        .text {
            color: #ee6531;
        }
    }

    &.coupon-tip-2 {
        background-image: $bg-entry-2;
        .text {
            color: #4197ef;
        }
    }

    &.coupon-tip-3 {
        background-image: $bg-entry-3;
        .text {
            color: #ff445e;
        }
    }

    .text {
        margin-bottom: 24rpx;
        font-size: 46rpx;
        font-weight: bold;
    }

    .control {
        @extend .cm-flex-center;
        width: 160rpx;
        height: 40rpx;
        background: linear-gradient(90deg, #ff903b 0%, #fc2744 100%);
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #fff;

        &::after {
            content: '';
            display: block;
            margin-left: 12rpx;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10rpx 0 10rpx 16rpx;
            border-color: transparent transparent transparent #fff;
        }
    }
}
</style>