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

src/components/TopNavBar/index.vue

@@ -1,22 +1,27 @@
 <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' }">
       <!-- 左侧返回按钮 -->
       <view class="nav-bar-left" @click="handleBack" v-if="showBack">
         <uni-icons type="left" size="20" :color="backIconColor" />
       </view>
-      
+
       <!-- 中间标题区域 -->
       <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>
-      
+
       <!-- 右侧操作区域 -->
       <view class="nav-bar-right">
         <slot name="right"></slot>
@@ -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'
-    validator: (value) => ['center', 'left'].includes(value)
-  }
-})
+    default: "center", // 'center' | 'left'
+    validator: (value) => ["center", "left"].includes(value),
+  },
+});
 
 // 定义emits
-const emit = defineEmits(['back'])
+const emit = defineEmits(["back"]);
 
 // 系统信息
-const statusBarHeight = ref(0)
-const navBarHeight = ref(44) // 默认导航栏高度
+const statusBarHeight = ref(0);
+const navBarHeight = ref(44); // 默认导航栏高度
 
 // 获取系统信息
 onMounted(() => {
-  const systemInfo = uni.getSystemInfoSync()
-  statusBarHeight.value = systemInfo.statusBarHeight || 0
-  
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+
   // 根据平台设置导航栏高度
-  if (systemInfo.platform === 'ios') {
-    navBarHeight.value = 44
+  if (systemInfo.platform === "ios") {
+    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";
-</style>
+</style>

src/components/TopNavBar/styles/index.scss

@@ -2,7 +2,10 @@
 .top-nav-bar {
   width: 100%;
   background-color: #ffffff;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+
+  &.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;