book-hi/pages-car/components/red-packet-item.vue

<template>
    <view class="red-packet-item" :class="{ 'is-disabled': isDisabled }">
        <image class="bg-img" :src="isDisabled ? '/pages-car/static/coupon-no.png' : '/pages-car/static/coupon.png'"
            mode="scaleToFill"></image>
        <view class="content">
            <view class="left-part">
                <view class="amount-box">
                    <text class="symbol">¥</text>
                    <text class="amount">{{ info.faceMoney || 0 }}</text>
                </view>
                <view class="condition" v-if="info.thresholdMoney === 0">无门槛使用</view>
                <view class="condition" v-else>满{{ info.thresholdMoney || 0 }}使用</view>
            </view>
            <view class="right-part">
                <view class="info-top">
                    <view class="title-row">
                        <text class="type-name">{{ getTypeName(info.type) }}</text>

                        <view class="condition" v-if="info.thresholdMoney === 0">无门槛减{{ info.faceMoney || 0 }}元</view>
                        <text class="sub-title" v-else>满{{ info.thresholdMoney || 0 }}减{{ info.faceMoney || 0 }}元</text>
                    </view>
                    <view class="date">{{ formatEndTime }}到期</view>
                    <view class="refund-tip" :class="{ 'has-action': status === 0 }">订单发生退款时，红包不支持退回，敬请留意。</view>
                </view>

                <view class="action-box" v-if="status === 0">
                    <view class="btn-use" @click="onUse">立即使用</view>
                    <!-- <view class="btn-use" @click="onUse">{{ info.type == 2 ? '赠送给朋友' : '立即使用' }}</view> -->
                </view>
            </view>
        </view>
        <image v-if="status === 1" class="stamp-img" src="/pages-car/static/coupon-used.png" mode="aspectFit"></image>
        <image v-if="status === 2" class="stamp-img" src="/pages-car/static/coupon-gq.png" mode="aspectFit"></image>
    </view>
</template>

<script>
    export default {
        name: "red-packet-item",
        props: {
            info: {
                type: Object,
                default: () => ({})
            }
        },
        computed: {
            // 0: unused, 1: used, 2: expired
            status() {
                if (this.info.useTime) {
                    return 1;
                } else if (this.info.effectEndTime && new Date(this.info.effectEndTime.replace(/-/g, '/')).getTime() < new Date().getTime()) {
                    return 2;
                }
                return 0;
            },
            isDisabled() {
                return this.status !== 0;
            },
            formatEndTime() {
                let endTime = this.info.effectEndTime || '';
                if (endTime && endTime.length >= 10) {
                    return endTime.substring(0, 10).replace(/-/g, '.');
                }
                return endTime;
            }
        },
        methods: {
            getTypeName(type) {
                if (type == 2) return '惊喜红包';
                if (type == 3) return '买书得红包';
                return '普通红包';
            },
            onUse() {
                this.$emit('use', this.info);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .red-packet-item {
        position: relative;
        width: 702rpx;
        height: 248rpx;
        margin: 20rpx auto;
        border-radius: 12rpx;
        padding: 6rpx;
        background: radial-gradient( 0% 0% at 0% 0%, #F81011 0%, #FE6F43 100%);


        .bg-img {
            position: absolute;
            top: 8rpx;
            left: 6rpx;
            right: 6rpx;
            bottom: 4rpx;
            width: calc(100% - 12rpx);
            height: calc(100% - 12rpx);
            z-index: 0;
        }

        .content {
            position: relative;
            z-index: 1;
            display: flex;
            width: 100%;
            height: 100%;
        }

        .left-part {
        width: 220rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #F53F3F;
        padding-left: 10rpx;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 20rpx;
            bottom: 20rpx;
            border-right: 4rpx dashed #E91B13;
        }

        .amount-box {
            display: flex;
            align-items: baseline;
            font-weight: bold;
            .symbol {
                font-size: 28rpx;
                margin-right: 4rpx;
            }
            .amount {
                font-size: 64rpx;
                line-height: 1;
                background: radial-gradient(0% 0% at 0% 0%, #F81011 0%, #FE6F43 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
            }
        }

            .condition {
                font-size: 24rpx;
                margin-top: 12rpx;
                color: #666;
            }
        }

        .right-part {
            flex: 1;
            padding: 24rpx 24rpx 20rpx 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;

            .info-top {
                .title-row {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12rpx;

                    .type-name {
                        font-size: 28rpx;
                        color: #F53F3F;
                        font-weight: 500;
                        margin-right: 16rpx;
                    }

                    .sub-title {
                        font-size: 26rpx;
                        color: #333;
                    }
                }

                .date {
                    font-size: 24rpx;
                    color: #999;
                }

                .refund-tip {
                    margin-top: 10rpx;
                    font-size: 22rpx;
                    line-height: 32rpx;
                    color: #666;

                    &.has-action {
                        padding-right: 160rpx;
                    }
                }
            }

            .action-box {
                position: absolute;
                right: 24rpx;
                bottom: 28rpx;

                .btn-use {
                    background: radial-gradient( 0% 0% at 0% 0%, #F3B26B 0%, #FFF1D8 100%);
                    color: #E91B13;
                    font-size: 24rpx;
                    padding: 10rpx 26rpx;
                    border-radius: 30rpx;
                    box-shadow: 0 4rpx 8rpx rgba(255, 133, 89, 0.3);
                }
            }
        }

        .stamp-img {
            position: absolute;
            right: 16rpx;
            top: 28rpx;
            width: 133rpx;
            height: 120rpx;
            z-index: 2;
        }

        &.is-disabled {
            background: radial-gradient( 0% 0% at 0% 0%, #C4C4C4 0%, #DCDCDC 100%);
            .left-part {
                color: #787878;
                &::after {
                    border-right: 4rpx dashed #787878;
                }

                .amount-box {
                    .amount {
                        background: none;
                        -webkit-text-fill-color: initial;
                        color: #787878;
                    }
                }

                .condition {
                    color: #787878;
                }
            }

            .right-part {
                .info-top {
                    .title-row {
                        .type-name {
                            color: #787878;
                        }
                        .sub-title {
                            color: #787878;
                        }
                        .condition {
                            color: #787878;
                        }
                    }
                    .date {
                        color: #787878;
                    }
                    .refund-tip {
                        color: #999;
                    }
                }
            }
        }
    }
</style>