book-hi/pages-home/components/VerifyPeriodPicker.vue

<template>
    <u-popup v-model="visible" mode="center" border-radius="50" width="88%" :mask-close-able="true" :custom-style="popupCustomStyle" @close="close">
        <view class="verify-period-picker">
            <image class="popup-bg" src="/pages-home/static/images/verify-period-popup-bg.png" mode="scaleToFill"></image>
            <view class="picker-content">
                <view class="picker-header">
                    <view class="close-btn" @click.stop="close">
                        <image class="close-icon" src="/pages-home/static/images/verify-period-close.png" mode="aspectFit"></image>
                    </view>
                </view>

                <view class="options-row">
                    <view class="option-item" :class="{ 'is-selected': tempDays === 7 }" @click="selectDays(7)">
                        <view class="option-content">
                            <image
                                class="radio-icon"
                                :src="tempDays === 7 ? checkSrc : radioUnselectedSrc"
                                mode="aspectFit"
                            ></image>
                            <view class="option-days">7天</view>
                            <view class="option-type">普通验货</view>
                            <view class="option-desc">快速完成结算</view>
                        </view>
                    </view>

                    <view class="option-item" :class="{ 'is-selected': tempDays === 15 }" @click="selectDays(15)">
                        <view class="option-content">
                            <image
                                class="radio-icon"
                                :src="tempDays === 15 ? checkSrc : radioUnselectedSrc"
                                mode="aspectFit"
                            ></image>
                            <view class="option-days">15天</view>
                            <view class="option-type">安心验货</view>
                            <view class="option-badge">98%用户选择</view>
                        </view>
                    </view>
                </view>

                <view class="benefits-wrap is-visible" :class="{ 'is-visible': tempDays === 15 || tempDays === 7 }">
                    <image
                        class="benefits-img"
                        src="/pages-home/static/images/verify-period-benefits.png"
                        mode="widthFix"
                    ></image>
                </view>

                <view class="confirm-wrap" @click="confirm">
                    <image class="confirm-btn" src="/pages-home/static/images/verify-period-confirm-btn.png" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        value: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            tempDays: 15,
            popupCustomStyle: {
                background: 'transparent'
            },
            checkSrc: '/pages-home/static/images/verify-period-check.png',
            radioUnselectedSrc: '/pages-home/static/images/verify-period-radio-unselected.png'
        };
    },
    computed: {
        visible: {
            get() {
                return this.show;
            },
            set(val) {
                this.$emit('update:show', val);
            }
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.tempDays = this.value || 15;
            }
        }
    },
    methods: {
        selectDays(days) {
            this.tempDays = days;
        },
        confirm() {
            if (this.tempDays !== 7 && this.tempDays !== 15) {
                uni.showToast({ title: '请选择结算时效', icon: 'none' });
                return;
            }
            this.$emit('confirm', {
                verifyPeriodDays: this.tempDays,
                label: this.getVerifyPeriodLabel(this.tempDays)
            });
            this.close();
        },
        getVerifyPeriodLabel(days) {
            if (days === 7) return '7天普通验货';
            if (days === 15) return '15天安心验货';
            return '';
        },
        close() {
            this.$emit('update:show', false);
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .u-mode-center-box {
    background-color: transparent !important;
    overflow: hidden;
    border-radius: 50rpx;
}

::v-deep .u-drawer__scroll-view {
    background: transparent !important;
}

::v-deep .u-drawer-content {
    background: transparent !important;
}

.verify-period-picker {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 50rpx;
    background: transparent;

    .popup-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        border-radius: 50rpx;
    }

    .picker-content {
        position: relative;
        z-index: 1;
        padding: 0 28rpx 36rpx;
        box-sizing: border-box;
    }

    .picker-header {
        position: relative;
        height: 108rpx;
    }

    .close-btn {
        position: absolute;
        right: -8rpx;
        top: 8rpx;
        width: 56rpx;
        height: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;

        .close-icon {
            width: 44rpx;
            height: 44rpx;
        }
    }

    .options-row {
        display: flex;
        gap: 16rpx;
        margin-bottom: 20rpx;
        margin-top: 54rpx;
    }

    .option-item {
        flex: 1;
        position: relative;
        height: 196rpx;
        background: #ffffff;
        border: 3rpx solid #38c148;
        border-radius: 20rpx;
        box-sizing: border-box;
        overflow: hidden;

        &.is-selected {
            background: #edfbe8;
        }
    }

    .option-content {
        position: relative;
        z-index: 1;
        height: 100%;
        padding: 28rpx 20rpx 20rpx;
        box-sizing: border-box;
    }

    .radio-icon {
        position: absolute;
        right: 14rpx;
        top: 14rpx;
        width: 40rpx;
        height: 40rpx;
    }

    .option-days {
        font-size: 48rpx;
        font-weight: 700;
        color: #222222;
        line-height: 1.1;
    }

    .option-type {
        font-size: 32rpx;
        font-weight: 600;
        color: #5e9f02;
        margin-top: 10rpx;
        line-height: 1.2;
    }

    .option-desc {
        font-size: 28rpx;
        color: #999999;
        margin-top: 14rpx;
        line-height: 1.3;
    }

    .option-badge {
        display: inline-flex;
        align-items: center;
        margin-top: 12rpx;
        padding: 6rpx 14rpx;
        background: #59b828;
        border-radius: 24rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 1;
    }

    .benefits-wrap {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-bottom: 0;

        &.is-visible {
            max-height: 520rpx;
            opacity: 1;
            margin-bottom: 20rpx;
        }
    }

    .benefits-img {
        width: 100%;
        display: block;
        border-radius: 16rpx;
    }

    .confirm-wrap {
        padding-top: 24rpx;
    }

    .confirm-btn {
        width: 100%;
        display: block;
    }
}
</style>