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

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 = () => {