caimei-applets-hehe/components/cm-module/cm-coupon/cm-coupon.vue

<template>
    <view class="coupon" :class="canUse ? 'on' : 'off'" v-if="couponData">
        <view class="content" :class="[statusIcon, { 'cover-bg': showStatus }]">
            <view class="header">
                <!-- 优惠券类别 -->
                <view class="tag">{{ couponData.couponType | formatTag }}</view>
                <view class="price"><text>￥</text>{{ couponData.couponAmount }}</view>
                <!-- 使用条件 -->
                <view class="tip">
                    <template v-if="couponData.noThresholdFlag === 1">
                        无门槛
                    </template>
                    <template v-else>
                        满{{ couponData.touchPrice }}可用
                    </template>
                </view>
            </view>
            <view class="center desc">
                <!-- 优惠券名称 -->
                <view class="row bold">{{ couponData.couponName }}</view>
                <!-- 适用范围 -->
                <view class="row">{{ couponData.productType | formatUseType }}</view>
                <!-- 截止日期 -->
                <view class="end-time">截止日期：{{ couponData.receivePeriod | formatDate }}</view>
            </view>
            <view class="footer">
                <view class="btn" @click="handleBtnClick" v-if="couponData.useStatus === 0">领取</view>
                <view class="btn plain" @click="handleBtnClick" v-if="couponData.useStatus === 1">去使用</view>
            </view>
            <!-- <text class="radio-flag iconfont icon-weixuanze"></text> -->
            <text class="radio-flag iconfont icon-xuanze" v-if="chooseAble" @click="choose"></text>
        </view>
    </view>
</template>

<script>
import { dateFormat } from '@/common/util.js'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: {
        // 优惠券数据
        couponData: {
            type: Object,
            default: () => {}
        },
        // 设置优惠券是否可选
        chooseAble: {
            type: Boolean,
            default: false
        },
        // 是否显示优惠券状态
        showStatus: {
            type: Boolean,
            default: false
        }
    },
    filters: {
        // 优惠券标签格式化
        formatTag(val) {
            const tags = {
                1: '活动券',
                2: '用户专享券',
                3: '新用户券',
                4: '好友分享券',
                5: '好友消费券'
            }
            return tags[val] || '未知券'
        },
        // 格式化日期
        formatDate(val) {
            return dateFormat(new Date(val), 'yyyy-MM-dd')
        },
        // 优惠券使用范围
        formatUseType(val) {
            const type = {
                1: '全商城商品使用',
                2: '部分商品使用'
            }
            return type[val] || '优惠券无法使用'
        }
    },
    computed: {
        ...mapGetters(['hasLogin']),
        // 优惠券状态图标
        statusIcon() {
            if (!this.couponData) return
            let name = ''
            const type = {
                0: '', // 未领取
                1: 'received', //已领取
                2: 'used', // 已使用
                3: 'expired' //已失效
            }
            return type[this.couponData.useStatus + 1]
        },
        // 优惠券是能否领取和使用
        canUse() {
            return ![2, 3].includes(this.couponData.useStatus)
        }
    },

    methods: {
        ...mapActions('coupon', ['receiveCoupon']),
        // 点击勾选按钮
        choose() {
            this.$emit('choose', this.couponData)
        },
        // 按钮点击
        handleBtnClick() {
            if (!this.hasLogin) return this.$api.navigateTo('/pages/login/login')
            const clickFns = {
                0: this.receiveCoupon, // 领取优惠券
                1: this.useCoupon // 使用优惠券
            }
            // 将优惠券id作为参数传递进去
            clickFns[this.couponData.useStatus](this.couponData.couponId).then(res=>{
                // 向父组件发送领取优惠券事件
                this.couponData.useStatus === 0 && this.$emit('btnClick', this.couponData)
            })
        },
        // 使用优惠券
        useCoupon() {
            return Promise.resolve()
            console.log('使用优惠券')
        }
    }
}
</script>

<style lang="scss" scoped>
$grid: 24rpx;
$color: #ff457b;
$coupon-width: 702rpx;
$coupon-height: 200rpx;
$coupon-bg-on: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon-bg-on.png);
$coupon-bg-off: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon-bg-off.png);
$coupon-bg-received: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon-received.png); // 已领取
$coupon-bg-expired: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon-expired.png); // 已失效
$coupon-bg-used: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon-used.png); // 已使用
.coupon {
    width: $coupon-width;
    height: $coupon-height;
    padding: 6rpx;
    margin: $grid;
    box-sizing: border-box;
    background: #ffffff no-repeat center;
    background-size: $coupon-width $coupon-height;
    .content {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cover-bg {
        background-position: 580rpx 16rpx;
        background-size: 100rpx 100rpx;
        background-repeat: no-repeat;
        &.received {
            background-image: $coupon-bg-received;
        }
        &.expired {
            background-image: $coupon-bg-expired;
        }
        &.used {
            background-image: $coupon-bg-used;
        }
    }
    &.on {
        background-image: $coupon-bg-on;
    }
    &.off {
        filter: grayscale(1);
        opacity: 0.7;
        background-image: $coupon-bg-off;
    }
    .header,
    .center,
    .footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .header {
        align-items: center;
        position: relative;
        width: 204rpx;
        height: 188rpx;
        .tag {
            position: absolute;
            top: 0;
            left: 0;
            height: 32rpx;
            padding: 0 6rpx;
            background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
            border-radius: 10rpx 0px 10rpx 0px;
            font-size: 22rpx;
            color: #ffffff;
            text-align: center;
            line-height: 32rpx;
        }
        .price {
            font-size: 56rpx;
            font-weight: 600;
            color: $color;
            text {
                font-size: 24rpx;
            }
        }
        .tip {
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #404040;
        }
    }
    .center {
        flex: 1;
        margin-left: 36rpx;
        .row {
            width: 250rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 26rpx;
            color: #333333;
            margin-bottom: 16rpx;
            &.bold {
                font-weight: 600;
            }
        }
        .end-time {
            font-size: 20rpx;
            color: #999999;
        }
    }
    .footer {
        align-items: center;
        width: 128rpx;
        margin-right: $grid;
        .btn {
            width: 128rpx;
            height: 48rpx;
            background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
            border-radius: 28rpx;
            box-sizing: border-box;
            border: 1rpx solid transparent;
            text-align: center;
            line-height: 46rpx;
            font-size: 26rpx;
            color: #ffffff;
            &.plain {
                border: 1rpx solid $color;
                background: transparent;
                color: $color;
            }
        }
    }
    .radio-flag {
        position: absolute;
        top: $grid;
        right: $grid;
        color: $color;
        font-size: 32rpx;
    }
}
</style>