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

<template>
    <u-popup v-model="show" mode="bottom" border-radius="24" :safe-area-inset-bottom="true">
        <view class="red-packet-popup">
            <view class="popup-header">
                <text>优惠详情</text>
                <view class="close-btn" @click="close">
                    <u-icon name="close" size="24" color="#666"></u-icon>
                </view>
            </view>

            <view class="filter-tabs" v-if="list && list.length > 0">
                <view class="tab" :class="{ active: currentTab === 'all' }" @click="currentTab = 'all'">全部</view>
                <view class="tab" :class="{ active: currentTab === 'unavailable' }" @click="currentTab = 'unavailable'">不可用</view>
            </view>

            <scroll-view scroll-y class="packet-list" v-if="list && list.length > 0">
                <!-- 可用红包 -->
                <template v-if="currentTab === 'all'">
                    <view class="packet-item available" v-for="(item, index) in availableList" :key="index" @click="selectPacket(item)">
                        <view class="packet-main">
                            <view class="packet-left">
                                <text class="currency">¥</text>
                                <text class="amount">{{ item.faceMoney }}</text>
                            </view>
                            <view class="packet-right">
                                <view class="packet-name">{{ item.couponName }}</view>
                                <view class="packet-rule">{{ item.thresholdMoney == 0 ? '无门槛' : '满' + item.thresholdMoney + '元可用' }}</view>
                            </view>
                            <view class="packet-check">
                                <u-icon name="checkmark-circle-fill" size="40"
                                    :color="selectedItem && selectedItem.userCouponId === item.userCouponId ? '#38C148' : '#e0e0e0'"></u-icon>
                            </view>
                        </view>
                        <view class="packet-time">{{ item.effectStartTime }}至{{ item.effectEndTime }}</view>
                    </view>
                </template>

                <!-- 不可用红包 -->
                <template v-if="unavailableList.length > 0 && (currentTab === 'all' || currentTab === 'unavailable')">
                    <view class="section-title" v-if="currentTab === 'all'">本单不可用红包</view>
                    <view class="packet-item unavailable" v-for="(item, index) in unavailableList" :key="index">
                        <view class="packet-main">
                            <view class="packet-left">
                                <text class="currency">¥</text>
                                <text class="amount">{{ item.faceMoney }}</text>
                            </view>
                            <view class="packet-right">
                                <view class="packet-name">{{ item.couponName }}</view>
                                <view class="packet-rule">{{ item.thresholdMoney == 0 ? '无门槛' : '满' + item.thresholdMoney + '元可用' }}</view>
                            </view>
                            <view class="packet-check">
                                <view class="disabled-radio"></view>
                            </view>
                        </view>
                        <view class="packet-reason">
                            本单不可用原因：{{ item.unavailableReason || '不满足使用条件' }}
                        </view>
                    </view>
                </template>
            </scroll-view>

            <view class="empty-state" v-else>
                <image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/no-data.png"
                    style="width: 260rpx; height: 260rpx" mode="aspectFit"></image>
                <view class="empty-text">暂无红包</view>
            </view>

            <view class="popup-footer" v-if="list && list.length > 0">
                <u-button type="primary" shape="circle" @click="confirm" :custom-style="btnStyle">确定</u-button>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        props: {
            value: {
                type: Boolean,
                default: false
            },
            list: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                show: false,
                currentTab: 'all',
                selectedItem: null,
                btnStyle: {
                    background: 'linear-gradient(90deg, #6ADD83, #38C148)',
                    color: '#fff',
                    border: 'none'
                }
            }
        },
        computed: {
            availableList() {
                return this.list.filter(item => item.status === 1);
            },
            unavailableList() {
                return this.list.filter(item => item.status === 0);
            }
        },
        watch: {
            value(val) {
                this.show = val;
                if (val) {
                    // 重置 tab
                    this.currentTab = 'all';
                }
            },
            show(val) {
                this.$emit('input', val);
            }
        },
        methods: {
            close() {
                this.show = false;
            },
            selectPacket(item) {
                if (this.selectedItem && this.selectedItem.userCouponId === item.userCouponId) {
                    // 如果点击的是已选中的项，则取消选中
                    this.selectedItem = null;
                } else {
                    this.selectedItem = item;
                }
            },
            confirm() {
                this.$emit('confirm', this.selectedItem);
                this.close();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .red-packet-popup {
        height: 100%;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .popup-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30rpx;
            position: relative;
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            background-color: #fff;

            .close-btn {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translateY(-50%);
                width: 50rpx;
                height: 50rpx;
                background-color: #f5f5f5;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .filter-tabs {
            display: flex;
            padding: 0 30rpx;
            margin-bottom: 20rpx;
            background-color: #fff;
            padding-bottom: 10rpx;

            .tab {
                padding: 12rpx 30rpx;
                border-radius: 8rpx;
                font-size: 26rpx;
                margin-right: 20rpx;
                background-color: #f5f5f5;
                color: #333;
                transition: all 0.3s;

                &.active {
                    background-color: #EBF8EE;
                    color: #38C148;
                    font-weight: bold;
                }
            }
        }

        .packet-list {
            flex: 1;
            box-sizing: border-box;
            height: 600rpx;
            overflow-y: auto;
            padding-top: 20rpx;
            padding-bottom: 40rpx;

            .section-title {
                font-size: 30rpx;
                color: #333;
                font-weight: bold;
                margin: 10rpx 30rpx 20rpx;
            }

            .packet-item {
                margin: 0 30rpx 20rpx;
                border-radius: 16rpx;
                overflow: hidden;
                background-color: #F8FDF9;

                &.available {
                    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
                    border: 1rpx solid #f9f9f9;

                    .packet-left {
                        color: #38C148;
                    }
                    .packet-name {
                        color: #333;
                    }
                    .packet-rule {
                        color: #666;
                    }
                    .packet-time {
                        padding: 16rpx 24rpx;
                        font-size: 22rpx;
                        color: #999;
                        background-color: #F8FDF9;
                        border-top: 1rpx dashed #d1f2d6;
                    }
                }

                &.unavailable {
                    background-color: #fefefe;
                    .packet-left {
                        color: #999;
                    }
                    .packet-name {
                        color: #666;
                    }
                    .packet-rule {
                        color: #999;
                    }
                    .packet-reason {
                        padding: 20rpx 24rpx;
                        font-size: 24rpx;
                        color: #999;
                        border-top: 1rpx dashed #eee;
                        background-color: #fafafa;
                    }
                }

                .packet-main {
                    display: flex;
                    align-items: center;
                    padding: 30rpx 24rpx;
                }

                .packet-left {
                    width: 150rpx;
                    display: flex;
                    align-items: baseline;

                    .currency {
                        font-size: 28rpx;
                        margin-right: 4rpx;
                    }
                    .amount {
                        font-size: 48rpx;
                        font-weight: bold;
                    }
                }

                .packet-right {
                    flex: 1;
                    margin-left: 10rpx;

                    .packet-name {
                        font-size: 30rpx;
                        font-weight: bold;
                        margin-bottom: 8rpx;
                    }
                    .packet-rule {
                        font-size: 24rpx;
                    }
                }

                .packet-check {
                    margin-left: 20rpx;

                    .disabled-radio {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                        border: 2rpx solid #ddd;
                        background-color: #eee;
                        box-sizing: border-box;
                    }
                }
            }
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60rpx 0;

            .empty-text {
                color: #999;
                font-size: 28rpx;
                margin-top: 20rpx;
            }
        }

        .popup-footer {
            padding: 20rpx 40rpx;
            background-color: #fff;
            box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.02);
        }
    }
</style>