From 78644e3b8a2c1ec854ec55e6346f55c7e01a7023 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 11:20:45 +0800
Subject: [PATCH] refactor: standardize spacing and update RefundPopup
 component

- standardize margin spacing across components with explicit pixel values
- replace legacy uni-popup and icons with van-ui equivalents in RefundPopup
- update font weight class to use semantic name in date range selector
---
 src/components/CreateServiceOrder/index.vue   |  4 +-
 src/components/Feedback/index.vue             |  2 +-
 src/components/RefundPopup/index.vue          | 59 +++++++------------
 src/components/RefundPopup/styles/index.scss  |  9 ---
 src/components/UseDateRange/index.vue         |  2 +-
 src/pages/booking/index.vue                   |  2 +-
 .../home/components/AnswerComponent/index.vue |  2 +-
 .../order/components/GoodsInfo/index.vue      |  2 +-
 .../order/components/OrderInfo/index.vue      |  4 +-
 .../order/order/components/UserInfo/index.vue |  2 +-
 src/pages/quick/components/Card/index.vue     |  2 +-
 11 files changed, 32 insertions(+), 58 deletions(-)
 delete mode 100644 src/components/RefundPopup/styles/index.scss

diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 1a21a13..162719d 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -44,10 +44,10 @@
 
       <div v-else class=" card-content flex items-center p-[12px]">
         <div class=" left flex-1 pr-20">
-          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
             所在位置：{{ roomId }}
           </div>
-          <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+          <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
             联系方式: {{ contactPhone }}
           </div>
           <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
diff --git a/src/components/Feedback/index.vue b/src/components/Feedback/index.vue
index 2b25c3a..b4926ec 100644
--- a/src/components/Feedback/index.vue
+++ b/src/components/Feedback/index.vue
@@ -25,7 +25,7 @@
       </div>
 
       <div v-else class=" left flex-1 p-[12px]">
-        <div class="text-[12px] text-ink-600 leading-[20px] mb-4">
+        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
           联系方式: {{ contactPhone }}
         </div>
         <div class="text-[12px] text-ink-600 leading-[20px] ellipsis-2">
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index 940a2cf..56121f6 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -1,35 +1,34 @@
 <template>
-  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
-    <div class="refund-popup bg-[#f5f7fa] ">
-      <div class=" flex items-center justify-between pt-[12px] pb-[12px] relative">
+  <van-popup ref="popupRef" position="bottom" v-model:show="show">
+    <div class="rounded-t-[15px] pb-10 bg-[#f5f7fa] ">
+      <div class="flex items-center justify-between pt-[12px] pb-[12px] relative">
         <div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
           取消政策
         </div>
         <!-- 关闭按钮 -->
-        <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
+        <van-icon class="top-[14px] right-[12px] absolute" name="cross" size="20" color="#CACFD8" @click="close" />
       </div>
       <!-- 内容区域 -->
-      <div class=" rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
-        <div class="flex items-center mb-8">
-          <uni-icons fontFamily="znicons" size="20" color="#333">
-            {{ iconsMap["zn-refund"] }}
-          </uni-icons>
-          <span class="text-[14px] font-600 text-[#171717] ml-[8px]">
+      <div class="rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-[40px]">
+        <div class="flex items-center mb-[8px]">
+          <zn-icon name="zn-refund" size="20" color="#333"></zn-icon>
+          <span class="text-[14px] font-semibold text-[#171717] ml-[8px]">
             {{ refundTitle }}
           </span>
         </div>
-        <div class="text-[14px] text-ink-600 leading-[16px] mb-4" v-for="(item, index) in commodityPurchaseInstruction"
-          :key="index">
+        <div class="text-[14px] text-ink-600 leading-[16px] mb-[4px]"
+          v-for="(item, index) in commodityPurchaseInstruction" :key="index">
           {{ item }}
         </div>
       </div>
     </div>
-  </uni-popup>
+  </van-popup>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, defineExpose } from "vue";
 import { iconsMap } from "@/static/fonts/znicons";
