433 lines
9.7 KiB
Plaintext
433 lines
9.7 KiB
Plaintext
<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> |