From 265993313e8f867eb19ae53085237603d7660897 Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 11:03:57 +0800
Subject: [PATCH] style(components): standardize borders and refactor popup

Replace legacy `border-bottom` CSS classes with design system's `border-b border-ink-200` across all vue components. Refactor DetailPopup to use van-popup instead of uni-popup, update icon usage, component logic and styling.
---
 src/components/DetailPopup/index.vue          | 44 ++++++-------------
 src/components/GoodDetail/index.vue           |  2 +-
 src/components/RefundPopup/index.vue          |  2 +-
 .../components/ConactSection/index.vue        |  2 +-
 .../booking/components/UserSection/index.vue  |  4 +-
 src/pages/booking/index.vue                   |  2 +-
 .../goods/components/GoodFacility/index.vue   |  2 +-
 .../components/LongTextGuideCard/index.vue    |  2 +-
 .../home/components/MoreService/index.vue     |  2 +-
 .../components/SharedVisual/DetailShell.vue   |  2 +-
 .../order/components/GoodsInfo/index.vue      |  2 +-
 .../order/components/VoucherList/index.vue    |  2 +-
 12 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/src/components/DetailPopup/index.vue b/src/components/DetailPopup/index.vue
index b41b3ea..b63577d 100644
--- a/src/components/DetailPopup/index.vue
+++ b/src/components/DetailPopup/index.vue
@@ -1,16 +1,16 @@
 <template>
-  <uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
-    <div class="refund-popup bg-[#f5f7fa] ">
+  <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 ml-[12px] mr-[12px] mb-40">
-        <div class=" border-bottom flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
+      <div class="rounded-[12px] bg-white ml-[12px] mr-[12px] mb-[40px]">
+        <div class="border-b border-ink-200 flex items-center justify-between pt-[12px] pb-[12px] ml-[12px] mr-[12px]">
           <span class="text-[16px] font-medium text-[#171717]">在线支付</span>
           <span class="text-[14px] text-[#171717]">239</span>
         </div>
@@ -20,11 +20,11 @@
         </div>
       </div>
     </div>