+import ZnIcon from '@/components/ZnIcon/index.vue'
 
 // Props定义
 const props = defineProps({
@@ -50,6 +49,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 弹窗引用
 const popupRef = ref(null);
+const show = ref(false)
 
 // 获取退款模板
 const refundTitle = computed(() => {
@@ -77,29 +77,12 @@ const commodityPurchaseInstruction = computed(() => {
 });
 
 // 方法定义
-const show = () => popupRef.value && popupRef.value.open();
+const open = () => show.value = true;
 
-const hide = () => popupRef.value && popupRef.value.close();
+const close = () => show.value = false;
 
-// 监听modelValue变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal) {
-      show();
-    } else {
-      hide();
-    }
-  },
-  { immediate: true },
-);
-
-const handleClose = () => {
-  emit("update:modelValue", false);
-  emit("close");
-};
-</script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
+defineExpose({
+  open,
+  close,
+})
+</script>
\ No newline at end of file
diff --git a/src/components/RefundPopup/styles/index.scss b/src/components/RefundPopup/styles/index.scss
deleted file mode 100644
index 57425d5..0000000
--- a/src/components/RefundPopup/styles/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.refund-popup {
-  border-radius: 15px 15px 0 0;
-  padding-bottom: 40px;
-}
-
-.close {
-  top: 14px;
-  right: 12px;
-}
diff --git a/src/components/UseDateRange/index.vue b/src/components/UseDateRange/index.vue
index 654bed3..78b1fe3 100644
--- a/src/components/UseDateRange/index.vue
+++ b/src/components/UseDateRange/index.vue
@@ -10,7 +10,7 @@
             <div class="date-item" :class="{ selected: isSameDate(selectedDate, item.date) }"
               @click="onDateClick(item)">
               <div class="label text-[12px]">{{ item.weekDesc }}</div>
-              <div class="md text-[16px] font-600">
+              <div class="md text-[16px] font-semibold">
                 {{ formatMD(item.date) }}
               </div>
               <div class="status text-[12px]">{{ item.canOrder }}</div>
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index bf55feb..d869611 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -23,7 +23,7 @@
           </div>
 
           <!-- 权益部分 -->
-          <div class="flex items-center mb-8">
+          <div class="flex items-center mb-[8px]">
             <span
               class="bg-[#f7f7f7]  rounded-[4px] text-[11px] text-ink-600 mr-[4px] pt-[4px] pb-[4px] pl-[6px] pr-[6px]"
               v-for="(item, index) in orderData.commodityFacilityList" :key="index">
diff --git a/src/pages/home/components/AnswerComponent/index.vue b/src/pages/home/components/AnswerComponent/index.vue
index 2ebd91e..01c6221 100644
--- a/src/pages/home/components/AnswerComponent/index.vue
+++ b/src/pages/home/components/AnswerComponent/index.vue
@@ -4,7 +4,7 @@
     <div class="w-full"></div>
     <div class="flex flex-col px-[16px] pt-16 pb-[12px] ">
       <div v-if="tag" class="long-answer-tag">{{ tag }}</div>
-      <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
+      <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-[4px]">
         <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
         <span class="text-[16px] font-medium span-color-900 ml-6"> {{ title }}</span>
       </div>
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
index 3558d2d..549914a 100644
--- a/src/pages/order/order/components/GoodsInfo/index.vue
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -21,7 +21,7 @@
   </div>
 
   <div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
-    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-8">
+    <div class="text-[16px] font-medium text-black leading-[24px] truncate mb-[8px]">
       {{ orderData.commodityName }}
     </div>
 
diff --git a/src/pages/order/order/components/OrderInfo/index.vue b/src/pages/order/order/components/OrderInfo/index.vue
index e274843..d6bd8d9 100644
--- a/src/pages/order/order/components/OrderInfo/index.vue
+++ b/src/pages/order/order/components/OrderInfo/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="bg-white  rounded-[10px] p-[12px]">
-    <div class="flex mb-8 text-[12px]">
+    <div class="flex mb-[8px] text-[12px]">
       <span class="w-60 text-ink-400">订单编号</span>
       <span class="text-ink-600">{{ orderData.orderId }}</span>
     </div>
-    <div class="flex mb-8 text-[12px]">
+    <div class="flex mb-[8px] text-[12px]">
       <span class="w-60 text-ink-400">下单时间</span>
       <span class="text-ink-600">{{ orderData.createTime }}</span>
     </div>
diff --git a/src/pages/order/order/components/UserInfo/index.vue b/src/pages/order/order/components/UserInfo/index.vue
index f8c8af9..e1ee993 100644
--- a/src/pages/order/order/components/UserInfo/index.vue
+++ b/src/pages/order/order/components/UserInfo/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white  rounded-[10px] p-[12px] mb-[12px]" v-if="hasConsumerData">
     <div v-for="(item, index) in consumerList" :key="index">
-      <div class="flex mb-8 text-[12px]">
+      <div class="flex mb-[8px] text-[12px]">
         <span class="w-60 text-ink-400">住客姓名</span>
         <span class="text-ink-600">{{ item.visitorName }}</span>
       </div>
diff --git a/src/pages/quick/components/Card/index.vue b/src/pages/quick/components/Card/index.vue
index de81118..944a608 100644
--- a/src/pages/quick/components/Card/index.vue
+++ b/src/pages/quick/components/Card/index.vue
@@ -5,7 +5,7 @@
       <div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </div>
-      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-4 truncate">
+      <div v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-ink-400 mb-[4px] truncate">
         {{ item.commodityFacility.join(" ") }}
       </div>
       <div class="text-[12px] leading-[18px] text-[#43669A]">