huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新页面和修改对应逻辑

Browse Source
This commit is contained in:
not-like-juvenile
2026-01-26 17:12:37 +08:00
parent b1c845d571
commit 1c83f29f7d
10 changed files with 1297 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages.json
View File

@@ -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": {

191
pages/mall/delivery/delivery.md Normal file
View File

@@ -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` 模块是一个完整的配送员工作系统，涵盖了：
- **个人管理**（资料、设置）
- **任务处理**（接单、配送、完成）
- **数据统计**（收入、评价、历史）
- **车辆管理**
结构清晰、功能完整，适合用于实际配送平台开发。
---

16
pages/mall/delivery/earnings.uvue
View File

@@ -3,10 +3,10 @@
<!-- 顶部导航栏 -->
<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>
@@ -308,11 +308,9 @@ export default {
}
},
// 返回主页
// 返回到来源页面
goBackToHome() {
uni.reLaunch({
url: '/pages/mall/delivery/index'
})
uni.navigateBack()
}
}
}
@@ -336,7 +334,7 @@ type EarningType = {
}
</script>
<style>
<style scoped>
/* 全局样式 */
.earnings-container {
background-color: #f5f5f5;

44
pages/mall/delivery/index.uvue
View File

@@ -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;

290
pages/mall/delivery/order-detail.uvue
View File

@@ -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 === 4" class="action-btn navigate" @click="startNavigation">开始导航</button>
<button v-if="order.status === 4" class="action-btn complete" @click="completeDelivery">完成配送</button>
<!-- 只在已接单状态且订单未完成时显示订单操作按钮 -->
<button v-if="order.status === 2 && order.status < 5" class="action-btn accept" @click="acceptOrder">接受订单</button>
<button v-if="order.status === 2 && order.status < 5" class="action-btn reject" @click="rejectOrder">拒绝订单</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>
import { OrderType, OrderItemType, MerchantType } from '@/types/mall-types.uts'
<script lang="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: '',
delivery_time: ''
pickup_time: '2024-01-15 15:00:00',
delivery_time: '2024-01-15 15:25:00'
}
},
getStatusDesc(): string {
const statusDescs = [
'',
'',
'',
'等待配送员接单',
'配送员正在前往取货',
'订单已送达完成'
]
return statusDescs[this.order.status] || ''
// 根据 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 '订单已接取'
} else {
return '订单状态未知'
}
},
getDeliveryAddress(): any {
@@ -293,96 +334,113 @@ export default {
},
confirmPickup() {
uni.showModal({
title: '确认取货',
content: '确认已从商家处取到商品？',
success: (res) => {
if (res.confirm) {
this.deliveryInfo.pickup_time = new Date().toISOString()
uni.showToast({
title: '取货确认成功',
icon: 'success'
})
// 仅在订单未完成时执行
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: '取货确认成功',
icon: 'success'
})
}
}
}
})
})
}
},
confirmDelivery() {
uni.showModal({
title: '确认送达',
content: '确认商品已送达到顾客手中？',
success: (res) => {
if (res.confirm) {
this.order.status = 5
this.deliveryInfo.delivery_time = new Date().toISOString()
uni.showToast({
title: '送达确认成功',
icon: 'success'
})
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '确认送达',
content: '确认商品已送达到顾客手中？',
success: (res) => {
if (res.confirm) {
this.order.status = 5 // 更新状态为已完成
this.deliveryInfo.delivery_time = new Date().toISOString()
uni.showToast({
title: '送达确认成功',
icon: 'success'
})
}
}
}
})
})
}
},
acceptOrder() {
uni.showModal({
title: '接受订单',
content: '确定接受这个配送订单吗？',
success: (res) => {
if (res.confirm) {
this.order.status = 4
uni.showToast({
title: '订单接受成功',
icon: 'success'
})
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '接受订单',
content: '确定接受这个配送订单吗？',
success: (res) => {
if (res.confirm) {
this.order.status = 3 // 更新状态为取货中
uni.showToast({
title: '订单接受成功',
icon: 'success'
})
}
}
}
})
})
}
},
rejectOrder() {
uni.showModal({
title: '拒绝订单',
content: '确定拒绝这个配送订单吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '订单已拒绝',
icon: 'success'
})
uni.navigateBack()
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '拒绝订单',
content: '确定拒绝这个配送订单吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '订单已拒绝',
icon: 'success'
})
uni.navigateBack()
}
}
}
})
})
}
},
startNavigation() {
// 开启导航功能
uni.showToast({
title: '正在启动导航',
icon: 'loading'
})
// 模拟调用地图导航
setTimeout(() => {
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showToast({
title: '导航已启动',
icon: 'success'
title: '正在启动导航',
icon: 'loading'
})
}, 1000)
setTimeout(() => {
uni.showToast({
title: '导航已启动',
icon: 'success'
})
}, 1000)
}
},
completeDelivery() {
if (!this.deliveryNote.trim()) {
uni.showToast({
title: '请填写配送备注',
icon: 'none'
})
return
// 仅在订单未完成时执行
if (this.order.status < 5) {
if (!this.deliveryNote.trim()) {
uni.showToast({
title: '请填写配送备注',
icon: 'none'
})
return
}
this.confirmDelivery()
}
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;
@@ -771,4 +869,4 @@ export default {
background-color: #ffa726;
color: #fff;
}
</style>
</style>

65
pages/mall/delivery/order-history.uvue
View File

@@ -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 5: return 'status-delivering' // 这里我们用 '已完成' 的样式
case 4: return 'status-picked' // 已取货
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}`
})
},
@@ -298,12 +347,12 @@ export default {
color: #F57C00;
}
.status-picked {
.status-picked {
background-color: #E8F5E8;
color: #388E3C;
}
.status-delivering {
.status-delivered {
background-color: #E8F5E8;
color: #388E3C;
}

4
pages/mall/delivery/tasks.uvue
View File

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

320
pages/mall/delivery/vehicle-add.uvue Normal file
View File

@@ -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>

379
pages/mall/delivery/vehicle-edit.uvue Normal file
View File

@@ -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>

131
pages/mall/delivery/vehicle.uvue
View File

@@ -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,42 +60,64 @@ export default {
this.loadVehicles()
},
onShow() {
// 页面每次显示时都检查是否有新添加的车辆
this.loadVehicles()
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
// 加载车辆信息
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'
}
]
// 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',
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'
}
]
}
},
// 获取车辆状态文本
@@ -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 {