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

<template>
    <view class="coupon off">
        <view class="content cover-bg" :class="[cover]">
            <view class="header">
                <view class="tag">优惠券标签</view> <view class="price"><text>￥</text>100</view>
                <view class="tip">满600可用</view>
            </view>
            <view class="center desc">
                <view class="row bold">618全场满600减100</view> <view class="row">全商城商品通用</view>
                <view class="end-time">截止日期：2021-10-28</view>
            </view>
            <view class="footer">
                <view class="btn" @click="handleBtnClick">领取</view>
                <!-- <view class="btn" :class="{ plain: i === 2 }">{{ i === 2 ? '去使用' : '领取' }}</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>
export default {
    props: {
        // 优惠券数据
        couponData: {
            type: Object,
            default: () => {}
        },
        // 设置优惠券是否可选
        chooseAble: {
            type: Boolean,
            default: false
        },
        // 显示已领取图标
        showReceived: {
            type: Boolean,
            default: false
        }
    },
    filters: {
        // 优惠券标签格式化
        formatTag(val) {
            const tags = {
                1: '活动券',
                2: '用户专享券',
                3: '新用户券',
                4: '好友分享券',
                5: '好友消费券'
            }
            return tags[val] || '未知券'
        }
    },
    computed: {
        cover() {
            if(!this.couponData) return
            let name = ''
            switch (this.couponData.flag) {
                case 1:
                    name = 'received'
                    break
                case 2:
                    name = 'expired'
                    break
                case 3:
                    name = 'used'
                    break
                default:
                    name = ''
                    break
            }
            return name
        }
    },
    methods: {
        // 点击勾选按钮
        choose() {
            this.$emit('choose', this.couponData)
        },
        // 领取优惠券 TODO
        receive() {
            console.log('领取优惠券')
        },
        // 按钮点击
        handleBtnClick(){
            console.log('领取 or 使用')
        }
    }
}
</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: 90rpx 90rpx;
        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: 206rpx;
        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 {
        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>