新页面和修改对应逻辑

pages.json

@@ -126,6 +126,20 @@
 	    "navigationStyle": "custom"
 	  }
 	},
+	{
+	  "path": "pages/mall/delivery/vehicle-add",
+	  "style": {
+	    "navigationBarTitleText": "添加车辆",
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mall/delivery/vehicle-edit",
+	  "style": {
+	    "navigationBarTitleText": "添加车辆",
+	    "navigationStyle": "custom"
+	  }
+	},
 	{
 	  "path": "pages/mall/delivery/settings",
 	  "style": {

pages/mall/delivery/delivery.md

@@ -0,0 +1,191 @@
+✅ 明白了！你不需要完整代码，而是希望我**用简洁的 Markdown 文档形式，解释这个 `delivery` 文件夹下的项目结构和每个页面的功能定位**。
+
+---
+
+# 🚚 配送端模块项目结构说明（`/pages/mall/delivery/`）
+
+> 本模块为配送员使用的移动端应用核心功能区，涵盖个人中心、任务管理、收入统计、车辆管理等核心功能。
+
+---
+
+## 📁 目录结构概览
+
+```
+delivery/
+├── index.uvue              # 配送端首页（工作台）
+├── profile.uvue            # 个人中心
+├── profile-edit.uvue       # 编辑个人信息
+├── settings.uvue           # 设置页面
+├── tasks.uvue              # 配送任务列表（按状态筛选）
+├── task-detail.uvue        # 单个任务详情页
+├── order-history.uvue      # 历史订单列表
+├── order-detail.uvue       # 订单详情页（从历史或当前跳转）
+├── earnings.uvue           # 收入明细
+├── ratings.uvue            # 评价记录
+├── vehicle.uvue            # 车辆管理主页
+├── vehicle-add.uvue        # 添加车辆
+├── vehicle-edit.uvue       # 编辑车辆信息
+└── index.uvue              # 首页（与上面重复？应统一命名）
+```
+
+> 💡 注：`index.uvue` 出现两次，建议保留一个作为首页入口，另一个可重命名为 `dashboard.uvue` 或 `home.uvue`
+
+---
+
+## 🧭 各页面功能说明
+
+### 1. `index.uvue` —— **配送端首页 / 工作台**
+- ✅ 核心入口页面
+- 📍 展示当前任务、今日数据、快捷操作入口
+- 🔄 可跳转到“个人中心”、“任务列表”、“收入明细”等
+
+---
+
+### 2. `profile.uvue` —— **个人中心**
+- 👤 显示配送员基本信息（头像、姓名、评分、总单数）
+- 📊 展示今日配送数据（完成单数、收入、里程、准时率）
+- 📈 收入统计图表（最近7天）
+- 🚗 功能菜单：收入明细、车辆管理、评价记录、帮助中心、意见反馈
+
+---
+
+### 3. `profile-edit.uvue` —— **编辑个人信息**
+- 🖋️ 修改头像、姓名、身份证号、驾驶证、车辆信息、服务区域等
+- 📱 界面包含表单输入 + 保存按钮
+- ⬅️ 左上角返回按钮（箭头+文字垂直排列）
+- 💾 数据本地模拟或调用API更新
+
+---
+
+### 4. `settings.uvue` —— **设置页面**
+- ⚙️ 通用设置项（如通知、隐私、退出登录等）
+- 🔐 安全相关设置（修改密码、绑定手机等）
+- 📲 通常由 `profile.uvue` 中的“⚙️”图标进入
+
+---
+
+### 5. `tasks.uvue` —— **配送任务列表**
+- 📋 按状态分类展示任务：
+  - 全部任务
+  - 待接单
+  - 配送中
+  - 已完成
+- 🚀 点击任一任务 → 跳转至 `task-detail.uvue`
+- 📈 页面顶部有“工作状态”切换开关（工作中/休息中）
+
+---
+
+### 6. `task-detail.uvue` —— **任务详情页**
+- 📍 显示取货地址、送达地址、距离、预计时间
+- 📞 “联系客户”按钮
+- 📝 查看任务详情（可选）
+- ✅ 适用于“当前任务”或“待接单”的操作场景
+
+---
+
+### 7. `order-history.uvue` —— **历史订单列表**
+- 📜 展示已完成、已接受、配送中的历史订单
+- 📌 包含订单号、状态、取送货地址、配送费、距离、时间
+- 🔍 点击“查看详情” → 跳转至 `order-detail.uvue`，并携带参数 `?from=history`
+- 📅 支持查看“已完成”的订单（仅显示“联系客服”按钮）
+
+---
+
+### 8. `order-detail.uvue` —— **订单详情页（多来源）**
+- 🔄 从 `tasks.uvue` 或 `order-history.uvue` 进入
+- 🎯 **关键逻辑**：
+  - 若来自历史订单（`from=history`）且状态为“已完成” → 只显示“联系客服”
+  - 若来自历史订单且状态为“进行中” → 显示“接受/拒绝/导航/完成”等操作按钮
+  - 若非历史来源 → 显示完整操作按钮
+- 📞 包含联系顾客、联系商家、联系客服三个联系方式
+
+---
+
+### 9. `earnings.uvue` —— **收入明细**
+- 💰 展示总收入、用户打赏、商家打赏、总订单数
+- 📊 按订单聚合的收入数据列表
+- 📈 图表展示最近7天收入趋势
+- ➕ 加载更多按钮
+
+---
+
+### 10. `ratings.uvue` —— **评价记录**
+- ⭐ 展示用户对配送员的评价
+- 📝 包含评分、评价内容、订单号、时间
+- 📊 统计平均分、好评率等
+
+---
+
+### 11. `vehicle.uvue` —— **车辆管理主页**
+- 🚗 列出当前绑定的所有车辆
+- ➕ “添加车辆”按钮
+- 🖋️ 点击车辆 → 跳转至 `vehicle-edit.uvue`
+- 🗑️ 支持删除、设为主用车等操作
+
+---
+
+### 12. `vehicle-add.uvue` —— **添加车辆**
+- 📝 表单填写：车牌号、车型、行驶证照片、车辆类型等
+- ✅ 提交后绑定到当前账户
+- ⬅️ 返回车辆管理页
+
+---
+
+### 13. `vehicle-edit.uvue` —— **编辑车辆信息**
+- 🖋️ 修改已有车辆信息（车牌、车型、照片等）
+- 📸 支持重新上传行驶证照片
+- ✅ 保存后更新车辆信息
+
+---
+
+## 🔄 页面跳转关系图（简化版）
+
+```
+index.uvue
+  │
+  ├──→ profile.uvue → profile-edit.uvue
+  │
+  ├──→ tasks.uvue → task-detail.uvue
+  │
+  ├──→ order-history.uvue → order-detail.uvue (from=history)
+  │
+  ├──→ earnings.uvue
+  │
+  ├──→ ratings.uvue
+  │
+  └──→ vehicle.uvue → vehicle-add.uvue / vehicle-edit.uvue
+```
+
+---
+
+## 🎯 设计原则
+
+- ✅ **一致性**：所有页面使用相同导航栏样式（左上角返回按钮 + 居中标题）
+- ✅ **响应式**：适配 H5、APP、小程序等平台
+- ✅ **状态驱动**：根据订单状态动态显示不同操作按钮
+- ✅ **用户体验优先**：历史订单跳转后只显示必要操作，避免冗余按钮
+
+---
+
+## 📌 建议优化点
+
+| 问题 | 建议 |
+|------|------|
+| `index.uvue` 重复 | 重命名为 `dashboard.uvue` 或 `home.uvue` |
+| 页面间参数传递 | 使用 `uni.navigateTo({ url: '?param=value' })` 并在 `onLoad` 中接收 |
+| UTS 语法兼容性 | 如遇问题，可临时改用标准 TS 语法调试 |
+
+---
+
+## ✅ 总结
+
+这个 `delivery` 模块是一个完整的配送员工作系统，涵盖了：
+
+- **个人管理**（资料、设置）
+- **任务处理**（接单、配送、完成）
+- **数据统计**（收入、评价、历史）
+- **车辆管理**
+
+结构清晰、功能完整，适合用于实际配送平台开发。
+
+--- 

pages/mall/delivery/earnings.uvue

@@ -5,7 +5,7 @@
       <!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
       <view class="nav-left" @click="goBackToHome">
         <text class="nav-icon">←</text>
-	  <text class="nav-title">返回主页</text>
+        <text class="nav-title">返回上一页</text>
       </view>
 
       <!-- 页面标题居中 -->
@@ -308,11 +308,9 @@ export default {
       }
     },
 
-    // 返回主页
+    // 返回到来源页面
     goBackToHome() {
-      uni.reLaunch({
+      uni.navigateBack()
-        url: '/pages/mall/delivery/index'
-      })
     }
   }
 }
