Initial commit of akmon project
This commit is contained in:
923
pages/mall/delivery/index.uvue
Normal file
923
pages/mall/delivery/index.uvue
Normal file
@@ -0,0 +1,923 @@
|
||||
<!-- 配送端首页 - UTS Android 兼容 -->
|
||||
<template>
|
||||
<view class="delivery-container">
|
||||
<!-- 头部状态栏 -->
|
||||
<view class="header">
|
||||
<view class="driver-info">
|
||||
<image :src="driverInfo.avatar_url || '/static/default-avatar.png'" class="avatar" mode="aspectFit" />
|
||||
<view class="driver-details">
|
||||
<text class="driver-name">{{ driverInfo.real_name }}</text>
|
||||
<text class="work-status" :class="getWorkStatusClass()">{{ getWorkStatusText() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-switch">
|
||||
<switch :checked="isOnline" @change="toggleWorkStatus" color="#4CAF50" />
|
||||
<text class="switch-label">{{ isOnline ? '在线接单' : '离线休息' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日统计 -->
|
||||
<view class="stats-section">
|
||||
<text class="section-title">今日数据</text>
|
||||
<view class="stats-grid">
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ todayStats.completed_orders }}</text>
|
||||
<text class="stat-label">完成订单</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">¥{{ todayStats.total_earning }}</text>
|
||||
<text class="stat-label">总收入</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ todayStats.total_distance }}km</text>
|
||||
<text class="stat-label">配送距离</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ todayStats.avg_rating }}</text>
|
||||
<text class="stat-label">平均评分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前配送任务 -->
|
||||
<view v-if="currentTask" class="current-task-section">
|
||||
<text class="section-title">当前任务</text>
|
||||
<view class="task-card">
|
||||
<view class="task-header">
|
||||
<text class="task-id">订单号: {{ currentTask.order_no }}</text>
|
||||
<text class="task-status" :class="getTaskStatusClass(currentTask.status)">{{ getTaskStatusText(currentTask.status) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="task-addresses">
|
||||
<view class="address-item">
|
||||
<text class="address-icon">📍</text>
|
||||
<view class="address-info">
|
||||
<text class="address-label">取货地址</text>
|
||||
<text class="address-text">{{ currentTask.pickup_address.detail }}</text>
|
||||
<text class="contact-info">联系人: {{ currentTask.pickup_contact.name }} {{ currentTask.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">{{ currentTask.delivery_address.detail }}</text>
|
||||
<text class="contact-info">联系人: {{ currentTask.delivery_contact.name }} {{ currentTask.delivery_contact.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="task-details">
|
||||
<text class="task-info">配送费: ¥{{ currentTask.delivery_fee }}</text>
|
||||
<text class="task-info">预计距离: {{ currentTask.distance }}km</text>
|
||||
<text class="task-info">预计时间: {{ currentTask.estimated_time }}分钟</text>
|
||||
</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 class="action-btn secondary" @click="contactCustomer">联系客户</button>
|
||||
<button class="action-btn secondary" @click="viewNavigation">查看导航</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可接取订单 -->
|
||||
<view v-if="!currentTask && isOnline" class="available-orders-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">附近订单</text>
|
||||
<text class="refresh-btn" @click="refreshOrders">🔄 刷新</text>
|
||||
</view>
|
||||
|
||||
<view v-if="availableOrders.length === 0" class="empty-orders">
|
||||
<text class="empty-text">暂无可接取订单</text>
|
||||
<text class="empty-subtitle">请保持在线状态，有新订单会自动推送</text>
|
||||
</view>
|
||||
|
||||
<view v-for="order in availableOrders" :key="order.id" class="order-card">
|
||||
<view class="order-header">
|
||||
<text class="order-id">{{ order.order_no }}</text>
|
||||
<text class="order-fee">¥{{ order.delivery_fee }}</text>
|
||||
</view>
|
||||
|
||||
<view class="order-route">
|
||||
<view class="route-item">
|
||||
<text class="route-icon">📍</text>
|
||||
<text class="route-text">{{ order.pickup_address.area }}</text>
|
||||
</view>
|
||||
<text class="route-arrow">→</text>
|
||||
<view class="route-item">
|
||||
<text class="route-icon">🏠</text>
|
||||
<text class="route-text">{{ order.delivery_address.area }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-info">
|
||||
<text class="info-item">距离: {{ order.distance }}km</text>
|
||||
<text class="info-item">预计: {{ order.estimated_time }}分钟</text>
|
||||
<text class="info-item">下单: {{ formatTime(order.created_at) }}</text>
|
||||
</view>
|
||||
|
||||
<view class="order-actions">
|
||||
<button class="order-btn accept" @click="acceptOrder(order.id)">接受订单</button>
|
||||
<button class="order-btn detail" @click="viewOrderDetail(order.id)">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 历史记录快捷入口 -->
|
||||
<view class="quick-actions-section">
|
||||
<text class="section-title">快捷功能</text>
|
||||
<view class="actions-grid">
|
||||
<view class="action-item" @click="goToOrderHistory">
|
||||
<text class="action-icon">📋</text>
|
||||
<text class="action-text">历史订单</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goToEarnings">
|
||||
<text class="action-icon">💰</text>
|
||||
<text class="action-text">收入明细</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goToProfile">
|
||||
<text class="action-icon">👤</text>
|
||||
<text class="action-text">个人资料</text>
|
||||
</view>
|
||||
<view class="action-item" @click="goToSettings">
|
||||
<text class="action-icon">⚙️</text>
|
||||
<text class="action-text">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import type {
|
||||
DeliveryDriverType,
|
||||
DeliveryTaskType
|
||||
} from '@/types/mall-types.uts'
|
||||
|
||||
type TodayStatsType = {
|
||||
completed_orders: number
|
||||
total_earning: string
|
||||
total_distance: number
|
||||
avg_rating: number
|
||||
}
|
||||
|
||||
type AddressInfoType = {
|
||||
detail: string
|
||||
area: string
|
||||
}
|
||||
|
||||
type ContactInfoType = {
|
||||
name: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
type CurrentTaskType = {
|
||||
id: string
|
||||
order_no: string
|
||||
status: number
|
||||
pickup_address: AddressInfoType
|
||||
delivery_address: AddressInfoType
|
||||
pickup_contact: ContactInfoType
|
||||
delivery_contact: ContactInfoType
|
||||
delivery_fee: number
|
||||
distance: number
|
||||
estimated_time: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
type AvailableOrderType = {
|
||||
id: string
|
||||
order_no: string
|
||||
pickup_address: AddressInfoType
|
||||
delivery_address: AddressInfoType
|
||||
delivery_fee: number
|
||||
distance: number
|
||||
estimated_time: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isOnline: false,
|
||||
|
||||
driverInfo: {
|
||||
id: '',
|
||||
user_id: '',
|
||||
real_name: '配送员',
|
||||
id_card: '',
|
||||
driver_license: '',
|
||||
vehicle_type: 1,
|
||||
vehicle_number: '',
|
||||
work_status: 1,
|
||||
current_location: null,
|
||||
service_areas: [],
|
||||
rating: 5.0,
|
||||
total_orders: 0,
|
||||
auth_status: 1,
|
||||
created_at: '',
|
||||
updated_at: ''
|
||||
} as DeliveryDriverType,
|
||||
|
||||
todayStats: {
|
||||
completed_orders: 0,
|
||||
total_earning: '0.00',
|
||||
total_distance: 0,
|
||||
avg_rating: 5.0
|
||||
} as TodayStatsType,
|
||||
|
||||
currentTask: null as CurrentTaskType | null,
|
||||
|
||||
availableOrders: [] as Array<AvailableOrderType>
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadDriverInfo()
|
||||
this.loadTodayStats()
|
||||
this.loadCurrentTask()
|
||||
this.loadAvailableOrders()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时刷新数据
|
||||
this.refreshData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载配送员信息
|
||||
loadDriverInfo() {
|
||||
// TODO: 调用API获取配送员信息
|
||||
this.driverInfo.real_name = '张师傅'
|
||||
this.driverInfo.rating = 4.8
|
||||
this.driverInfo.total_orders = 1250
|
||||
},
|
||||
|
||||
// 加载今日统计
|
||||
loadTodayStats() {
|
||||
// TODO: 调用API获取今日统计
|
||||
this.todayStats = {
|
||||
completed_orders: 8,
|
||||
total_earning: '245.60',
|
||||
total_distance: 45,
|
||||
avg_rating: 4.9
|
||||
}
|
||||
},
|
||||
|
||||
// 加载当前任务
|
||||
loadCurrentTask() {
|
||||
// TODO: 调用API获取当前任务
|
||||
this.currentTask = {
|
||||
id: '1',
|
||||
order_no: 'D202501081234',
|
||||
status: 2,
|
||||
pickup_address: {
|
||||
detail: '华强北商业区华强电子世界2楼A205',
|
||||
area: '华强北'
|
||||
},
|
||||
delivery_address: {
|
||||
detail: '南山区科技园深南大道9999号',
|
||||
area: '科技园'
|
||||
},
|
||||
pickup_contact: {
|
||||
name: '商家联系人',
|
||||
phone: '138****5678'
|
||||
},
|
||||
delivery_contact: {
|
||||
name: '张先生',
|
||||
phone: '139****1234'
|
||||
},
|
||||
delivery_fee: 8.5,
|
||||
distance: 12.5,
|
||||
estimated_time: 35,
|
||||
created_at: '2025-01-08T14:30:00Z'
|
||||
}
|
||||
},
|
||||
|
||||
// 加载可接取订单
|
||||
loadAvailableOrders() {
|
||||
if (!this.isOnline || this.currentTask) {
|
||||
this.availableOrders = []
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 调用API获取附近订单
|
||||
this.availableOrders = [
|
||||
{
|
||||
id: '2',
|
||||
order_no: 'D202501081235',
|
||||
pickup_address: {
|
||||
detail: '福田区购物公园',
|
||||
area: '购物公园'
|
||||
},
|
||||
delivery_address: {
|
||||
detail: '南山区海岸城',
|
||||
area: '海岸城'
|
||||
},
|
||||
delivery_fee: 12.0,
|
||||
distance: 8.2,
|
||||
estimated_time: 25,
|
||||
created_at: '2025-01-08T15:00:00Z'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// 刷新数据
|
||||
refreshData() {
|
||||
this.loadTodayStats()
|
||||
this.loadCurrentTask()
|
||||
this.loadAvailableOrders()
|
||||
},
|
||||
|
||||
// 刷新订单列表
|
||||
refreshOrders() {
|
||||
this.loadAvailableOrders()
|
||||
uni.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
// 切换工作状态
|
||||
toggleWorkStatus(event: UniSwitchChangeEvent) {
|
||||
this.isOnline = event.detail.value
|
||||
|
||||
if (this.isOnline) {
|
||||
this.startWork()
|
||||
} else {
|
||||
this.stopWork()
|
||||
}
|
||||
},
|
||||
|
||||
// 开始工作
|
||||
startWork() {
|
||||
// TODO: 调用API开始工作，上传位置
|
||||
this.loadAvailableOrders()
|
||||
uni.showToast({
|
||||
title: '已上线接单',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
// 停止工作
|
||||
stopWork() {
|
||||
// TODO: 调用API停止工作
|
||||
this.availableOrders = []
|
||||
uni.showToast({
|
||||
title: '已下线休息',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 获取工作状态样式
|
||||
getWorkStatusClass(): string {
|
||||
return this.isOnline ? 'status-online' : 'status-offline'
|
||||
},
|
||||
|
||||
// 获取工作状态文本
|
||||
getWorkStatusText(): string {
|
||||
return this.isOnline ? '在线中' : '已离线'
|
||||
},
|
||||
|
||||
// 获取任务状态样式
|
||||
getTaskStatusClass(status: number): string {
|
||||
switch (status) {
|
||||
case 1: return 'task-pending'
|
||||
case 2: return 'task-accepted'
|
||||
case 3: return 'task-picking'
|
||||
case 4: return 'task-picked'
|
||||
case 5: return 'task-delivering'
|
||||
default: return 'task-default'
|
||||
}
|
||||
},
|
||||
|
||||
// 获取任务状态文本
|
||||
getTaskStatusText(status: number): string {
|
||||
switch (status) {
|
||||
case 1: return '待接取'
|
||||
case 2: return '已接取'
|
||||
case 3: return '取货中'
|
||||
case 4: return '已取货'
|
||||
case 5: 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)}小时前`
|
||||
}
|
||||
},
|
||||
|
||||
// 任务操作方法
|
||||
acceptTask() {
|
||||
// TODO: 调用API接受任务
|
||||
uni.showToast({
|
||||
title: '任务已接受',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
startPickup() {
|
||||
// TODO: 调用API开始取货
|
||||
uni.showToast({
|
||||
title: '开始取货',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
confirmPickup() {
|
||||
// TODO: 调用API确认取货
|
||||
uni.showToast({
|
||||
title: '取货完成',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
startDelivery() {
|
||||
// TODO: 调用API开始配送
|
||||
uni.showToast({
|
||||
title: '开始配送',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
|
||||
confirmDelivery() {
|
||||
// TODO: 调用API确认送达
|
||||
uni.showToast({
|
||||
title: '配送完成',
|
||||
icon: 'success'
|
||||
})
|
||||
this.currentTask = null
|
||||
this.loadAvailableOrders()
|
||||
},
|
||||
|
||||
contactCustomer() {
|
||||
if (this.currentTask) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.currentTask.delivery_contact.phone
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
viewNavigation() {
|
||||
// TODO: 打开地图导航
|
||||
uni.showToast({
|
||||
title: '打开导航',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
// 订单操作方法
|
||||
acceptOrder(orderId: string) {
|
||||
// TODO: 调用API接受订单
|
||||
uni.showToast({
|
||||
title: '订单已接受',
|
||||
icon: 'success'
|
||||
})
|
||||
this.loadCurrentTask()
|
||||
this.loadAvailableOrders()
|
||||
},
|
||||
|
||||
viewOrderDetail(orderId: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/order-detail?id=${orderId}`
|
||||
})
|
||||
},
|
||||
|
||||
// 导航方法
|
||||
goToOrderHistory() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/order-history'
|
||||
})
|
||||
},
|
||||
|
||||
goToEarnings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/earnings'
|
||||
})
|
||||
},
|
||||
|
||||
goToProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/profile'
|
||||
})
|
||||
},
|
||||
|
||||
goToSettings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/settings'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.delivery-container {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.driver-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.driver-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.driver-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.work-status {
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background-color: #E8F5E8;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background-color: #FFF3E0;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.status-switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.current-task-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
border: 1rpx solid #e5e5e5;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 15rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.task-id {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.task-accepted {
|
||||
background-color: #E3F2FD;
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
.task-picking {
|
||||
background-color: #FFF3E0;
|
||||
color: #F57C00;
|
||||
}
|
||||
|
||||
.task-delivering {
|
||||
background-color: #E8F5E8;
|
||||
color: #388E3C;
|
||||
}
|
||||
|
||||
.task-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;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 15rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.available-orders-section {
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
font-size: 26rpx;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.empty-orders {
|
||||
background-color: #fff;
|
||||
padding: 80rpx 30rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-fee {
|
||||
font-size: 32rpx;
|
||||
color: #4CAF50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.route-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.route-icon {
|
||||
font-size: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.route-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.route-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 0 15rpx;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.accept {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.quick-actions-section {
|
||||
background-color: #fff;
|
||||
margin: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
774
pages/mall/delivery/order-detail.uvue
Normal file
774
pages/mall/delivery/order-detail.uvue
Normal file
@@ -0,0 +1,774 @@
|
||||
<!-- 配送端 - 订单详情页 -->
|
||||
<template>
|
||||
<view class="delivery-order-detail">
|
||||
<!-- 订单状态 -->
|
||||
<view class="order-status">
|
||||
<view class="status-progress">
|
||||
<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>
|
||||
</view>
|
||||
<view class="progress-line" :class="{ active: order.status >= 5 }"></view>
|
||||
<view class="progress-item" :class="{ active: order.status >= 5 }">
|
||||
<view class="progress-dot"></view>
|
||||
<text class="progress-text">已送达</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="status-desc">{{ getStatusDesc() }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 配送信息 -->
|
||||
<view class="delivery-info">
|
||||
<view class="section-title">配送信息</view>
|
||||
<view class="delivery-route">
|
||||
<view class="route-item pickup">
|
||||
<view class="route-icon">📦</view>
|
||||
<view class="route-content">
|
||||
<text class="route-title">取货地址</text>
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<view class="route-line"></view>
|
||||
|
||||
<view class="route-item delivery">
|
||||
<view class="route-icon">🏠</view>
|
||||
<view class="route-content">
|
||||
<text class="route-title">送货地址</text>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-distance">
|
||||
<text class="distance-label">配送距离：</text>
|
||||
<text class="distance-value">{{ deliveryInfo.distance }}km</text>
|
||||
<text class="time-label">预计时长：</text>
|
||||
<text class="time-value">{{ deliveryInfo.estimated_time }}分钟</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单商品 -->
|
||||
<view class="order-products">
|
||||
<view class="section-title">订单商品</view>
|
||||
<view class="shop-info">
|
||||
<text class="shop-name">{{ merchant.shop_name }}</text>
|
||||
<text class="order-no">订单号：{{ order.order_no }}</text>
|
||||
</view>
|
||||
|
||||
<view v-for="item in orderItems" :key="item.id" class="product-item">
|
||||
<image :src="item.product_image || '/static/default-product.png'" class="product-image" />
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ item.product_name }}</text>
|
||||
<text v-if="item.sku_specifications" class="product-spec">{{ getSpecText(item.sku_specifications) }}</text>
|
||||
<view class="price-quantity">
|
||||
<text class="product-price">¥{{ item.price }}</text>
|
||||
<text class="product-quantity">×{{ item.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-summary">
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">商品总额</text>
|
||||
<text class="summary-value">¥{{ order.total_amount }}</text>
|
||||
</view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-label">配送费</text>
|
||||
<text class="summary-value delivery-fee">¥{{ order.delivery_fee }}</text>
|
||||
</view>
|
||||
<view class="summary-item total">
|
||||
<text class="summary-label">实付金额</text>
|
||||
<text class="summary-value">¥{{ order.actual_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配送备注 -->
|
||||
<view class="delivery-notes">
|
||||
<view class="section-title">配送备注</view>
|
||||
<view class="note-item">
|
||||
<text class="note-label">顾客备注：</text>
|
||||
<text class="note-content">{{ customerNote || '无备注' }}</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-label">商家备注：</text>
|
||||
<text class="note-content">{{ merchantNote || '无备注' }}</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-label">配送备注：</text>
|
||||
<input v-model="deliveryNote" class="note-input" placeholder="请输入配送备注" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<view class="contact-section">
|
||||
<view class="section-title">联系方式</view>
|
||||
<view class="contact-list">
|
||||
<view class="contact-item" @click="callCustomer">
|
||||
<view class="contact-icon">📞</view>
|
||||
<view class="contact-info">
|
||||
<text class="contact-name">联系顾客</text>
|
||||
<text class="contact-phone">{{ getDeliveryAddress().phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contact-item" @click="callMerchant">
|
||||
<view class="contact-icon">🏪</view>
|
||||
<view class="contact-info">
|
||||
<text class="contact-name">联系商家</text>
|
||||
<text class="contact-phone">{{ merchant.contact_phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<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 class="action-btn contact" @click="contactService">联系客服</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { OrderType, OrderItemType, MerchantType } from '@/types/mall-types.uts'
|
||||
|
||||
type DeliveryInfoType = {
|
||||
distance: number
|
||||
estimated_time: number
|
||||
courier_id: string
|
||||
pickup_time: string
|
||||
delivery_time: string
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order: {
|
||||
id: '',
|
||||
order_no: '',
|
||||
user_id: '',
|
||||
merchant_id: '',
|
||||
status: 0,
|
||||
total_amount: 0,
|
||||
discount_amount: 0,
|
||||
delivery_fee: 0,
|
||||
actual_amount: 0,
|
||||
payment_method: 0,
|
||||
payment_status: 0,
|
||||
delivery_address: {},
|
||||
created_at: ''
|
||||
} as OrderType,
|
||||
orderItems: [] as Array<OrderItemType & { product_image: string }>,
|
||||
merchant: {
|
||||
id: '',
|
||||
user_id: '',
|
||||
shop_name: '',
|
||||
shop_logo: '',
|
||||
shop_banner: '',
|
||||
shop_description: '',
|
||||
contact_name: '',
|
||||
contact_phone: '',
|
||||
shop_status: 0,
|
||||
rating: 0,
|
||||
total_sales: 0,
|
||||
created_at: ''
|
||||
} as MerchantType,
|
||||
deliveryInfo: {
|
||||
distance: 0,
|
||||
estimated_time: 0,
|
||||
courier_id: '',
|
||||
pickup_time: '',
|
||||
delivery_time: ''
|
||||
} as DeliveryInfoType,
|
||||
pickupAddress: '',
|
||||
customerNote: '',
|
||||
merchantNote: '',
|
||||
deliveryNote: ''
|
||||
}
|
||||
},
|
||||
onLoad(options: any) {
|
||||
const orderId = options.orderId as string
|
||||
if (orderId) {
|
||||
this.loadOrderDetail(orderId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadOrderDetail(orderId: string) {
|
||||
// 模拟加载订单详情数据
|
||||
this.order = {
|
||||
id: orderId,
|
||||
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,
|
||||
actual_amount: 277.98,
|
||||
payment_method: 1,
|
||||
payment_status: 1,
|
||||
delivery_address: {
|
||||
name: '张三',
|
||||
phone: '13800138000',
|
||||
detail: '北京市朝阳区某某街道某某小区1号楼101室'
|
||||
},
|
||||
created_at: '2024-01-15 14:30:00'
|
||||
}
|
||||
|
||||
this.orderItems = [
|
||||
{
|
||||
id: 'item_001',
|
||||
order_id: orderId,
|
||||
product_id: 'product_001',
|
||||
sku_id: 'sku_001',
|
||||
product_name: '精选好物商品',
|
||||
sku_specifications: { color: '红色', size: 'M' },
|
||||
price: 199.99,
|
||||
quantity: 1,
|
||||
total_amount: 199.99,
|
||||
product_image: '/static/product1.jpg'
|
||||
}
|
||||
]
|
||||
|
||||
this.merchant = {
|
||||
id: 'merchant_001',
|
||||
user_id: 'user_001',
|
||||
shop_name: '优质好店',
|
||||
shop_logo: '/static/shop-logo.png',
|
||||
shop_banner: '/static/shop-banner.png',
|
||||
shop_description: '专注品质生活',
|
||||
contact_name: '店主小王',
|
||||
contact_phone: '13800138000',
|
||||
shop_status: 1,
|
||||
rating: 4.8,
|
||||
total_sales: 15680,
|
||||
created_at: '2023-06-01'
|
||||
}
|
||||
|
||||
this.pickupAddress = '北京市朝阳区商家街道123号'
|
||||
this.customerNote = '请送到门口，谢谢'
|
||||
this.merchantNote = '商品易碎，小心搬运'
|
||||
|
||||
this.deliveryInfo = {
|
||||
distance: 3.2,
|
||||
estimated_time: 25,
|
||||
courier_id: 'courier_001',
|
||||
pickup_time: '',
|
||||
delivery_time: ''
|
||||
}
|
||||
},
|
||||
|
||||
getStatusDesc(): string {
|
||||
const statusDescs = [
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
'等待配送员接单',
|
||||
'配送员正在前往取货',
|
||||
'订单已送达完成'
|
||||
]
|
||||
return statusDescs[this.order.status] || ''
|
||||
},
|
||||
|
||||
getDeliveryAddress(): any {
|
||||
return this.order.delivery_address as any
|
||||
},
|
||||
|
||||
getSpecText(specifications: any): string {
|
||||
if (!specifications) return ''
|
||||
return Object.keys(specifications).map(key => `${key}: ${specifications[key]}`).join(', ')
|
||||
},
|
||||
|
||||
confirmPickup() {
|
||||
uni.showModal({
|
||||
title: '确认取货',
|
||||
content: '确认已从商家处取到商品？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.deliveryInfo.pickup_time = new Date().toISOString()
|
||||
uni.showToast({
|
||||
title: '取货确认成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confirmDelivery() {
|
||||
uni.showModal({
|
||||
title: '确认送达',
|
||||
content: '确认商品已送达到顾客手中？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 5
|
||||
this.deliveryInfo.delivery_time = new Date().toISOString()
|
||||
uni.showToast({
|
||||
title: '送达确认成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
acceptOrder() {
|
||||
uni.showModal({
|
||||
title: '接受订单',
|
||||
content: '确定接受这个配送订单吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.order.status = 4
|
||||
uni.showToast({
|
||||
title: '订单接受成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
rejectOrder() {
|
||||
uni.showModal({
|
||||
title: '拒绝订单',
|
||||
content: '确定拒绝这个配送订单吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '订单已拒绝',
|
||||
icon: 'success'
|
||||
})
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
startNavigation() {
|
||||
// 开启导航功能
|
||||
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() {
|
||||
const phone = this.getDeliveryAddress().phone
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
},
|
||||
|
||||
callMerchant() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.merchant.contact_phone
|
||||
})
|
||||
},
|
||||
|
||||
contactService() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/service/chat?orderId=${this.order.id}&type=delivery`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.delivery-order-detail {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ddd;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.progress-item.active .progress-dot {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.progress-item.active .progress-text {
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
height: 2rpx;
|
||||
background-color: #ddd;
|
||||
flex: 1;
|
||||
margin: 0 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.progress-line.active {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delivery-info, .order-products, .delivery-notes, .contact-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.delivery-route {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.route-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 25rpx 0;
|
||||
}
|
||||
|
||||
.route-icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.route-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.route-address {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.route-detail {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.route-action {
|
||||
padding: 15rpx 30rpx;
|
||||
background-color: #4caf50;
|
||||
color: #fff;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.route-line {
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ddd;
|
||||
margin-left: 38rpx;
|
||||
}
|
||||
|
||||
.delivery-distance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.distance-label, .time-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.distance-value, .time-value {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.product-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.product-spec {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.price-quantity {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 26rpx;
|
||||
color: #ff4444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
margin-top: 25rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.summary-value.delivery-fee {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.summary-item.total {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
margin-top: 10rpx;
|
||||
padding-top: 15rpx;
|
||||
}
|
||||
|
||||
.summary-item.total .summary-label,
|
||||
.summary-item.total .summary-value {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.note-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
width: 100%;
|
||||
padding: 15rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.contact-list {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 32rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
font-size: 24rpx;
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.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: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-btn.accept, .action-btn.complete {
|
||||
background-color: #4caf50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.reject {
|
||||
background-color: #ff4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.navigate {
|
||||
background-color: #2196f3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-btn.contact {
|
||||
background-color: #ffa726;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
901
pages/mall/delivery/profile.uvue
Normal file
901
pages/mall/delivery/profile.uvue
Normal file
@@ -0,0 +1,901 @@
|
||||
<!-- 配送端 - 个人中心 -->
|
||||
<template>
|
||||
<view class="delivery-profile">
|
||||
<!-- 配送员信息头部 -->
|
||||
<view class="profile-header">
|
||||
<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>
|
||||
<text class="driver-status">{{ getWorkStatus() }}</text>
|
||||
<view class="driver-stats">
|
||||
<text class="stat-item">评分: {{ driverInfo.rating }}/5.0</text>
|
||||
<text class="stat-item">总单数: {{ driverInfo.total_orders }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
||||
</view>
|
||||
|
||||
<!-- 工作状态切换 -->
|
||||
<view class="work-status">
|
||||
<view class="section-title">工作状态</view>
|
||||
<view class="status-controls">
|
||||
<view class="status-toggle" @click="toggleWorkStatus">
|
||||
<text class="toggle-label">{{ workStatus === 1 ? '工作中' : '休息中' }}</text>
|
||||
<view class="toggle-switch" :class="{ active: workStatus === 1 }">
|
||||
<view class="toggle-handle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="workStatus === 1" class="current-location">
|
||||
<text class="location-text">📍 {{ currentLocation }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 配送任务快捷入口 -->
|
||||
<view class="task-shortcuts">
|
||||
<view class="section-title">配送任务</view>
|
||||
<view class="task-tabs">
|
||||
<view class="task-tab" @click="goToTasks('all')">
|
||||
<text class="tab-icon">📋</text>
|
||||
<text class="tab-text">全部任务</text>
|
||||
<text v-if="taskCounts.total > 0" class="tab-badge">{{ taskCounts.total }}</text>
|
||||
</view>
|
||||
<view class="task-tab" @click="goToTasks('pending')">
|
||||
<text class="tab-icon">⏳</text>
|
||||
<text class="tab-text">待接单</text>
|
||||
<text v-if="taskCounts.pending > 0" class="tab-badge alert">{{ taskCounts.pending }}</text>
|
||||
</view>
|
||||
<view class="task-tab" @click="goToTasks('ongoing')">
|
||||
<text class="tab-icon">🚚</text>
|
||||
<text class="tab-text">配送中</text>
|
||||
<text v-if="taskCounts.ongoing > 0" class="tab-badge">{{ taskCounts.ongoing }}</text>
|
||||
</view>
|
||||
<view class="task-tab" @click="goToTasks('completed')">
|
||||
<text class="tab-icon">✅</text>
|
||||
<text class="tab-text">已完成</text>
|
||||
<text v-if="taskCounts.completed > 0" class="tab-badge">{{ taskCounts.completed }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日配送数据 -->
|
||||
<view class="today-stats">
|
||||
<view class="section-title">今日配送</view>
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.deliveries }}</text>
|
||||
<text class="stat-label">完成单数</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">¥{{ todayStats.earnings }}</text>
|
||||
<text class="stat-label">配送收入</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.distance }}km</text>
|
||||
<text class="stat-label">配送里程</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.efficiency }}%</text>
|
||||
<text class="stat-label">准时率</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前任务 -->
|
||||
<view v-if="currentTask" class="current-task">
|
||||
<view class="section-title">当前任务</view>
|
||||
<view class="task-card">
|
||||
<view class="task-header">
|
||||
<text class="task-id">任务 #{{ currentTask.id.slice(-6) }}</text>
|
||||
<text class="task-status">{{ getTaskStatusText(currentTask.status) }}</text>
|
||||
</view>
|
||||
<view class="task-route">
|
||||
<view class="route-point">
|
||||
<text class="point-icon">📍</text>
|
||||
<view class="point-info">
|
||||
<text class="point-label">取货地址</text>
|
||||
<text class="point-address">{{ getAddressText(currentTask.pickup_address) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="route-line"></view>
|
||||
<view class="route-point">
|
||||
<text class="point-icon">🏠</text>
|
||||
<view class="point-info">
|
||||
<text class="point-label">送达地址</text>
|
||||
<text class="point-address">{{ getAddressText(currentTask.delivery_address) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="task-actions">
|
||||
<button class="action-btn" @click="contactCustomer">联系客户</button>
|
||||
<button class="action-btn primary" @click="viewTaskDetail">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近任务 -->
|
||||
<view class="recent-tasks">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近任务</text>
|
||||
<text class="view-all" @click="goToTasks('all')">查看全部 ></text>
|
||||
</view>
|
||||
<view v-if="recentTasks.length > 0" class="task-list">
|
||||
<view v-for="task in recentTasks" :key="task.id" class="task-item" @click="viewTaskDetail(task.id)">
|
||||
<view class="task-info">
|
||||
<text class="task-order">订单: {{ task.order_id.slice(-6) }}</text>
|
||||
<text class="task-fee">配送费: ¥{{ task.delivery_fee }}</text>
|
||||
</view>
|
||||
<view class="task-time">
|
||||
<text class="time-text">{{ formatTime(task.created_at) }}</text>
|
||||
<text class="status-text" :class="'status-' + task.status">{{ getTaskStatusText(task.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">
|
||||
<text class="no-data-text">暂无最近任务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收入统计 -->
|
||||
<view class="earnings-chart">
|
||||
<view class="section-header">
|
||||
<text class="section-title">收入统计</text>
|
||||
<text class="view-more" @click="goToEarnings">详细报表 ></text>
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<view class="chart-bar">
|
||||
<view v-for="(day, index) in weeklyEarnings" :key="index"
|
||||
class="bar-item"
|
||||
:style="{ height: (day.amount / maxEarnings * 100) + '%' }">
|
||||
<text class="bar-label">{{ day.day }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="function-menu">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToEarnings">
|
||||
<text class="menu-icon">💰</text>
|
||||
<text class="menu-label">收入明细</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToVehicle">
|
||||
<text class="menu-icon">🚗</text>
|
||||
<text class="menu-label">车辆管理</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToRatings">
|
||||
<text class="menu-icon">⭐</text>
|
||||
<text class="menu-label">评价记录</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToHelp">
|
||||
<text class="menu-icon">❓</text>
|
||||
<text class="menu-label">帮助中心</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToFeedback">
|
||||
<text class="menu-icon">💬</text>
|
||||
<text class="menu-label">意见反馈</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import type { DeliveryDriverType, DeliveryTaskType, ApiResponseType } from '@/types/mall-types'
|
||||
|
||||
// 响应式数据
|
||||
const driverInfo = ref({
|
||||
id: '',
|
||||
real_name: '配送员',
|
||||
avatar_url: '',
|
||||
rating: 4.9,
|
||||
total_orders: 368,
|
||||
work_status: 1
|
||||
} as DeliveryDriverType)
|
||||
|
||||
const workStatus = ref(1) // 1: 工作中, 0: 休息中
|
||||
const currentLocation = ref('朝阳区建国门附近')
|
||||
|
||||
const taskCounts = ref({
|
||||
total: 0,
|
||||
pending: 0,
|
||||
ongoing: 0,
|
||||
completed: 0
|
||||
})
|
||||
|
||||
const todayStats = ref({
|
||||
deliveries: 12,
|
||||
earnings: '156.80',
|
||||
distance: 45.6,
|
||||
efficiency: 96.5
|
||||
})
|
||||
|
||||
const currentTask = ref(null as DeliveryTaskType | null)
|
||||
const recentTasks = ref([] as Array<DeliveryTaskType>)
|
||||
|
||||
const weeklyEarnings = ref([
|
||||
{ day: '周一', amount: 120 },
|
||||
{ day: '周二', amount: 156 },
|
||||
{ day: '周三', amount: 189 },
|
||||
{ day: '周四', amount: 145 },
|
||||
{ day: '周五', amount: 203 },
|
||||
{ day: '周六', amount: 245 },
|
||||
{ day: '周日', amount: 198 }
|
||||
])
|
||||
|
||||
// 计算属性
|
||||
const maxEarnings = computed(() => {
|
||||
return Math.max(...weeklyEarnings.value.map(item => item.amount))
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
loadDriverInfo()
|
||||
loadTaskCounts()
|
||||
loadCurrentTask()
|
||||
loadRecentTasks()
|
||||
})
|
||||
|
||||
// 方法
|
||||
function loadDriverInfo() {
|
||||
// 模拟加载配送员信息
|
||||
driverInfo.value = {
|
||||
id: 'driver001',
|
||||
user_id: 'user001',
|
||||
real_name: '李师傅',
|
||||
id_card: '110101199001011234',
|
||||
driver_license: 'C1',
|
||||
vehicle_type: 1,
|
||||
vehicle_number: '京A12345',
|
||||
work_status: 1,
|
||||
current_location: { lat: 39.9042, lng: 116.4074 },
|
||||
service_areas: ['朝阳区', '东城区'],
|
||||
rating: 4.9,
|
||||
total_orders: 368,
|
||||
auth_status: 1,
|
||||
created_at: '2024-01-01',
|
||||
updated_at: '2024-12-01'
|
||||
}
|
||||
}
|
||||
|
||||
function loadTaskCounts() {
|
||||
// 模拟加载任务统计
|
||||
taskCounts.value = {
|
||||
total: 25,
|
||||
pending: 3,
|
||||
ongoing: 1,
|
||||
completed: 21
|
||||
}
|
||||
}
|
||||
|
||||
function loadCurrentTask() {
|
||||
// 模拟加载当前任务
|
||||
currentTask.value = {
|
||||
id: 'task001',
|
||||
order_id: 'order001',
|
||||
driver_id: 'driver001',
|
||||
pickup_address: { address: '朝阳区建国门大街1号', lat: 39.9042, lng: 116.4074 },
|
||||
delivery_address: { address: '朝阳区CBD核心区2号', lat: 39.9142, lng: 116.4174 },
|
||||
distance: 2.5,
|
||||
estimated_time: 15,
|
||||
delivery_fee: 8.0,
|
||||
status: 2,
|
||||
pickup_time: null,
|
||||
delivered_time: null,
|
||||
delivery_code: 'DEL123',
|
||||
remark: '联系电话: 13888888888',
|
||||
created_at: '2024-12-01 14:30:00',
|
||||
updated_at: '2024-12-01 14:30:00'
|
||||
}
|
||||
}
|
||||
|
||||
function loadRecentTasks() {
|
||||
// 模拟加载最近任务
|
||||
recentTasks.value = [
|
||||
{
|
||||
id: 'task002',
|
||||
order_id: 'order002',
|
||||
driver_id: 'driver001',
|
||||
pickup_address: { address: '朝阳区国贸中心' },
|
||||
delivery_address: { address: '朝阳区望京SOHO' },
|
||||
distance: 12.5,
|
||||
estimated_time: 35,
|
||||
delivery_fee: 12.0,
|
||||
status: 4,
|
||||
pickup_time: '2024-12-01 13:00:00',
|
||||
delivered_time: '2024-12-01 13:30:00',
|
||||
delivery_code: 'DEL122',
|
||||
remark: '',
|
||||
created_at: '2024-12-01 12:45:00',
|
||||
updated_at: '2024-12-01 13:30:00'
|
||||
},
|
||||
{
|
||||
id: 'task003',
|
||||
order_id: 'order003',
|
||||
driver_id: 'driver001',
|
||||
pickup_address: { address: '朝阳区三里屯太古里' },
|
||||
delivery_address: { address: '朝阳区工体北路' },
|
||||
distance: 1.8,
|
||||
estimated_time: 8,
|
||||
delivery_fee: 6.0,
|
||||
status: 4,
|
||||
pickup_time: '2024-12-01 11:30:00',
|
||||
delivered_time: '2024-12-01 11:45:00',
|
||||
delivery_code: 'DEL121',
|
||||
remark: '',
|
||||
created_at: '2024-12-01 11:15:00',
|
||||
updated_at: '2024-12-01 11:45:00'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function getWorkStatus(): string {
|
||||
const statusMap = {
|
||||
0: '休息中',
|
||||
1: '工作中',
|
||||
2: '忙碌中'
|
||||
}
|
||||
return statusMap[driverInfo.value.work_status] || '未知状态'
|
||||
}
|
||||
|
||||
function getTaskStatusText(status: number): string {
|
||||
const statusMap = {
|
||||
1: '待接单',
|
||||
2: '已接单',
|
||||
3: '配送中',
|
||||
4: '已完成',
|
||||
5: '已取消'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
function getAddressText(address: UTSJSONObject): string {
|
||||
return address['address'] as string || '地址信息'
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string): string {
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
|
||||
if (hours < 1) {
|
||||
return '刚刚'
|
||||
} else if (hours < 24) {
|
||||
return `${hours}小时前`
|
||||
} else {
|
||||
return `${Math.floor(hours / 24)}天前`
|
||||
}
|
||||
}
|
||||
|
||||
// 交互方法
|
||||
function toggleWorkStatus() {
|
||||
workStatus.value = workStatus.value === 1 ? 0 : 1
|
||||
driverInfo.value.work_status = workStatus.value
|
||||
|
||||
uni.showToast({
|
||||
title: workStatus.value === 1 ? '已开始工作' : '已停止工作',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
function contactCustomer() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['拨打电话', '发送短信'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '13888888888'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function viewTaskDetail(taskId: string = '') {
|
||||
const id = taskId || currentTask.value?.id || ''
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/task-detail?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 导航方法
|
||||
function editProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/profile-edit'
|
||||
})
|
||||
}
|
||||
|
||||
function goToSettings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/settings'
|
||||
})
|
||||
}
|
||||
|
||||
function goToTasks(type: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/delivery/tasks?type=${type}`
|
||||
})
|
||||
}
|
||||
|
||||
function goToEarnings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/earnings'
|
||||
})
|
||||
}
|
||||
|
||||
function goToVehicle() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/vehicle'
|
||||
})
|
||||
}
|
||||
|
||||
function goToRatings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/delivery/ratings'
|
||||
})
|
||||
}
|
||||
|
||||
function goToHelp() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/common/help'
|
||||
})
|
||||
}
|
||||
|
||||
function goToFeedback() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/common/feedback'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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-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;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.work-status, .task-shortcuts, .today-stats, .current-task, .recent-tasks, .earnings-chart, .function-menu {
|
||||
margin: 20rpx 30rpx;
|
||||
background: white;
|
||||
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;
|
||||
}
|
||||
|
||||
.status-controls {
|
||||
display: flex;
|
||||
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;
|
||||
height: 50rpx;
|
||||
background: #ddd;
|
||||
border-radius: 25rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch.active {
|
||||
background: #74b9ff;
|
||||
}
|
||||
|
||||
.toggle-handle {
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: white;
|
||||
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;
|
||||
}
|
||||
|
||||
.task-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.task-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
right: 20rpx;
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
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); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 150rpx;
|
||||
padding: 20rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
padding: 25rpx;
|
||||
background: #e8f4fd;
|
||||
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;
|
||||
border-radius: 20rpx;
|
||||
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;
|
||||
background: #ddd;
|
||||
margin-left: 16rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
font-size: 26rpx;
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #74b9ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
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;
|
||||
border-radius: 15rpx;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.status-4 {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
height: 200rpx;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-item::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #74b9ff 0%, #0984e3 100%);
|
||||
border-radius: 8rpx 8rpx 0 0;
|
||||
min-height: 20rpx;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user