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

<template>
    <u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20">
        <view class="popup-content">
            <view class="popup-title">服务保障</view>

            <view class="guarantee-list">
                <!-- 免费退回 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <image src="/static/img/1-1.png" mode="widthFix" class="item-icon"></image>
                        <text class="item-title">免费退回</text>
                    </view>
                    <view class="item-desc">本单不合格书籍可免费退回，您可在订单审核完成后，提交申请退回。</view>
                </view>

                <!-- 5天验 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <image src="/static/img/1-2.png" mode="widthFix" class="item-icon"></image>
                        <text class="item-title">{{ verifyPeriodLabel }}</text>
                    </view>
                    <view class="item-desc">本单获得{{ verifyPeriodLabel }}资格，订单将在到仓签收后{{ verifyCompleteDays }}天内验货完毕，未完成验货将获得3元补贴到余额，可随验货书款一起提现。</view>
                </view>

                <!-- 极速打款 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <image src="/static/img/1-3.png" mode="widthFix" class="item-icon"></image>
                        <text class="item-title">极速打款</text>
                    </view>
                    <view class="item-desc">余额提现后，将在24小时内到账。</view>
                </view>

                <!-- 卖亏必赔 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <image src="/static/img/1-4.png" mode="widthFix" class="item-icon"></image>
                        <text class="item-title">卖亏必赔</text>
                    </view>
                    <view class="item-desc">订单完成后15天内，若发现订单内所售书籍发生涨价，可以申请补差。</view>
                </view>
            </view>

            <button class="confirm-btn" @click="closePopup">确定</button>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        verifyPeriodDays: {
            type: [Number, String],
            default: null,
        },
    },
    computed: {
        /** 结算时效展示：15/7 天验，未选默认 5 天验 */
        verifyPeriodDisplayDays() {
            const days = Number(this.verifyPeriodDays)
            if (days === 15) return 15
            if (days === 7) return 7
            return 7
        },
        verifyPeriodLabel() {
            return `${this.verifyPeriodDisplayDays}天验`
        },
        /** 验货完成时限：15 天验为 15 天内，7 天验或未选为 7 天内 */
        verifyCompleteDays() {
            return Number(this.verifyPeriodDays) === 15 ? 15 : 7
        },
    },
    data() {
        return {
            showPopup: false
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
        },
        closePopup() {
            this.showPopup = false;
        }
    }
};
</script>

<style lang="scss">
.popup-content {
    background: #FFFFFF;
    padding: 30rpx;
    width: 600rpx;
    border-radius: 20rpx;
    padding-left: 46rpx;

    .popup-title {
        font-size: 34rpx;
        color: #333333;
        font-weight: 600;
        text-align: center;
        margin-bottom: 30rpx;
    }

    .guarantee-list {
        .guarantee-item {
            margin-bottom: 30rpx;

            .item-header {
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;

                .item-icon {
                    width: 28rpx;
                    height: 28rpx;
                }

                .item-title {
                    font-size: 30rpx;
                    color: #333333;
                    font-weight: 600;
                    margin-left: 10rpx;
                }
            }

            .item-desc {
                font-size: 26rpx;
                color: #333333;
                font-weight: 400;
                line-height: 1.5;
            }
        }
    }

    .confirm-btn {
        width: 280rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #4CD964;
        color: #FFFFFF;
        font-size: 32rpx;
        border-radius: 10rpx;
        border: none;
        margin-top: 20rpx;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}
</style>