@@ -336,7 +334,7 @@ type EarningType = {
 }
 </script>
 
-<style>
+<style scoped>
 /* 全局样式 */
 .earnings-container {
   background-color: #f5f5f5;

pages/mall/delivery/index.uvue

@@ -77,14 +77,16 @@
 				</view>
 				
 				<view class="task-actions">
+					<!-- 根据状态显示不同的操作按钮 -->
 					<button v-if="currentTask.status === 1" class="action-btn primary" @click="acceptTask">接受任务</button>
 					<button v-if="currentTask.status === 2" class="action-btn primary" @click="startPickup">开始取货</button>
 					<button v-if="currentTask.status === 3" class="action-btn primary" @click="confirmPickup">确认取货</button>
 					<button v-if="currentTask.status === 4" class="action-btn primary" @click="startDelivery">开始配送</button>
-					<button v-if="currentTask.status === 5" class="action-btn primary" @click="confirmDelivery">确认送达</button>
+					<button v-if="currentTask.status === 5" class="action-btn primary" @click="showConfirmDeliveryDialog">确认送达</button>
 					
 					<button class="action-btn secondary" @click="contactCustomer">联系客户</button>
 					<button class="action-btn secondary" @click="viewNavigation">查看导航</button>
+					<button class="action-btn secondary" @click="viewOrderDetail">查看详情</button>
 				</view>
 			</view>
 		</view>
@@ -279,7 +281,7 @@
 				this.currentTask = {
 					id: '1',
 					order_no: 'D202501081234',
-					status: 2,
+					status: 2, // 👈 设置为“已接取”，以便测试“开始取货”按钮
 					pickup_address: {
 						detail: '华强北商业区华强电子世界2楼A205',
 						area: '华强北'
@@ -471,10 +473,24 @@
 				})
 			},
 			
+			// 显示确认送达弹框
+			showConfirmDeliveryDialog() {
+				uni.showModal({
+					title: '确认送达',
+					content: '确认商品已送到顾客手中？',
+					success: (res) => {
+						if (res.confirm) {
+							this.confirmDelivery()
+						}
+					}
+				})
+			},
+			
+			// 确认送达
 			confirmDelivery() {
 			  // TODO: 调用API确认送达
 			  if (this.currentTask) {
-			    // 1. 假设将订单状态更新为“已完成” (假设5表示已完成)
+			    // 1. 将订单状态更新为“已完成” (假设5表示已完成)
 			    this.currentTask.status = 5;
 			    // 2. 将已完成的任务保存到本地存储，以便历史订单页面可以读取
 			    const completedOrder = {...this.currentTask}; // 创建副本，避免引用问题
@@ -504,6 +520,21 @@
 				})
 			},
 			
