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

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,106 +31,112 @@
 </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">

src/components/TopNavBar/styles/index.scss

@@ -2,7 +2,10 @@
 .top-nav-bar {
   width: 100%;
   background-color: #ffffff;
+
+  &.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;

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,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'"
@@ -21,12 +32,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";
@@ -45,12 +58,25 @@ onLoad(async ({ orderId }) => {
   console.log(res);
 });
 
-// 返回上一页
+// 监听页面滚动事件
-const goBack = () => {
+const backgroundColor = ref("transparent");
-  uni.navigateBack({
+const backIconColor = ref("#fff");
-    delta: 1,
+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 = () => {