Merge pull request 'ysj-delivery' (#11) from ysj-delivery into main
配送端进行合并
This commit is contained in:
84
pages.json
84
pages.json
@@ -77,6 +77,90 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/order-history",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史记录",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/earnings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史记录",
|
||||
"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/vehicle-add",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加车辆",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/vehicle-edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加车辆",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/settings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/order-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情页",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/delivery/profile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "配送个人中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/admin/index",
|
||||
"style": {
|
||||
|
||||
191
pages/mall/delivery/delivery.md
Normal file
191
pages/mall/delivery/delivery.md
Normal 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` 模块是一个完整的配送员工作系统，涵盖了：
|
||||
|
||||
- **个人管理**（资料、设置）
|
||||
- **任务处理**（接单、配送、完成）
|
||||
- **数据统计**（收入、评价、历史）
|
||||
- **车辆管理**
|
||||
|
||||
结构清晰、功能完整，适合用于实际配送平台开发。
|
||||
|
||||
---
|
||||
542
pages/mall/delivery/earnings.uvue
Normal file
542
pages/mall/delivery/earnings.uvue
Normal file
@@ -0,0 +1,542 @@
|
||||
<template>
|
||||
<view class="earnings-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">收入明细</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>
|
||||
|
||||
<!-- 订单基础信息 -->
|
||||
<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>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="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,
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadAllEarnings()
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasMore(): boolean {
|
||||
return this.allOrderEarnings.length > this.orderEarningsList.length
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载所有收入明细并按订单聚合
|
||||
loadAllEarnings() {
|
||||
const rawEarnings = [
|
||||
// 配送费
|
||||
{
|
||||
id: '1',
|
||||
date: '2025-01-08T14:30:00Z',
|
||||
amount: 8.5,
|
||||
source: 'delivery_fee',
|
||||
order_no: 'D202501081234',
|
||||
distance: 12.5
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
|
||||
// 按订单号聚合数据
|
||||
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()
|
||||
},
|
||||
|
||||
// 计算总统计数据
|
||||
calculateTotalStats() {
|
||||
let totalEarnings = 0
|
||||
let totalUserTips = 0
|
||||
let totalMerchantTips = 0
|
||||
|
||||
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
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
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)}小时前`
|
||||
}
|
||||
},
|
||||
|
||||
// 返回到来源页面
|
||||
goBackToHome() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定义聚合后的订单收入类型
|
||||
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 scoped>
|
||||
/* 全局样式 */
|
||||
.earnings-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;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 28rpx;
|
||||
color: #000000; /* 红色 */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333; /* 黑色 */
|
||||
text-align: center;
|
||||
margin-top: 20rpx; /* 与 nav-left 保持一定距离 */
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
/* 为了保持左右对齐，右侧需要一个占位元素 */
|
||||
width: 1rpx;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.order-earnings-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;
|
||||
}
|
||||
|
||||
.order-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.order-total-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-total-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.order-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;
|
||||
}
|
||||
|
||||
.earning-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.detail-type {
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.detail-amount {
|
||||
font-size: 24rpx;
|
||||
color: #4CAF50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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; /* 按钮点击效果 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -208,7 +210,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isOnline: false,
|
||||
isOnline: true,
|
||||
|
||||
driverInfo: {
|
||||
id: '',
|
||||
@@ -279,7 +281,7 @@
|
||||
this.currentTask = {
|
||||
id: '1',
|
||||
order_no: 'D202501081234',
|
||||
status: 2,
|
||||
status: 2, // 👈 设置为“已接取”，以便测试“开始取货”按钮
|
||||
pickup_address: {
|
||||
detail: '华强北商业区华强电子世界2楼A205',
|
||||
area: '华强北'
|
||||
@@ -429,6 +431,9 @@
|
||||
// 任务操作方法
|
||||
acceptTask() {
|
||||
// TODO: 调用API接受任务
|
||||
if (this.currentTask) {
|
||||
this.currentTask.status = 2 // 更新状态为“已接取”
|
||||
}
|
||||
uni.showToast({
|
||||
title: '任务已接受',
|
||||
icon: 'success'
|
||||
@@ -437,6 +442,9 @@
|
||||
|
||||
startPickup() {
|
||||
// TODO: 调用API开始取货
|
||||
if (this.currentTask) {
|
||||
this.currentTask.status = 3 // 更新状态为“取货中”
|
||||
}
|
||||
uni.showToast({
|
||||
title: '开始取货',
|
||||
icon: 'success'
|
||||
@@ -445,6 +453,9 @@
|
||||
|
||||
confirmPickup() {
|
||||
// TODO: 调用API确认取货
|
||||
if (this.currentTask) {
|
||||
this.currentTask.status = 4 // 更新状态为“已取货”
|
||||
}
|
||||
uni.showToast({
|
||||
title: '取货完成',
|
||||
icon: 'success'
|
||||
@@ -453,14 +464,38 @@
|
||||
|
||||
startDelivery() {
|
||||
// TODO: 调用API开始配送
|
||||
if (this.currentTask) {
|
||||
this.currentTask.status = 5 // 更新状态为“配送中”
|
||||
}
|
||||
uni.showToast({
|
||||
title: '开始配送',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
// 显示确认送达弹框
|
||||
showConfirmDeliveryDialog() {
|
||||
uni.showModal({
|
||||
title: '确认送达',
|
||||
content: '确认商品已送到顾客手中？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.confirmDelivery()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 确认送达
|
||||
confirmDelivery() {
|
||||
// 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'
|
||||
@@ -485,6 +520,23 @@
|
||||
})
|
||||
},
|
||||
|
||||
// 查看订单详情（跳转到 order-detail 页面）
|
||||
viewOrderDetail(orderId?: string,status?:number) {
|
||||
if (orderId && status) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${orderId}&status=${status}` // ✅ 强制为 1
|
||||
})
|
||||
} else if (this.currentTask) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${this.currentTask.id}&status=${this.currentTask.status}`
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${orderId}&status=1` // ✅ 强制为 1
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 订单操作方法
|
||||
acceptOrder(orderId: string) {
|
||||
// TODO: 调用API接受订单
|
||||
@@ -496,12 +548,6 @@
|
||||
this.loadAvailableOrders()
|
||||
},
|
||||
|
||||
viewOrderDetail(orderId: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${orderId}`
|
||||
})
|
||||
},
|
||||
|
||||
// 导航方法
|
||||
goToOrderHistory() {
|
||||
uni.navigateTo({
|
||||
@@ -531,19 +577,22 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* ... 保持原有 style 部分不变 ... */
|
||||
.delivery-container {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
border-bottom: 1rpx solid #e9ecef;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.driver-info {
|
||||
@@ -556,11 +605,13 @@
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
border: 2rpx solid #dee2e6;
|
||||
}
|
||||
|
||||
.driver-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.driver-name {
|
||||
@@ -574,6 +625,7 @@
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@@ -588,40 +640,47 @@
|
||||
|
||||
.status-switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* 今日统计 */
|
||||
.stats-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15rpx;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 15rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
@@ -629,33 +688,47 @@
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 当前任务 */
|
||||
.current-task-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border: 1rpx solid #e9ecef;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
padding-bottom: 15rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.task-id {
|
||||
@@ -666,8 +739,9 @@
|
||||
|
||||
.task-status {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.task-accepted {
|
||||
@@ -693,12 +767,15 @@
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15rpx;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx dashed #e9ecef;
|
||||
}
|
||||
|
||||
.address-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-top: 5rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
@@ -711,17 +788,20 @@
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 8rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.address-line {
|
||||
@@ -738,17 +818,25 @@
|
||||
padding: 15rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
gap: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@@ -757,6 +845,9 @@
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.primary {
|
||||
@@ -767,8 +858,10 @@
|
||||
.secondary {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
border: 1rpx solid #ddd;
|
||||
}
|
||||
|
||||
/* 可接取订单 */
|
||||
.available-orders-section {
|
||||
margin: 20rpx;
|
||||
}
|
||||
@@ -783,13 +876,18 @@
|
||||
.refresh-btn {
|
||||
font-size: 26rpx;
|
||||
color: #4CAF50;
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: #e8f5e8;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-orders {
|
||||
background-color: #fff;
|
||||
padding: 80rpx 30rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
@@ -808,6 +906,8 @@
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
border: 1rpx solid #e9ecef;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
@@ -815,6 +915,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
padding-bottom: 15rpx;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
@@ -833,6 +935,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.route-item {
|
||||
@@ -844,11 +948,13 @@
|
||||
.route-icon {
|
||||
font-size: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.route-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.route-arrow {
|
||||
@@ -861,16 +967,26 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
gap: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
@@ -879,6 +995,9 @@
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.accept {
|
||||
@@ -889,35 +1008,51 @@
|
||||
.detail {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
border: 1rpx solid #ddd;
|
||||
}
|
||||
|
||||
/* 历史记录快捷入口 */
|
||||
.quick-actions-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
min-width: 120rpx;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
background-color: #e8f5e8;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 15rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,35 @@
|
||||
<!-- 配送端 - 订单详情页 -->
|
||||
<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 >= 3 }">
|
||||
<view class="progress-item" :class="{ active: order.status >= 1 }">
|
||||
<view class="progress-dot"></view>
|
||||
<text class="progress-text">待接单</text>
|
||||
</view>
|
||||
<view class="progress-line" :class="{ active: order.status >= 2 }"></view>
|
||||
<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>
|
||||
</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 +51,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 +64,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 +124,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 +159,28 @@
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<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 === 1" class="action-btn accept" @click="acceptOrder">接受订单</button>
|
||||
<button v-if="order.status === 1" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
|
||||
|
||||
<!-- 只在已接单状态且订单未完成时显示“前往取货”和“正在取货”按钮 -->
|
||||
<button v-if="order.status === 2" class="action-btn navigate" @click="startNavigation">前往取货</button>
|
||||
<button v-if="order.status === 2" class="action-btn complete" @click="confirmArrivedAtPickup">正在取货</button>
|
||||
|
||||
<!-- 只在取货中状态且订单未完成时显示“确认取货”按钮 -->
|
||||
<button v-if="order.status === 3" class="action-btn complete" @click="confirmPickup">确认取货</button>
|
||||
|
||||
<!-- 只在已取货状态且订单未完成时显示“确认送达”按钮 -->
|
||||
<button v-if="order.status === 4" class="action-btn complete" @click="confirmDelivery">确认送达</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 +198,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 +233,38 @@ 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 +312,32 @@ 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 if (this.order.status === 1) {
|
||||
return '等待配送员接单'
|
||||
} else {
|
||||
return '订单状态未知'
|
||||
}
|
||||
},
|
||||
|
||||
getDeliveryAddress(): any {
|
||||
@@ -292,12 +349,36 @@ export default {
|
||||
return Object.keys(specifications).map(key => `${key}: ${specifications[key]}`).join(', ')
|
||||
},
|
||||
|
||||
// ✅ 新增：点击“正在取货”按钮
|
||||
confirmArrivedAtPickup() {
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showModal({
|
||||
title: '正在取货',
|
||||
content: '确认已到达商家，开始取货？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 3 // 更新状态为取货中
|
||||
uni.showToast({
|
||||
title: '已进入取货流程',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ✅ 保留：点击“确认取货”按钮
|
||||
confirmPickup() {
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showModal({
|
||||
title: '确认取货',
|
||||
content: '确认已从商家处取到商品？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 4 // 更新状态为已取货
|
||||
this.deliveryInfo.pickup_time = new Date().toISOString()
|
||||
uni.showToast({
|
||||
title: '取货确认成功',
|
||||
@@ -306,15 +387,19 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ✅ 保留：点击“确认送达”按钮
|
||||
confirmDelivery() {
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showModal({
|
||||
title: '确认送达',
|
||||
content: '确认商品已送达到顾客手中？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 5
|
||||
this.order.status = 5 // 更新状态为已完成
|
||||
this.deliveryInfo.delivery_time = new Date().toISOString()
|
||||
uni.showToast({
|
||||
title: '送达确认成功',
|
||||
@@ -323,15 +408,19 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ✅ 保留：接受订单
|
||||
acceptOrder() {
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showModal({
|
||||
title: '接受订单',
|
||||
content: '确定接受这个配送订单吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 4
|
||||
this.order.status = 2 // 更新状态为已接单
|
||||
uni.showToast({
|
||||
title: '订单接受成功',
|
||||
icon: 'success'
|
||||
@@ -339,9 +428,13 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ✅ 保留：拒绝订单
|
||||
rejectOrder() {
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showModal({
|
||||
title: '拒绝订单',
|
||||
content: '确定拒绝这个配送订单吗？',
|
||||
@@ -355,34 +448,25 @@ export default {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// ✅ 保留：启动导航（用于“前往取货”按钮）
|
||||
startNavigation() {
|
||||
// 开启导航功能
|
||||
// 仅在订单未完成时执行
|
||||
if (this.order.status < 5) {
|
||||
uni.showToast({
|
||||
title: '正在启动导航',
|
||||
icon: 'loading'
|
||||
})
|
||||
|
||||
// 模拟调用地图导航
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '导航已启动',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
completeDelivery() {
|
||||
if (!this.deliveryNote.trim()) {
|
||||
uni.showToast({
|
||||
title: '请填写配送备注',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.confirmDelivery()
|
||||
},
|
||||
|
||||
callCustomer() {
|
||||
@@ -408,12 +492,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;
|
||||
@@ -742,14 +866,18 @@ export default {
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
flex-wrap: wrap; /* 允许按钮换行 */
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 120rpx; /* 设置最小宽度 */
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
margin: 5rpx; /* 添加外边距 */
|
||||
box-sizing: border-box; /* 确保宽高包含边距 */
|
||||
}
|
||||
|
||||
.action-btn.accept, .action-btn.complete {
|
||||
|
||||
472
pages/mall/delivery/order-history.uvue
Normal file
472
pages/mall/delivery/order-history.uvue
Normal file
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<view class="order-history-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="page-header">
|
||||
<!-- 左上角：返回主页按钮（箭头+文字 垂直排列） -->
|
||||
<view class="nav-left" @click="goBackToHome">
|
||||
<text class="nav-icon">←</text>
|
||||
</view>
|
||||
|
||||
<!-- 页面标题居中 -->
|
||||
<text class="page-title">历史订单</text>
|
||||
|
||||
<!-- 右上角留空 -->
|
||||
<view class="nav-right"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 订单列表 -->
|
||||
<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-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, order.status)">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据时显示 -->
|
||||
<view v-else class="no-data">
|
||||
<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 {
|
||||
// 模拟历史订单数据
|
||||
orderList: [] as Array<DeliveryTaskType>
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadOrderHistory()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面每次显示时都检查是否有新的已完成订单
|
||||
this.checkForNewCompletedOrder()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 检查是否有新的已完成订单
|
||||
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: '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',
|
||||
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'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
order_no: 'D202501081236',
|
||||
status: 1, // 取货中
|
||||
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'
|
||||
}
|
||||
]
|
||||
|
||||
// 检查是否有新完成的订单（在加载初始数据后）
|
||||
this.checkForNewCompletedOrder()
|
||||
},
|
||||
|
||||
// 获取订单状态样式
|
||||
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-delivered' // 已送达
|
||||
default: return 'status-default'
|
||||
}
|
||||
},
|
||||
|
||||
// 获取订单状态文本
|
||||
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, status: number) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${orderId}&status=${status}`
|
||||
})
|
||||
},
|
||||
|
||||
// 返回主页
|
||||
goBackToHome() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/mall/delivery/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-history-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 保持一定距离 */
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
/* 为了保持左右对齐，右侧需要一个占位元素 */
|
||||
width: 1rpx;
|
||||
height: 1rpx;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.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 #74b9ff;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 15rpx;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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-delivered {
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: #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;
|
||||
}
|
||||
</style>
|
||||
439
pages/mall/delivery/profile-edit.uvue
Normal file
439
pages/mall/delivery/profile-edit.uvue
Normal file
@@ -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>
|
||||
@@ -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 {
|
||||
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,7 +806,6 @@ function goToFeedback() {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
202
pages/mall/delivery/ratings.uvue
Normal file
202
pages/mall/delivery/ratings.uvue
Normal file
@@ -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>
|
||||
494
pages/mall/delivery/settings.uvue
Normal file
494
pages/mall/delivery/settings.uvue
Normal file
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<view class="settings-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="header-bar">
|
||||
<view class="nav-left" @click="goBack">
|
||||
<text class="nav-icon">←</text>
|
||||
<text class="nav-title">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 设置列表 -->
|
||||
<scroll-view class="settings-list" scroll-y="true">
|
||||
<!-- 基础设置 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">基础设置</text>
|
||||
|
||||
<view class="setting-item" @click="toggleDarkMode">
|
||||
<text class="item-label">深色模式</text>
|
||||
<switch :checked="darkModeEnabled" color="#4CAF50" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="toggleAutoUpdate">
|
||||
<text class="item-label">自动更新</text>
|
||||
<switch :checked="autoUpdateEnabled" color="#4CAF50" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="openLanguagePicker">
|
||||
<text class="item-label">语言</text>
|
||||
<text class="item-value">{{ selectedLanguage }}</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通知设置 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">通知设置</text>
|
||||
|
||||
<view class="setting-item" @click="toggleOrderNotifications">
|
||||
<text class="item-label">订单通知</text>
|
||||
<switch :checked="orderNotificationsEnabled" color="#4CAF50" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="toggleSystemNotifications">
|
||||
<text class="item-label">系统通知</text>
|
||||
<switch :checked="systemNotificationsEnabled" color="#4CAF50" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="openNotificationTimeRange">
|
||||
<text class="item-label">通知时段</text>
|
||||
<text class="item-value">{{ notificationTimeRange }}</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 隐私与安全 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">隐私与安全</text>
|
||||
|
||||
<view class="setting-item" @click="openPasswordChange">
|
||||
<text class="item-label">修改密码</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="toggleLocationSharing">
|
||||
<text class="item-label">位置共享</text>
|
||||
<switch :checked="locationSharingEnabled" color="#4CAF50" />
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="clearCache">
|
||||
<text class="item-label">清除缓存</text>
|
||||
<text class="item-value">{{ cacheSize }}</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关于与帮助 -->
|
||||
<view class="setting-section">
|
||||
<text class="section-title">关于与帮助</text>
|
||||
|
||||
<view class="setting-item" @click="openAboutPage">
|
||||
<text class="item-label">关于我们</text>
|
||||
<text class="item-value">{{ appVersion }}</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="openHelpCenter">
|
||||
<text class="item-label">帮助中心</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @click="openFeedback">
|
||||
<text class="item-label">意见反馈</text>
|
||||
<text class="item-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登出按钮 -->
|
||||
<view class="logout-section">
|
||||
<button class="logout-btn" @click="logout">退出登录</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 语言选择弹窗 -->
|
||||
<view v-if="showLanguagePicker" class="picker-overlay" @click="closeLanguagePicker">
|
||||
<view class="picker-panel" @click.stop="noop">
|
||||
<text class="picker-title">选择语言</text>
|
||||
<scroll-view scroll-y="true" class="picker-options">
|
||||
<view v-for="(lang, index) in languageOptions" :key="index"
|
||||
class="picker-option"
|
||||
:class="{ 'picker-option-selected': selectedLanguage === lang.label }"
|
||||
@click="selectLanguage(lang)">
|
||||
<text>{{ lang.label }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="picker-actions">
|
||||
<button size="mini" @click="closeLanguagePicker">取消</button>
|
||||
<button size="mini" type="primary" @click="confirmLanguageSelection">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 通知时段选择弹窗 -->
|
||||
<view v-if="showTimeRangePicker" class="picker-overlay" @click="closeTimeRangePicker">
|
||||
<view class="picker-panel" @click.stop="noop">
|
||||
<text class="picker-title">选择通知时段</text>
|
||||
<view class="time-range-picker">
|
||||
<text class="range-label">从</text>
|
||||
<picker mode="time" :value="startTime" @change="onStartTimeChange">
|
||||
<view class="time-input">{{ startTime }}</view>
|
||||
</picker>
|
||||
<text class="range-label">到</text>
|
||||
<picker mode="time" :value="endTime" @change="onEndTimeChange">
|
||||
<view class="time-input">{{ endTime }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="picker-actions">
|
||||
<button size="mini" @click="closeTimeRangePicker">取消</button>
|
||||
<button size="mini" type="primary" @click="confirmTimeRange">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
type LanguageOption = {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
darkModeEnabled: false,
|
||||
autoUpdateEnabled: true,
|
||||
orderNotificationsEnabled: true,
|
||||
systemNotificationsEnabled: true,
|
||||
locationSharingEnabled: true,
|
||||
|
||||
selectedLanguage: '简体中文',
|
||||
languageOptions: [
|
||||
{ value: 'zh-CN', label: '简体中文' },
|
||||
{ value: 'en-US', label: 'English' },
|
||||
{ value: 'ja-JP', label: '日本語' },
|
||||
{ value: 'ko-KR', label: '한국어' }
|
||||
] as Array<LanguageOption>,
|
||||
showLanguagePicker: false,
|
||||
|
||||
notificationTimeRange: '全天接收',
|
||||
startTime: '08:00',
|
||||
endTime: '22:00',
|
||||
showTimeRangePicker: false,
|
||||
|
||||
cacheSize: '15.2 MB',
|
||||
appVersion: 'v1.2.3'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
toggleDarkMode() {
|
||||
this.darkModeEnabled = !this.darkModeEnabled
|
||||
// TODO: 保存设置到本地存储或同步到服务器
|
||||
console.log('Dark mode toggled:', this.darkModeEnabled)
|
||||
},
|
||||
|
||||
toggleAutoUpdate() {
|
||||
this.autoUpdateEnabled = !this.autoUpdateEnabled
|
||||
console.log('Auto update toggled:', this.autoUpdateEnabled)
|
||||
},
|
||||
|
||||
toggleOrderNotifications() {
|
||||
this.orderNotificationsEnabled = !this.orderNotificationsEnabled
|
||||
console.log('Order notifications toggled:', this.orderNotificationsEnabled)
|
||||
},
|
||||
|
||||
toggleSystemNotifications() {
|
||||
this.systemNotificationsEnabled = !this.systemNotificationsEnabled
|
||||
console.log('System notifications toggled:', this.systemNotificationsEnabled)
|
||||
},
|
||||
|
||||
toggleLocationSharing() {
|
||||
this.locationSharingEnabled = !this.locationSharingEnabled
|
||||
console.log('Location sharing toggled:', this.locationSharingEnabled)
|
||||
},
|
||||
|
||||
openLanguagePicker() {
|
||||
this.showLanguagePicker = true
|
||||
},
|
||||
|
||||
closeLanguagePicker() {
|
||||
this.showLanguagePicker = false
|
||||
},
|
||||
|
||||
selectLanguage(lang: LanguageOption) {
|
||||
// 可以在这里高亮选中项，但确认还需点击确定
|
||||
this.selectedLanguage = lang.label
|
||||
},
|
||||
|
||||
confirmLanguageSelection() {
|
||||
// 实际应用中，这里会保存选中的语言设置
|
||||
console.log('Language confirmed:', this.selectedLanguage)
|
||||
this.closeLanguagePicker()
|
||||
// TODO: 调用API或本地存储更新语言设置
|
||||
},
|
||||
|
||||
openNotificationTimeRange() {
|
||||
this.showTimeRangePicker = true
|
||||
},
|
||||
|
||||
closeTimeRangePicker() {
|
||||
this.showTimeRangePicker = false
|
||||
},
|
||||
|
||||
onStartTimeChange(e: UniEvent<HTMLInputElement>) {
|
||||
this.startTime = e.detail.value
|
||||
},
|
||||
|
||||
onEndTimeChange(e: UniEvent<HTMLInputElement>) {
|
||||
this.endTime = e.detail.value
|
||||
},
|
||||
|
||||
confirmTimeRange() {
|
||||
this.notificationTimeRange = `${this.startTime} - ${this.endTime}`
|
||||
console.log('Time range confirmed:', this.notificationTimeRange)
|
||||
this.closeTimeRangePicker()
|
||||
},
|
||||
|
||||
openPasswordChange() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/change-password'
|
||||
})
|
||||
},
|
||||
|
||||
clearCache() {
|
||||
// TODO: 调用API或本地方法清除缓存
|
||||
uni.showModal({
|
||||
title: '清除缓存',
|
||||
content: `确定要清除 ${this.cacheSize} 的缓存吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log('Cache cleared')
|
||||
this.cacheSize = '0.0 MB'
|
||||
uni.showToast({ title: '缓存已清除', icon: 'success' })
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
openAboutPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/about'
|
||||
})
|
||||
},
|
||||
|
||||
openHelpCenter() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/help-center'
|
||||
})
|
||||
},
|
||||
|
||||
openFeedback() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/feedback'
|
||||
})
|
||||
},
|
||||
|
||||
logout() {
|
||||
uni.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出当前账号吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// TODO: 调用登出API
|
||||
console.log('Logging out...')
|
||||
uni.reLaunch({
|
||||
url: '/pages/user/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
noop() {
|
||||
// 阻止事件冒泡的空函数
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.settings-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;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.setting-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding: 20rpx 0 10rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.logout-section {
|
||||
margin: 40rpx 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #f44336;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 弹窗遮罩 */
|
||||
.picker-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;
|
||||
}
|
||||
|
||||
.picker-panel {
|
||||
background-color: #fff;
|
||||
width: 80%;
|
||||
max-width: 600rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.picker-options {
|
||||
max-height: 400rpx;
|
||||
}
|
||||
|
||||
.picker-option {
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
}
|
||||
|
||||
.picker-option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.picker-option-selected {
|
||||
background-color: #E8F5E8;
|
||||
color: #4CAF50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time-range-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.range-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
font-size: 28rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f9f9f9;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.picker-actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
</style>
|
||||
428
pages/mall/delivery/task-detail.uvue
Normal file
428
pages/mall/delivery/task-detail.uvue
Normal file
@@ -0,0 +1,428 @@
|
||||
<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)
|
||||
|
||||
// ✅ 关键：在 setup 中无法直接访问 onLoad，所以改用以下方式
|
||||
// 方案：通过 getCurrentPages() 获取当前页面参数
|
||||
function getQueryParams() {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
return currentPage.options || {}
|
||||
}
|
||||
|
||||
// 在 onMounted 中获取参数
|
||||
onMounted(() => {
|
||||
const query = getQueryParams()
|
||||
const taskId = query.id
|
||||
|
||||
if (!taskId) {
|
||||
uni.showToast({
|
||||
title: '任务ID不能为空',
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('❌ 未获取到 taskId，query:', query)
|
||||
return
|
||||
}
|
||||
|
||||
loadTaskDetail(taskId)
|
||||
})
|
||||
|
||||
// 其他方法保持不变...
|
||||
function loadTaskDetail(taskId: string) {
|
||||
const mockTasks = [
|
||||
{
|
||||
id: 'task001',
|
||||
order_id: 'ORD20250122001',
|
||||
pickup_address: { address: '深圳市南山区科技园南区深圳湾科技生态园' },
|
||||
delivery_address: { address: '深圳市南山区蛇口海上世界广场' },
|
||||
distance: 8.2,
|
||||
estimated_time: 25,
|
||||
delivery_fee: 12.0,
|
||||
status: 3,
|
||||
remark: '联系电话: 13800138000',
|
||||
created_at: '2025-01-22 14:00:00'
|
||||
},
|
||||
// 更多模拟数据...
|
||||
]
|
||||
|
||||
const foundTask = mockTasks.find(t => t.id === taskId)
|
||||
if (foundTask) {
|
||||
task.value = foundTask
|
||||
console.log('✅ 加载任务成功:', task.value)
|
||||
} else {
|
||||
uni.showToast({ title: '未找到该任务', icon: 'none' })
|
||||
console.warn('⚠️ 任务ID不存在:', taskId)
|
||||
}
|
||||
}
|
||||
|
||||
// 其他方法...
|
||||
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 {
|
||||
if (!dateStr) return '未知时间'
|
||||
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 '刚刚'
|
||||
if (hours < 24) return `${hours}小时前`
|
||||
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()
|
||||
}
|
||||
</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>
|
||||
433
pages/mall/delivery/tasks.uvue
Normal file
433
pages/mall/delivery/tasks.uvue
Normal file
@@ -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/profile'
|
||||
})
|
||||
}
|
||||
</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>
|
||||
320
pages/mall/delivery/vehicle-add.uvue
Normal file
320
pages/mall/delivery/vehicle-add.uvue
Normal 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
379
pages/mall/delivery/vehicle-edit.uvue
Normal 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>
|
||||
338
pages/mall/delivery/vehicle.uvue
Normal file
338
pages/mall/delivery/vehicle.uvue
Normal file
@@ -0,0 +1,338 @@
|
||||
<!-- 配送端 - 车辆管理 -->
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<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()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面每次显示时都检查是否有新添加的车辆
|
||||
this.loadVehicles()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
// 加载车辆信息
|
||||
loadVehicles() {
|
||||
// 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 获取车辆状态文本
|
||||
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
|
||||
brand?: string
|
||||
color?: string
|
||||
image?: string
|
||||
remark?: 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);
|
||||
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 {
|
||||
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>
|
||||
Reference in New Issue
Block a user