book-hi/pages-sell/components/service-popup/index.vue

<template>
    <CommonDialog ref="commonDialog" title="服务保障" :showCancel="false" confirmText="确定" @confirm="close" width="95%"
        :bgImage="'/pages-sell/static/service/bg.png'">
        <scroll-view scroll-y class="service-list">
            <view class="service-item" v-for="(item, index) in serviceList" :key="index">
                <view class="item-icon">
                    <image :src="item.icon" class="icon"></image>
                    <view class="item-title">{{ item.title }}</view>
                </view>
                <view class="item-desc">{{ item.desc }}</view>
            </view>
        </scroll-view>
    </CommonDialog>
</template>

<script>
import CommonDialog from '@/components/common-dialog.vue';

export default {
    name: 'ServicePopup',
    components: {
        CommonDialog
    },
    data() {
        return {
            serviceList: [
                {
                    icon: '/pages-sell/static/service/icon-1.png',
                    title: '破损包赔',
                    desc: '若签收时发现商品破损、磨损、挤压变形等情况，可在 24 小时内申请退款，平台将在 24 小时内处理退款申请'
                },
                {
                    icon: '/pages-sell/static/service/icon-2.png',
                    title: '降价补差',
                    desc: '订单付款 7 天内发现商品降价的情况，可申请补差价到余额，平台将在 24 小时内处理申请。'
                },
                {
                    icon: '/pages-sell/static/service/icon-3.png',
                    title: '24 小时发货',
                    desc: '订单支付成功后 24 小时内发货，若未在 24 小时内发货可申请补差价到余额，平台将在 24 小时内处理申请。'
                },
                {
                    icon: '/pages-sell/static/service/icon-4.png',
                    title: '退货无忧',
                    desc: '订单发货后 15 天内，申请退货，将自动减免 / 返还首重运费。'
                },
                {
                    icon: '/pages-sell/static/service/icon-5.png',
                    title: '未发货秒退',
                    desc: '订单发货前申请退款，平台秒退款。'
                },
                {
                    icon: '/pages-sell/static/service/icon-6.png',
                    title: '无货必赔',
                    desc: '订单付款后，因平台除因无法发货的订单，48 小时后可申请补偿到余额，平台将在 24 小时内处理申请。'
                }
            ]
        };
    },
    methods: {
        open() {
            this.$refs.commonDialog.openPopup();
        },
        close() {
            // commonDialog automatically closes on confirm, but if we need to manually close:
            // this.$refs.commonDialog.closePopup();
            // Since @confirm calls this close method, let's make sure it does nothing if already closed or just let it be.
            // Actually CommonDialog emits confirm then calls closePopup internally.
            // So we don't strictly need to call closePopup again, but it doesn't hurt.
        }
    }
};
</script>

<style lang="scss" scoped>
.service-list {
    max-height: 60vh;
    text-align: left;
}

.service-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 24rpx;

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

    .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
        flex-shrink: 0;
        margin-top: -4rpx;
    }

    .item-title {
        font-size: 26rpx;
        font-weight: bold;
        color: #1D1D1D;
    }

    .item-desc {
        font-size: 24rpx;
        color: #666666;
        line-height: 1.5;
        text-align: justify;
    }
}
</style>