Jelajahi Sumber

feat(service-popup): 添加服务保障弹窗组件及相关资源

添加服务保障弹窗组件,包含6个服务项图标及背景图
调整搜索页面z-index值并默认打开服务弹窗用于测试
优化商品选择弹窗中折扣标签的样式
ylong 1 Minggu lalu
induk
melakukan
02a5945d91

+ 29 - 1
components/common-dialog.vue

@@ -1,6 +1,8 @@
 <template>
     <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="20" :width="width">
-        <view class="dialog-content">
+        <view class="dialog-content" :style="customStyle">
+            <image v-if="bgImage" :src="bgImage" class="dialog-bg-image" mode="scaleToFill"></image>
+            
             <!-- 标题 -->
             <view v-if="title" class="dialog-title">{{ title }}</view>
 
@@ -50,6 +52,16 @@ export default {
         showFooter: {
             type: Boolean,
             default: true
+        },
+        // 自定义弹窗样式
+        customStyle: {
+            type: Object,
+            default: () => ({})
+        },
+        // 背景图片
+        bgImage: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -81,6 +93,16 @@ export default {
     background: #FFFFFF;
     border-radius: 20rpx;
     overflow: hidden;
+    position: relative;
+
+    .dialog-bg-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+    }
 
     .dialog-title {
         font-size: 32rpx;
@@ -89,12 +111,16 @@ export default {
         padding: 30rpx;
         font-family: PingFang SC;
         font-weight: bold;
+        position: relative;
+        z-index: 1;
     }
 
     .dialog-body {
         padding: 0 40rpx;
         text-align: center;
         line-height: 48rpx;
+        position: relative;
+        z-index: 1;
     }
 
     .dialog-footer {
@@ -102,6 +128,8 @@ export default {
         gap: 30rpx;
         padding: 30rpx;
         padding-bottom: 40rpx;
+        position: relative;
+        z-index: 1;
 
         button {
             flex: 1;

+ 5 - 5
pages-sell/components/select-good-popup/index.vue

@@ -298,16 +298,16 @@ export default {
 
 			.opt-discount {
 				background: #D8D8D8;
-				border-radius: 8rpx 0 8rpx 0;
-				padding: 2rpx 10rpx;
-
+				padding: 0 20rpx;
+				border-radius: 0 20rpx 0 20rpx;
 				text {
 					color: #fff;
-					font-size: 22rpx;
+					font-size: 24rpx;
+					display: inline-block;
 				}
 
 				&.active {
-					background: #38C248;
+					background: linear-gradient(0deg, #30E030 0%, #28C445 100%);
 				}
 			}
 		}

+ 113 - 0
pages-sell/components/service-popup/index.vue

@@ -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>

+ 13 - 2
pages-sell/pages/search-result.vue

@@ -51,6 +51,9 @@
                 <RecommendItem v-for="(item, index) in bookList" :key="index" :item="item" @add-cart="addToCart" :show-desc="false">
                 </RecommendItem>
             </view>
+            
+            <!-- Service Popup -->
+            <ServicePopup ref="servicePopup"></ServicePopup>
         </view>
     </view>
 </template>
@@ -59,12 +62,14 @@
 import RecommendItem from '../components/recommend-item/index.vue';
 import HotRecommendItem from '../components/hot-recommend-item/index.vue';
 import Navbar from '@/components/navbar/navbar.vue';
+import ServicePopup from '../components/service-popup/index.vue';
 
 export default {
     components: {
         RecommendItem,
         HotRecommendItem,
-        Navbar
+        Navbar,
+        ServicePopup
     },
     data() {
         return {
@@ -117,6 +122,12 @@ export default {
             ]
         }
     },
+    mounted() {
+        // Open service popup by default for testing
+        this.$nextTick(() => {
+            this.$refs.servicePopup.open();
+        });
+    },
     methods: {
         goBack() {
             uni.navigateBack();
@@ -156,7 +167,7 @@ export default {
 
 .search-bar-wrapper {
     position: relative;
-    z-index: 100;
+    z-index: 2;
     display: flex;
     align-items: center;
     padding: 0 30rpx;

TEMPAT SAMPAH
pages-sell/static/service/bg.png


TEMPAT SAMPAH
pages-sell/static/service/icon-1.png


TEMPAT SAMPAH
pages-sell/static/service/icon-2.png


TEMPAT SAMPAH
pages-sell/static/service/icon-3.png


TEMPAT SAMPAH
pages-sell/static/service/icon-4.png


TEMPAT SAMPAH
pages-sell/static/service/icon-5.png


TEMPAT SAMPAH
pages-sell/static/service/icon-6.png