feat: 订单详情布局功能调整

src/pages-order/order/detail.vue

@@ -1,14 +1,10 @@
 <template>
-  <view class="order-detail-page">
-    <TopNavBar
-      titleAlign="center"
-      :backgroundColor="backgroundColor"
-      :shadow="shadow"
-      title="订单详情"
-      fixed
-    />
+  <view class="order-detail-page flex flex-col h-screen">
+    <TopNavBar titleAlign="center" background="#D9EEFF" title="订单详情" />
 
-    <view class="order-detail-wrapper">
+    <view
+      class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
+    >
       <OrderStatusInfo :orderData="orderData" />
       <OrderQrcode
         v-if="orderData.orderStatus === '2'"
@@ -17,27 +13,30 @@
         :val="orderData.orderId"
       />
       <GoodsInfo :orderData="orderData" />
-      <UserInfo :orderData="orderData" />
-      <NoticeInfo :orderData="orderData" />
-      <OrderInfo
-        :orderData="orderData"
-        @show-refund-popup="showRefundPopup"
-        @pay-success="handlePaySuccess"
-      />
 
-      <!-- 退款状态显示 -->
-      <RefundPopup
-        v-model="refundVisible"
-        :orderData="orderData"
-        @confirm="handleRefundConfirm"
-      />
+      <UserInfo :orderData="orderData" />
+
+      <OrderInfo :orderData="orderData" />
     </view>
+
+    <FooterSection
+      :orderData="orderData"
+      @show-refund-popup="showRefundPopup"
+      @pay-success="handlePaySuccess"
+    />
   </view>
+
+  <!-- 退款状态显示 -->
+  <RefundPopup
+    v-model="refundVisible"
+    :orderData="orderData"
+    @confirm="handleRefundConfirm"
+  />
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { onLoad, onPageScroll } from "@dcloudio/uni-app";
+import { onLoad } 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";
@@ -46,6 +45,7 @@ import GoodsInfo from "./components/GoodsInfo/index.vue";
 import UserInfo from "./components/UserInfo/index.vue";
 import NoticeInfo from "./components/NoticeInfo/index.vue";
 import OrderInfo from "./components/OrderInfo/index.vue";
+import FooterSection from "./components/FooterSection/index.vue";
 import RefundPopup from "@/components/RefundPopup/index.vue";
 
 const refundVisible = ref(false);
@@ -60,22 +60,6 @@ const getOrderDetail = async (orderId) => {
   console.log(res);
 };
 
-// 监听页面滚动事件
-const backgroundColor = ref("transparent");
-
-const shadow = ref(false);
-onPageScroll(({ scrollTop }) => {
-  console.log("🚀 ~ scrollTop:", scrollTop);
-  // 当滚动到顶部时，显示返回按钮
-  if (scrollTop <= 0) {
-    backgroundColor.value = "transparent";
-    shadow.value = false;
-  } else {
-    backgroundColor.value = "#ffffff";
-    shadow.value = true;
-  }
-});
-
 // 显示退款弹窗
 const showRefundPopup = () => {
   refundVisible.value = true;