+			// 查看订单详情（跳转到 order-detail 页面）
+			viewOrderDetail(orderId?: string) {
+			  if (orderId) {
+			    // 跳转到附近订单的详情页
+			    uni.navigateTo({
+			      url: `/pages/mall/delivery/order-detail?id=${orderId}`
+			    })
+			  } else if (this.currentTask) {
+			    // 跳转到当前任务的详情页，并传递 status
+			    uni.navigateTo({
+			      url: `/pages/mall/delivery/order-detail?id=${this.currentTask.id}&status=${this.currentTask.status}`
+			    })
+			  }
+			},
+			
 			// 订单操作方法
 			acceptOrder(orderId: string) {
 				// TODO: 调用API接受订单
@@ -515,12 +546,6 @@
 				this.loadAvailableOrders()
 			},
 			
-			viewOrderDetail(orderId: string) {
-				uni.navigateTo({
-					url: `/pages/mall/delivery/order-detail?id=${orderId}`
-				})
-			},
-			
 			// 导航方法
 			goToOrderHistory() {
 				uni.navigateTo({
@@ -550,6 +575,7 @@
 </script>
 
 <style>
+/* ... 保持原有 style 部分不变 ... */
 .delivery-container {
   background-color: #f8f9fa;
   min-height: 100vh;

pages/mall/delivery/order-detail.uvue

@@ -1,17 +1,30 @@
 <!-- 配送端 - 订单详情页 -->
 <template>
   <view class="delivery-order-detail">
+    <!-- 返回按钮 -->
+    <view class="back-header">
+      <view class="back-box" @click="goBack">
+        <text class="back-icon">‹</text>
+        <text class="back-text">返回</text>
+      </view>
+    </view>
+
     <!-- 订单状态 -->
     <view class="order-status">
       <view class="status-progress">
+        <view class="progress-item" :class="{ active: order.status >= 2 }">
+          <view class="progress-dot"></view>
+          <text class="progress-text">已接单</text>
+        </view>
+        <view class="progress-line" :class="{ active: order.status >= 3 }"></view>
         <view class="progress-item" :class="{ active: order.status >= 3 }">
           <view class="progress-dot"></view>
-          <text class="progress-text">待接单</text>
+          <text class="progress-text">取货中</text>
         </view>
         <view class="progress-line" :class="{ active: order.status >= 4 }"></view>
         <view class="progress-item" :class="{ active: order.status >= 4 }">
           <view class="progress-dot"></view>
-          <text class="progress-text">配送中</text>
+          <text class="progress-text">已取货</text>
         </view>
         <view class="progress-line" :class="{ active: order.status >= 5 }"></view>
         <view class="progress-item" :class="{ active: order.status >= 5 }">
@@ -33,7 +46,8 @@
             <text class="route-address">{{ merchant.contact_name }} · {{ merchant.contact_phone }}</text>
             <text class="route-detail">{{ pickupAddress }}</text>
           </view>
-          <button v-if="order.status === 3" class="route-action" @click="confirmPickup">确认取货</button>
+          <!-- 只在取货中状态且订单未完成时显示按钮 -->
+          <button v-if="order.status === 3 && order.status < 5" class="route-action" @click="confirmPickup">确认取货</button>
         </view>
         
         <view class="route-line"></view>
@@ -45,7 +59,8 @@
             <text class="route-address">{{ getDeliveryAddress().name }} · {{ getDeliveryAddress().phone }}</text>
             <text class="route-detail">{{ getDeliveryAddress().detail }}</text>
           </view>
-          <button v-if="order.status === 4" class="route-action" @click="confirmDelivery">确认送达</button>
+          <!-- 只在已取货状态且订单未完成时显示按钮 -->
+          <button v-if="order.status === 4 && order.status < 5" class="route-action" @click="confirmDelivery">确认送达</button>
         </view>
       </view>
       
@@ -104,10 +119,16 @@
         <text class="note-label">商家备注：</text>
         <text class="note-content">{{ merchantNote || '无备注' }}</text>
       </view>
-      <view class="note-item">
+      <!-- 只在订单未完成时显示输入框 -->
+      <view v-if="order.status < 5" class="note-item">
         <text class="note-label">配送备注：</text>
         <input v-model="deliveryNote" class="note-input" placeholder="请输入配送备注" />
       </view>
+      <!-- 如果订单已完成，显示存储的备注 -->
+      <view v-else-if="deliveryNote" class="note-item">
+        <text class="note-label">配送备注：</text>
+        <text class="note-content">{{ deliveryNote }}</text>
+      </view>
     </view>
 
     <!-- 联系方式 -->
@@ -133,17 +154,21 @@
 
     <!-- 底部操作 -->
     <view class="bottom-actions">
-      <button v-if="order.status === 3" class="action-btn accept" @click="acceptOrder">接受订单</button>
+      <!-- 只在已接单状态且订单未完成时显示订单操作按钮 -->
-      <button v-if="order.status === 3" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
+      <button v-if="order.status === 2 && order.status < 5" class="action-btn accept" @click="acceptOrder">接受订单</button>
-      <button v-if="order.status === 4" class="action-btn navigate" @click="startNavigation">开始导航</button>
+      <button v-if="order.status === 2 && order.status < 5" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
-      <button v-if="order.status === 4" class="action-btn complete" @click="completeDelivery">完成配送</button>
+      <!-- 只在取货中状态且订单未完成时显示导航按钮 -->
+      <button v-if="order.status === 3 && order.status < 5" class="action-btn navigate" @click="startNavigation">开始导航</button>
+      <!-- 只在已取货状态且订单未完成时显示完成按钮 -->
+      <button v-if="order.status === 4 && order.status < 5" class="action-btn complete" @click="completeDelivery">完成配送</button>
+      <!-- 始终显示联系客服按钮 -->
       <button class="action-btn contact" @click="contactService">联系客服</button>
     </view>
   </view>
 </template>
 
-<script>
+<script lang="uts">
-import { OrderType, OrderItemType, MerchantType } from '@/types/mall-types.uts'
+import type { OrderType, OrderItemType, MerchantType } from '@/types/mall-types.uts'
 
 type DeliveryInfoType = {
   distance: number
@@ -161,7 +186,7 @@ export default {
         order_no: '',
         user_id: '',
         merchant_id: '',
-        status: 0,
+        status: 0, // 👈 从 URL 参数获取
         total_amount: 0,
         discount_amount: 0,
         delivery_fee: 0,
@@ -196,24 +221,36 @@ export default {
       pickupAddress: '',
       customerNote: '',
       merchantNote: '',
-      deliveryNote: ''
+      deliveryNote: '', // 配送备注
     }
   },
   onLoad(options: any) {
-    const orderId = options.orderId as string
+    const orderId = options.id as string
+    // 👇 从 URL 参数获取 status
+    const status = parseInt(options.status as string) || 0
+    
     if (orderId) {
+      // 将从 URL 获取的状态赋值给 order 对象
+      this.order.id = orderId
+      this.order.status = status // 👈 设置状态
       this.loadOrderDetail(orderId)
     }
   },
   methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
     loadOrderDetail(orderId: string) {
       // 模拟加载订单详情数据
+      // 注意：现在 status 的值在 onLoad 时已经从 URL 获取并设置，这里可以依据它来调整数据加载逻辑（如果需要）
+      // 为了演示，我们保持模拟数据不变，但实际应用中可以根据 status 加载不同的数据
       this.order = {
-        id: orderId,
+        ...this.order, // 保留从 URL 获取的 id 和 status
         order_no: 'ORD202401150001',
         user_id: 'user_001',
         merchant_id: 'merchant_001',
-        status: 3, // 3:待接单 4:配送中 5:已送达
         total_amount: 299.98,
         discount_amount: 30.00,
         delivery_fee: 8.00,
@@ -261,26 +298,30 @@ export default {
       this.pickupAddress = '北京市朝阳区商家街道123号'
       this.customerNote = '请送到门口，谢谢'
       this.merchantNote = '商品易碎，小心搬运'
+      this.deliveryNote = '已按时送达，顾客签收'
       
       this.deliveryInfo = {
         distance: 3.2,
         estimated_time: 25,
         courier_id: 'courier_001',
-        pickup_time: '',
+        pickup_time: '2024-01-15 15:00:00',
-        delivery_time: ''
+        delivery_time: '2024-01-15 15:25:00'
       }
     },
     
     getStatusDesc(): string {
-      const statusDescs = [
+      // 根据 order.status 动态返回描述
-        '',
+      if (this.order.status >= 5) {
-        '',
+        return '订单已送达完成'
-        '',
+      } else if (this.order.status === 4) {
-        '等待配送员接单',
+        return '已取货，正在前往送达'
-        '配送员正在前往取货',
+      } else if (this.order.status === 3) {
-        '订单已送达完成'
+        return '配送员正在前往取货'
-      ]
+      } else if (this.order.status === 2) {
-      return statusDescs[this.order.status] || ''
+        return '订单已接取'
+      } else {
+        return '订单状态未知'
+      }
     },
     
     getDeliveryAddress(): any {
@@ -293,11 +334,14 @@ export default {
     },
     
     confirmPickup() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         uni.showModal({
           title: '确认取货',
           content: '确认已从商家处取到商品？',
           success: (res) => {
             if (res.confirm) {
+              this.order.status = 4 // 更新状态为已取货
               this.deliveryInfo.pickup_time = new Date().toISOString()
               uni.showToast({
                 title: '取货确认成功',
@@ -306,15 +350,18 @@ export default {
             }
           }
         })
+      }
     },
     
     confirmDelivery() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         uni.showModal({
           title: '确认送达',
           content: '确认商品已送达到顾客手中？',
           success: (res) => {
             if (res.confirm) {
-            this.order.status = 5
+              this.order.status = 5 // 更新状态为已完成
               this.deliveryInfo.delivery_time = new Date().toISOString()
               uni.showToast({
                 title: '送达确认成功',
@@ -323,15 +370,18 @@ export default {
             }
           }
         })
+      }
     },
     
     acceptOrder() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         uni.showModal({
           title: '接受订单',
           content: '确定接受这个配送订单吗？',
           success: (res) => {
             if (res.confirm) {
-            this.order.status = 4
+              this.order.status = 3 // 更新状态为取货中
               uni.showToast({
                 title: '订单接受成功',
                 icon: 'success'
@@ -339,9 +389,12 @@ export default {
             }
           }
         })
+      }
     },
     
     rejectOrder() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         uni.showModal({
           title: '拒绝订单',
           content: '确定拒绝这个配送订单吗？',
@@ -355,25 +408,29 @@ export default {
             }
           }
         })
+      }
     },
     
     startNavigation() {
-      // 开启导航功能
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         uni.showToast({
           title: '正在启动导航',
           icon: 'loading'
         })
         
-      // 模拟调用地图导航
         setTimeout(() => {
           uni.showToast({
             title: '导航已启动',
             icon: 'success'
           })
         }, 1000)
+      }
     },
     
     completeDelivery() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
         if (!this.deliveryNote.trim()) {
           uni.showToast({
             title: '请填写配送备注',
@@ -383,6 +440,7 @@ export default {
         }
         
         this.confirmDelivery()
+      }
     },
     
     callCustomer() {
@@ -408,12 +466,52 @@ export default {
 </script>
 
 <style>
+/* ... 保持原有 style 部分不变 ... */
 .delivery-order-detail {
   background-color: #f5f5f5;
   min-height: 100vh;
   padding-bottom: 160rpx;
 }
 
+/* 返回按钮头部 */
+.back-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  position: relative;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+}
+
+.back-box {
+  position: absolute;
+  left: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 10rpx;
+  border-radius: 8rpx;
+  transition: background-color 0.2s ease;
+}
+
+.back-box:active {
+  background-color: #f0f0f0;
+}
+
+.back-icon {
+  font-size: 36rpx;
+  color: #333;
+  margin-right: 5rpx;
+}
+
+.back-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
 .order-status {
   background-color: #fff;
   padding: 40rpx 30rpx;

pages/mall/delivery/order-history.uvue

@@ -5,7 +5,6 @@
       <!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
       <view class="nav-left" @click="goBackToHome">
         <text class="nav-icon">←</text>
-        <text class="nav-title">返回主页</text>
       </view>
 
       <!-- 页面标题居中 -->
@@ -54,7 +53,7 @@
           </view>
 
           <view class="order-actions">
-            <button class="action-btn primary" @click="viewOrderDetail(order.id)">查看详情</button>
+            <button class="action-btn primary" @click="viewOrderDetail(order.id, order.status)">查看详情</button>
           </view>
         </view>
       </view>
@@ -107,6 +106,31 @@ export default {
     loadOrderHistory() {
       // TODO: 调用API获取历史订单列表
       this.orderList = [
+        {
+          id: '1',
+          order_no: 'D202501081234',
+          status: 4, // 已接取
+          pickup_address: {
+            detail: '深圳公司',
+            area: '购物公园'
+          },
+          delivery_address: {
+            detail: '梅州',
+            area: '海岸城'
+          },
+          pickup_contact: {
+            name: '商家联系人',
+            phone: '138****6567'
+          },
+          delivery_contact: {
+            name: '张先生',
+            phone: '139****9786'
+          },
+          delivery_fee: 12.0,
+          distance: 8.2,
+          estimated_time: 25,
+          created_at: '2025-01-08T15:00:00Z'
+        },
         {
           id: '2',
           order_no: 'D202501081235',
@@ -131,6 +155,31 @@ export default {
           distance: 8.2,
           estimated_time: 25,
           created_at: '2025-01-08T15:00:00Z'
+        },
+        {
+          id: '3',
+          order_no: 'D202501081236',
+          status: 2, // 取货中
+          pickup_address: {
+            detail: '罗湖区东门步行街',
+            area: '罗湖'
+          },
+          delivery_address: {
+            detail: '福田区市民中心',
+            area: '福田'
+          },
+          pickup_contact: {
+            name: '商家联系人',
+            phone: '138****5678'
+          },
+          delivery_contact: {
+            name: '李先生',
+            phone: '139****5678'
+          },
+          delivery_fee: 10.0,
+          distance: 5.0,
+          estimated_time: 15,
+          created_at: '2025-01-08T16:00:00Z'
         }
       ]
 
@@ -144,8 +193,8 @@ export default {
         case 1: return 'status-pending'
         case 2: return 'status-accepted'
         case 3: return 'status-picking'
-        case 4: return 'status-picked'
+        case 4: return 'status-picked' // 已取货
-        case 5: return 'status-delivering' // 这里我们用 '已完成' 的样式
+        case 5: return 'status-delivered' // 已送达
         default: return 'status-default'
       }
     },
@@ -163,9 +212,9 @@ export default {
     },
 
     // 查看订单详情
-    viewOrderDetail(orderId: string) {
+    viewOrderDetail(orderId: string, status: number) {
       uni.navigateTo({
-        url: `/pages/mall/delivery/order-detail?id=${orderId}`
+        url: `/pages/mall/delivery/order-detail?id=${orderId}&status=${status}`
       })
     },
 
@@ -303,7 +352,7 @@ export default {
   color: #388E3C;
 }
 
-.status-delivering {
+.status-delivered { 
   background-color: #E8F5E8;
   color: #388E3C;
 }

pages/mall/delivery/tasks.uvue

@@ -230,10 +230,10 @@ function viewTaskDetail(taskId: string) {
   })
 }
 
-// 返回主页
+// 返回上一页
 function goBackToHome() {
   uni.reLaunch({
-    url: '/pages/mall/delivery/index'
+    url: '/pages/mall/delivery/profile'
   })
 }
 </script>

pages/mall/delivery/vehicle-add.uvue

@@ -0,0 +1,320 @@
+<template>
+  <view class="add-vehicle-container">
+    <!-- 顶部导航栏 -->
+    <view class="header-bar">
+      <!-- 左侧：返回按钮 -->
+      <view class="nav-left" @click="goBack">
+        <text class="nav-icon">←</text>
+      </view>
+
+      <!-- 中部：页面标题 -->
+      <text class="page-title">添加新车辆</text>
+
+      <!-- 右侧：留空 -->
+      <view class="nav-right"></view>
+    </view>
+
+    <!-- 表单区域 -->
+    <scroll-view class="form-wrapper" scroll-y="true">
+      <!-- 车牌号 -->
+      <view class="form-item">
+        <text class="item-label">车牌号</text>
+        <input class="item-input" v-model="formData.plate_number" placeholder="请输入车牌号" />
+      </view>
+
+      <!-- 车辆类型 -->
+      <view class="form-item">
+        <text class="item-label">车辆类型</text>
+        <picker :value="vehicleTypeIndex" :range="vehicleTypes" @change="onVehicleTypeChange">
+          <view class="picker-view">{{ formData.vehicle_type ? vehicleTypes[vehicleTypeIndex] : '请选择车辆类型' }}</view>
+        </picker>
+      </view>
+
+      <!-- 车辆品牌 -->
+      <view class="form-item">
+        <text class="item-label">车辆品牌</text>
+        <input class="item-input" v-model="formData.brand" placeholder="请输入车辆品牌" />
+      </view>
+
+      <!-- 车辆颜色 -->
+      <view class="form-item">
+        <text class="item-label">车辆颜色</text>
+        <input class="item-input" v-model="formData.color" placeholder="请输入车辆颜色" />
+      </view>
+
+      <!-- 车辆照片 -->
+      <view class="form-item">
+        <text class="item-label">车辆照片</text>
+        <view class="avatar-upload" @click="chooseVehicleImage">
+          <image :src="formData.vehicle_image || '/static/default-vehicle.png'" class="avatar-image" />
+          <text class="upload-text">点击上传车辆照片</text>
+        </view>
+      </view>
+
+      <!-- 备注 -->
+      <view class="form-item">
+        <text class="item-label">备注</text>
+        <textarea class="item-textarea" v-model="formData.remark" placeholder="请输入备注信息" />
+      </view>
+    </scroll-view>
+
+    <!-- 底部操作按钮 -->
+    <view class="bottom-actions">
+      <button class="action-btn cancel" @click="cancel">取消</button>
+      <button class="action-btn save" @click="saveVehicle">保存</button>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      // 表单数据
+      formData: {
+        plate_number: '',
+        vehicle_type: 0,
+        brand: '',
+        color: '',
+        vehicle_image: '',
+        remark: ''
+      },
+      // 车辆类型选项
+      vehicleTypes: ['电动车', '摩托车', '面包车', '小型货车'],
+      vehicleTypeIndex: 0
+    }
+  },
+
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
+    // 选择车辆类型
+    onVehicleTypeChange(e: UniEvent<HTMLInputElement>) {
+      const index = parseInt(e.detail.value)
+      this.vehicleTypeIndex = index
+      this.formData.vehicle_type = index + 1 // 假设后端从1开始
+    },
+
+    // 选择车辆照片
+    chooseVehicleImage() {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.formData.vehicle_image = res.tempFilePaths[0]
+        }
+      })
+    },
+
+    // 取消
+    cancel() {
+      uni.navigateBack()
+    },
+
+    // 保存
+    saveVehicle() {
+      // 验证输入
+      if (!this.formData.plate_number.trim()) {
+        uni.showToast({
+          title: '请输入车牌号',
+          icon: 'none'
+        })
+        return
+      }
+
+      // 模拟生成新车辆数据
+      const newVehicle = {
+        id: 'vehicle_' + Date.now(), // 使用时间戳生成唯一ID
+        plate_number: this.formData.plate_number,
+        vehicle_type: this.formData.vehicle_type,
+        vehicle_type_name: this.vehicleTypes[this.vehicleTypeIndex],
+        status: 1, // 默认状态为正常
+        driver_id: 'driver001', // 假设固定司机ID
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+        brand: this.formData.brand,
+        color: this.formData.color,
+        image: this.formData.vehicle_image,
+        remark: this.formData.remark
+      }
+
+      // 将新车辆数据保存到本地存储，以便上一页可以获取
+      uni.setStorageSync('new_vehicle_for_list', newVehicle)
+
+      // 模拟保存过程
+      uni.showLoading({
+        title: '保存中...'
+      })
+
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+        // 保存成功后返回上一页
+        uni.navigateBack()
+      }, 1000)
+
+      // 实际项目中应调用 API 保存数据
+      console.log('保存的车辆数据:', newVehicle)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.add-vehicle-container {
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.header-bar {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 10rpx;
+  border-radius: 8rpx;
+  transition: background-color 0.2s ease;
+}
+
+.nav-left:hover {
+  background-color: #f0f0f0;
+}
+
+.nav-left:active {
+  background-color: #e0e0e0;
+}
+
+.nav-icon {
+  font-size: 36rpx;
+  color: #333;
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  flex: 1; /* 让标题占据中间剩余空间 */
+}
+
+.nav-right {
+  width: 60rpx; /* 与左侧箭头区域宽度一致 */
+  height: 1rpx;
+}
+
+.form-wrapper {
+  flex: 1;
+  padding: 20rpx 0;
+}
+
+.form-item {
+  background-color: #fff;
+  margin: 20rpx;
+  padding: 20rpx 30rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 10rpx;
+}
+
+.item-input {
+  width: 100%;
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 0;
+  border: none;
+  outline: none;
+  text-align: right;
+}
+
+.picker-view {
+  font-size: 28rpx;
+  color: #333;
+  text-align: right;
+  padding: 10rpx 0;
+}
+
+.avatar-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.avatar-image {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  border: 4rpx solid #ddd;
+  margin-bottom: 10rpx;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.item-textarea {
+  width: 100%;
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 0;
+  border: none;
+  outline: none;
+  text-align: right;
+  height: 100rpx;
+  resize: none;
+}
+
+.bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 25rpx 30rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  gap: 15rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 35rpx;
+  font-size: 26rpx;
+  border: none;
+}
+
+.cancel {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.save {
+  background-color: #4CAF50;
+  color: #fff;
+}
+</style>

pages/mall/delivery/vehicle-edit.uvue

@@ -0,0 +1,379 @@
+<template>
+  <view class="edit-vehicle-container">
+    <!-- 顶部导航栏 -->
+    <view class="header-bar">
+      <!-- 左侧：返回按钮 -->
+      <view class="nav-left" @click="goBack">
+        <text class="nav-icon">←</text>
+      </view>
+
+      <!-- 中部：页面标题 -->
+      <text class="page-title">编辑车辆</text>
+
+      <!-- 右侧：留空 -->
+      <view class="nav-right"></view>
+    </view>
+
+    <!-- 编辑表单区 -->
+    <scroll-view class="form-wrapper" scroll-y="true">
+      <!-- 车牌号 -->
+      <view class="form-item">
+        <text class="item-label">车牌号</text>
+        <input class="item-input" v-model="formData.plate_number" placeholder="请输入车牌号" />
+      </view>
+
+      <!-- 车辆类型 -->
+      <view class="form-item">
+        <text class="item-label">车辆类型</text>
+        <picker :value="vehicleTypeIndex" :range="vehicleTypes" @change="onVehicleTypeChange">
+          <view class="picker-view">{{ formData.vehicle_type ? vehicleTypes[vehicleTypeIndex] : '请选择车辆类型' }}</view>
+        </picker>
+      </view>
+
+      <!-- 车辆品牌 -->
+      <view class="form-item">
+        <text class="item-label">车辆品牌</text>
+        <input class="item-input" v-model="formData.brand" placeholder="请输入车辆品牌" />
+      </view>
+
+      <!-- 车辆颜色 -->
+      <view class="form-item">
+        <text class="item-label">车辆颜色</text>
+        <input class="item-input" v-model="formData.color" placeholder="请输入车辆颜色" />
+      </view>
+
+      <!-- 车辆照片 -->
+      <view class="form-item">
+        <text class="item-label">车辆照片</text>
+        <view class="avatar-upload" @click="chooseVehicleImage">
+          <image :src="formData.vehicle_image || '/static/default-vehicle.png'" class="avatar-image" />
+          <text class="upload-text">点击上传车辆照片</text>
+        </view>
+      </view>
+
+      <!-- 备注 -->
+      <view class="form-item">
+        <text class="item-label">备注</text>
+        <textarea class="item-textarea" v-model="formData.remark" placeholder="请输入备注信息" />
+      </view>
+    </scroll-view>
+
+    <!-- 底部操作按钮 -->
+    <view class="bottom-actions">
+      <button class="action-btn cancel" @click="cancel">取消</button>
+      <button class="action-btn save" @click="saveVehicle">保存</button>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      // 当前车辆ID
+      vehicleId: '',
+      // 表单数据
+      formData: {
+        plate_number: '',
+        vehicle_type: 0,
+        brand: '',
+        color: '',
+        vehicle_image: '',
+        remark: ''
+      },
+      // 车辆类型选项
+      vehicleTypes: ['电动车', '摩托车', '面包车', '小型货车'],
+      vehicleTypeIndex: 0
+    }
+  },
+
+  onLoad(options: any) {
+    this.vehicleId = options.id as string
+    if (this.vehicleId) {
+      this.loadVehicleData()
+    }
+  },
+
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
+    // 加载车辆数据
+    loadVehicleData() {
+      // 模拟从API获取数据
+      // 实际项目中应调用API
+      const mockVehicles = [
+        {
+          id: '1',
+          plate_number: '京A12345',
+          vehicle_type: 1,
+          vehicle_type_name: '电动车',
+          status: 1, // 1: 正常, 2: 维修中, 3: 停用
+          driver_id: 'driver001',
+          created_at: '2024-01-01',
+          updated_at: '2024-12-01',
+          brand: '雅迪',
+          color: '蓝色',
+          image: '/static/vehicle1.jpg',
+          remark: '日常使用'
+        },
+        {
+          id: '2',
+          plate_number: '沪B67890',
+          vehicle_type: 2,
+          vehicle_type_name: '摩托车',
+          status: 2, // 维修中
+          driver_id: 'driver001',
+          created_at: '2024-01-02',
+          updated_at: '2024-12-02',
+          brand: '本田',
+          color: '黑色',
+          image: '/static/vehicle2.jpg',
+          remark: '维修中'
+        }
+      ]
+
+      const found = mockVehicles.find(v => v.id === this.vehicleId)
+      if (found) {
+        this.formData = {
+          plate_number: found.plate_number,
+          vehicle_type: found.vehicle_type,
+          brand: found.brand,
+          color: found.color,
+          vehicle_image: found.image,
+          remark: found.remark
+        }
+        // 设置车辆类型索引
+        this.vehicleTypeIndex = this.vehicleTypes.indexOf(found.vehicle_type_name)
+      }
+    },
+
+    // 选择车辆类型
+    onVehicleTypeChange(e: UniEvent<HTMLInputElement>) {
+      const index = parseInt(e.detail.value)
+      this.vehicleTypeIndex = index
+      this.formData.vehicle_type = index + 1 // 假设后端从1开始
+    },
+
+    // 选择车辆照片
+    chooseVehicleImage() {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.formData.vehicle_image = res.tempFilePaths[0]
+        }
+      })
+    },
+
+    // 取消
+    cancel() {
+      uni.navigateBack()
+    },
+
+    // 保存
+    saveVehicle() {
+      // 验证输入
+      if (!this.formData.plate_number.trim()) {
+        uni.showToast({
+          title: '请输入车牌号',
+          icon: 'none'
+        })
+        return
+      }
+
+      // 模拟更新车辆数据
+      const updatedVehicle = {
+        id: this.vehicleId,
+        plate_number: this.formData.plate_number,
+        vehicle_type: this.formData.vehicle_type,
+        vehicle_type_name: this.vehicleTypes[this.vehicleTypeIndex],
+        brand: this.formData.brand,
+        color: this.formData.color,
+        image: this.formData.vehicle_image,
+        remark: this.formData.remark,
+        updated_at: new Date().toISOString()
+      }
+
+      // 将更新后的车辆数据保存到本地存储，以便上一页可以获取
+      uni.setStorageSync('updated_vehicle_for_list', updatedVehicle)
+
+      // 模拟保存过程
+      uni.showLoading({
+        title: '保存中...'
+      })
+
+      setTimeout(() => {
+        uni.hideLoading()
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+        // 保存成功后返回上一页
+        uni.navigateBack()
+      }, 1000)
+
+      // 实际项目中应调用 API 保存数据
+      console.log('更新的车辆数据:', updatedVehicle)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-vehicle-container {
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.header-bar {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 10rpx;
+  border-radius: 8rpx;
+  transition: background-color 0.2s ease;
+}
+
+.nav-left:hover {
+  background-color: #f0f0f0;
+}
+
+.nav-left:active {
+  background-color: #e0e0e0;
+}
+
+.nav-icon {
+  font-size: 36rpx;
+  color: #333;
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  flex: 1; /* 让标题占据中间剩余空间 */
+}
+
+.nav-right {
+  width: 60rpx; /* 与左侧箭头区域宽度一致 */
+  height: 1rpx;
+}
+
+.form-wrapper {
+  flex: 1;
+  padding: 20rpx 0;
+}
+
+.form-item {
+  background-color: #fff;
+  margin: 20rpx;
+  padding: 20rpx 30rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 10rpx;
+}
+
+.item-input {
+  width: 100%;
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 0;
+  border: none;
+  outline: none;
+  text-align: right;
+}
+
+.picker-view {
+  font-size: 28rpx;
+  color: #333;
+  text-align: right;
+  padding: 10rpx 0;
+}
+
+.avatar-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.avatar-image {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  border: 4rpx solid #ddd;
+  margin-bottom: 10rpx;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.item-textarea {
+  width: 100%;
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 0;
+  border: none;
+  outline: none;
+  text-align: right;
+  height: 100rpx;
+  resize: none;
+}
+
+.bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 25rpx 30rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  gap: 15rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 35rpx;
+  font-size: 26rpx;
+  border: none;
+  font-weight: 500;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+}
+
+.cancel {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.save {
+  background-color: #4CAF50;
+  color: #fff;
+}
+</style>

pages/mall/delivery/vehicle.uvue

@@ -3,6 +3,11 @@
   <view class="vehicle-container">
     <!-- 头部标题 -->
     <view class="page-header">
+      <!-- 返回按钮：左上角垂直居中 -->
+      <view class="back-box" @click="goBack">
+        <text class="back-icon">‹</text>
+        <text class="back-text">返回</text>
+      </view>
       <text class="page-title">车辆管理</text>
     </view>
 
@@ -55,10 +60,31 @@ export default {
     this.loadVehicles()
   },
 
+  onShow() {
+    // 页面每次显示时都检查是否有新添加的车辆
+    this.loadVehicles()
+  },
+
   methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
     // 加载车辆信息
     loadVehicles() {
-      // TODO: 调用API获取车辆列表
+      // 1. 从本地存储获取新添加的车辆（如果存在）
+      const newVehicleFromStorage = uni.getStorageSync('new_vehicle_for_list')
+      if (newVehicleFromStorage) {
+        // 2. 清除本地存储，防止重复添加
+        uni.removeStorageSync('new_vehicle_for_list')
+        // 3. 将新车辆添加到列表开头
+        this.vehicleList.unshift(newVehicleFromStorage)
+        return // 如果有新数据，直接使用，不加载旧的模拟数据
+      }
+
+      // 4. 如果没有新数据，才加载旧的模拟数据（实际项目中应从API获取）
+      if (this.vehicleList.length === 0) { // 避免重复加载模拟数据
         this.vehicleList = [
           {
             id: '1',
@@ -91,6 +117,7 @@ export default {
             updated_at: '2024-12-03'
           }
         ]
+      }
     },
 
     // 获取车辆状态文本
@@ -147,6 +174,10 @@ type VehicleType = {
   driver_id: string
   created_at: string
   updated_at: string
+  brand?: string
+  color?: string
+  image?: string
+  remark?: string
 }
 </script>
 
@@ -162,6 +193,40 @@ type VehicleType = {
   padding: 20rpx 30rpx;
   border-bottom: 1rpx solid #e9ecef;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-box {
+  position: absolute;
+  left: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 10rpx;
+  border-radius: 8rpx;
+  transition: background-color 0.2s ease;
+}
+
+.back-box:active {
+  background-color: #f0f0f0;
+}
+
+.back-icon {
+  font-size: 36rpx;
+  color: #333;
+  margin-right: 5rpx;
+}
+
+.back-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
 }
 
 .page-title {