|
|
@@ -0,0 +1,113 @@
|
|
|
+<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>
|