feat: 优化订单详情滚动交互

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

@@ -134,48 +134,8 @@ $transition-normal: 0.3s ease;
     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;

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

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

src/pages-order/order/detail.vue

@@ -1,32 +1,45 @@
 <template>
-  <view class="order-detail-wrapper">
-    <uni-icons type="left" size="20" color="#fff" @click="goBack" />
+  <view class="order-detail-page">
+    <TopNavBar
+      titleAlign="center"
+      :backgroundColor="backgroundColor"
+      :backIconColor="backIconColor"
+      :shadow="shadow"
+      fixed
+    >
+      <template #title>
+        {{ title }}
+      </template>
+    </TopNavBar>
 
-    <OrderStatusInfo :orderData="orderData" />
-    <OrderQrcode
-      v-if="orderData.orderStatus === '2'"
-      size="132"
-      unit="px"
-      :val="orderData.orderId"
-    />
-    <GoodsInfo :orderData="orderData" />
-    <UserInfo :orderData="orderData" />
-    <NoticeInfo :orderData="orderData" />
-    <OrderInfo :orderData="orderData" @show-refund-popup="showRefundPopup" />
+    <view class="order-detail-wrapper">
+      <OrderStatusInfo :orderData="orderData" />
+      <OrderQrcode
+        v-if="orderData.orderStatus === '2'"
+        size="132"
+        unit="px"
+        :val="orderData.orderId"
+      />
+      <GoodsInfo :orderData="orderData" />
+      <UserInfo :orderData="orderData" />
+      <NoticeInfo :orderData="orderData" />
+      <OrderInfo :orderData="orderData" @show-refund-popup="showRefundPopup" />
 
-    <!-- 退款状态显示 -->
-    <RefundPopup
-      v-model="refundVisible"
-      :orderData="orderData"
-      @confirm="handleRefundConfirm"
-    />
+      <!-- 退款状态显示 -->
+      <RefundPopup
+        v-model="refundVisible"
+        :orderData="orderData"
+        @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";
@@ -45,12 +58,25 @@ onLoad(async ({ orderId }) => {
   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 = () => {