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

<template>
    <u-popup v-model="show" mode="bottom" border-radius="24">
        <view class="red-packet-popup">
            <view class="popup-header">
                <text>选择红包</text>
                <u-icon name="close" size="28" color="#999" class="close-icon" @click="close"></u-icon>
            </view>
            
            <scroll-view scroll-y class="packet-list">
                <view class="packet-item" v-for="(item, index) in list" :key="index" @click="selectPacket(index)">
                    <view class="packet-info">
                        <view class="packet-name">{{ item.name }}</view>
                        <view class="packet-desc">{{ item.desc }}</view>
                        <view class="packet-time">{{ item.time }}</view>
                    </view>
                    <view class="packet-check">
                        <u-icon name="checkmark-circle-fill" size="40" :color="selectedIndex === index ? '#ff4500' : '#ccc'"></u-icon>
                    </view>
                </view>
            </scroll-view>
            
            <view class="popup-footer">
                <u-button type="primary" shape="circle" @click="confirm">确认</u-button>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            show: false,
            selectedIndex: 0,
            list: [
                {
                    name: '惊喜红包（满15减5）',
                    desc: '书嗨所有商品（不包含邮费）',
                    time: '2024-01-01 00:00:00至2024-12-31 23:59:59'
                },
                {
                    name: '惊喜红包（满15减5）',
                    desc: '书嗨所有商品（不包含邮费）',
                    time: '2024-01-01 00:00:00至2024-12-31 23:59:59'
                }
            ]
        }
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            this.$emit('input', val);
        }
    },
    methods: {
        close() {
            this.show = false;
        },
        selectPacket(index) {
            this.selectedIndex = index;
        },
        confirm() {
            this.$emit('confirm', this.list[this.selectedIndex]);
            this.close();
        }
    }
}
</script>

<style lang="scss" scoped>
.red-packet-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .popup-header {
        padding: 30rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        position: sticky;
        top: 0;
        background-color: #fff;
        border-bottom: 1rpx solid #eee;
        
        .close-icon {
            position: absolute;
            right: 30rpx;
            top: 40rpx;
        }
    }
    
    .packet-list {
        flex: 1;
        padding: 20rpx;
        box-sizing: border-box;
        max-height: 400px;
        overflow-y: auto;
        
        .packet-item {
            display: flex;
            align-items: center;
            padding: 20rpx 30rpx;
            
            .packet-info {
                flex: 1;
                
                .packet-name {
                    font-size: 30rpx;
                    color: #ff4500;
                    font-weight: bold;
                    margin-bottom: 10rpx;
                }
                
                .packet-desc {
                    font-size: 26rpx;
                    color: #333;
                    margin-bottom: 6rpx;
                }
                
                .packet-time {
                    font-size: 22rpx;
                    color: #999;
                }
            }
        }
    }
    
    .popup-footer {
        padding: 20rpx 40rpx;
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>