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

<template>
    <view class="coupon" :style="[couponStyle]">
        <!-- 抵扣金额 -->
        <view class="amount">
            <view class="coupon-tag">{{ couponData.couponType | formatTag }}</view>
            <view class="price">
                <text class="sm">￥</text>
                <text>{{ couponPrice[0] }}</text>
                <text class="sm" v-if="couponPrice[1]">.{{ couponPrice[1] }}</text>
            </view>
            <view class="tip">
                <template v-if="couponData.noThresholdFlag === 1">
                    无门槛
                </template>
                <template v-else>
                    满{{ couponData.touchPrice }}可用
                </template>
            </view>
        </view>
        <!-- 使用范围 -->
        <view class="coupon-info">
            <!-- 优惠券名称 -->
            <view class="name">{{ couponData.couponName }}</view>
            <!-- 适用范围 -->
            <view class="use-scope">{{ couponData.productType | formatUseType }}</view>
            <!-- 有效期 -->
            <view class="time">
                <!-- 领取截至期限 -->
                <view class="receive-time" v-if="couponData.useStatus === 0">
                    <text v-if="couponData.receivePeriod">截止日期：{{ couponData.receivePeriod | dateFormat }}</text>
                    <text v-else>永久</text>
                </view>
                <!-- 使用期限 -->
                <view class="use-time" v-else>有效期至：{{ couponData.usePeriod | dateFormat }}</view>
            </view>
        </view>
        <!-- 操作区域 -->
        <view class="control" @click="handleClick" :style="{ backgroundImage: statusIcon }">
            <!-- 领取 去使用 去凑单 可用商品 选择 -->
            <template v-if="controlType">
                <view class="iconfont icon" :class="checkedClass" :data-name="controlType" v-if="isChoose"></view>
                <u-button :plain="plain" :data-name="controlType" :controlType="controlType" v-else></u-button>
            </template>
        </view>
    </view>
</template>

<script>
import UButton from './u-button.vue'
import { mapActions } from 'vuex'

export default {
    name: 'cm-coupon',
    filters: {
        // 优惠券标签格式化
        formatTag(val) {
            const tags = {
                1: '活动券',
                2: '用户专享券',
                3: '新用户券',
                4: '好友邀请券',
                5: '好友消费券'
            }
            return tags[val] || '未知券'
        },
        // 优惠券使用范围
        formatUseType(val) {
            const type = {
                1: '全商城商品使用',
                2: '部分商品使用'
            }
            return type[val] || '优惠券无法使用'
        }
    },
    components: {
        UButton
    },
    props: {
        couponData: {
            type: Object,
            default: () => {}
        },
        // 背景颜色类型
        bgType: {
            type: String,
            validator: type => {
                return ['on', 'off'].indexOf(type) > -1
            },
            default: 'on'
        },
        // 优惠券状态图标
        status: {
            type: String,
            validator: type => {
                return ['received', 'expired', 'used', ''].indexOf(type) > -1
            },
            default: ''
        },
        // 按钮类型
        controlType: {
            type: String,
            validator: type => {
                return ['receive', 'use', 'buy', 'search', 'choose', ''].indexOf(type) > -1
            },
            default: ''
        },
        // 是否选择
        checked: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            isChecked: false
        }
    },
    computed: {
        checkedClass() {
            return this.checked ? 'icon-xuanze' : 'icon-weixuanze'
        },
        plain() {
            return this.controlType === 'use'
        },
        isChoose() {
            return this.controlType === 'choose'
        },
        statusIcon() {
            if (!this.status) return
            return `url(${this.staticUrl}icon-coupon-${this.status}.png)`
        },
        couponStyle() {
            if (this.bgType === 'on') {
                return {
                    backgroundImage: `url(${this.staticUrl}icon-coupon-bg-${this.bgType}.png)`
                }
            }
            return {
                backgroundImage: `url(${this.staticUrl}icon-coupon-bg-${this.bgType}.png)`,
                filter: 'grayscale(1)',
                opacity: '0.7'
            }
        },
        couponPrice() {
            return this.couponData.couponAmount.toString().split('.') || ['0', '00']
        }
    },
    methods: {
        ...mapActions('coupon', ['receiveCoupon']),
        // 操作优惠券事件
        handleClick(event) {
            const { name } = event.target.dataset
            console.log(name)
            switch (name) {
                case 'receive':
                    this.clickReceive()
                    break
                case 'use':
                case 'buy':
                case 'search':
                    this.clickToList()
                    break
                case 'choose':
                    this.clickChoose()
                    break
                default:
                    console.log('nothing click')
                    break
            }
        },
        // 领取优惠券
        async clickReceive() {
            try {
                await this.receiveCoupon(this.couponData)
                this.$emit('click', this.couponData)
            } catch (e) {
                console.log(e)
            }
        },
        // 跳转商品列表
        clickToList() {
            this.$emit('click', this.couponData)
        },
        // 选择/勾选
        clickChoose() {
            this.$emit('click', this.couponData)
        }
    }
}
</script>

<style lang="scss" scoped>
// 优惠券样式属性变量
$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 {
    @extend .cm-flex-between;
    justify-content: flex-start;
    width: $coupon-width;
    height: $coupon-height;
    box-sizing: border-box;
    background: #ffffff no-repeat center;
    background-size: $coupon-width $coupon-height;

    &.bg-on {
        background-image: $coupon-bg-on;
    }

    &.bg-off {
        background-image: $coupon-bg-off;
    }

    .amount,
    .use-scope,
    .control {
        height: 100%;
    }

    .amount {
        @extend .cm-flex-center;
        flex-direction: column;
        position: relative;
        width: 210rpx;

        .price {
            font-size: 56rpx;
            font-weight: 600;
            color: $color;
            .sm {
                font-size: 24rpx;
            }
        }

        .tip {
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #404040;
        }
    }

    .coupon-info {
        flex: 1;
        max-width: 276rpx;
        margin: 0 28rpx;

        font-size: 26rpx;
        color: #333333;

        .name {
            @include ellipsis(1);
            font-weight: 600;
        }
        .use-scope {
            @include ellipsis(1);
            margin: 12rpx 0;
        }
        .time {
            @include ellipsis(1);
            font-size: 20rpx;
            color: #999999;
        }
    }

    .control {
        @extend .cm-flex-center;
        justify-content: flex-end;
        width: 160rpx;
        box-sizing: border-box;
        padding-right: 24rpx;
        background-position-x: 40rpx;
        background-position-y: 20rpx;
        background-repeat: no-repeat;
        background-size: 100rpx 100rpx;

        .icon {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding-top: 24rpx;
            color: $color;
            text-align: right;
        }
    }

    .coupon-tag {
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        height: 32rpx;
        padding: 0 8rpx;
        line-height: 32rpx;
        font-size: 22rpx;
        color: #ffffff;
        background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
        border-radius: 10rpx 0px 10rpx 0px;
    }
}
</style>