-  </uni-popup>
+  </van-popup>
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, defineExpose } from "vue";
 
 // Props定义
 const props = defineProps({
@@ -45,6 +45,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 // 弹窗引用
 const popupRef = ref(null);
+const show = ref(false)
 
 // 获取退款模板
 const commodityPurchaseInstruction = computed(() => {
@@ -56,29 +57,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");
-};
+defineExpose({
+  open,
+  close,
+});
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 3c9d67c..36acfa7 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -5,7 +5,7 @@
       <div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
         .commodityPurchaseInstructionModuleEntityList" :key="index">
         <div class="flex flex-items-start flex-col pt-[12px] pb-[12px]" :class="{
-          'border-bottom':
+          'border-b border-ink-200':
             index <
             goodsData.commodityPurchaseInstruction
               .commodityPurchaseInstructionModuleEntityList.length -
diff --git a/src/components/RefundPopup/index.vue b/src/components/RefundPopup/index.vue
index d49317c..3bbaa2f 100644
--- a/src/components/RefundPopup/index.vue
+++ b/src/components/RefundPopup/index.vue
@@ -9,7 +9,7 @@
         <uni-icons class="close absolute" type="close" size="20" color="#CACFD8" @click="handleClose" />
       </div>
       <!-- 内容区域 -->
-      <div class=" rounded-[12px] bg-white p-[12px] ml-[12px] mr-[12px] mb-40">
+      <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"] }}
diff --git a/src/pages/booking/components/ConactSection/index.vue b/src/pages/booking/components/ConactSection/index.vue
index 105b8f5..be976fb 100644
--- a/src/pages/booking/components/ConactSection/index.vue
+++ b/src/pages/booking/components/ConactSection/index.vue
@@ -16,7 +16,7 @@
 
   <!-- 联系方式 -->
   <div class="bg-white rounded-[12px] overflow-hidden">
-    <div class=" border-bottom text-[16px] font-medium text-black leading-[24px] p-[12px]">
+    <div class=" border-b border-ink-200 text-[16px] font-medium text-black leading-[24px] p-[12px]">
       联系方式
     </div>
     <div class="flex items-center  p-[12px]">
diff --git a/src/pages/booking/components/UserSection/index.vue b/src/pages/booking/components/UserSection/index.vue
index 23ba1c1..6f28e3e 100644
--- a/src/pages/booking/components/UserSection/index.vue
+++ b/src/pages/booking/components/UserSection/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
-    <div class="flex items-center  p-[12px] border-bottom">
+    <div class="flex items-center  p-[12px] border-b border-ink-200">
       <div class="text-[16px] font-medium text-black leading-[24px] flex-1">
         入住信息
       </div>
@@ -10,7 +10,7 @@
     </div>
 
     <div class=" pl-12 pr-12">
-      <div class=" border-bottom pt-[12px] pb-[12px] flex items-center" v-for="(item, index) in userFormList"
+      <div class=" border-b border-ink-200 pt-[12px] pb-[12px] flex items-center" v-for="(item, index) in userFormList"
         :key="index">
         <div class="text-[14px] font-medium text-ink-600 mr-[12px]">住客姓名</div>
         <div class="right">
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index 95e7d0d..bf55feb 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -17,7 +17,7 @@
           {{ orderData.commodityName }}
         </div>
 
-        <div class=" border-bottom">
+        <div class=" border-b border-ink-200">
           <div class="text-[12px] text-ink-400 leading-[16px] pb-[12px] break-all">
             {{ orderData.commodityDescription }}
           </div>
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
index b062576..d0bda7d 100644
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -2,7 +2,7 @@
   <div class="border-top-8">
     <div class="pt-[12px] pl-[12px] pr-[12px]" v-for="(moduleItem, index) in goodsData.commodityEquipment" :key="index">
       <div class="flex flex-col items-start" :class="{
-        'border-bottom': index < goodsData.commodityEquipment.length - 1,
+        'border-b border-ink-200': index < goodsData.commodityEquipment.length - 1,
       }">
         <div class="flex items-center flex-row shrink-0">
           <zn-icon :name="moduleItem.icon" size="20" color="#171717"></zn-icon>
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index 5c8b666..8a8adab 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -20,7 +20,7 @@
     </div>
 
     <div v-else class="long-text-guide-card__detail-card bg-white rounded-[24px]  overflow-hidden">
-      <div class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
+      <div class="long-text-guide-card__detail-header flex items-center border-b border-ink-200">
         <div class="long-text-guide-card__back flex items-center justify-center rounded-full font-700"
           @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
diff --git a/src/pages/home/components/MoreService/index.vue b/src/pages/home/components/MoreService/index.vue
index 8a98c3b..aa42713 100644
--- a/src/pages/home/components/MoreService/index.vue
+++ b/src/pages/home/components/MoreService/index.vue
@@ -7,7 +7,7 @@
       </div>
 
       <div class="list bg-white  pl-20 pr-20">
-        <div class="item  border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
+        <div class="item  border-b border-ink-200 pt-20 pb-20" v-for="(item, index) in list" :key="index">
           <div class="flex items-center justify-center">
             <img v-if="item.icon" class="left" :src="item.icon" />
             <div class="center flex-1">
diff --git a/src/pages/home/components/SharedVisual/DetailShell.vue b/src/pages/home/components/SharedVisual/DetailShell.vue
index 0b75c5f..dd70c28 100644
--- a/src/pages/home/components/SharedVisual/DetailShell.vue
+++ b/src/pages/home/components/SharedVisual/DetailShell.vue
@@ -1,6 +1,6 @@
 <template>
   <CardShell variant="detail">
-    <div class="min-h-[48px] flex items-center px-[16px]  border-bottom-F1F5F9">
+    <div class="min-h-[48px] flex items-center px-[16px]  border-b border-ink-200">
       <div
         class="w-[30px] h-[30px] text-[22px] leading-[28px] mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
         @click="$emit('back')">
diff --git a/src/pages/order/order/components/GoodsInfo/index.vue b/src/pages/order/order/components/GoodsInfo/index.vue
index a6d5760..3558d2d 100644
--- a/src/pages/order/order/components/GoodsInfo/index.vue
+++ b/src/pages/order/order/components/GoodsInfo/index.vue
@@ -7,7 +7,7 @@
       {{ orderData.commodityName }}
     </div>
 
-    <div class=" border-bottom text-[12px] text-ink-400 leading-[16px] pb-[12px]">
+    <div class=" border-b border-ink-200 text-[12px] text-ink-400 leading-[16px] pb-[12px]">
       {{ orderData.commodityDescription }}
     </div>
 
diff --git a/src/pages/order/order/components/VoucherList/index.vue b/src/pages/order/order/components/VoucherList/index.vue
index 91749b7..0f3fa04 100644
--- a/src/pages/order/order/components/VoucherList/index.vue
+++ b/src/pages/order/order/components/VoucherList/index.vue
@@ -7,7 +7,7 @@
     <div class="flex items-center justify-between py-12" :class="[
       index + 1 === props.orderData.commodityPackageConfig.length
         ? ''
-        : 'border-bottom',
+        : 'border-b border-ink-200',
     ]" v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
       <div class="flex flex-col">
         <span class="span-color-900 text-[16px]">{{ item.name }}</span>