From b1c845d571511c18f81818fce0da391faa0b5315 Mon Sep 17 00:00:00 2001
From: not-like-juvenile <16056107+not-like-juvenile@user.noreply.gitee.com>
Date: Fri, 23 Jan 2026 17:13:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                             |  35 ++
 pages/mall/delivery/index.uvue         |  37 +-
 pages/mall/delivery/order-history.uvue | 637 ++++++++++---------------
 pages/mall/delivery/profile-edit.uvue  | 439 +++++++++++++++++
 pages/mall/delivery/profile.uvue       | 250 ++++------
 pages/mall/delivery/ratings.uvue       | 202 ++++++++
 pages/mall/delivery/task-detail.uvue   | 480 +++++++++++++++++++
 pages/mall/delivery/tasks.uvue         | 433 +++++++++++++++++
 pages/mall/delivery/vehicle.uvue       | 273 +++++++++++
 9 files changed, 2229 insertions(+), 557 deletions(-)
 create mode 100644 pages/mall/delivery/profile-edit.uvue
 create mode 100644 pages/mall/delivery/ratings.uvue
 create mode 100644 pages/mall/delivery/task-detail.uvue
 create mode 100644 pages/mall/delivery/tasks.uvue
 create mode 100644 pages/mall/delivery/vehicle.uvue

diff --git a/pages.json b/pages.json
index 605e1945..97b986cd 100644
--- a/pages.json
+++ b/pages.json
@@ -91,6 +91,41 @@
 	    "navigationStyle": "custom"
 	  }
 	},
