book-hi/pages-car/components/stock-shortage-popup.vue

<template>
    <u-popup v-model="show" mode="bottom" border-radius="24" height="600rpx">
        <view class="stock-shortage-popup">
            <view class="popup-header">
                <text>如遇缺货</text>
                <u-icon name="close" size="28" color="#999" class="close-icon" @click="close"></u-icon>
            </view>
            
            <view class="option-list">
                <view class="option-item" v-for="(item, index) in options" :key="index" @click="selectOption(index)">
                    <view class="option-text">{{ item.text }}</view>
                    <view class="option-check">
                        <u-icon name="checkmark-circle-fill" size="40" :color="selectedIndex === index ? '#38C148' : '#ccc'"></u-icon>
                    </view>
                </view>
            </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: 1, // Default to "其他商品继续发货"
            options: [
                { text: '缺货时电话与我沟通', value: 1 },
                { text: '其他商品继续发货（缺货商品退款）', value: 2 },
                { text: '有缺货直接取消订单', value: 3 }
            ]
        }
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            this.$emit('input', val);
        }
    },
    methods: {
        close() {
            this.show = false;
        },
        selectOption(index) {
            this.selectedIndex = index;
        },
        confirm() {
            this.$emit('confirm', this.options[this.selectedIndex]);
            this.close();
        }
    }
}
</script>

<style lang="scss" scoped>
.stock-shortage-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    
    .popup-header {
        padding: 30rpx;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        position: relative;
        border-bottom: 1rpx solid #eee;
        
        .close-icon {
            position: absolute;
            right: 30rpx;
            top: 40rpx;
        }
    }
    
    .option-list {
        flex: 1;
        padding: 20rpx;
        max-height: 400rpx;
        overflow-y: auto;
        
        .option-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 30rpx;
            
            .option-text {
                font-size: 28rpx;
                color: #333;
            }
        }
    }
    
    .popup-footer {
        padding: 20rpx 40rpx;
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>