feat: 新增订单列表交互

pages/order/components/TopNavBar/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <view class="top-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <view class="nav-content">
+      <view class="nav-left" @click="goBack">
+        <image
+          class="back-icon"
+          src="@/static/back.png"
+          mode="aspectFit"
+        ></image>
+      </view>
+      <view class="nav-center">
+        <slot name="title">
+          <text class="nav-title">{{ title }}</text>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  showBack: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// Emits
+const emit = defineEmits(["back"]);
+
+// 状态栏高度
+const statusBarHeight = ref(0);
+
+// 获取系统信息
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 44;
+});
+
+// 返回上一页
+const goBack = () => {
+  if (props.showBack) {
+    emit("back");
+    uni.navigateBack({
+      delta: 1,
+    });
+  }
+};
+</script>
+
+<style scoped>
+@import "./styles/index.scss";
+</style>

pages/order/components/TopNavBar/prompt.md

@@ -0,0 +1,114 @@
+## 顶部导航栏组件
+
+组件名称：顶部导航栏组件
+
+## 功能特性
+
+1. **自适应状态栏高度**：自动获取设备状态栏高度并适配
+2. **返回功能**：左侧返回按钮，支持自定义返回事件
+3. **标题显示**：支持传入标题文本或使用插槽自定义标题内容
+4. **右侧扩展**：支持右侧插槽，可添加自定义操作按钮
+5. **响应式设计**：适配不同屏幕尺寸
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<template>
+  <TopNavBar title="服务工单" />
+</template>
+
+<script setup>
+import TopNavBar from './components/TopNavBar/index.vue'
+</script>
+```
+
+### 自定义标题
+
+```vue
+<template>
+  <TopNavBar>
+    <template #title>
+      <text class="custom-title">自定义标题</text>
+    </template>
+  </TopNavBar>
+</template>
+```
+
+### 自定义右侧操作
+
+```vue
+<template>
+  <TopNavBar title="服务工单">
+    <template #right>
+      <image class="menu-icon" src="./images/menu.png" @click="showMenu" />
+    </template>
+  </TopNavBar>
+</template>
+```
+
+### 自定义返回事件
+
+```vue
+<template>
+  <TopNavBar title="服务工单" @back="handleBack" />
+</template>
+
+<script setup>
+const handleBack = () => {
+  // 自定义返回逻辑
+  console.log('自定义返回')
+}
+</script>
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | String | '' | 导航栏标题 |
+| showBack | Boolean | true | 是否显示返回按钮 |
+
+## Events
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| back | 点击返回按钮时触发 | - |
+
+## Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| title | 自定义标题内容 |
+| right | 自定义右侧操作区域 |
+
+## 样式定制
+
+组件支持通过CSS变量进行样式定制：
+
+```scss
+.top-nav-bar {
+  --nav-bg-color: #fff;           // 背景色
+  --nav-title-color: #333;        // 标题颜色
+  --nav-border-color: #f0f0f0;    // 边框颜色
+}
+```
+
+## 技术实现
+
+- 使用 uniapp + Vue3 组合式 API 开发
+- 自动获取系统状态栏高度进行适配
+- 使用 fixed 定位实现固定顶部效果
+- 支持插槽扩展，提供良好的可定制性
+- 响应式设计，适配不同设备屏幕
+
+## 兼容性
+
+- 微信小程序
+- H5
+- App
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/TopNavBar/styles/index.scss

@@ -0,0 +1,38 @@
+
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  box-sizing: border-box;
+  padding-top: 8px;
+
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+}
+
+.back-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.nav-center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+}
+
+