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">
                        <u-icon name="gift-fill" size="40" color="#333"></u-icon>
                        <text class="item-title">免费退回</text>
                    </view>
                    <view class="item-desc">本单不合格书籍可免费退回，您可在订单审核完成后，提交申请退回。</view>
                </view>

                <!-- 24小时验 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <u-icon name="clock-fill" size="40" color="#333"></u-icon>
                        <text class="item-title">24小时验</text>
                    </view>
                    <view class="item-desc">本单获得24小时验资格，订单将在"到仓签收"后24小时内验货完毕，未完成验货将获得3元补贴到余额，可随验货书款一起提现。</view>
                </view>

                <!-- 极速打款 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <u-icon name="rmb-circle-fill" size="40" color="#333"></u-icon>
                        <text class="item-title">极速打款</text>
                    </view>
                    <view class="item-desc">余额提现后，将在24小时内到账。</view>
                </view>

                <!-- 卖亏必赔 -->
                <view class="guarantee-item">
                    <view class="item-header">
                        <u-icon name="shield-fill" size="40" color="#333"></u-icon>
                        <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 {
    data() {
        return {
            showPopup: false
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
        },
        closePopup() {
            this.showPopup = false;
        }
    }
};
</script>

<style lang="scss">
.popup-content {
    background: #FFFFFF;
    padding: 40rpx;
    width: 600rpx;

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

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

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

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

            .item-desc {
                font-size: 26rpx;
                color: #666666;
                line-height: 1.5;
                padding-left: 50rpx;
            }
        }
    }

    .confirm-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background-color: #38C148;
        color: #FFFFFF;
        font-size: 32rpx;
        border-radius: 10rpx;
        border: none;
        margin-top: 20rpx;
    }
}
</style>