fix: 退款异常问题修复

.npmrc

@@ -0,0 +1,4 @@
+registry=https://registry.npmmirror.com
+sass_binary_site=https://cdn.npmmirror.com/binaries/node-sass
+shamefully-hoist=true
+

package.json

@@ -72,7 +72,7 @@
     "@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
-    "sass": "^1.93.0",
+    "sass": "1.58.3",
     "vite": "5.2.8"
   }
 }

src/components/AddCarCrad/index.vue

@@ -25,5 +25,5 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Calender/index.vue

@@ -474,5 +474,5 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 // 引入样式文件
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Calender/styles/index.scss

@@ -80,7 +80,7 @@ $font-size-label: 10px;
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  border-radius: $uni-border-radius-circle;
   transition: background-color 0.2s;
 
   &:active {

src/components/CheckBox/index.vue

@@ -40,5 +40,5 @@ const onChange = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/CommandWrapper/index.vue

@@ -14,5 +14,5 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/CommandWrapper/styles/index.scss

@@ -7,5 +7,5 @@
 
 .command-text {
   color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
 }

src/components/CreateServiceOrder/index.vue

@@ -252,5 +252,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/CreateServiceOrder/styles/index.scss

@@ -3,10 +3,10 @@
 }
 
 .order-header {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 500;
   margin-bottom: 10px;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .order-content {
@@ -28,7 +28,7 @@
   width: 24px;
   height: 24px;
   margin-right: 8px;
-  border-radius: 50%;
+  border-radius: $uni-border-radius-circle;
   background-color: #ffa500;
   display: flex;
   align-items: center;
@@ -36,9 +36,9 @@
 }
 
 .order-description {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 500;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .order-line {
@@ -54,7 +54,7 @@
     top: -8px;
     width: 16px;
     height: 16px;
-    border-radius: 50px;
+    border-radius: $uni-border-radius-50px;
     background-color: #eff6fa;
   }
 
@@ -75,8 +75,8 @@
   display: flex;
   align-items: center;
   margin-bottom: 10px;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .detail-label {
@@ -85,15 +85,15 @@
 }
 
 .detail-value {
-  color: #333;
+  color: $uni-text-color;
 }
 
 .detail-input {
   border: none;
   outline: none;
   width: calc(100% - 80px);
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
   border-bottom: 1px solid #ddd;
 }
 
@@ -101,8 +101,8 @@
   border: none;
   outline: none;
   width: 100%;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .order-button {
@@ -110,7 +110,7 @@
   height: 42px;
   background: linear-gradient(90deg, #ff7e00, #ffba00);
   color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 600;
   border-radius: 20px;
   margin-top: 20px;
@@ -131,9 +131,9 @@
 .order-button-secondary {
   flex: 1;
   height: 42px;
-  background: linear-gradient(90deg, #0256FF, #00A6FF);
+  background: linear-gradient(90deg, #0256ff, #00a6ff);
   color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 600;
   border: none;
   border-radius: 20px;
@@ -148,7 +148,7 @@
   height: 42px;
   background: linear-gradient(90deg, #ff7e00, #ffba00);
   color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 600;
   border-radius: 20px;
   display: flex;
@@ -160,7 +160,7 @@
   margin-bottom: 12px;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #ed6a0c;
 }
 

src/components/Divider/index.vue

@@ -3,5 +3,5 @@
 </template>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Divider/styles/index.scss

@@ -1,30 +1,36 @@
 .divider {
   height: 1px;
   margin: 0 10px;
-  background: linear-gradient(to right, #eee, #eee 5px, transparent 5px, transparent);
+  background: linear-gradient(
+    to right,
+    #eee,
+    #eee 5px,
+    transparent 5px,
+    transparent
+  );
   background-size: 10px 100%;
   position: relative;
 
-  &::before, &::after { 
+  // &::before, &::after {
-    position: absolute;
+  //   position: absolute;
-    content: '';
+  //   content: '';
-    height: 12px;
+  //   height: 12px;
-    width: 6px;
+  //   width: 6px;
 
-    background-color: #E2EDF2;
+  //   background-color: #E2EDF2;
-    top: 50%;
+  //   top: 50%;
-    transform: translateY(-50%);
+  //   transform: translateY(-50%);
-  }
+  // }
 
-  &::before {
+  // &::before {
-    border-radius: 0 20px 20px 0;
+  //   border-radius: 0 20px 20px 0;
-    top: 0;
+  //   top: 0;
-    left: -10px;
+  //   left: -10px;
-  }
+  // }
 
-  &::after {
+  // &::after {
-    border-radius: 20px 0 0 20px;
+  //   border-radius: 20px 0 0 20px;
-    top: 0;
+  //   top: 0;
-    right: -10px;
+  //   right: -10px;
-  }
+  // }
 }

src/components/Feedback/index.vue

@@ -141,5 +141,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Feedback/styles/index.scss

@@ -3,10 +3,10 @@
 }
 
 .order-header {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 500;
   margin-bottom: 10px;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .order-content {
@@ -22,8 +22,8 @@
   display: flex;
   align-items: start;
   margin-bottom: 12px;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .detail-label {
@@ -32,14 +32,14 @@
 }
 
 .detail-value {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .detail-textarea {
   width: 100%;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
   border-radius: 4px;
   border: 1px solid #ddd;
   padding: 8px;
@@ -49,8 +49,8 @@
   border: none;
   outline: none;
   width: 100%;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
   border-bottom: 1px solid #ddd;
   padding-left: 8px;
 }
@@ -59,7 +59,7 @@
   width: 300px;
   height: 42px;
   color: #fff;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 600;
   border-radius: 21px;
   margin-top: 24px;
@@ -69,7 +69,7 @@
 }
 
 .submit-button {
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
+  background: linear-gradient(179deg, #00a6ff 0%, #0256ff 100%);
 }
 
 .look-button {
@@ -80,7 +80,7 @@
   margin-bottom: 12px;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #ed6a0c;
 }
 

src/components/FormCard/index.vue

@@ -175,5 +175,5 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/FormCard/styles/index.scss

@@ -1,7 +1,7 @@
 // SASS 变量定义
 $form-primary-color: #00a6ff;
 $form-error-color: #ff4d4f;
-$form-text-color: #333;
+$form-text-color: $uni-text-color;
 $form-label-color: #86909c;
 $form-border-color: #ddd;
 $form-input-border-color: #ddd;
@@ -48,7 +48,7 @@ $form-transition: all 0.2s ease;
 
 .form-title {
   margin-left: 8px;
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
   font-weight: 500;
   color: $form-primary-color;
   flex: 1;
@@ -85,7 +85,7 @@ $form-transition: all 0.2s ease;
 }
 
 .form-label {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: $form-label-color;
   width: 50px;
   flex-shrink: 0;
@@ -95,7 +95,7 @@ $form-transition: all 0.2s ease;
 
 .form-input {
   flex: 1;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: $form-text-color;
   border: none;
   border-bottom: 1px solid $form-input-border-color;
@@ -127,7 +127,7 @@ $form-transition: all 0.2s ease;
 }
 
 .form-error {
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
   color: $form-error-color;
   margin-top: 6px;
   margin-left: 60px;

src/components/GoodDetail/index.vue

@@ -58,5 +58,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use './styles/index.scss';
+@import "./styles/index.scss";
 </style>

src/components/GoodDetail/styles/index.scss

@@ -23,8 +23,8 @@
       flex-shrink: 0;
 
       .module-title {
-        font-size: 14px;
+        font-size: $uni-font-size-base;
-        color: #333;
+        color: $uni-text-color;
         text-align: center;
         word-wrap: break-word;
         margin-left: 4px;
@@ -33,7 +33,7 @@
 
     .module-desc {
       flex: 1;
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
       color: #666;
       line-height: 1.5;
       margin-top: 4px;

src/components/ImageSwiper/index.vue

@@ -47,7 +47,11 @@
             :id="`thumbnail-${index}`"
             @click="handleThumbnailClick(index)"
           >
-            <image class="thumbnail-image" :src="thumb.photoUrl" mode="aspectFill"></image>
+            <image
+              class="thumbnail-image"
+              :src="thumb.photoUrl"
+              mode="aspectFill"
+            ></image>
             <text>{{ thumb.photoName }}</text>
           </view>
         </view>
@@ -159,5 +163,5 @@ const handleSwiperChange = (e) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/ImageSwiper/styles/index.scss

@@ -19,7 +19,7 @@
   right: 8px;
   z-index: 10;
   background: rgba(0, 0, 0, 0.5);
-  border-radius: 50px;
+  border-radius: $uni-border-radius-50px;
   padding: 3px 8px;
   font-size: 8px;
   color: #fff;

src/components/LocationCard/index.vue

@@ -48,5 +48,5 @@ const openMap = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/LocationCard/styles/index.scss

@@ -7,8 +7,8 @@
   background-size: cover;
   background-position: center;
   border-radius: 20px;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
   position: relative;
   overflow: hidden;
 
@@ -30,15 +30,15 @@
   }
 
   .location-label {
-    color: #333;
+    color: $uni-text-color;
-    font-size: 14px;
+    font-size: $uni-font-size-base;
     font-weight: 500;
   }
 
   .address-text {
     margin-top: 4px;
     color: #666;
-    font-size: 12px;
+    font-size: $uni-font-size-sm;
     font-weight: 400;
   }
 

src/components/LocationInfo/index.vue

@@ -42,5 +42,5 @@ const openMap = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/LocationInfo/styles/index.scss

@@ -1,8 +1,8 @@
 .store-address {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 
   text {
     flex: 1;

src/components/ModuleTitle/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="module-header mb12">
     <text class="module-title">{{ title }}</text>
-    <image class="underline" src="./images/wave_icon.png" mode="aspectFill"/>
+    <image class="underline" src="./images/wave_icon.png" mode="aspectFill" />
   </view>
 </template>
 
@@ -9,11 +9,11 @@
 defineProps({
   title: {
     type: String,
-    default: '图片详情'
+    default: "图片详情",
-  }
+  },
 });
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/OrderCardItem/index.vue

@@ -48,5 +48,5 @@ const orderStatusText = computed(() => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/OrderCardItem/styles/index.scss

@@ -15,7 +15,7 @@
 .order-icon {
   width: 20px;
   height: 20px;
-  border-radius: 50%;
+  border-radius: $uni-border-radius-circle;
   background-color: #ffa500;
   display: flex;
   align-items: center;
@@ -24,18 +24,18 @@
 }
 
 .order-title {
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .order-status {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   padding: 5px 10px;
   border-radius: 15px;
 }
 
 .status-canceled {
-  color: #999;
+  color: $uni-text-color-grey;
   border: 1px solid #999;
 }
 
@@ -70,12 +70,12 @@
 }
 
 .detail-label {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #666;
   margin-right: 10px;
 }
 
 .detail-value {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }

src/components/Privacy/index.vue

@@ -3,14 +3,23 @@
     <view class="content">
       <view class="title">隐私保护指引</view>
       <view class="des">
-        请您仔细阅读并充分理解<text class="link" @click="handleOpenPrivacyContract">{{ privacyContractName }}</text>
+        请您仔细阅读并充分理解<text
-        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<text class="cancel">如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text>
+          class="link"
+          @click="handleOpenPrivacyContract"
+          >{{ privacyContractName }}</text
+        >
+        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<text class="cancel"
+          >如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
+        >
       </view>
 
       <view class="btns">
         <button class="reject" @click="handleDisagree">拒绝</button>
-        <button class="agree" open-type="agreePrivacyAuthorization"
+        <button
-          @agreeprivacyauthorization="handleAgreePrivacyAuthorization">
+          class="agree"
+          open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
+        >
           同意
         </button>
       </view>
@@ -19,11 +28,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 
-const showPrivacy = ref(true)
+const showPrivacy = ref(true);
-const privacyContractName = ref('隐私保护指引')
+const privacyContractName = ref("隐私保护指引");
 
 onShow(() => {
   // 条件编译微信小程序
@@ -34,7 +43,7 @@ onShow(() => {
       console.log("cj隐私配置", res);
       if (res.errMsg == "getPrivacySetting:ok" && res.needAuthorization) {
         privacyContractName.value = res.privacyContractName;
-        showPrivacy.value = res.needAuthorization
+        showPrivacy.value = res.needAuthorization;
       }
     },
   });
@@ -44,36 +53,33 @@ onShow(() => {
   // #ifdef MP-TOUTIAO
   uni.getPrivacySetting({
     success: (res) => {
-      console.log(res)
+      console.log(res);
-    }
+    },
-  })
+  });
   // #endif
-})
+});
-
-
 
 // 拒绝
 const handleDisagree = () => {
-  showPrivacy.value = false
+  showPrivacy.value = false;
-}
+};
 
 // 同意
 const handleAgreePrivacyAuthorization = () => {
-  showPrivacy.value = false
+  showPrivacy.value = false;
-}
+};
 
 // 打开隐私保护指引
 const handleOpenPrivacyContract = () => {
   // 条件编译微信小程序
   // #ifdef MP-WEIXIN
   wx.openPrivacyContract({
-    fail: () => { }
+    fail: () => {},
-  })
+  });
   // #endif
-}
+};
-
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Privacy/styles/index.scss

@@ -43,7 +43,7 @@
 
 .reject,
 .agree {
-  border-radius: 50px;
+  border-radius: $uni-border-radius-50px;
   width: 45%;
   border: none;
   font-size: 18px;
@@ -57,7 +57,7 @@
 .reject {
   color: #000;
   background-color: #f5f5f5;
-  border-radius: 50px;
+  border-radius: $uni-border-radius-50px;
 }
 
 .agree {

src/components/ResponseIntro/index.vue

@@ -17,5 +17,5 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/ResponseIntro/styles/index.scss

@@ -4,8 +4,8 @@
 
 .response-intro-text {
   font-weight: 500;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333333;
+  color: $uni-text-color;
   line-height: 20px;
   text-align: justify;
 }

src/components/ResponseWrapper/index.vue

@@ -7,5 +7,5 @@
 <script setup></script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/ServiceTipsWord/index.vue

@@ -36,5 +36,5 @@ const handleClick = (type) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/ServiceTipsWord/styles/index.scss

@@ -9,7 +9,7 @@
 }
 
 .header-text {
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
   color: #6b84a2;
 }
 
@@ -46,8 +46,8 @@
     rgba(255, 255, 255, 0.5),
     rgba(255, 255, 255, 1)
   );
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
   font-weight: 500;
   color: #00a6ff;
-  border-radius: 50px;
+  border-radius: $uni-border-radius-50px;
 }

src/components/Speech/RecordingWaveBtn.vue

@@ -109,7 +109,7 @@ defineExpose({
   align-items: center;
   background-color: #00a6ff;
   height: 44px;
-  border-radius: 50px;
+  border-radius: $uni-border-radius-50px;
 }
 
 .audio-visualizer {

src/components/Stepper/index.vue

@@ -59,5 +59,5 @@ const increase = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/Stepper/styles/index.scss

@@ -5,7 +5,7 @@
 
 .stepper-text {
   width: 40px;
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
-  color: #333;
+  color: $uni-text-color;
   text-align: center;
 }

src/components/SumCard/index.vue

@@ -25,5 +25,5 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/SumCard/styles/index.scss

@@ -19,15 +19,15 @@
 
 .sum-label {
   font-size: 15px;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .sum-value {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #999;
+  color: $uni-text-color-grey;
 }
 
 .sum-discount {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #ff5722;
 }

src/components/TagsGroup/index.vue

@@ -11,5 +11,5 @@ const tags = ["门票套餐", "民俗活动", "车程路况"];
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/TagsGroup/styles/index.scss

@@ -7,7 +7,7 @@
   background-color: #fff;
   border-radius: 10px;
   padding: 8px 16px;
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
-  color: #00A6FF;
+  color: #00a6ff;
   white-space: nowrap;
 }

src/components/TopNavBar/index.vue

@@ -1,7 +1,10 @@
 <template>
   <view :class="navBarClass" :style="navBarStyle">
     <!-- 状态栏占位 -->
-    <view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
+    <view
+      :style="{ height: statusBarHeight + 'px' }"
+      v-if="!hideStatusBar"
+    ></view>
 
     <!-- 导航栏内容 -->
     <view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
@@ -13,7 +16,9 @@
       <!-- 中间标题区域 -->
       <view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
         <slot name="title">
-          <text class="nav-bar-title" :style="{ color: titleColor }">{{ title }}</text>
+          <text class="nav-bar-title" :style="{ color: titleColor }">{{
+            title
+          }}</text>
         </slot>
       </view>
 
@@ -26,108 +31,114 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
 
 // 定义props
 const props = defineProps({
   // 标题文本
   title: {
     type: String,
-    default: ''
+    default: "",
   },
   // 是否固定在顶部
   fixed: {
     type: Boolean,
-    default: false
+    default: false,
+  },
+  // 是否添加阴影
+  shadow: {
+    type: Boolean,
+    default: true,
   },
   // 是否显示返回按钮
   showBack: {
     type: Boolean,
-    default: true
+    default: true,
   },
   // 背景颜色
   backgroundColor: {
     type: String,
-    default: '#ffffff'
+    default: "#ffffff",
   },
   // 标题颜色
   titleColor: {
     type: String,
-    default: '#333333'
+    default: "#333333",
   },
   // 返回按钮图标颜色
   backIconColor: {
     type: String,
-    default: '#333333'
+    default: "#333333",
   },
   // 是否隐藏状态栏占位
   hideStatusBar: {
     type: Boolean,
-    default: false
+    default: false,
   },
   // 自定义z-index
   zIndex: {
     type: Number,
-    default: 999
+    default: 999,
   },
   // 标题对齐方式
   titleAlign: {
     type: String,
-    default: 'center', // 'center' | 'left'
+    default: "center", // 'center' | 'left'
-    validator: (value) => ['center', 'left'].includes(value)
+    validator: (value) => ["center", "left"].includes(value),
-  }
+  },
-})
+});
 
 // 定义emits
-const emit = defineEmits(['back'])
+const emit = defineEmits(["back"]);
 
 // 系统信息
-const statusBarHeight = ref(0)
+const statusBarHeight = ref(0);
-const navBarHeight = ref(44) // 默认导航栏高度
+const navBarHeight = ref(44); // 默认导航栏高度
 
 // 获取系统信息
 onMounted(() => {
-  const systemInfo = uni.getSystemInfoSync()
+  const systemInfo = uni.getSystemInfoSync();
-  statusBarHeight.value = systemInfo.statusBarHeight || 0
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
 
   // 根据平台设置导航栏高度
-  if (systemInfo.platform === 'ios') {
+  if (systemInfo.platform === "ios") {
-    navBarHeight.value = 44
+    navBarHeight.value = 44;
   } else {
-    navBarHeight.value = 48
+    navBarHeight.value = 48;
   }
-})
+});
 
 // 计算导航栏样式类
 const navBarClass = computed(() => {
   return [
-    'top-nav-bar',
+    "top-nav-bar",
     {
-      'top-nav-bar--fixed': props.fixed
+      "top-nav-bar--fixed": props.fixed,
-    }
+      "has-shadow": props.shadow,
-  ]
+    },
-})
+  ];
+});
 
 // 计算导航栏样式
 const navBarStyle = computed(() => {
   return {
     backgroundColor: props.backgroundColor,
-    zIndex: props.zIndex
+    zIndex: props.zIndex,
-  }
+  };
-})
+});
 
 // 处理返回事件
 const handleBack = () => {
-  emit('back')
+  emit("back");
   // 如果没有监听back事件，默认执行返回上一页
-  if (!emit('back')) {
+  if (!emit("back")) {
     uni.navigateBack({
-      delta: 1
+      delta: 1,
-    })
+    });
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/components/TopNavBar/styles/index.scss

@@ -1,8 +1,11 @@
 // TopNavBar 组件样式
 .top-nav-bar {
   width: 100%;
-  background-color: #ffffff;
+  background-color: $uni-bg-color;
+
+  &.has-shadow {
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  }
 
   &--fixed {
     position: fixed;
@@ -44,6 +47,7 @@
 
     .nav-bar-center {
       flex: 1;
+      height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -71,7 +75,7 @@
       .nav-bar-title {
         font-size: 18px;
         font-weight: 500;
-        color: #333333;
+        color: $uni-text-color;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

src/pages-order/order/components/CustomEmpty/index.vue

@@ -22,5 +22,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/CustomEmpty/styles/index.scss

@@ -14,6 +14,6 @@
 
 .empty-text {
   margin-top: 10px;
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #666666;
 }

src/pages-order/order/components/GoodsInfo/index.vue

@@ -123,5 +123,5 @@ const formatServiceAmount = (amount) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/NoticeInfo/index.vue

@@ -26,5 +26,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/NoticeInfo/styles/index.scss

@@ -7,7 +7,7 @@
 .notice-title {
   display: flex;
   align-items: center;
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
   font-weight: 500;
-  color: #333;
+  color: $uni-text-color;
 }

src/pages-order/order/components/OrderCard/InfoRow.vue

@@ -31,15 +31,15 @@ const props = defineProps({
 }
 
 .label {
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
   color: #666666;
   flex-shrink: 0;
   margin-right: 8px;
 }
 
 .value {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333333;
+  color: $uni-text-color;
   flex: 1;
 }
 </style>

src/pages-order/order/components/OrderCard/index.vue

@@ -7,11 +7,14 @@
         <view class="order-title">
           {{ orderData.workOrderTypeName || orderData.commodityName }}
         </view>
-        <image
+
-          v-if="props.orderData.orderType !== undefined"
+        <uni-icons
           class="arrow-icon"
-          src="./images/arrow.png"
+          v-if="props.orderData.orderType !== undefined"
-        ></image>
+          type="right"
+          color="#999"
+          size="16"
+        />
       </view>
       <view
         v-if="orderData.status !== 'pending'"
@@ -33,7 +36,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineExpose } from "vue";
+import { defineProps } from "vue";
 import Divider from "@/components/Divider/index.vue";
 import OrderCardContent from "./OrderCardContent.vue";
 import serviceIcon from "./images/service.png";
@@ -117,5 +120,5 @@ const handleCardClick = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/OrderCard/styles/index.scss

@@ -4,6 +4,11 @@
   box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.12);
   margin: 12px;
   transition: all 0.3s ease;
+  mask: radial-gradient(circle at 0 57px, #0000 6px, red 0),
+    radial-gradient(circle at right 57px, #0000 6px, red 0);
+  mask-size: 50%;
+  mask-position: 0, 100%;
+  mask-repeat: no-repeat;
 
   &:active {
     transform: scale(0.98);
@@ -36,9 +41,9 @@
 }
 
 .order-title {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   font-weight: 500;
-  color: #333333;
+  color: $uni-text-color;
   line-height: 1.4;
 }
 
@@ -51,7 +56,7 @@
   box-sizing: border-box;
   padding: 6px 16px;
   border-radius: 20px;
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
   font-weight: 500;
 
   &.tag-0 {

src/pages-order/order/components/OrderInfo/index.vue

@@ -27,7 +27,7 @@
       v-if="shouldShowButton"
       :class="['reserve-button', { loading: isLoading }]"
       :disabled="isLoading"
-      @click="handleButtonClick"
+      @click="handleButtonClick(orderData)"
     >
       {{ isLoading ? "处理中..." : buttonText }}
     </button>
@@ -52,7 +52,7 @@ const PAY_WAY_MAP = {
 const isLoading = ref(false);
 
 // 定义事件发射器
-const emit = defineEmits(["show-refund-popup"]);
+const emit = defineEmits(["show-refund-popup", "pay-success"]);
 
 const props = defineProps({
   orderData: {
@@ -80,7 +80,7 @@ const formattedAmount = computed(() => {
   return amount ? `${parseFloat(amount).toFixed(2)}` : "0.00";
 });
 
-// 按钮文案逻辑
+// 按钮文案逻辑，订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
 const buttonText = computed(() => {
   const status = props.orderData.orderStatus;
   switch (status) {
@@ -88,26 +88,27 @@ const buttonText = computed(() => {
       return "立即支付";
     case "2": // 待使用状态
       return "申请退款";
-    default: // 其他状态
+    case "3": // 已取消状态
+    case "5": // 已关闭状态
+    case "6": // 已完成状态
       return "再次预定";
   }
 });
 
-// 是否显示按钮（退款中状态不显示）
+// 是否显示按钮（待支付、待使用、已取消、已关闭、已完成）
 const shouldShowButton = computed(() => {
-  return props.orderData.orderStatus !== "4"; // 4-退款中
+  const status = props.orderData.orderStatus;
+  return ["0", "2", "3", "5", "6"].includes(status);
 });
 
 // 处理按钮点击事件
-const handleButtonClick = async () => {
+const handleButtonClick = async (orderData) => {
   if (isLoading.value) return; // 防止重复点击
 
-  const status = props.orderData.orderStatus;
+  try {
-  const orderId = props.orderData.orderId;
+    isLoading.value = true;
-  // 支付方式
+
-  const payWay = props.orderData.payWay;
+    const status = orderData.orderStatus;
-  // 支付渠道
-  const paySource = "1";
 
     if (status === "2") {
       // 情况2：待使用状态，显示退款弹窗
@@ -115,35 +116,81 @@ const handleButtonClick = async () => {
       return; // 直接返回，不执行后续代码
     }
 
-  try {
+    // 再次预定跳转商品详情
-    isLoading.value = true;
+    if (["3", "5", "6"].includes(status)) {
+      uni.navigateTo({
+        url: `/pages/goods/index?commodityId=${orderData.commodityId}`,
+      });
+    }
+
+    // 待支付状态，调用支付接口
+    if (status === "0") {
+      const orderId = orderData.orderId;
+      const payWay = orderData.payWay;
+      const paySource = orderData.paySource;
 
-    // 情况1：待支付状态或其他状态，先预下单再支付
-    // 第一步：预下单
       const res = await orderPayNow({ orderId, payWay, paySource });
-    console.log(res);
+      console.log("确认订单---2:", res);
 
-    // 仅作为示例，非真实参数信息。
+      // 检查接口返回数据
+      if (!res || !res.data) {
+        uni.showToast({
+          title: "订单创建失败，请重试",
+          icon: "none",
+          duration: 2000,
+        });
+        return;
+      }
+
+      const { data } = res;
+      const { nonceStr, packageVal, paySign, signType, timeStamp } = data;
+
+      // 验证支付参数是否完整
+      if (!nonceStr || !packageVal || !paySign || !signType || !timeStamp) {
+        console.error("支付参数不完整:", {
+          nonceStr: !!nonceStr,
+          packageVal: !!packageVal,
+          paySign: !!paySign,
+          signType: !!signType,
+          timeStamp: !!timeStamp,
+        });
+        uni.showToast({
+          title: "支付参数错误，请重试",
+          icon: "none",
+          duration: 2000,
+        });
+        return;
+      }
+
+      // 调用微信支付
       uni.requestPayment({
         provider: "wxpay",
-      timeStamp: String(Date.now()),
+        timeStamp: String(timeStamp), // 确保为字符串类型
-      nonceStr: "A1B2C3D4E5",
+        nonceStr: String(nonceStr),
-      package: "prepay_id=wx20180101abcdefg",
+        package: String(packageVal), // 确保为字符串类型
-      signType: "MD5",
+        signType: String(signType),
-      paySign: "",
+        paySign: String(paySign),
-      success: (res) => {
+        success: () => {
-        console.log("success:" + JSON.stringify(res));
+          uni.showToast({
+            title: "支付成功",
+            icon: "success",
+            duration: 2000,
+            success: () => {
+              emit("pay-success");
+            },
+          });
         },
         fail: (err) => {
-        console.log("fail:" + JSON.stringify(err));
+          uni.showToast({
+            title: "支付失败，请重试",
+            icon: "none",
+            duration: 2000,
+          });
         },
       });
+    }
   } catch (error) {
     console.error("操作失败:", error);
-    uni.showToast({
-      title: error.message || "操作失败，请重试",
-      icon: "none",
-    });
   } finally {
     isLoading.value = false;
   }
@@ -157,5 +204,5 @@ const openFeedback = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/OrderInfo/styles/index.scss

@@ -1,14 +1,9 @@
-@use "sass:color";
-
-// SASS变量定义，提高可维护性和编译性能
-
 // 颜色系统
 $order-bg-color: #fff;
 $text-color-primary: #333;
 $text-color-secondary: #666;
 $text-color-accent: #ff5722;
 $button-color: #00a6ff;
-$button-hover-color: color.scale($button-color, $lightness: -16%);
 $button-disabled-color: #ccc;
 $border-color: #ececec;
 $shadow-color: rgba(0, 0, 0, 0.08);
@@ -33,16 +28,6 @@ $font-weight-semibold: 600;
 $transition-fast: 0.2s ease;
 $transition-normal: 0.3s ease;
 
-// 动画关键帧
-@keyframes loading-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .order-info {
   background-color: $order-bg-color;
   border-radius: $order-border-radius;
@@ -127,55 +112,15 @@ $transition-normal: 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50px;
+    border-radius: $uni-border-radius-50px;
     height: $button-height;
     font-size: $font-size-medium;
     font-weight: $font-weight-medium;
     margin-top: $spacing-large;
     position: relative;
     overflow: hidden;
-    transition: all $transition-normal;
     letter-spacing: 0.5px;
 
-    // 按钮波纹效果
-    &::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      transition: width 0.6s, height 0.6s;
-    }
-
-    &:hover {
-      background: linear-gradient(
-        135deg,
-        $button-hover-color 0%,
-        color.scale($button-hover-color, $lightness: -11.9%) 100%
-      );
-      transform: translateY(-2px);
-      box-shadow: 0 4px 16px rgba($button-color, 0.4);
-
-      &::before {
-        width: 300px;
-        height: 300px;
-      }
-    }
-
-    &:active {
-      transform: translateY(-1px);
-      box-shadow: 0 2px 8px rgba($button-color, 0.3);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px rgba($button-color, 0.3);
-    }
-
     &:disabled {
       background: $button-disabled-color;
       cursor: not-allowed;
@@ -198,21 +143,6 @@ $transition-normal: 0.3s ease;
       &::before {
         display: none;
       }
-
-      // 加载动画
-      &::after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 16px;
-        height: 16px;
-        margin: -8px 0 0 -8px;
-        border: 2px solid transparent;
-        border-top: 2px solid #fff;
-        border-radius: 50%;
-        animation: loading-spin 1s linear infinite;
-      }
     }
   }
 

src/pages-order/order/components/OrderQrcode/index.vue

@@ -31,5 +31,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/OrderQrcode/styles/index.scss

@@ -1,5 +1,5 @@
 .order-qrcode {
-  background: #ffffff;
+  background-color: $uni-bg-color;
   border-radius: 10px;
   box-sizing: border-box;
   display: flex;
@@ -10,7 +10,7 @@
   margin-bottom: 12px;
 
   text {
-    font-size: 12px;
+    font-size: $uni-font-size-sm;
     color: #666666;
     line-height: 17px;
     margin-top: 4px;

src/pages-order/order/components/OrderStatusInfo/index.vue

@@ -85,5 +85,5 @@ const statusDescription = computed(() => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/OrderStatusInfo/styles/index.scss

@@ -24,5 +24,5 @@
 }
 
 .status-description {
-  font-size: 12px;
+  font-size: $uni-font-size-sm;
 }

src/pages-order/order/components/RefundPopup/index.vue

@@ -98,7 +98,7 @@ const refundAmount = computed(() => {
 });
 
 // 是否可退款
-const isRefundable = computed(() => !props.orderData.refundable);
+const isRefundable = computed(() => props.orderData.refundable);
 
 // 按钮文件
 const btnText = computed(() => (isRefundable.value ? "点击退款" : "我知道了"));
@@ -113,9 +113,9 @@ const commodityPurchaseInstruction = computed(() => {
 });
 
 // 方法定义
-const show = () => popupRef.value.open();
+const show = () => popupRef.value && popupRef.value.open();
 
-const hide = () => popupRef.value.close();
+const hide = () => popupRef.value && popupRef.value.close();
 
 // 监听modelValue变化
 watch(
@@ -150,5 +150,5 @@ const handleConfirmClick = (text) => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/RefundPopup/styles/index.scss

@@ -25,9 +25,9 @@
   }
 
   &__title {
-    font-size: 16px;
+    font-size: $uni-font-size-lg;
     font-weight: 500;
-    color: #333;
+    color: $uni-text-color;
     line-height: 22px;
     margin-bottom: 12px;
     text-align: center;
@@ -40,7 +40,7 @@
     margin-bottom: 4px;
 
     .amount-symbol {
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
       color: #ff6a00;
     }
 
@@ -51,14 +51,14 @@
     }
 
     .amount-unit {
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
       color: #ff6a00;
     }
   }
 
   &__amount-label {
-    font-size: 12px;
+    font-size: $uni-font-size-sm;
-    color: #333;
+    color: $uni-text-color;
     margin-bottom: 16px;
   }
 
@@ -67,15 +67,15 @@
     margin-bottom: 16px;
 
     .policy-title {
-      font-size: 14px;
+      font-size: $uni-font-size-base;
       color: #007aff;
       font-weight: 600;
       margin-bottom: 8px;
     }
 
     .policy-content {
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
-      color: #333333;
+      color: $uni-text-color;
       line-height: 22px;
       text-align: justify;
     }
@@ -94,7 +94,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 16px;
+      font-size: $uni-font-size-lg;
       transition: all 0.3s ease;
       outline: none;
 

src/pages-order/order/components/Tabs/index.vue

@@ -271,5 +271,5 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/Tabs/styles/index.scss

@@ -21,7 +21,7 @@
 }
 
 .tab-text {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #666;
   font-weight: 400;
   transition: all 0.3s ease;
@@ -29,14 +29,14 @@
 }
 
 .tab-text-active {
-  color: #333;
+  color: $uni-text-color;
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
   font-weight: 600;
 }
 
 .tab-item-active {
   .tab-text {
-    color: #333;
+    color: $uni-text-color;
     font-weight: 600;
   }
 }
@@ -46,9 +46,10 @@
   bottom: 0;
   height: 3px;
   min-height: 3px; /* 确保最小高度 */
-  background-color: #007AFF;
+  background-color: #007aff;
   border-radius: 10px;
-  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 1;
   transform: translateZ(0); /* 启用硬件加速 */
   will-change: left, width; /* 优化动画性能 */
@@ -64,7 +65,6 @@
   opacity: 1;
 }
 
-
 /* 点击效果 */
 .tab-item:active {
   opacity: 0.7;

src/pages-order/order/components/UserInfo/index.vue

@@ -92,5 +92,5 @@ const formatPhone = (phone) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages-order/order/components/UserInfo/styles/index.scss

@@ -5,7 +5,7 @@
 }
 
 .user-info-title {
-  font-size: 16px;
+  font-size: $uni-font-size-lg;
   font-weight: 600;
   margin-bottom: 14px;
 }
@@ -17,12 +17,12 @@
 }
 
 .label {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
   color: #666;
   margin-right: 8px;
 }
 
 .value {
-  font-size: 14px;
+  font-size: $uni-font-size-base;
-  color: #333;
+  color: $uni-text-color;
 }

src/pages-order/order/detail.vue

@@ -1,7 +1,18 @@
 <template>
-  <view class="order-detail-wrapper">
+  <view class="order-detail-page">
-    <uni-icons type="left" size="20" color="#fff" @click="goBack" />
+    <TopNavBar
+      titleAlign="center"
+      :backgroundColor="backgroundColor"
+      :backIconColor="backIconColor"
+      :shadow="shadow"
+      fixed
+    >
+      <template #title>
+        {{ title }}
+      </template>
+    </TopNavBar>
 
+    <view class="order-detail-wrapper">
       <OrderStatusInfo :orderData="orderData" />
       <OrderQrcode
         v-if="orderData.orderStatus === '2'"
@@ -12,7 +23,11 @@
       <GoodsInfo :orderData="orderData" />
       <UserInfo :orderData="orderData" />
       <NoticeInfo :orderData="orderData" />
-    <OrderInfo :orderData="orderData" @show-refund-popup="showRefundPopup" />
+      <OrderInfo
+        :orderData="orderData"
+        @show-refund-popup="showRefundPopup"
+        @pay-success="handlePaySuccess"
+      />
 
       <!-- 退款状态显示 -->
       <RefundPopup
@@ -21,12 +36,14 @@
         @confirm="handleRefundConfirm"
       />
     </view>
+  </view>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onLoad, onPageScroll } from "@dcloudio/uni-app";
 import { userOrderDetail, orderRefund } from "@/request/api/OrderApi";
+import TopNavBar from "@/components/TopNavBar/index.vue";
 import OrderQrcode from "./components/OrderQrcode/index.vue";
 import OrderStatusInfo from "./components/OrderStatusInfo/index.vue";
 import GoodsInfo from "./components/GoodsInfo/index.vue";
@@ -38,20 +55,35 @@ import RefundPopup from "./components/RefundPopup/index.vue";
 const refundVisible = ref(false);
 const orderData = ref({});
 
-onLoad(async ({ orderId }) => {
+onLoad(({ orderId }) => getOrderDetail(orderId));
-  const res = await userOrderDetail({ orderId });
 
+// 获取订单详情
+const getOrderDetail = async (orderId) => {
+  const res = await userOrderDetail({ orderId });
   orderData.value = res.data;
   console.log(res);
-});
-
-// 返回上一页
-const goBack = () => {
-  uni.navigateBack({
-    delta: 1,
-  });
 };
 
+// 监听页面滚动事件
+const backgroundColor = ref("transparent");
+const backIconColor = ref("#fff");
+const title = ref("");
+const shadow = ref(false);
+onPageScroll(({ scrollTop }) => {
+  // 当滚动到顶部时，显示返回按钮
+  if (scrollTop <= 0) {
+    backgroundColor.value = "transparent";
+    backIconColor.value = "#fff";
+    title.value = "";
+    shadow.value = false;
+  } else {
+    backgroundColor.value = "#ffffff";
+    backIconColor.value = "#333333";
+    title.value = "订单详情";
+    shadow.value = true;
+  }
+});
+
 // 显示退款弹窗
 const showRefundPopup = () => {
   refundVisible.value = true;
@@ -79,8 +111,13 @@ const handleRefundConfirm = async ({ orderId }) => {
     });
   }
 };
+
+// 再次预定
+const handlePaySuccess = ({ orderId }) => {
+  getOrderDetail(orderId);
+};
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/detail.scss";
+@import "./styles/detail.scss";
 </style>

src/pages/goods/components/DateSelector/index.vue

@@ -63,5 +63,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/goods/components/DateSelector/styles/index.scss

@@ -16,15 +16,15 @@
   top: -12rpx;
   left: 24rpx;
   font-size: 20rpx;
-  color: #999999;
+  color: $uni-text-color-grey;
-  background: #ffffff;
+  background-color: $uni-bg-color;
   padding: 0 8rpx;
   z-index: 1;
 }
 
 .date-box {
   padding: 20rpx 24rpx;
-  background: #ffffff;
+  background-color: $uni-bg-color;
   border-radius: 16rpx;
   border: 2rpx solid #f0f0f0;
   display: flex;
@@ -41,7 +41,7 @@
 .date-text {
   font-size: 32rpx;
   font-weight: 500;
-  color: #333333;
+  color: $uni-text-color;
 }
 
 .day-text {

src/pages/goods/components/GoodConfirm/index.vue

@@ -369,5 +369,5 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/goods/components/GoodConfirm/styles/index.scss

@@ -15,7 +15,7 @@
   .header-title {
     font-size: 18px;
     font-weight: 600;
-    color: #333;
+    color: $uni-text-color;
     flex: 1;
     text-align: center;
   }
@@ -62,9 +62,9 @@
       justify-content: space-between;
 
       .goods-title {
-        font-size: 16px;
+        font-size: $uni-font-size-lg;
         font-weight: 500;
-        color: #333;
+        color: $uni-text-color;
         line-height: 22px;
         margin-bottom: 8px;
         display: -webkit-box;
@@ -79,7 +79,7 @@
         margin-bottom: 12px;
 
         .currency {
-          font-size: 14px;
+          font-size: $uni-font-size-base;
           color: #ff6b35;
           font-weight: 500;
         }
@@ -92,8 +92,8 @@
         }
 
         .price-desc {
-          font-size: 14px;
+          font-size: $uni-font-size-base;
-          color: #999;
+          color: $uni-text-color-grey;
           font-weight: 400;
           margin-left: 12px;
         }
@@ -107,9 +107,9 @@
       }
 
       .service-title {
-        font-size: 14px;
+        font-size: $uni-font-size-base;
         font-weight: 500;
-        color: #333;
+        color: $uni-text-color;
       }
 
       .goods-service-item {
@@ -120,16 +120,16 @@
 
         .service-label,
         .service-value {
-          font-size: 14px;
+          font-size: $uni-font-size-base;
           font-weight: 500;
         }
 
         .service-label {
-          color: #333;
+          color: $uni-text-color;
         }
 
         .service-value {
-          color: #999;
+          color: $uni-text-color-grey;
         }
       }
     }
@@ -166,8 +166,8 @@
   }
 
   .total-count {
-    font-size: 12px;
+    font-size: $uni-font-size-sm;
-    color: #333;
+    color: $uni-text-color;
   }
 
   .total-price {
@@ -178,7 +178,7 @@
 
     &::before {
       content: "¥";
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
     }
   }
 
@@ -189,7 +189,7 @@
     color: #fff;
     border: none;
     border-radius: 24px;
-    font-size: 16px;
+    font-size: $uni-font-size-lg;
     font-weight: 600;
     display: flex;
     align-items: center;

src/pages/goods/components/GoodInfo/index.vue

@@ -47,9 +47,8 @@ const facilitiesList = computed(() => {
 
   return [];
 });
-
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/goods/components/GoodInfo/styles/index.scss

@@ -8,8 +8,8 @@
     margin-bottom: 12px;
 
     .title {
-      font-size: 16px;
+      font-size: $uni-font-size-lg;
-      color: #333;
+      color: $uni-text-color;
       font-weight: 600;
       line-height: 1.4;
       flex: 0 280px;
@@ -54,8 +54,8 @@
         border-radius: 6px;
 
         .facility-text {
-          font-size: 12px;
+          font-size: $uni-font-size-sm;
-          color: #333;
+          color: $uni-text-color;
           line-height: 1;
           white-space: nowrap;
           overflow: hidden;

src/pages/goods/index.vue

@@ -70,6 +70,7 @@ import {
   commodityDailyPriceList,
   orderPay,
 } from "@/request/api/GoodsApi";
+import { ThrottleUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
 import GoodInfo from "./components/GoodInfo/index.vue";
@@ -122,6 +123,19 @@ const goodsInfo = async (params) => {
       commodityId: goodsData.value.commodityId,
     });
   }
+
+  if (goodsData.value.commodityStatus !== "1") {
+    uni.showModal({
+      title: "温馨提示",
+      content: "商品已下架，是否返回上一页？",
+      success: (res) => {
+        if (res.confirm) {
+          uni.navigateBack({ delta: 1 });
+        }
+      },
+    });
+    return;
+  }
 };
 
 const configGoodsData = () => {
@@ -164,7 +178,7 @@ const showConfirmPopup = () => {
 };
 
 // 处理确认订单
-const handleConfirmOrder = async (orderData) => {
+const handleConfirmOrder = ThrottleUtils.createThrottle(async (orderData) => {
   console.log("确认订单---1:", orderData);
   const { goodsData } = orderData;
   // 购买的商品id
@@ -260,7 +274,7 @@ const handleConfirmOrder = async (orderData) => {
       });
     },
   });
-};
+}, 1000);
 
 // 处理关闭弹窗
 const handleCloseConfirm = () => {
@@ -349,5 +363,5 @@ const handleDateSelect = (data) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/goods/styles/index.scss

@@ -1,7 +1,4 @@
-@use "sass:color";
-
 $button-color: #00a6ff;
-$button-hover-color: color.scale($button-color, $lightness: -16%);
 
 .goods-container {
   display: flex;
@@ -37,8 +34,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
         flex-shrink: 0;
 
         .module-title {
-          font-size: 14px;
+          font-size: $uni-font-size-base;
-          color: #333;
+          color: $uni-text-color;
           text-align: center;
           word-wrap: break-word;
           margin-left: 4px;
@@ -47,7 +44,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
 
       .module-desc {
         flex: 1;
-        font-size: 12px;
+        font-size: $uni-font-size-sm;
         color: #666;
         line-height: 1.5;
         margin-top: 4px;
@@ -94,8 +91,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
   }
 
   .label {
-    font-size: 14px;
+    font-size: $uni-font-size-base;
-    color: #333;
+    color: $uni-text-color;
   }
 
   .price {
@@ -106,7 +103,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
 
     &::before {
       content: "¥";
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
     }
   }
 
@@ -119,53 +116,14 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50px;
+    border-radius: $uni-border-radius-50px;
     height: 42px;
-    font-size: 14px;
+    font-size: $uni-font-size-base;
     font-weight: 500;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     letter-spacing: 0.5px;
     margin-left: auto;
-
-    // 按钮波纹效果
-    &::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      background: rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-      transition: width 0.6s, height 0.6s;
-    }
-
-    &:hover {
-      background: linear-gradient(
-        135deg,
-        $button-hover-color 0%,
-        color.scale($button-hover-color, $lightness: -11.9%) 100%
-      );
-      transform: translateY(-2px);
-      box-shadow: 0 4px 16px rgba($button-color, 0.4);
-
-      &::before {
-        width: 300px;
-        height: 300px;
-      }
-    }
-
-    &:active {
-      transform: translateY(-1px);
-      box-shadow: 0 2px 8px rgba($button-color, 0.3);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px rgba($button-color, 0.3);
-    }
   }
 }

src/pages/index/components/chat/ChatCardAi/index.vue

@@ -66,5 +66,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatCardMine/index.vue

@@ -16,5 +16,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatCardOther/index.vue

@@ -16,5 +16,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatCardOther/styles/index.scss

@@ -8,7 +8,7 @@
   overflow-x: hidden; // ✅ 防止横向撑开
 
   text {
-    font-size: 14px;
+    font-size: $uni-font-size-base;
-    color: #333333;
+    color: $uni-text-color;
   }
 }

src/pages/index/components/chat/ChatInputArea/index.vue

@@ -244,5 +244,5 @@ defineExpose({ focusInput });
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatInputArea/styles/index.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   border-radius: 22px;
-  background-color: #ffffff;
+  background-color: $uni-bg-color;
   box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
   margin: 0 12px;
   margin-bottom: 8px;
@@ -29,12 +29,12 @@
   .hold-to-talk-button {
     width: 100%;
     height: 44px;
-    color: #333333;
+    color: $uni-text-color;
-    font-size: 16px;
+    font-size: $uni-font-size-lg;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #ffffff;
+    background-color: $uni-bg-color;
     transition: all 0.2s ease;
     user-select: none;
     -webkit-user-select: none;
@@ -68,7 +68,7 @@
     width: 100%;
     max-height: 92px;
     min-height: 22px;
-    font-size: 16px;
+    font-size: $uni-font-size-lg;
     line-height: 22px;
     margin: 6px 0;
 

src/pages/index/components/chat/ChatMainList/index.vue

@@ -802,5 +802,5 @@ const resetConfig = () => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatMoreTips/index.vue

@@ -39,5 +39,5 @@ const sendReply = (text) => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

@@ -15,7 +15,7 @@
     border-radius: 8px;
     margin: 4px;
     box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    background-color: #ffffff;
+    background-color: $uni-bg-color;
     padding: 2px 12px;
     display: flex;
     flex-direction: column;
@@ -25,7 +25,7 @@
 
     .more-tips-item-title {
       font-weight: 500;
-      font-size: 12px;
+      font-size: $uni-font-size-sm;
       color: #00a6ff;
       line-height: 24px;
       text-align: center;

src/pages/index/components/chat/ChatQuickAccess/index.vue

@@ -96,5 +96,5 @@ const initData = () => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatQuickAccess/styles/index.scss

@@ -50,7 +50,7 @@
 
       text {
         font-weight: 500;
-        font-size: 12px;
+        font-size: $uni-font-size-sm;
         color: #201f32;
         line-height: 16px;
       }

src/pages/index/components/chat/ChatTopBgImg/index.vue

@@ -5,5 +5,5 @@
 <script></script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -33,5 +33,5 @@ const closeDrawer = (e) => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/chat/ChatTopWelcome/index.vue

@@ -49,5 +49,5 @@ const backgroundStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/drawer/DrawerHome/index.vue

@@ -50,5 +50,5 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/drawer/DrawerHome/styles/index.scss

@@ -15,7 +15,7 @@
   .title {
     font-size: 18px;
     text-align: center;
-    color: #333333;
+    color: $uni-text-color;
   }
 
   .close-icon {

src/pages/index/components/drawer/MineSetting/index.vue

@@ -115,5 +115,5 @@ const handleLogout = () => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/drawer/MineSetting/styles/index.scss

@@ -27,12 +27,12 @@
 .avatar-row .avatar {
   width: 80rpx;
   height: 80rpx;
-  border-radius: 50%;
+  border-radius: $uni-border-radius-circle;
 }
 
 .label {
   font-size: 28rpx;
-  color: #333;
+  color: $uni-text-color;
 }
 
 .value {
@@ -59,7 +59,7 @@
   height: 42px;
   margin-top: 40px;
   background-color: #fff;
-  color: #333;
+  color: $uni-text-color;
   border-radius: 8rpx;
   border: none;
 }

src/pages/index/components/loading/DotLoading.vue

@@ -18,7 +18,7 @@
     display: inline-block;
     width: 3px;
     height: 3px;
-    border-radius: 50%;
+    border-radius: $uni-border-radius-circle;
     margin-right: 3px;
     background: #333333;
     animation: wave 1.3s linear infinite;

src/pages/index/components/module/ActivityListComponent/index.vue

@@ -45,5 +45,5 @@ const handleClick = (item) => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/module/ActivityListComponent/styles/index.scss

@@ -27,8 +27,8 @@
       right: 12px;
       bottom: 12px;
       background-color: #ffeb00;
-      color: #333;
+      color: $uni-text-color;
-      font-size: 14px;
+      font-size: $uni-font-size-base;
       font-weight: 500;
       padding: 4px 12px;
       border-radius: 20px;

src/pages/index/components/module/AttachListComponent/index.vue

@@ -41,5 +41,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/module/AttachListComponent/styles/index.scss

@@ -5,7 +5,7 @@
 }
 
 .tag-item {
-  background-color: #ffffff;
+  background-color: $uni-bg-color;
   border-radius: 8px;
   padding: 4px 10px;
   margin-right: 8px;
@@ -17,5 +17,5 @@
 
 .tag-text {
   color: #00a6ff; /* 蓝色文字，可根据设计调整 */
-  font-size: 14px;
+  font-size: $uni-font-size-base;
 }

src/pages/index/components/module/DetailCardCompontent/index.vue

@@ -26,5 +26,5 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/module/DetailCardGoodsContentList/index.vue

@@ -69,5 +69,5 @@ const placeOrderHandle = (item) => {
 </script>
 
 <style lang="scss" scoped>
-@use "./styles/index.scss";
+@import "./styles/index.scss";
 </style>

src/pages/index/components/module/DetailCardGoodsContentList/styles/index.scss

@@ -15,7 +15,7 @@
       flex-direction: column;
       align-items: start;
       width: 188px;
-      background-color: #ffffff;
+      background-color: $uni-bg-color;
       border-radius: 10px;
       margin-right: 8px;
       padding-bottom: 12px;
@@ -26,7 +26,7 @@
         left: 8px;
         background: #ffe7b2;
         color: #b97a00;
-        font-size: 12px;
+        font-size: $uni-font-size-sm;
         padding: 2px 8px;
         border-radius: 4px;
         z-index: 2;
@@ -60,7 +60,7 @@
       }
 
       .card-title {
-        font-size: 16px;
+        font-size: $uni-font-size-lg;
         font-weight: bold;
         color: #222;
         width: 100%;
@@ -113,7 +113,7 @@
 
         .card-price {
           color: #ff6600;
-          font-size: 16px;
+          font-size: $uni-font-size-lg;
           font-weight: bold;
         }
         .card-unit {