+	{
+	  "path": "pages/mall/delivery/tasks",
+	  "style": {
+	    "navigationBarTitleText": "全部任务",
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mall/delivery/task-detail",
+	  "style": {
+	    "navigationBarTitleText": "任务详情",
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mall/delivery/profile-edit",
+	  "style": {
+	    "navigationBarTitleText": "编辑个人资料",
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mall/delivery/ratings",
+	  "style": {
+	    "navigationBarTitleText": "评价",
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mall/delivery/vehicle",
+	  "style": {
+	    "navigationBarTitleText": "车辆管理",
+	    "navigationStyle": "custom"
+	  }
+	},
 	{
 	  "path": "pages/mall/delivery/settings",
 	  "style": {
diff --git a/pages/mall/delivery/index.uvue b/pages/mall/delivery/index.uvue
index 1883070e..e3de0549 100644
--- a/pages/mall/delivery/index.uvue
+++ b/pages/mall/delivery/index.uvue
@@ -208,7 +208,7 @@
 	export default {
 		data() {
 			return {
-				isOnline: false,
+				isOnline: true,
 				
 				driverInfo: {
 					id: '',
@@ -429,6 +429,9 @@
 			// 任务操作方法
 			acceptTask() {
 				// TODO: 调用API接受任务
+				if (this.currentTask) {
+					this.currentTask.status = 2 // 更新状态为“已接取”
+				}
 				uni.showToast({
 					title: '任务已接受',
 					icon: 'success'
@@ -437,6 +440,9 @@
 			
 			startPickup() {
 				// TODO: 调用API开始取货
+				if (this.currentTask) {
+					this.currentTask.status = 3 // 更新状态为“取货中”
+				}
 				uni.showToast({
 					title: '开始取货',
 					icon: 'success'
@@ -445,6 +451,9 @@
 			
 			confirmPickup() {
 				// TODO: 调用API确认取货
+				if (this.currentTask) {
+					this.currentTask.status = 4 // 更新状态为“已取货”
+				}
 				uni.showToast({
 					title: '取货完成',
 					icon: 'success'
@@ -453,6 +462,9 @@
 			
 			startDelivery() {
 				// TODO: 调用API开始配送
+				if (this.currentTask) {
+					this.currentTask.status = 5 // 更新状态为“配送中”
+				}
 				uni.showToast({
 					title: '开始配送',
 					icon: 'success'
@@ -460,13 +472,20 @@
 			},
 			
 			confirmDelivery() {
-				// TODO: 调用API确认送达
-				uni.showToast({
-					title: '配送完成',
-					icon: 'success'
-				})
-				this.currentTask = null
-				this.loadAvailableOrders()
+			  // TODO: 调用API确认送达
+			  if (this.currentTask) {
+			    // 1. 假设将订单状态更新为“已完成” (假设5表示已完成)
+			    this.currentTask.status = 5;
+			    // 2. 将已完成的任务保存到本地存储，以便历史订单页面可以读取
+			    const completedOrder = {...this.currentTask}; // 创建副本，避免引用问题
+			    uni.setStorageSync('completed_order_for_history', completedOrder);
+			  }
+			  uni.showToast({
+			    title: '配送完成',
+			    icon: 'success'
+			  })
+			  this.currentTask = null
+			  this.loadAvailableOrders()
 			},
 			
 			contactCustomer() {
@@ -1008,4 +1027,4 @@
   text-align: center;
   font-weight: 500;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/order-history.uvue b/pages/mall/delivery/order-history.uvue
index b7740adb..f069b122 100644
--- a/pages/mall/delivery/order-history.uvue
+++ b/pages/mall/delivery/order-history.uvue
@@ -1,311 +1,172 @@
 <template>
-  <view class="earnings-container">
+  <view class="order-history-container">
     <!-- 顶部导航栏 -->
     <view class="page-header">
       <!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
-	  <view class="nav-left" @click="goBackToHome">
-	    <text class="nav-icon">←</text>
-	  <text class="nav-title">返回主页</text>
-	  </view>
+      <view class="nav-left" @click="goBackToHome">
+        <text class="nav-icon">←</text>
+        <text class="nav-title">返回主页</text>
+      </view>
 
       <!-- 页面标题居中 -->
-      <text class="page-title">收入明细</text>
+      <text class="page-title">历史订单</text>
 
       <!-- 右上角留空 -->
       <view class="nav-right"></view>
     </view>
-  
-    <!-- 顶部统计卡片 -->
-    <view class="stats-section">
-      <view class="stat-card">
-        <text class="stat-value">¥{{ totalEarnings }}</text>
-        <text class="stat-label">总收入</text>
-      </view>
-      <view class="stat-card">
-        <text class="stat-value">¥{{ totalUserTips }}</text>
-        <text class="stat-label">用户打赏</text>
-      </view>
-      <view class="stat-card">
-        <text class="stat-value">¥{{ totalMerchantTips }}</text>
-        <text class="stat-label">商家打赏</text>
-      </view>
-      <view class="stat-card">
-        <text class="stat-value">{{ totalOrders }}</text>
-        <text class="stat-label">总订单数</text>
-      </view>
-    </view>
-  
+
     <!-- 主要内容区域 -->
     <view class="content-wrapper">
-      <!-- 订单收入列表 -->
-      <view v-if="orderEarningsList.length > 0" class="order-earnings-list">
-        <view v-for="order in orderEarningsList" :key="order.order_no" class="order-earnings-item">
-          <!-- 订单总收入 -->
-          <view class="order-total">
-            <text class="order-total-label">订单收入：</text>
-            <text class="order-total-amount">¥{{ order.totalAmount.toFixed(2) }}</text>
+      <!-- 订单列表 -->
+      <view v-if="orderList.length > 0" class="order-list">
+        <view v-for="order in orderList" :key="order.id" class="order-item">
+          <view class="order-header">
+            <text class="order-id">订单号: {{ order.order_no }}</text>
+            <text class="order-status" :class="getOrderStatusClass(order.status)">{{ getOrderStatusText(order.status) }}</text>
           </view>
-  
-          <!-- 订单基础信息 -->
-          <view class="order-info">
-            <text class="info-item">订单号: {{ order.order_no }}</text>
-            <text class="info-item">时间: {{ formatTime(order.date) }}</text>
-            <text class="info-item" v-if="order.distance !== undefined">距离: {{ order.distance }}km</text>
-          </view>
-  
-          <!-- 收入明细 -->
-          <view class="earning-details">
-            <view v-for="detail in order.details" :key="detail.id" class="detail-item">
-              <text class="detail-type">{{ getSourceText(detail.source) }}</text>
-              <text class="detail-amount">+¥{{ detail.amount.toFixed(2) }}</text>
+
+          <view class="order-addresses">
+            <view class="address-item">
+              <text class="address-icon">📍</text>
+              <view class="address-info">
+                <text class="address-label">取货地址</text>
+                <text class="address-text">{{ order.pickup_address.detail }}</text>
+                <text class="contact-info">联系人: {{ order.pickup_contact.name }} {{ order.pickup_contact.phone }}</text>
+              </view>
             </view>
+
+            <view class="address-line"></view>
+
+            <view class="address-item">
+              <text class="address-icon">🏠</text>
+              <view class="address-info">
+                <text class="address-label">收货地址</text>
+                <text class="address-text">{{ order.delivery_address.detail }}</text>
+                <text class="contact-info">联系人: {{ order.delivery_contact.name }} {{ order.delivery_contact.phone }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="order-details">
+            <text class="order-info">配送费: ¥{{ order.delivery_fee }}</text>
+            <text class="order-info">预计距离: {{ order.distance }}km</text>
+            <text class="order-info">预计时间: {{ order.estimated_time }}分钟</text>
+          </view>
+
+          <view class="order-actions">
+            <button class="action-btn primary" @click="viewOrderDetail(order.id)">查看详情</button>
           </view>
         </view>
       </view>
-  
+
       <!-- 无数据时显示 -->
       <view v-else class="no-data">
-        <text class="no-data-text">暂无收入记录</text>
-      </view>
-  
-      <!-- 加载更多按钮 -->
-      <view v-if="hasMore" class="load-more">
-        <button @click="loadMoreEarnings" class="load-more-btn">加载更多</button>
+        <text class="no-data-text">暂无历史订单</text>
       </view>
     </view>
   </view>
 </template>
 
 <script lang="uts">
+import type { DeliveryTaskType } from '@/types/mall-types.uts'
+
 export default {
   data() {
     return {
-      // 统计数据
-      totalEarnings: '266.10',
-      totalUserTips: '12.00',
-      totalMerchantTips: '8.50',
-      totalOrders: 8,
-
-      // 按订单聚合后的收入数据
-      orderEarningsList: [] as Array<OrderEarningType>,
-      allOrderEarnings: [] as Array<OrderEarningType>,
-      pageSize: 10,
-      currentPage: 1,
+      // 模拟历史订单数据
+      orderList: [] as Array<DeliveryTaskType>
     }
   },
 
   onLoad() {
-    this.loadAllEarnings()
+    this.loadOrderHistory()
   },
 
-  computed: {
-    hasMore(): boolean {
-      return this.allOrderEarnings.length > this.orderEarningsList.length
-    }
+  onShow() {
+    // 页面每次显示时都检查是否有新的已完成订单
+    this.checkForNewCompletedOrder()
   },
 
   methods: {
-    // 加载所有收入明细并按订单聚合
-    loadAllEarnings() {
-      const rawEarnings = [
-        // 配送费
-        {
-          id: '1',
-          date: '2025-01-08T14:30:00Z',
-          amount: 8.5,
-          source: 'delivery_fee',
-          order_no: 'D202501081234',
-          distance: 12.5
-        },
+    // 检查是否有新的已完成订单
+    checkForNewCompletedOrder() {
+      const completedOrderFromStorage = uni.getStorageSync('completed_order_for_history')
+      if (completedOrderFromStorage) {
+        // 如果有，将其添加到订单列表的开头
+        // 检查是否已经存在于列表中，避免重复添加
+        const exists = this.orderList.some(order => order.id === completedOrderFromStorage.id)
+        if (!exists) {
+          this.orderList.unshift(completedOrderFromStorage)
+        }
+        // 清除本地存储，防止下次进入页面时重复添加
+        uni.removeStorageSync('completed_order_for_history')
+      }
+    },
+
+    // 加载历史订单
+    loadOrderHistory() {
+      // TODO: 调用API获取历史订单列表
+      this.orderList = [
         {
           id: '2',
-          date: '2025-01-08T15:00:00Z',
-          amount: 12.0,
-          source: 'delivery_fee',
           order_no: 'D202501081235',
-          distance: 8.2
-        },
-        // 用户打赏
-        {
-          id: '3',
-          date: '2025-01-08T15:30:00Z',
-          amount: 5.0,
-          source: 'user_tip',
-          order_no: 'D202501081236'
-        },
-        {
-          id: '4',
-          date: '2025-01-08T16:00:00Z',
-          amount: 7.0,
-          source: 'user_tip',
-          order_no: 'D202501081237'
-        },
-        // 商家打赏
-        {
-          id: '5',
-          date: '2025-01-08T16:30:00Z',
-          amount: 3.5,
-          source: 'merchant_tip',
-          order_no: 'D202501081238'
-        },
-        {
-          id: '6',
-          date: '2025-01-08T17:00:00Z',
-          amount: 5.0,
-          source: 'merchant_tip',
-          order_no: 'D202501081239'
-        },
-        {
-          id: '7',
-          date: '2025-01-08T17:30:00Z',
-          amount: 6.0,
-          source: 'delivery_fee',
-          order_no: 'D202501081240',
-          distance: 3.5
-        },
-        {
-          id: '8',
-          date: '2025-01-08T18:00:00Z',
-          amount: 10.0,
-          source: 'user_tip',
-          order_no: 'D202501081241'
-        },
-        {
-          id: '9',
-          date: '2025-01-08T18:30:00Z',
-          amount: 8.5,
-          source: 'merchant_tip',
-          order_no: 'D202501081242'
-        },
-        {
-          id: '10',
-          date: '2025-01-08T19:00:00Z',
-          amount: 12.0,
-          source: 'delivery_fee',
-          order_no: 'D202501081243',
-          distance: 5.0
-        },
-        {
-          id: '11',
-          date: '2025-01-08T19:30:00Z',
-          amount: 5.0,
-          source: 'user_tip',
-          order_no: 'D202501081244'
-        },
-        {
-          id: '12',
-          date: '2025-01-08T20:00:00Z',
-          amount: 3.5,
-          source: 'merchant_tip',
-          order_no: 'D202501081245'
+          status: 5, // 已完成
+          pickup_address: {
+            detail: '福田区购物公园',
+            area: '购物公园'
+          },
+          delivery_address: {
+            detail: '南山区海岸城',
+            area: '海岸城'
+          },
+          pickup_contact: {
+            name: '商家联系人',
+            phone: '138****5678'
+          },
+          delivery_contact: {
+            name: '张先生',
+            phone: '139****1234'
+          },
+          delivery_fee: 12.0,
+          distance: 8.2,
+          estimated_time: 25,
+          created_at: '2025-01-08T15:00:00Z'
         }
       ]
 
-      // 按订单号聚合数据
-      const orderMap = new Map<string, OrderEarningType>()
-        rawEarnings.forEach(item => {
-          if (!orderMap.has(item.order_no)) {
-            orderMap.set(item.order_no, {
-              order_no: item.order_no,
-              date: item.date,
-              distance: item.distance,
-              totalAmount: 0,
-              details: []
-            })
-          }
-          const order = orderMap.get(item.order_no)!
-          order.totalAmount += item.amount
-          order.details.push(item)
-        })
-      
-        /* ---------- 新增：把「配送费」「商家打赏」「用户打赏」三种类型全部补齐 ---------- */
-        const allTypes: Array<'delivery_fee' | 'merchant_tip' | 'user_tip'> = ['delivery_fee', 'merchant_tip', 'user_tip']
-        orderMap.forEach(order => {
-          // 看当前订单已存在的类型
-          const existSet = new Set(order.details.map(d => d.source))
-          // 缺哪种就补 0 的占位，保证顺序：配送费 / 商家打赏 / 用户打赏
-          allTypes.forEach(type => {
-            if (!existSet.has(type)) {
-              order.details.push({
-                id: `${order.order_no}_${type}`,   // 唯一 key
-                date: order.date,
-                amount: 0,
-                source: type,
-                order_no: order.order_no,
-                distance: order.distance
-              })
-            }
-          })
-          // 按固定顺序排个序（可选）
-          order.details.sort((a, b) =>
-            allTypes.indexOf(a.source as any) - allTypes.indexOf(b.source as any)
-          )
-        })
-
-      this.allOrderEarnings = Array.from(orderMap.values())
-      this.calculateTotalStats()
-      this.loadPage()
+      // 检查是否有新完成的订单（在加载初始数据后）
+      this.checkForNewCompletedOrder()
     },
 
-    // 计算总统计数据
-    calculateTotalStats() {
-      let totalEarnings = 0
-      let totalUserTips = 0
-      let totalMerchantTips = 0
+    // 获取订单状态样式
+    getOrderStatusClass(status: number): string {
+      switch (status) {
+        case 1: return 'status-pending'
+        case 2: return 'status-accepted'
+        case 3: return 'status-picking'
+        case 4: return 'status-picked'
+        case 5: return 'status-delivering' // 这里我们用 '已完成' 的样式
+        default: return 'status-default'
+      }
+    },
 
-      this.allOrderEarnings.forEach(order => {
-        order.details.forEach(detail => {
-          totalEarnings += detail.amount || 0
-          if (detail.source === 'user_tip') {
-            totalUserTips += detail.amount || 0
-          } else if (detail.source === 'merchant_tip') {
-            totalMerchantTips += detail.amount || 0
-          }
-        })
+    // 获取订单状态文本
+    getOrderStatusText(status: number): string {
+      switch (status) {
+        case 1: return '待接取'
+        case 2: return '已接取'
+        case 3: return '取货中'
+        case 4: return '已取货'
+        case 5: return '已完成'
+        default: return '未知状态'
+      }
+    },
+
+    // 查看订单详情
+    viewOrderDetail(orderId: string) {
+      uni.navigateTo({
+        url: `/pages/mall/delivery/order-detail?id=${orderId}`
       })
-
-      this.totalEarnings = totalEarnings.toFixed(2)
-      this.totalUserTips = totalUserTips.toFixed(2)
-      this.totalMerchantTips = totalMerchantTips.toFixed(2)
-      this.totalOrders = this.allOrderEarnings.length
-    },
-
-    // 加载当前页数据
-    loadPage() {
-      const start = (this.currentPage - 1) * this.pageSize
-      const end = start + this.pageSize
-      const newOrders = this.allOrderEarnings.slice(start, end)
-      this.orderEarningsList.push(...newOrders)
-    },
-
-    // 加载更多
-    loadMoreEarnings() {
-      this.currentPage++
-      this.loadPage()
-    },
-
-    // 获取收入来源文本
-    getSourceText(source: string): string {
-      switch (source) {
-        case 'delivery_fee': return '配送费'
-        case 'user_tip': return '用户打赏'
-        case 'merchant_tip': return '商家打赏'
-        default: return '其他'
-      }
-    },
-
-    // 格式化时间
-    formatTime(timeStr: string): string {
-      const date = new Date(timeStr)
-      const now = new Date()
-      const diff = now.getTime() - date.getTime()
-      const minutes = Math.floor(diff / (1000 * 60))
-      
-      if (minutes < 60) {
-        return `${minutes}分钟前`
-      } else {
-        return `${Math.floor(minutes / 60)}小时前`
-      }
     },
 
     // 返回主页
@@ -316,29 +177,10 @@ export default {
     }
   }
 }
-
-// 定义聚合后的订单收入类型
-type OrderEarningType = {
-  order_no: string
-  date: string
-  distance?: number
-  totalAmount: number
-  details: Array<EarningType>
-}
-
-type EarningType = {
-  id: string
-  date: string
-  amount?: number
-  source: 'delivery_fee' | 'user_tip' | 'merchant_tip' | string
-  order_no?: string
-  distance?: number
-}
 </script>
 
-<style>
-/* 全局样式 */
-.earnings-container {
+<style scoped>
+.order-history-container {
   background-color: #f5f5f5;
   min-height: 100vh;
   padding: 20rpx 30rpx;
@@ -361,24 +203,36 @@ type EarningType = {
   flex-direction: column;
   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;
-  margin-right: 10rpx;
   color: #333;
+  margin-bottom: 5rpx;
 }
 
 .nav-title {
   font-size: 28rpx;
-  color: #000000; /* 红色 */
+  color: #333;
   font-weight: 500;
+  text-align: center;
 }
 
 .page-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333; /* 黑色 */
+  color: #333;
   text-align: center;
   margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
 }
@@ -389,144 +243,169 @@ type EarningType = {
   height: 1rpx;
 }
 
-.stats-section {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20rpx;
-  margin: 20rpx;
-  padding: 20rpx;
-  background-color: #fff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-}
-
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20rpx;
-  background-color: #f8f9fa;
-  border-radius: 12rpx;
-}
-
-.stat-value {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #4CAF50;
-  margin-bottom: 10rpx;
-}
-
-.stat-label {
-  font-size: 24rpx;
-  color: #666;
-  text-align: center;
-}
-
 .content-wrapper {
   margin-top: 20rpx;
 }
 
-.order-earnings-list {
+.order-list {
   display: flex;
   flex-direction: column;
   gap: 20rpx;
 }
 
-.order-earnings-item {
+.order-item {
   background-color: #fff;
   border-radius: 16rpx;
   padding: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-  border-left: 6rpx solid #4CAF50;
+  border-left: 6rpx solid #74b9ff;
 }
 
-.order-total {
+.order-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15rpx;
+  margin-bottom: 20rpx;
+  padding-bottom: 15rpx;
+  border-bottom: 1rpx solid #f8f9fa;
 }
 
-.order-total-label {
+.order-id {
   font-size: 28rpx;
-  font-weight: 500;
+  font-weight: bold;
   color: #333;
 }
 
-.order-total-amount {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #4CAF50;
+.order-status {
+  font-size: 24rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 20rpx;
+  font-weight: 500;
+}
+
+.status-pending {
+  background-color: #E3F2FD;
+  color: #1976D2;
+}
+
+.status-accepted {
+  background-color: #FFF3E0;
+  color: #F57C00;
+}
+
+.status-picking {
+  background-color: #FFF3E0;
+  color: #F57C00;
+}
+
+.status-picked {
+  background-color: #E8F5E8;
+  color: #388E3C;
+}
+
+.status-delivering {
+  background-color: #E8F5E8;
+  color: #388E3C;
+}
+
+.status-default {
+  background-color: #F8F8F8;
+  color: #666;
+}
+
+.order-addresses {
+  margin-bottom: 20rpx;
+}
+
+.address-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15rpx;
+}
+
+.address-icon {
+  font-size: 28rpx;
+  margin-right: 15rpx;
+  margin-top: 5rpx;
+}
+
+.address-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.address-label {
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 8rpx;
+}
+
+.address-text {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.contact-info {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.address-line {
+  width: 2rpx;
+  height: 30rpx;
+  background-color: #ddd;
+  margin: 10rpx 0 10rpx 14rpx;
+}
+
+.order-details {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding: 15rpx;
+  background-color: #f8f9fa;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #666;
 }
 
 .order-info {
   display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 10rpx;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
   font-size: 24rpx;
   color: #666;
-  margin-bottom: 15rpx;
-  padding-bottom: 10rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  margin: 0 5rpx;
 }
 
-.info-item {
-  flex: 1 1 45%;
-  min-width: 120rpx;
-  word-break: break-all;
-}
-
-.earning-details {
+.order-actions {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 10rpx;
 }
 
-.detail-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8rpx 12rpx;
+.action-btn {
+  flex: 1;
+  height: 80rpx;
   border-radius: 8rpx;
-  background-color: #f8f9fa;
-}
-
-.detail-type {
-  font-size: 24rpx;
-  color: #555;
-}
-
-.detail-amount {
-  font-size: 24rpx;
-  color: #4CAF50;
+  font-size: 28rpx;
+  border: none;
   font-weight: 500;
+  padding: 0 10rpx;
+  box-sizing: border-box;
 }
 
-.load-more {
-  text-align: center;
-  margin-top: 20rpx;
-}
-
-.load-more-btn {
+.primary {
   background-color: #4CAF50;
   color: #fff;
-  border: none;
-  border-radius: 8rpx;
-  padding: 20rpx 40rpx;
-  font-size: 28rpx;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
 }
 
-.load-more-btn:hover {
-  background-color: #45a049; /* 按钮悬停效果 */
-}
-
-.load-more-btn:active {
-  background-color: #3d8b40; /* 按钮点击效果 */
+.secondary {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1rpx solid #ddd;
 }
 
 .no-data {
diff --git a/pages/mall/delivery/profile-edit.uvue b/pages/mall/delivery/profile-edit.uvue
new file mode 100644
index 00000000..62d82af5
--- /dev/null
+++ b/pages/mall/delivery/profile-edit.uvue
@@ -0,0 +1,439 @@
+<template>
+  <view class="profile-edit-container">
+    <!-- 顶部导航栏 -->
+    <view class="page-header">
+      <!-- 左上角：返回上一页按钮（箭头+文字 垂直排列） -->
+      <view class="nav-left" @click="goBack">
+        <text class="nav-icon">←</text>
+        <text class="nav-title">返回</text>
+      </view>
+
+      <!-- 页面标题居中 -->
+      <text class="page-title">编辑资料</text>
+
+      <!-- 右上角：保存按钮 -->
+      <view class="save-btn" @click="saveProfile">保存</view>
+    </view>
+
+    <!-- 编辑表单 -->
+    <view class="edit-form">
+      <!-- 头像上传 -->
+      <view class="form-item">
+        <text class="item-label">头像</text>
+        <view class="avatar-upload" @click="chooseAvatar">
+          <image :src="formData.avatar_url || '/static/default-avatar.png'" class="avatar-image" />
+          <text class="upload-text">点击更换</text>
+        </view>
+      </view>
+
+      <!-- 姓名 -->
+      <view class="form-item">
+        <text class="item-label">姓名</text>
+        <input class="item-input" v-model="formData.real_name" placeholder="请输入姓名" />
+      </view>
+
+      <!-- 身份证号 -->
+      <view class="form-item">
+        <text class="item-label">身份证号</text>
+        <input class="item-input" v-model="formData.id_card" placeholder="请输入身份证号" />
+      </view>
+
+      <!-- 驾驶证号 -->
+      <view class="form-item">
+        <text class="item-label">驾驶证号</text>
+        <input class="item-input" v-model="formData.driver_license" 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.vehicle_number" placeholder="请输入车牌号" />
+      </view>
+
+      <!-- 服务区域 -->
+      <view class="form-item">
+        <text class="item-label">服务区域</text>
+        <view class="service-areas">
+          <view class="area-tag" v-for="(area, index) in formData.service_areas" :key="index">
+            <text class="area-text">{{ area }}</text>
+            <text class="remove-area" @click="removeArea(index)">×</text>
+          </view>
+          <view class="add-area" @click="showAddAreaModal">
+            <text class="add-icon">+</text>
+            <text class="add-text">添加区域</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 联系电话（可选） -->
+      <view class="form-item">
+        <text class="item-label">联系电话</text>
+        <input class="item-input" v-model="formData.phone" placeholder="请输入联系电话" />
+      </view>
+    </view>
+
+    <!-- 添加服务区域弹窗 -->
+    <view v-if="showAreaModal" class="modal-overlay" @click="hideAddAreaModal">
+      <view class="modal-content" @click.stop="noop">
+        <text class="modal-title">添加服务区域</text>
+        <input class="modal-input" v-model="newAreaName" placeholder="输入区域名称" />
+        <view class="modal-actions">
+          <button class="modal-btn cancel" @click="hideAddAreaModal">取消</button>
+          <button class="modal-btn confirm" @click="addNewArea">确定</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, reactive, onMounted } from 'vue'
+
+// 响应式数据
+const formData = reactive({
+  id: '',
+  user_id: '',
+  real_name: '李师傅',
+  id_card: '110101199001011234',
+  driver_license: 'C1',
+  vehicle_type: 1,
+  vehicle_number: '京A12345',
+  phone: '13888888888',
+  service_areas: ['朝阳区', '东城区'],
+  avatar_url: ''
+})
+
+const vehicleTypeIndex = ref(0)
+const showAreaModal = ref(false)
+const newAreaName = ref('')
+const vehicleTypes = ref(['摩托车', '电动自行车', '面包车', '小型货车'])
+
+// 生命周期
+onMounted(() => {
+  loadProfileData()
+})
+
+// 方法
+function loadProfileData() {
+  // 模拟加载当前用户资料
+  // 实际项目中应从 API 获取
+}
+
+function chooseAvatar() {
+  uni.chooseImage({
+    count: 1,
+    sizeType: ['compressed'],
+    sourceType: ['album', 'camera'],
+    success: (res) => {
+      formData.avatar_url = res.tempFilePaths[0]
+    }
+  })
+}
+
+function onVehicleTypeChange(e: UniEvent<HTMLInputElement>) {
+  const index = parseInt(e.detail.value)
+  vehicleTypeIndex.value = index
+  formData.vehicle_type = index + 1 // 假设后端从1开始
+}
+
+function showAddAreaModal() {
+  newAreaName.value = ''
+  showAreaModal.value = true
+}
+
+function hideAddAreaModal() {
+  showAreaModal.value = false
+}
+
+function addNewArea() {
+  if (newAreaName.value.trim()) {
+    if (!formData.service_areas.includes(newAreaName.value.trim())) {
+      formData.service_areas.push(newAreaName.value.trim())
+    }
+    newAreaName.value = ''
+  }
+  hideAddAreaModal()
+}
+
+function removeArea(index: number) {
+  formData.service_areas.splice(index, 1)
+}
+
+function saveProfile() {
+  // 模拟保存
+  uni.showLoading({
+    title: '保存中...'
+  })
+
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '保存成功',
+      icon: 'success'
+    })
+    // 保存成功后返回上一页
+    uni.navigateBack()
+  }, 1000)
+
+  // 实际项目中应调用 API 保存数据
+  console.log('保存的资料:', formData)
+}
+
+function goBack() {
+  uni.navigateBack()
+}
+
+function noop() {
+  // 阻止事件冒泡的空函数
+}
+</script>
+
+<style scoped>
+.profile-edit-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20rpx 30rpx;
+}
+
+/* 导航栏样式 */
+.page-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  min-height: 80rpx;
+}
+
+.nav-left {
+  position: absolute;
+  top: 20rpx;
+  left: 30rpx;
+  display: flex;
+  flex-direction: column;
+  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;
+  margin-bottom: 5rpx;
+}
+
+.nav-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
+}
+
+.save-btn {
+  position: absolute;
+  top: 20rpx;
+  right: 30rpx;
+  font-size: 28rpx;
+  color: #4CAF50;
+  font-weight: bold;
+  padding: 10rpx 20rpx;
+  background-color: #e8f5e8;
+  border-radius: 12rpx;
+}
+
+/* 编辑表单 */
+.edit-form {
+  margin-top: 20rpx;
+}
+
+.form-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx 30rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.item-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  min-width: 120rpx;
+}
+
+.item-input {
+  flex: 1;
+  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;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 10rpx;
+}
+
+/* 服务区域 */
+.service-areas {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  align-items: center;
+}
+
+.area-tag {
+  display: flex;
+  align-items: center;
+  background-color: #e8f4fd;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  color: #333;
+}
+
+.remove-area {
+  margin-left: 8rpx;
+  font-size: 20rpx;
+  color: #ff4757;
+  cursor: pointer;
+}
+
+.add-area {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  color: #666;
+  cursor: pointer;
+}
+
+.add-icon {
+  margin-right: 5rpx;
+  font-size: 20rpx;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: #fff;
+  width: 80%;
+  max-width: 600rpx;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.modal-input {
+  width: 100%;
+  font-size: 28rpx;
+  color: #333;
+  padding: 10rpx 20rpx;
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.modal-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  margin: 0 10rpx;
+  cursor: pointer;
+}
+
+.cancel {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.confirm {
+  background-color: #4CAF50;
+  color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/profile.uvue b/pages/mall/delivery/profile.uvue
index 1fd1882c..05e07c0b 100644
--- a/pages/mall/delivery/profile.uvue
+++ b/pages/mall/delivery/profile.uvue
@@ -1,8 +1,13 @@
 <!-- 配送端 - 个人中心 -->
 <template>
   <view class="delivery-profile">
-    <!-- 配送员信息头部 -->
+    <!-- 1. 蓝色头像条（profile-header） -->
     <view class="profile-header">
+      <!-- 返回按钮：最左边垂直居中 -->
+      <view class="back-box" @click="backToIndex">
+        <text class="back-icon">‹</text>
+      </view>
+
       <image :src="driverInfo.avatar_url || '/static/default-avatar.png'" class="driver-avatar" @click="editProfile" />
       <view class="driver-info">
         <text class="driver-name">{{ driverInfo.real_name }}</text>
@@ -15,7 +20,7 @@
       <view class="settings-icon" @click="goToSettings">⚙️</view>
     </view>
 
-    <!-- 工作状态切换 -->
+    <!-- 2. 工作状态切换 -->
     <view class="work-status">
       <view class="section-title">工作状态</view>
       <view class="status-controls">
@@ -31,7 +36,7 @@
       </view>
     </view>
 
-    <!-- 配送任务快捷入口 -->
+    <!-- 3. 配送任务快捷入口 -->
     <view class="task-shortcuts">
       <view class="section-title">配送任务</view>
       <view class="task-tabs">
@@ -58,7 +63,7 @@
       </view>
     </view>
 
-    <!-- 今日配送数据 -->
+    <!-- 4. 今日配送数据 -->
     <view class="today-stats">
       <view class="section-title">今日配送</view>
       <view class="stats-grid">
@@ -81,7 +86,7 @@
       </view>
     </view>
 
-    <!-- 当前任务 -->
+    <!-- 5. 当前任务 -->
     <view v-if="currentTask" class="current-task">
       <view class="section-title">当前任务</view>
       <view class="task-card">
@@ -113,7 +118,7 @@
       </view>
     </view>
 
-    <!-- 最近任务 -->
+    <!-- 6. 最近任务 -->
     <view class="recent-tasks">
       <view class="section-header">
         <text class="section-title">最近任务</text>
@@ -136,7 +141,7 @@
       </view>
     </view>
 
-    <!-- 收入统计 -->
+    <!-- 7. 收入统计 -->
     <view class="earnings-chart">
       <view class="section-header">
         <text class="section-title">收入统计</text>
@@ -153,7 +158,7 @@
       </view>
     </view>
 
-    <!-- 功能菜单 -->
+    <!-- 8. 功能菜单 -->
     <view class="function-menu">
       <view class="menu-group">
         <view class="menu-item" @click="goToEarnings">
@@ -193,7 +198,12 @@
 import { ref, onMounted, computed } from 'vue'
 import type { DeliveryDriverType, DeliveryTaskType, ApiResponseType } from '@/types/mall-types'
 
-// 响应式数据
+/* ----------------- 返回按钮 ----------------- */
+function backToIndex() {
+  uni.navigateBack({ url: '/pages/mall/delivery/index' })
+}
+
+/* ----------------- 数据 ----------------- */
 const driverInfo = ref({
   id: '',
   real_name: '配送员',
@@ -201,17 +211,12 @@ const driverInfo = ref({
   rating: 4.9,
   total_orders: 368,
   work_status: 1
-} as DeliveryDriverType)
+})
 
-const workStatus = ref(1) // 1: 工作中, 0: 休息中
+const workStatus = ref(1) // 1 工作中 0 休息中
 const currentLocation = ref('朝阳区建国门附近')
 
-const taskCounts = ref({
-  total: 0,
-  pending: 0,
-  ongoing: 0,
-  completed: 0
-})
+const taskCounts = ref({ total: 0, pending: 0, ongoing: 0, completed: 0 })
 
 const todayStats = ref({
   deliveries: 12,
@@ -220,8 +225,8 @@ const todayStats = ref({
   efficiency: 96.5
 })
 
-const currentTask = ref(null as DeliveryTaskType | null)
-const recentTasks = ref([] as Array<DeliveryTaskType>)
+const currentTask = ref<DeliveryTaskType | null>(null)
+const recentTasks = ref<DeliveryTaskType[]>([])
 
 const weeklyEarnings = ref([
   { day: '周一', amount: 120 },
@@ -233,12 +238,9 @@ const weeklyEarnings = ref([
   { day: '周日', amount: 198 }
 ])
 
-// 计算属性
-const maxEarnings = computed(() => {
-  return Math.max(...weeklyEarnings.value.map(item => item.amount))
-})
+const maxEarnings = computed(() => Math.max(...weeklyEarnings.value.map(i => i.amount)))
 
-// 生命周期
+/* ----------------- 生命周期 ----------------- */
 onMounted(() => {
   loadDriverInfo()
   loadTaskCounts()
@@ -246,9 +248,8 @@ onMounted(() => {
   loadRecentTasks()
 })
 
-// 方法
+/* ----------------- 方法 ----------------- */
 function loadDriverInfo() {
-  // 模拟加载配送员信息
   driverInfo.value = {
     id: 'driver001',
     user_id: 'user001',
@@ -269,17 +270,10 @@ function loadDriverInfo() {
 }
 
 function loadTaskCounts() {
-  // 模拟加载任务统计
-  taskCounts.value = {
-    total: 25,
-    pending: 3,
-    ongoing: 1,
-    completed: 21
-  }
+  taskCounts.value = { total: 25, pending: 3, ongoing: 1, completed: 21 }
 }
 
 function loadCurrentTask() {
-  // 模拟加载当前任务
   currentTask.value = {
     id: 'task001',
     order_id: 'order001',
@@ -300,7 +294,6 @@ function loadCurrentTask() {
 }
 
 function loadRecentTasks() {
-  // 模拟加载最近任务
   recentTasks.value = [
     {
       id: 'task002',
@@ -340,49 +333,31 @@ function loadRecentTasks() {
 }
 
 function getWorkStatus(): string {
-  const statusMap = {
-    0: '休息中',
-    1: '工作中',
-    2: '忙碌中'
-  }
-  return statusMap[driverInfo.value.work_status] || '未知状态'
+  const m: Record<number, string> = { 0: '休息中', 1: '工作中', 2: '忙碌中' }
+  return m[driverInfo.value.work_status] || '未知状态'
 }
 
 function getTaskStatusText(status: number): string {
-  const statusMap = {
-    1: '待接单',
-    2: '已接单',
-    3: '配送中',
-    4: '已完成',
-    5: '已取消'
-  }
-  return statusMap[status] || '未知'
+  const m: Record<number, string> = { 1: '待接单', 2: '已接单', 3: '配送中', 4: '已完成', 5: '已取消' }
+  return m[status] || '未知'
 }
 
 function getAddressText(address: UTSJSONObject): string {
-  return address['address'] as string || '地址信息'
+  return (address['address'] as string) || '地址信息'
 }
 
 function formatTime(dateStr: string): string {
-  const date = new Date(dateStr)
-  const now = new Date()
-  const diff = now.getTime() - date.getTime()
-  const hours = Math.floor(diff / (1000 * 60 * 60))
-  
-  if (hours < 1) {
-    return '刚刚'
-  } else if (hours < 24) {
-    return `${hours}小时前`
-  } else {
-    return `${Math.floor(hours / 24)}天前`
-  }
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const hours = Math.floor(diff / 36e5)
+  if (hours < 1) return '刚刚'
+  if (hours < 24) return `${hours}小时前`
+  return `${Math.floor(hours / 24)}天前`
 }
 
-// 交互方法
+/* ----------------- 交互 ----------------- */
 function toggleWorkStatus() {
   workStatus.value = workStatus.value === 1 ? 0 : 1
   driverInfo.value.work_status = workStatus.value
-  
   uni.showToast({
     title: workStatus.value === 1 ? '已开始工作' : '已停止工作',
     icon: 'success'
@@ -392,123 +367,112 @@ function toggleWorkStatus() {
 function contactCustomer() {
   uni.showActionSheet({
     itemList: ['拨打电话', '发送短信'],
-    success: (res) => {
-      if (res.tapIndex === 0) {
-        uni.makePhoneCall({
-          phoneNumber: '13888888888'
-        })
-      }
+    success: res => {
+      if (res.tapIndex === 0) uni.makePhoneCall({ phoneNumber: '13888888888' })
     }
   })
 }
 
-function viewTaskDetail(taskId: string = '') {
+function viewTaskDetail(taskId = '') {
   const id = taskId || currentTask.value?.id || ''
-  uni.navigateTo({
-    url: `/pages/mall/delivery/task-detail?id=${id}`
-  })
+  uni.navigateTo({ url: `/pages/mall/delivery/task-detail?id=${id}` })
 }
 
-// 导航方法
+/* ----------------- 导航 ----------------- */
 function editProfile() {
-  uni.navigateTo({
-    url: '/pages/mall/delivery/profile-edit'
-  })
+  uni.navigateTo({ url: '/pages/mall/delivery/profile-edit' })
 }
-
 function goToSettings() {
-  uni.navigateTo({
-    url: '/pages/mall/delivery/settings'
-  })
+  uni.navigateTo({ url: '/pages/mall/delivery/settings' })
 }
-
 function goToTasks(type: string) {
-  uni.navigateTo({
-    url: `/pages/mall/delivery/tasks?type=${type}`
-  })
+  uni.navigateTo({ url: `/pages/mall/delivery/tasks?type=${type}` })
 }
-
 function goToEarnings() {
-  uni.navigateTo({
-    url: '/pages/mall/delivery/earnings'
-  })
+  uni.navigateTo({ url: '/pages/mall/delivery/earnings' })
 }
-
 function goToVehicle() {
-  uni.navigateTo({
-    url: '/pages/mall/delivery/vehicle'
-  })
+  uni.navigateTo({ url: '/pages/mall/delivery/vehicle' })
 }
-
 function goToRatings() {
-  uni.navigateTo({
-    url: '/pages/mall/delivery/ratings'
-  })
+  uni.navigateTo({ url: '/pages/mall/delivery/ratings' })
 }
-
 function goToHelp() {
-  uni.navigateTo({
-    url: '/pages/mall/common/help'
-  })
+  uni.navigateTo({ url: '/pages/mall/common/help' })
 }
-
 function goToFeedback() {
-  uni.navigateTo({
-    url: '/pages/mall/common/feedback'
-  })
+  uni.navigateTo({ url: '/pages/mall/common/feedback' })
 }
 </script>
 
 <style scoped>
+/* ---------- 返回按钮：蓝色条最左边垂直居中 ---------- */
+.profile-header {
+  position: relative;
+}
+.back-box {
+  position: absolute;
+  left: 30rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, .15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-box:active {
+  background: rgba(0, 0, 0, .3);
+}
+.back-icon {
+  font-size: 40rpx;
+  color: #fff;
+}
+
+/* ---------- 以下与原样式一致 ---------- */
 .delivery-profile {
   padding: 0 0 120rpx 0;
   background-color: #f5f5f5;
   min-height: 100vh;
 }
-
 .profile-header {
   display: flex;
   align-items: center;
   padding: 40rpx 30rpx;
   background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-  position: relative;
 }
-
 .driver-avatar {
   width: 120rpx;
   height: 120rpx;
   border-radius: 60rpx;
+  margin-left: 80rpx; /* 给返回按钮留位置 */
   margin-right: 30rpx;
   border: 4rpx solid rgba(255, 255, 255, 0.3);
 }
-
 .driver-info {
   flex: 1;
 }
-
 .driver-name {
   font-size: 36rpx;
   font-weight: bold;
   color: white;
   margin-bottom: 10rpx;
 }
-
 .driver-status {
   font-size: 24rpx;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 15rpx;
 }
-
 .driver-stats {
   display: flex;
   gap: 30rpx;
 }
-
 .stat-item {
   font-size: 22rpx;
   color: rgba(255, 255, 255, 0.9);
 }
-
 .settings-icon {
   font-size: 36rpx;
   color: white;
@@ -521,21 +485,18 @@ function goToFeedback() {
   border-radius: 20rpx;
   padding: 30rpx;
 }
-
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
   color: #333;
   margin-bottom: 30rpx;
 }
-
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30rpx;
 }
-
 .view-all, .view-more {
   font-size: 24rpx;
   color: #74b9ff;
@@ -546,19 +507,16 @@ function goToFeedback() {
   flex-direction: column;
   gap: 20rpx;
 }
-
 .status-toggle {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-
 .toggle-label {
   font-size: 28rpx;
   color: #333;
   font-weight: 500;
 }
-
 .toggle-switch {
   position: relative;
   width: 100rpx;
@@ -567,11 +525,9 @@ function goToFeedback() {
   border-radius: 25rpx;
   transition: all 0.3s;
 }
-
 .toggle-switch.active {
   background: #74b9ff;
 }
-
 .toggle-handle {
   position: absolute;
   top: 5rpx;
@@ -582,17 +538,14 @@ function goToFeedback() {
   border-radius: 50%;
   transition: all 0.3s;
 }
-
 .toggle-switch.active .toggle-handle {
   left: 55rpx;
 }
-
 .current-location {
   padding: 15rpx 20rpx;
   background: #e8f4fd;
   border-radius: 15rpx;
 }
-
 .location-text {
   font-size: 24rpx;
   color: #74b9ff;
@@ -602,7 +555,6 @@ function goToFeedback() {
   display: flex;
   justify-content: space-between;
 }
-
 .task-tab {
   display: flex;
   flex-direction: column;
@@ -610,17 +562,14 @@ function goToFeedback() {
   flex: 1;
   position: relative;
 }
-
 .tab-icon {
   font-size: 48rpx;
   margin-bottom: 10rpx;
 }
-
 .tab-text {
   font-size: 24rpx;
   color: #666;
 }
-
 .tab-badge {
   position: absolute;
   top: -10rpx;
@@ -633,12 +582,10 @@ function goToFeedback() {
   min-width: 30rpx;
   text-align: center;
 }
-
 .tab-badge.alert {
   background: #ff4757;
   animation: pulse 2s infinite;
 }
-
 @keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.1); }
@@ -651,7 +598,6 @@ function goToFeedback() {
   flex-wrap: wrap;
   gap: 20rpx;
 }
-
 .stat-card {
   display: flex;
   flex-direction: column;
@@ -662,14 +608,12 @@ function goToFeedback() {
   background: #e8f4fd;
   border-radius: 15rpx;
 }
-
 .stat-value {
   font-size: 36rpx;
   font-weight: bold;
   color: #74b9ff;
   margin-bottom: 5rpx;
 }
-
 .stat-label {
   font-size: 24rpx;
   color: #666;
@@ -681,20 +625,17 @@ function goToFeedback() {
   border-radius: 15rpx;
   border-left: 6rpx solid #74b9ff;
 }
-
 .task-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20rpx;
 }
-
 .task-id {
   font-size: 28rpx;
   color: #333;
   font-weight: 500;
 }
-
 .task-status {
   font-size: 22rpx;
   padding: 6rpx 12rpx;
@@ -702,39 +643,32 @@ function goToFeedback() {
   background: #74b9ff;
   color: white;
 }
-
 .task-route {
   margin-bottom: 25rpx;
 }
-
 .route-point {
   display: flex;
   align-items: flex-start;
   margin-bottom: 15rpx;
 }
-
 .point-icon {
   font-size: 32rpx;
   margin-right: 15rpx;
   margin-top: 5rpx;
 }
-
 .point-info {
   flex: 1;
 }
-
 .point-label {
   font-size: 22rpx;
   color: #666;
   margin-bottom: 5rpx;
 }
-
 .point-address {
   font-size: 26rpx;
   color: #333;
   line-height: 1.4;
 }
-
 .route-line {
   width: 2rpx;
   height: 30rpx;
@@ -742,12 +676,10 @@ function goToFeedback() {
   margin-left: 16rpx;
   margin-bottom: 5rpx;
 }
-
 .task-actions {
   display: flex;
   gap: 20rpx;
 }
-
 .action-btn {
   flex: 1;
   padding: 20rpx;
@@ -757,7 +689,6 @@ function goToFeedback() {
   color: #333;
   border: none;
 }
-
 .action-btn.primary {
   background: #74b9ff;
   color: white;
@@ -768,44 +699,37 @@ function goToFeedback() {
   flex-direction: column;
   gap: 20rpx;
 }
-
 .task-item {
   padding: 25rpx;
   background: #f8f9ff;
   border-radius: 15rpx;
   border-left: 6rpx solid #74b9ff;
 }
-
 .task-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15rpx;
 }
-
 .task-order {
   font-size: 26rpx;
   color: #333;
   font-weight: 500;
 }
-
 .task-fee {
   font-size: 24rpx;
   color: #74b9ff;
   font-weight: bold;
 }
-
 .task-time {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-
 .time-text {
   font-size: 22rpx;
   color: #999;
 }
-
 .status-text {
   font-size: 22rpx;
   padding: 4rpx 8rpx;
@@ -813,7 +737,6 @@ function goToFeedback() {
   background: #e3f2fd;
   color: #1976d2;
 }
-
 .status-4 {
   background: #e8f5e8;
   color: #388e3c;
@@ -822,15 +745,13 @@ function goToFeedback() {
 .chart-container {
   padding: 20rpx 0;
 }
-
 .chart-bar {
   display: flex;
   justify-content: space-between;
-  align-items: end;
+  align-items: flex-end;
   height: 200rpx;
   gap: 10rpx;
 }
-
 .bar-item {
   display: flex;
   flex-direction: column;
@@ -838,7 +759,6 @@ function goToFeedback() {
   flex: 1;
   position: relative;
 }
-
 .bar-item::before {
   content: '';
   width: 100%;
@@ -846,7 +766,6 @@ function goToFeedback() {
   border-radius: 8rpx 8rpx 0 0;
   min-height: 20rpx;
 }
-
 .bar-label {
   font-size: 20rpx;
   color: #666;
@@ -856,34 +775,28 @@ function goToFeedback() {
 .menu-group {
   margin-bottom: 30rpx;
 }
-
 .menu-group:last-child {
   margin-bottom: 0;
 }
-
 .menu-item {
   display: flex;
   align-items: center;
   padding: 25rpx 0;
   border-bottom: 1rpx solid #f0f0f0;
 }
-
 .menu-item:last-child {
   border-bottom: none;
 }
-
 .menu-icon {
   font-size: 36rpx;
   width: 60rpx;
   margin-right: 25rpx;
 }
-
 .menu-label {
   flex: 1;
   font-size: 28rpx;
   color: #333;
 }
-
 .menu-arrow {
   font-size: 24rpx;
   color: #ccc;
@@ -893,9 +806,8 @@ function goToFeedback() {
   text-align: center;
   padding: 60rpx 0;
 }
-
 .no-data-text {
   font-size: 24rpx;
   color: #999;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/ratings.uvue b/pages/mall/delivery/ratings.uvue
new file mode 100644
index 00000000..aa27e5ee
--- /dev/null
+++ b/pages/mall/delivery/ratings.uvue
@@ -0,0 +1,202 @@
+<template>
+  <view class="ratings-page">
+    <!-- 顶部总览卡片 -->
+    <view class="summary-card">
+      <!-- 返回按钮 -->
+      <view class="back-box" @click="backToIndex">
+        <text class="back-icon">‹</text>
+      </view>
+
+      <view class="summary-left">
+        <text class="score">4.9</text>
+        <text class="stars">
+          <text class="star-on">★</text>
+          <text class="star-on">★</text>
+          <text class="star-on">★</text>
+          <text class="star-on">★</text>
+          <text class="star-on">★</text>
+        </text>
+        <text class="count">共收到 128 条评价</text>
+      </view>
+
+      <view class="summary-right">
+        <view class="rate-item">
+          <text class="rate-label">好评率</text>
+          <text class="rate-value">96.1%</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 标签筛选 -->
+    <view class="filter-bar">
+      <view
+        v-for="t in tabs"
+        :key="t.key"
+        :class="['filter-tab', currentTab===t.key?'active':'']"
+        @click="switchTab(t.key)"
+      >
+        <text>{{ t.label }}</text>
+      </view>
+    </view>
+
+    <!-- 评价列表 -->
+    <scroll-view
+      scroll-y
+      class="ratings-scroll"
+      refresher-enabled
+      :refresher-triggered="isRefreshing"
+      @scrolltolower="loadMore"
+      @refresherrefresh="onRefresh"
+    >
+      <view v-if="list.length" class="rating-list">
+        <view v-for="item in list" :key="item.id" class="rating-card">
+          <view class="rating-header">
+            <image :src="item.avatar" class="user-avatar" mode="aspectFill" />
+            <view class="user-info">
+              <text class="user-name">{{ item.userName }}</text>
+              <text class="rating-stars">
+                <text v-for="s in 5" :key="s" :class="s<=item.score?'star-on':'star-off'">★</text>
+              </text>
+            </view>
+            <text class="rating-time">{{ item.time }}</text>
+          </view>
+
+          <text v-if="item.comment" class="rating-comment">{{ item.comment }}</text>
+          <text v-else class="rating-comment empty">用户未写评价</text>
+
+          <view v-if="item.tags&&item.tags.length" class="rating-tags">
+            <view v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</view>
+          </view>
+        </view>
+
+        <view v-if="hasMore" class="load-tip">正在加载…</view>
+        <view v-else class="load-tip">已加载全部</view>
+      </view>
+
+      <view v-else class="no-data">
+        <text class="no-data-icon">📝</text>
+        <text class="no-data-text">暂无评价记录</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+
+/* 返回按钮 */
+function backToIndex() {
+  uni.navigateBack({ url: '/pages/mall/delivery/index' })
+}
+
+/*  mock 数据  */
+const currentTab = ref('all')
+const isRefreshing = ref(false)
+const hasMore = ref(true)
+const page = ref(1)
+const list = ref<any[]>([])
+
+const tabs = [
+  { key: 'all',  label: '全部' },
+  { key: 'good', label: '好评' },
+  { key: 'bad',  label: '差评' }
+]
+
+function mockList() {
+  const tagPool = ['准时送达', '着装整洁', '服务热情', '配送快', '餐品完好']
+  return Array.from({ length: 10 }, (_, i) => ({
+    id: `${currentTab.value}_${page.value}_${i}`,
+    userName: '用户' + (Math.random() * 1000).toFixed(0),
+    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+    score: currentTab.value === 'bad' ? Math.floor(Math.random() * 2) + 1 : Math.floor(Math.random() * 2) + 4,
+    comment: Math.random() > 0.3 ? '配送很及时，服务态度很好！' : '',
+    tags: tagPool.slice(0, Math.floor(Math.random() * 3) + 1),
+    time: `${Math.floor(Math.random() * 60)}分钟前`
+  }))
+}
+
+async function fetchList(reset = false) {
+  if (reset) page.value = 1
+  const newList = mockList()
+  if (reset) list.value = newList
+  else list.value.push(...newList)
+  hasMore.value = page.value < 4
+  page.value++
+}
+
+function switchTab(key: string) {
+  if (currentTab.value === key) return
+  currentTab.value = key
+  fetchList(true)
+}
+
+function loadMore() {
+  if (!hasMore.value) return
+  fetchList(false)
+}
+
+function onRefresh() {
+  isRefreshing.value = true
+  fetchList(true).finally(() => isRefreshing.value = false)
+}
+
+onMounted(() => fetchList(true))
+</script>
+
+<style scoped>
+.ratings-page{min-height:100vh;background:#f5f5f5;display:flex;flex-direction:column;}
+
+.summary-card{
+  margin:20rpx 30rpx;
+  background:#fff;border-radius:20rpx;padding:40rpx;
+  display:flex;align-items:center;position:relative;
+}
+.back-box{
+  position:absolute;left:30rpx;top:50%;transform:translateY(-50%);
+  width:60rpx;height:60rpx;border-radius:50%;
+  background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;
+}
+.back-box:active{background:rgba(0,0,0,.15);}
+.back-icon{font-size:40rpx;color:#333;}
+.summary-left{flex:1;display:flex;flex-direction:center;align-items:center;}
+.score{font-size:64rpx;font-weight:bold;color:#ff9500;margin-right:20rpx;}
+.stars .star-on{color:#ff9500;}
+.count{font-size:24rpx;color:#666;margin-left:20rpx;}
+.summary-right .rate-item{text-align:center;}
+.rate-label{font-size:24rpx;color:#666;}
+.rate-value{font-size:40rpx;font-weight:bold;color:#4caf50;}
+
+.filter-bar{
+  margin:0 30rpx 20rpx;
+  background:#fff;border-radius:20rpx;padding:20rpx;
+  display:flex;justify-content:space-around;
+}
+.filter-tab{
+  padding:10rpx 30rpx;border-radius:30rpx;font-size:26rpx;
+  background:#f0f0f0;color:#666;
+}
+.filter-tab.active{background:#74b9ff;color:#fff;}
+
+.ratings-scroll{flex:1;}
+.rating-list{padding:0 30rpx 30rpx;}
+.rating-card{
+  background:#fff;border-radius:16rpx;padding:30rpx;margin-bottom:20rpx;
+}
+.rating-header{display:flex;align-items:center;}
+.user-avatar{width:80rpx;height:80rpx;border-radius:50%;margin-right:20rpx;}
+.user-info{flex:1;}
+.user-name{font-size:28rpx;color:#333;}
+.rating-stars{font-size:24rpx;}
+.rating-stars .star-on{color:#ff9500;}
+.rating-stars .star-off{color:#ddd;}
+.rating-time{font-size:22rpx;color:#999;}
+.rating-comment{margin:20rpx 0;font-size:28rpx;color:#333;line-height:1.5;}
+.rating-comment.empty{color:#bbb;}
+.rating-tags{display:flex;flex-wrap:wrap;gap:10rpx;margin-top:15rpx;}
+.tag{background:#e8f4fd;color:#1976d2;font-size:22rpx;padding:4rpx 12rpx;border-radius:8rpx;}
+
+.load-tip{text-align:center;font-size:24rpx;color:#999;padding:20rpx 0;}
+.no-data{text-align:center;padding:120rpx 0;}
+.no-data-icon{font-size:80rpx;}
+.no-data-text{font-size:28rpx;color:#999;margin-top:20rpx;}
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/task-detail.uvue b/pages/mall/delivery/task-detail.uvue
new file mode 100644
index 00000000..a0ea6c9d
--- /dev/null
+++ b/pages/mall/delivery/task-detail.uvue
@@ -0,0 +1,480 @@
+<template>
+  <view class="task-detail-container">
+    <!-- 顶部导航栏 -->
+    <view class="page-header">
+      <!-- 左上角：返回上一页按钮 -->
+      <view class="nav-left" @click="goBack">
+        <text class="nav-icon">←</text>
+        <text class="nav-title">返回</text>
+      </view>
+
+      <!-- 页面标题居中 -->
+      <text class="page-title">任务详情</text>
+
+      <!-- 右上角留空 -->
+      <view class="nav-right"></view>
+    </view>
+
+    <!-- 任务详情卡片 -->
+    <view class="task-card">
+      <view class="task-header">
+        <text class="task-id">任务 #{{ task?.id?.slice(-6) || '未知' }}</text>
+        <view class="task-status" :class="'status-' + (task?.status || 0)">
+          {{ getTaskStatusText(task?.status) }}
+        </view>
+      </view>
+
+      <view class="task-info">
+        <view class="info-item">
+          <text class="info-label">取货地址:</text>
+          <text class="info-value">{{ getAddressText(task?.pickup_address) }}</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">送达地址:</text>
+          <text class="info-value">{{ getAddressText(task?.delivery_address) }}</text>
+        </view>
+        <view class="info-item" v-if="task?.distance">
+          <text class="info-label">距离:</text>
+          <text class="info-value">{{ task.distance }}km</text>
+        </view>
+        <view class="info-item" v-if="task?.estimated_time">
+          <text class="info-label">预计时间:</text>
+          <text class="info-value">{{ task.estimated_time }}分钟</text>
+        </view>
+        <view class="info-item" v-if="task?.delivery_fee">
+          <text class="info-label">配送费:</text>
+          <text class="info-value">¥{{ task.delivery_fee }}</text>
+        </view>
+        <view class="info-item" v-if="task?.created_at">
+          <text class="info-label">创建时间:</text>
+          <text class="info-value">{{ formatTime(task.created_at) }}</text>
+        </view>
+      </view>
+
+      <view class="task-actions">
+        <button class="action-btn" @click="contactCustomer">联系客户</button>
+        <button class="action-btn primary" @click="completeTask">完成配送</button>
+      </view>
+    </view>
+
+    <!-- 任务备注 -->
+    <view v-if="task?.remark" class="task-remark">
+      <text class="remark-title">备注:</text>
+      <text class="remark-text">{{ task.remark }}</text>
+    </view>
+
+    <!-- 联系客户按钮（重复显示，符合截图） -->
+    <view class="contact-client">
+      <button class="contact-btn" @click="contactCustomer">联系客户</button>
+    </view>
+
+    <!-- 查看详情按钮（实际就是返回上一页） -->
+    <view class="view-detail">
+      <button class="detail-btn" @click="goBack">返回</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+
+// 响应式数据
+const task = ref(null)
+
+// 生命周期
+onMounted(() => {
+  // 获取 URL 参数
+  const query = uni.getLaunchOptionsSync().query
+  const taskId = query.id
+  
+  if (!taskId) {
+    uni.showToast({
+      title: '任务ID不能为空',
+      icon: 'none'
+    })
+    return
+  }
+  
+  loadTaskDetail(taskId)
+})
+
+// 方法
+function loadTaskDetail(taskId: string) {
+  // 模拟加载任务详情
+  const mockTasks = [
+    {
+      id: 'task001',
+      order_id: 'ORD20250122001',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区科技园南区深圳湾科技生态园' },
+      delivery_address: { address: '深圳市南山区蛇口海上世界广场' },
+      distance: 8.2,
+      estimated_time: 25,
+      delivery_fee: 12.0,
+      status: 3, // 配送中
+      pickup_time: '2025-01-22 14:30:00',
+      delivered_time: null,
+      delivery_code: 'DEL001',
+      remark: '联系电话: 13800138000',
+      created_at: '2025-01-22 14:00:00',
+      updated_at: '2025-01-22 14:35:00'
+    },
+    {
+      id: 'task002',
+      order_id: 'ORD20250122002',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区海岸城' },
+      delivery_address: { address: '深圳市南山区欢乐颂广场' },
+      distance: 3.5,
+      estimated_time: 12,
+      delivery_fee: 8.0,
+      status: 4, // 已完成
+      pickup_time: '2025-01-22 13:00:00',
+      delivered_time: '2025-01-22 13:15:00',
+      delivery_code: 'DEL002',
+      remark: '',
+      created_at: '2025-01-22 12:45:00',
+      updated_at: '2025-01-22 13:15:00'
+    },
+    {
+      id: 'task003',
+      order_id: 'ORD20250122003',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区世界之窗' },
+      delivery_address: { address: '深圳市南山区欢乐谷' },
+      distance: 2.1,
+      estimated_time: 8,
+      delivery_fee: 6.5,
+      status: 1, // 待接单
+      pickup_time: null,
+      delivered_time: null,
+      delivery_code: 'DEL003',
+      remark: '',
+      created_at: '2025-01-22 11:15:00',
+      updated_at: '2025-01-22 11:15:00'
+    }
+  ]
+
+  const foundTask = mockTasks.find(t => t.id === taskId)
+  if (foundTask) {
+    task.value = foundTask
+  } else {
+    uni.showToast({
+      title: '未找到该任务',
+      icon: 'none'
+    })
+  }
+}
+
+function getTaskStatusText(status: number): string {
+  const statusMap = {
+    1: '待接单',
+    2: '已接单',
+    3: '配送中',
+    4: '已完成',
+    5: '已取消'
+  }
+  return statusMap[status] || '未知'
+}
+
+function getAddressText(address: UTSJSONObject): string {
+  return address['address'] as string || '地址信息'
+}
+
+function formatTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const hours = Math.floor(diff / (1000 * 60 * 60))
+  
+  if (hours < 1) {
+    return '刚刚'
+  } else if (hours < 24) {
+    return `${hours}小时前`
+  } else {
+    return `${Math.floor(hours / 24)}天前`
+  }
+}
+
+function contactCustomer() {
+  uni.showActionSheet({
+    itemList: ['拨打电话', '发送短信'],
+    success: (res) => {
+      if (res.tapIndex === 0) {
+        uni.makePhoneCall({
+          phoneNumber: '13800138000'
+        })
+      }
+    }
+  })
+}
+
+function completeTask() {
+  if (task.value?.status !== 3) {
+    uni.showToast({
+      title: '当前任务不是“配送中”状态',
+      icon: 'none'
+    })
+    return
+  }
+
+  // 模拟完成配送
+  task.value.status = 4
+  uni.showToast({
+    title: '任务已完成',
+    icon: 'success'
+  })
+}
+
+// 返回上一页
+function goBack() {
+  uni.navigateBack()
+}
+
+// 如果你希望在左上角也返回主页（可选）
+function goBackToHome() {
+  uni.reLaunch({
+    url: '/pages/mall/delivery/index'
+  })
+}
+</script>
+
+<style scoped>
+.task-detail-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20rpx 30rpx;
+}
+
+/* 导航栏样式 */
+.page-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  min-height: 80rpx;
+}
+
+.nav-left {
+  position: absolute;
+  top: 20rpx;
+  left: 30rpx;
+  display: flex;
+  flex-direction: column;
+  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;
+  margin-bottom: 5rpx;
+}
+
+.nav-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.nav-right {
+  width: 1rpx;
+  height: 1rpx;
+}
+
+/* 任务详情卡片 */
+.task-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  border-left: 6rpx solid #74b9ff;
+  margin-top: 20rpx;
+}
+
+.task-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.task-id {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.task-status {
+  font-size: 22rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 20rpx;
+  font-weight: 500;
+  color: white;
+}
+
+.status-1 {
+  background: #ffeb3b;
+  color: #333;
+}
+
+.status-3 {
+  background: #2196f3;
+  color: white;
+}
+
+.status-4 {
+  background: #4caf50;
+  color: white;
+}
+
+.task-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+  padding: 15rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 24rpx;
+  color: #666;
+}
+
+.info-label {
+  font-weight: 500;
+  min-width: 100rpx;
+}
+
+.info-value {
+  flex: 1;
+  word-break: break-all;
+}
+
+.task-actions {
+  display: flex;
+  gap: 20rpx;
+  margin-top: 20rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  border: none;
+  font-weight: bold;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+}
+
+.action-btn:hover {
+  background-color: #45a049; /* 按钮悬停效果 */
+}
+
+.action-btn:active {
+  background-color: #3d8b40; /* 按钮点击效果 */
+}
+
+.action-btn.primary {
+  background-color: #4CAF50;
+  color: #fff;
+}
+
+/* 任务备注 */
+.task-remark {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  margin-top: 20rpx;
+}
+
+.remark-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.remark-text {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
+/* 联系客户按钮 */
+.contact-client {
+  margin-top: 20rpx;
+}
+
+.contact-btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: #f0f0f0;
+  color: #333;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.contact-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.contact-btn:active {
+  background-color: #d0d0d0;
+}
+
+/* 查看详情按钮 */
+.view-detail {
+  margin-top: 20rpx;
+}
+
+.detail-btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.detail-btn:hover {
+  background-color: #45a049;
+}
+
+.detail-btn:active {
+  background-color: #3d8b40;
+}
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/tasks.uvue b/pages/mall/delivery/tasks.uvue
new file mode 100644
index 00000000..cbeb10e3
--- /dev/null
+++ b/pages/mall/delivery/tasks.uvue
@@ -0,0 +1,433 @@
+<template>
+  <view class="tasks-container">
+    <!-- 顶部导航栏 -->
+    <view class="page-header">
+      <!-- 左上角：返回主页按钮 -->
+      <view class="nav-left" @click="goBackToHome">
+        <text class="nav-icon">←</text>
+        <text class="nav-title">返回</text>
+      </view>
+
+      <!-- 页面标题居中 -->
+      <text class="page-title">{{ getTitle() }}</text>
+
+      <!-- 右上角留空 -->
+      <view class="nav-right"></view>
+    </view>
+
+    <!-- 任务列表 -->
+    <view class="tasks-list">
+      <view v-if="taskList.length > 0" class="task-item" v-for="task in taskList" :key="task.id" @click="viewTaskDetail(task.id)">
+        <view class="task-header">
+          <text class="task-id">订单: {{ task.order_id.slice(-6) }}</text>
+          <text class="task-status" :class="'status-' + task.status">{{ getTaskStatusText(task.status) }}</text>
+        </view>
+        <view class="task-info">
+          <text class="info-item">取货: {{ getAddressText(task.pickup_address) }}</text>
+          <text class="info-item">距离: {{ task.distance }}km</text>
+        </view>
+        <view class="task-actions">
+          <button class="action-btn" @click.stop="contactCustomer(task)">联系客户</button>
+          <button class="action-btn primary" @click.stop="viewTaskDetail(task.id)">查看详情</button>
+        </view>
+      </view>
+
+      <!-- 无数据时显示 -->
+      <view v-else class="no-data">
+        <text class="no-data-text">暂无{{ getTitle() }}任务</text>
+      </view>
+    </view>
+
+    <!-- 加载更多按钮 -->
+    <view v-if="hasMore" class="load-more">
+      <button @click="loadMoreTasks" class="load-more-btn">加载更多</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted, computed } from 'vue'
+import type { DeliveryTaskType } from '@/types/mall-types'
+
+// 响应式数据
+const taskList = ref([] as Array<DeliveryTaskType>)
+const currentPage = ref(1)
+const pageSize = ref(10)
+const hasMore = ref(true)
+const currentType = ref('all') // 默认全部任务
+
+// 生命周期
+onMounted(() => {
+  // 获取 URL 参数
+  const query = uni.getLaunchOptionsSync().query
+  currentType.value = query.type || 'all'
+  
+  loadTasks()
+})
+
+// 方法
+function loadTasks() {
+  // 模拟加载任务数据
+  const mockTasks = [
+    {
+      id: 'task001',
+      order_id: 'ORD20250122001',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区科技园南区深圳湾科技生态园' },
+      delivery_address: { address: '深圳市南山区蛇口海上世界广场' },
+      distance: 8.2,
+      estimated_time: 25,
+      delivery_fee: 12.0,
+      status: 3, // 配送中
+      pickup_time: '2025-01-22 14:30:00',
+      delivered_time: null,
+      delivery_code: 'DEL001',
+      remark: '联系电话: 13800138000',
+      created_at: '2025-01-22 14:00:00',
+      updated_at: '2025-01-22 14:35:00'
+    },
+    {
+      id: 'task002',
+      order_id: 'ORD20250122002',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区海岸城' },
+      delivery_address: { address: '深圳市南山区欢乐颂广场' },
+      distance: 3.5,
+      estimated_time: 12,
+      delivery_fee: 8.0,
+      status: 4, // 已完成
+      pickup_time: '2025-01-22 13:00:00',
+      delivered_time: '2025-01-22 13:15:00',
+      delivery_code: 'DEL002',
+      remark: '',
+      created_at: '2025-01-22 12:45:00',
+      updated_at: '2025-01-22 13:15:00'
+    },
+    {
+      id: 'task003',
+      order_id: 'ORD20250122003',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区世界之窗' },
+      delivery_address: { address: '深圳市南山区欢乐谷' },
+      distance: 2.1,
+      estimated_time: 8,
+      delivery_fee: 6.5,
+      status: 4, // 已完成
+      pickup_time: '2025-01-22 11:30:00',
+      delivered_time: '2025-01-22 11:40:00',
+      delivery_code: 'DEL003',
+      remark: '',
+      created_at: '2025-01-22 11:15:00',
+      updated_at: '2025-01-22 11:40:00'
+    },
+    {
+      id: 'task004',
+      order_id: 'ORD20250122004',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区万象天地' },
+      delivery_address: { address: '深圳市南山区深圳湾体育中心' },
+      distance: 5.8,
+      estimated_time: 18,
+      delivery_fee: 9.5,
+      status: 4, // 已完成
+      pickup_time: '2025-01-22 10:00:00',
+      delivered_time: '2025-01-22 10:20:00',
+      delivery_code: 'DEL004',
+      remark: '',
+      created_at: '2025-01-22 09:45:00',
+      updated_at: '2025-01-22 10:20:00'
+    },
+    {
+      id: 'task005',
+      order_id: 'ORD20250122005',
+      driver_id: 'driver001',
+      pickup_address: { address: '深圳市南山区科技园' },
+      delivery_address: { address: '深圳市南山区腾讯大厦' },
+      distance: 1.5,
+      estimated_time: 5,
+      delivery_fee: 5.0,
+      status: 1, // 待接单
+      pickup_time: null,
+      delivered_time: null,
+      delivery_code: 'DEL005',
+      remark: '',
+      created_at: '2025-01-22 09:00:00',
+      updated_at: '2025-01-22 09:00:00'
+    }
+  ]
+
+  // 根据 type 筛选数据
+  let filteredTasks = mockTasks
+  
+  if (currentType.value === 'pending') {
+    filteredTasks = mockTasks.filter(task => task.status === 1)
+  } else if (currentType.value === 'ongoing') {
+    filteredTasks = mockTasks.filter(task => task.status === 3)
+  } else if (currentType.value === 'completed') {
+    filteredTasks = mockTasks.filter(task => task.status === 4)
+  }
+
+  // 分页
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  const newTasks = filteredTasks.slice(start, end)
+
+  taskList.value.push(...newTasks)
+  hasMore.value = newTasks.length === pageSize.value
+}
+
+function loadMoreTasks() {
+  currentPage.value++
+  loadTasks()
+}
+
+function getTitle(): string {
+  switch (currentType.value) {
+    case 'all':
+      return '全部任务'
+    case 'pending':
+      return '待接单'
+    case 'ongoing':
+      return '配送中'
+    case 'completed':
+      return '已完成'
+    default:
+      return '任务列表'
+  }
+}
+
+function getTaskStatusText(status: number): string {
+  const statusMap = {
+    1: '待接单',
+    2: '已接单',
+    3: '配送中',
+    4: '已完成',
+    5: '已取消'
+  }
+  return statusMap[status] || '未知'
+}
+
+function getAddressText(address: UTSJSONObject): string {
+  return address['address'] as string || '地址信息'
+}
+
+function contactCustomer(task: DeliveryTaskType) {
+  uni.showActionSheet({
+    itemList: ['拨打电话', '发送短信'],
+    success: (res) => {
+      if (res.tapIndex === 0) {
+        uni.makePhoneCall({
+          phoneNumber: '13800138000'
+        })
+      }
+    }
+  })
+}
+
+function viewTaskDetail(taskId: string) {
+  uni.navigateTo({
+    url: `/pages/mall/delivery/task-detail?id=${taskId}`
+  })
+}
+
+// 返回主页
+function goBackToHome() {
+  uni.reLaunch({
+    url: '/pages/mall/delivery/index'
+  })
+}
+</script>
+
+<style scoped>
+.tasks-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20rpx 30rpx;
+}
+
+/* 导航栏样式 */
+.page-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  position: relative;
+  min-height: 80rpx;
+}
+
+.nav-left {
+  position: absolute;
+  top: 20rpx;
+  left: 30rpx;
+  display: flex;
+  flex-direction: column;
+  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;
+  margin-bottom: 5rpx;
+}
+
+.nav-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  text-align: center;
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.nav-right {
+  width: 1rpx;
+  height: 1rpx;
+}
+
+/* 任务列表 */
+.tasks-list {
+  margin-top: 20rpx;
+}
+
+.task-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  border-left: 6rpx solid #74b9ff;
+  margin-bottom: 20rpx;
+}
+
+.task-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15rpx;
+}
+
+.task-id {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.task-status {
+  font-size: 22rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 20rpx;
+  font-weight: 500;
+}
+
+.status-1 {
+  background: #ffeb3b;
+  color: #333;
+}
+
+.status-3 {
+  background: #2196f3;
+  color: white;
+}
+
+.status-4 {
+  background: #4caf50;
+  color: white;
+}
+
+.task-info {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+  padding-bottom: 10rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.info-item {
+  flex: 1 1 45%;
+  min-width: 120rpx;
+  word-break: break-all;
+}
+
+.task-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  border: none;
+  font-weight: bold;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+}
+
+.action-btn:hover {
+  background-color: #45a049; /* 按钮悬停效果 */
+}
+
+.action-btn:active {
+  background-color: #3d8b40; /* 按钮点击效果 */
+}
+
+.no-data {
+  text-align: center;
+  padding: 80rpx 30rpx;
+  border-radius: 16rpx;
+  background-color: #fff;
+}
+
+.no-data-text {
+  font-size: 32rpx;
+  color: #999;
+  margin-bottom: 15rpx;
+}
+
+.load-more {
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.load-more-btn {
+  background-color: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  padding: 20rpx 40rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.load-more-btn:hover {
+  background-color: #45a049;
+}
+
+.load-more-btn:active {
+  background-color: #3d8b40;
+}
+</style>
\ No newline at end of file
diff --git a/pages/mall/delivery/vehicle.uvue b/pages/mall/delivery/vehicle.uvue
new file mode 100644
index 00000000..463f845b
--- /dev/null
+++ b/pages/mall/delivery/vehicle.uvue
@@ -0,0 +1,273 @@
+<!-- 配送端 - 车辆管理 -->
+<template>
+  <view class="vehicle-container">
+    <!-- 头部标题 -->
+    <view class="page-header">
+      <text class="page-title">车辆管理</text>
+    </view>
+
+    <!-- 主要内容区域 -->
+    <view class="content-wrapper">
+      <!-- 车辆列表 -->
+      <view v-if="vehicleList.length > 0" class="vehicle-list">
+        <view v-for="vehicle in vehicleList" :key="vehicle.id" class="vehicle-item">
+          <view class="vehicle-info">
+            <text class="vehicle-icon">🚗</text>
+            <view class="info-details">
+              <text class="info-label">车牌号: {{ vehicle.plate_number }}</text>
+              <text class="info-label">车型: {{ vehicle.vehicle_type_name }}</text>
+              <text class="info-label">状态: {{ getVehicleStatusText(vehicle.status) }}</text>
+            </view>
+          </view>
+          <view class="vehicle-actions">
+            <button class="action-btn primary" @click="editVehicle(vehicle.id)">编辑</button>
+            <button class="action-btn secondary" @click="deleteVehicle(vehicle.id)">删除</button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 无数据时显示 -->
+      <view v-else class="no-data">
+        <text class="no-data-text">暂无车辆信息</text>
+        <button class="add-btn" @click="addVehicle">添加车辆</button>
+      </view>
+
+      <!-- 添加车辆按钮（如果列表为空） -->
+      <view v-if="vehicleList.length > 0" class="add-button-section">
+        <button class="add-btn" @click="addVehicle">添加新车辆</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+import type { DeliveryDriverType } from '@/types/mall-types.uts'
+
+export default {
+  data() {
+    return {
+      // 模拟车辆数据
+      vehicleList: [] as Array<VehicleType>
+    }
+  },
+
+  onLoad() {
+    this.loadVehicles()
+  },
+
+  methods: {
+    // 加载车辆信息
+    loadVehicles() {
+      // TODO: 调用API获取车辆列表
+      this.vehicleList = [
+        {
+          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'
+        },
+        {
+          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'
+        },
+        {
+          id: '3',
+          plate_number: '粤C11223',
+          vehicle_type: 3,
+          vehicle_type_name: '汽车',
+          status: 3, // 停用
+          driver_id: 'driver001',
+          created_at: '2024-01-03',
+          updated_at: '2024-12-03'
+        }
+      ]
+    },
+
+    // 获取车辆状态文本
+    getVehicleStatusText(status: number): string {
+      const statusMap = {
+        1: '正常',
+        2: '维修中',
+        3: '停用'
+      }
+      return statusMap[status] || '未知状态'
+    },
+
+    // 编辑车辆
+    editVehicle(vehicleId: string) {
+      uni.navigateTo({
+        url: `/pages/mall/delivery/vehicle-edit?id=${vehicleId}`
+      })
+    },
+
+    // 删除车辆
+    deleteVehicle(vehicleId: string) {
+      uni.showModal({
+        title: '确认删除',
+        content: '确定要删除该车辆吗？',
+        success: (res) => {
+          if (res.confirm) {
+            // TODO: 调用API删除车辆
+            this.vehicleList = this.vehicleList.filter(v => v.id !== vehicleId)
+            uni.showToast({
+              title: '删除成功',
+              icon: 'success'
+            })
+          }
+        }
+      })
+    },
+
+    // 添加车辆
+    addVehicle() {
+      uni.navigateTo({
+        url: '/pages/mall/delivery/vehicle-add'
+      })
+    }
+  }
+}
+
+// 定义 VehicleType 类型
+type VehicleType = {
+  id: string
+  plate_number: string
+  vehicle_type: number
+  vehicle_type_name: string
+  status: number
+  driver_id: string
+  created_at: string
+  updated_at: string
+}
+</script>
+
+<style scoped>
+.vehicle-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 20rpx 30rpx;
+}
+
+.page-header {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #e9ecef;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.page-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+}
+
+.content-wrapper {
+  margin-top: 20rpx;
+}
+
+.vehicle-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.vehicle-item {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  border-left: 6rpx solid #4CAF50;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vehicle-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.vehicle-icon {
+  font-size: 48rpx;
+  margin-right: 15rpx;
+  color: #4CAF50;
+}
+
+.info-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.info-label {
+  font-size: 24rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.vehicle-actions {
+  display: flex;
+  gap: 10rpx;
+}
+
+.action-btn {
+  padding: 20rpx;
+  border-radius: 15rpx;
+  font-size: 26rpx;
+  border: none;
+  font-weight: 500;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+}
+
+.primary {
+  background: #4CAF50;
+  color: white;
+}
+
+.secondary {
+  background: #f0f0f0;
+  color: #333;
+  border: 1rpx solid #ddd;
+}
+
+.no-data {
+  text-align: center;
+  padding: 80rpx 30rpx;
+  border-radius: 16rpx;
+  background-color: #fff;
+}
+
+.no-data-text {
+  font-size: 32rpx;
+  color: #999;
+  margin-bottom: 15rpx;
+}
+
+.add-btn {
+  background-color: #4CAF50;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  padding: 20rpx 40rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  margin-top: 20rpx;
+}
+
+.add-button-section {
+  text-align: center;
+  margin-top: 20rpx;
+}
+</style>
\ No newline at end of file