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

<template>
    <view class="red-packet-item" :class="{ 'is-disabled': isDisabled }">
        <view class="left-part">
            <view class="amount-box">
                <text class="symbol">¥</text>
                <text class="amount">{{ info.amount || 0 }}</text>
            </view>
            <view class="condition">满 ¥{{ info.condition || 0 }}使用</view>
        </view>
        <view class="right-part">
            <view class="info-top">
                <view class="title-row">
                    <view class="tag" :class="info.type === 2 ? 'surprise' : 'normal'">
                        {{ info.typeName || (info.type === 2 ? '惊喜红包' : '普通红包') }}
                    </view>
                    <text class="title">{{ info.title }}</text>
                </view>
                <view class="date">{{ info.endTime }}到期</view>
            </view>
            
            <view class="action-box">
                <view v-if="status === 0" class="btn-use" @click="onUse">立即使用</view>
                <view v-else-if="status === 1" class="stamp used">
                    <text>已使用</text>
                </view>
                <view v-else-if="status === 2" class="stamp expired">
                    <text>已过期</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "red-packet-item",
    props: {
        info: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        // 0: unused, 1: used, 2: expired
        status() {
            return this.info.status || 0;
        },
        isDisabled() {
            return this.status !== 0;
        }
    },
    methods: {
        onUse() {
            this.$emit('use', this.info);
        }
    }
}
</script>

<style lang="scss" scoped>
.red-packet-item {
    display: flex;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin: 20rpx 24rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    &.is-disabled {
        .left-part {
            color: #999;
            .amount-box {
                color: #999;
            }
        }
        .right-part {
            .title {
                color: #999;
            }
            .tag {
                background-color: #ccc;
                color: #fff;
            }
        }
    }

    .left-part {
        width: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #e02020;
        border-right: 1px dashed #eeeeee;
        position: relative;
        padding: 30rpx 0;

        &::before, &::after {
            content: '';
            position: absolute;
            right: -10rpx;
            width: 20rpx;
            height: 20rpx;
            background-color: #f5f5f5; // Assume page bg is #f5f5f5
            border-radius: 50%;
        }
        &::before { top: -10rpx; }
        &::after { bottom: -10rpx; }

        .amount-box {
            display: flex;
            align-items: baseline;
            font-weight: bold;
            .symbol {
                font-size: 28rpx;
            }
            .amount {
                font-size: 60rpx;
                line-height: 1;
            }
        }
        .condition {
            font-size: 22rpx;
            margin-top: 10rpx;
        }
    }

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

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

                .tag {
                    font-size: 20rpx;
                    padding: 2rpx 8rpx;
                    border-radius: 4rpx;
                    margin-right: 10rpx;
                    
                    &.normal {
                        background-color: #fcebeb;
                        color: #e02020;
                    }
                    &.surprise {
                        background-color: #fff0e5;
                        color: #ff6a00;
                    }
                }

                .title {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }
            }

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

        .action-box {
            position: absolute;
            right: 24rpx;
            bottom: 30rpx;
            
            // For status buttons aligned with date or bottom right
        }

        .btn-use {
            background-color: #e02020;
            color: #fff;
            font-size: 24rpx;
            padding: 10rpx 24rpx;
            border-radius: 30rpx;
        }

        .stamp {
            width: 100rpx;
            height: 100rpx;
            border: 2rpx solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: rotate(-30deg);
            opacity: 0.6;
            
            text {
                font-size: 24rpx;
                color: #999;
                font-weight: bold;
            }
            
            &.used {
                border-color: #999;
                text { color: #999; }
            }
            
            &.expired {
                border-color: #999;
                text { color: #999; }
            }
        }
    }
}
</style>