902 lines
20 KiB
Plaintext
902 lines
20 KiB
Plaintext
<!-- 配送端 - 个人中心 -->
|
|
<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>
|