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

添加新页面

Browse Source
This commit is contained in:
not-like-juvenile
2026-01-23 17:13:39 +08:00
parent d5a3a4e8f0
commit b1c845d571
9 changed files with 2229 additions and 557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
pages/mall/delivery/profile.uvue
View File

@@ -1,8 +1,13 @@
<!-- 配送端 - 个人中心 -->
<template>
<view class="delivery-profile">
<!-- 配送员信息头部 -->
<!-- 1. 蓝色头像条（profile-header） -->
<view class="profile-header">
<!-- 返回按钮：最左边垂直居中 -->
<view class="back-box" @click="backToIndex">
<text class="back-icon">‹</text>
</view>
<image :src="driverInfo.avatar_url || '/static/default-avatar.png'" class="driver-avatar" @click="editProfile" />
<view class="driver-info">
<text class="driver-name">{{ driverInfo.real_name }}</text>
@@ -15,7 +20,7 @@
<view class="settings-icon" @click="goToSettings">⚙️</view>
</view>
<!-- 工作状态切换 -->
<!-- 2. 工作状态切换 -->
<view class="work-status">
<view class="section-title">工作状态</view>
<view class="status-controls">
@@ -31,7 +36,7 @@
</view>
</view>
<!-- 配送任务快捷入口 -->
<!-- 3. 配送任务快捷入口 -->
<view class="task-shortcuts">
<view class="section-title">配送任务</view>
<view class="task-tabs">
@@ -58,7 +63,7 @@
</view>
</view>
<!-- 今日配送数据 -->
<!-- 4. 今日配送数据 -->
<view class="today-stats">
<view class="section-title">今日配送</view>
<view class="stats-grid">
@@ -81,7 +86,7 @@
</view>
</view>
<!-- 当前任务 -->
<!-- 5. 当前任务 -->
<view v-if="currentTask" class="current-task">
<view class="section-title">当前任务</view>
<view class="task-card">
@@ -113,7 +118,7 @@
</view>
</view>
<!-- 最近任务 -->
<!-- 6. 最近任务 -->
<view class="recent-tasks">
<view class="section-header">
<text class="section-title">最近任务</text>
@@ -136,7 +141,7 @@
</view>
</view>
<!-- 收入统计 -->
<!-- 7. 收入统计 -->
<view class="earnings-chart">
<view class="section-header">
<text class="section-title">收入统计</text>
@@ -153,7 +158,7 @@
</view>
</view>
<!-- 功能菜单 -->
<!-- 8. 功能菜单 -->
<view class="function-menu">
<view class="menu-group">
<view class="menu-item" @click="goToEarnings">
@@ -193,7 +198,12 @@
import { ref, onMounted, computed } from 'vue'
import type { DeliveryDriverType, DeliveryTaskType, ApiResponseType } from '@/types/mall-types'
// 响应式数据
/* ----------------- 返回按钮 ----------------- */
function backToIndex() {
uni.navigateBack({ url: '/pages/mall/delivery/index' })
}
/* ----------------- 数据 ----------------- */
const driverInfo = ref({
id: '',
real_name: '配送员',
@@ -201,17 +211,12 @@ const driverInfo = ref({
rating: 4.9,
total_orders: 368,
work_status: 1
} as DeliveryDriverType)
})
const workStatus = ref(1) // 1: 工作中, 0: 休息中
const workStatus = ref(1) // 1 工作中 0 休息中
const currentLocation = ref('朝阳区建国门附近')
const taskCounts = ref({
total: 0,
pending: 0,
ongoing: 0,
completed: 0
})
const taskCounts = ref({ total: 0, pending: 0, ongoing: 0, completed: 0 })
const todayStats = ref({
deliveries: 12,
@@ -220,8 +225,8 @@ const todayStats = ref({
efficiency: 96.5
})
const currentTask = ref(null as DeliveryTaskType | null)
const recentTasks = ref([] as Array<DeliveryTaskType>)
const currentTask = ref<DeliveryTaskType | null>(null)
const recentTasks = ref<DeliveryTaskType[]>([])
const weeklyEarnings = ref([
{ day: '周一', amount: 120 },
@@ -233,12 +238,9 @@ const weeklyEarnings = ref([
{ day: '周日', amount: 198 }
])
// 计算属性
const maxEarnings = computed(() => {
return Math.max(...weeklyEarnings.value.map(item => item.amount))
})
const maxEarnings = computed(() => Math.max(...weeklyEarnings.value.map(i => i.amount)))
// 生命周期
/* ----------------- 生命周期 ----------------- */
onMounted(() => {
loadDriverInfo()
loadTaskCounts()
@@ -246,9 +248,8 @@ onMounted(() => {
loadRecentTasks()
})
// 方法
/* ----------------- 方法 ----------------- */
function loadDriverInfo() {
// 模拟加载配送员信息
driverInfo.value = {
id: 'driver001',
user_id: 'user001',
@@ -269,17 +270,10 @@ function loadDriverInfo() {
}
function loadTaskCounts() {
// 模拟加载任务统计
taskCounts.value = {
total: 25,
pending: 3,
ongoing: 1,
completed: 21
}
taskCounts.value = { total: 25, pending: 3, ongoing: 1, completed: 21 }
}
function loadCurrentTask() {
// 模拟加载当前任务
currentTask.value = {
id: 'task001',
order_id: 'order001',
@@ -300,7 +294,6 @@ function loadCurrentTask() {
}
function loadRecentTasks() {
// 模拟加载最近任务
recentTasks.value = [
{
id: 'task002',
@@ -340,49 +333,31 @@ function loadRecentTasks() {
}
function getWorkStatus(): string {
const statusMap = {
0: '休息中',
1: '工作中',
2: '忙碌中'
}
return statusMap[driverInfo.value.work_status] || '未知状态'
const m: Record<number, string> = { 0: '休息中', 1: '工作中', 2: '忙碌中' }
return m[driverInfo.value.work_status] || '未知状态'
}
function getTaskStatusText(status: number): string {
const statusMap = {
1: '待接单',
2: '已接单',
3: '配送中',
4: '已完成',
5: '已取消'
}
return statusMap[status] || '未知'
const m: Record<number, string> = { 1: '待接单', 2: '已接单', 3: '配送中', 4: '已完成', 5: '已取消' }
return m[status] || '未知'
}
function getAddressText(address: UTSJSONObject): string {
return address['address'] as string || '地址信息'
return (address['address'] as string) || '地址信息'
}
function formatTime(dateStr: string): string {
const date = new Date(dateStr)
const now = new Date()
const diff = now.getTime() - date.getTime()
const hours = Math.floor(diff / (1000 * 60 * 60))
if (hours < 1) {
return '刚刚'
} else if (hours < 24) {
return `${hours}小时前`
} else {
return `${Math.floor(hours / 24)}天前`
}
const diff = Date.now() - new Date(dateStr).getTime()
const hours = Math.floor(diff / 36e5)
if (hours < 1) return '刚刚'
if (hours < 24) return `${hours}小时前`
return `${Math.floor(hours / 24)}天前`
}
// 交互方法
/* ----------------- 交互 ----------------- */
function toggleWorkStatus() {
workStatus.value = workStatus.value === 1 ? 0 : 1
driverInfo.value.work_status = workStatus.value
uni.showToast({
title: workStatus.value === 1 ? '已开始工作' : '已停止工作',
icon: 'success'
@@ -392,123 +367,112 @@ function toggleWorkStatus() {
function contactCustomer() {
uni.showActionSheet({
itemList: ['拨打电话', '发送短信'],
success: (res) => {
if (res.tapIndex === 0) {
uni.makePhoneCall({
phoneNumber: '13888888888'
})
}
success: res => {
if (res.tapIndex === 0) uni.makePhoneCall({ phoneNumber: '13888888888' })
}
})
}
function viewTaskDetail(taskId: string = '') {
function viewTaskDetail(taskId = '') {
const id = taskId || currentTask.value?.id || ''
uni.navigateTo({
url: `/pages/mall/delivery/task-detail?id=${id}`
})
uni.navigateTo({ url: `/pages/mall/delivery/task-detail?id=${id}` })
}
// 导航方法
/* ----------------- 导航 ----------------- */
function editProfile() {
uni.navigateTo({
url: '/pages/mall/delivery/profile-edit'
})
uni.navigateTo({ url: '/pages/mall/delivery/profile-edit' })
}
function goToSettings() {
uni.navigateTo({
url: '/pages/mall/delivery/settings'
})
uni.navigateTo({ url: '/pages/mall/delivery/settings' })
}
function goToTasks(type: string) {
uni.navigateTo({
url: `/pages/mall/delivery/tasks?type=${type}`
})
uni.navigateTo({ url: `/pages/mall/delivery/tasks?type=${type}` })
}
function goToEarnings() {
uni.navigateTo({
url: '/pages/mall/delivery/earnings'
})
uni.navigateTo({ url: '/pages/mall/delivery/earnings' })
}
function goToVehicle() {
uni.navigateTo({
url: '/pages/mall/delivery/vehicle'
})
uni.navigateTo({ url: '/pages/mall/delivery/vehicle' })
}
function goToRatings() {
uni.navigateTo({
url: '/pages/mall/delivery/ratings'
})
uni.navigateTo({ url: '/pages/mall/delivery/ratings' })
}
function goToHelp() {
uni.navigateTo({
url: '/pages/mall/common/help'
})
uni.navigateTo({ url: '/pages/mall/common/help' })
}
function goToFeedback() {
uni.navigateTo({
url: '/pages/mall/common/feedback'
})
uni.navigateTo({ url: '/pages/mall/common/feedback' })
}
</script>
<style scoped>
/* ---------- 返回按钮：蓝色条最左边垂直居中 ---------- */
.profile-header {
position: relative;
}
.back-box {
position: absolute;
left: 30rpx;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background: rgba(0, 0, 0, .15);
display: flex;
align-items: center;
justify-content: center;
}
.back-box:active {
background: rgba(0, 0, 0, .3);
}
.back-icon {
font-size: 40rpx;
color: #fff;
}
/* ---------- 以下与原样式一致 ---------- */
.delivery-profile {
padding: 0 0 120rpx 0;
background-color: #f5f5f5;
min-height: 100vh;
}
.profile-header {
display: flex;
align-items: center;
padding: 40rpx 30rpx;
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
position: relative;
}
.driver-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-left: 80rpx; /* 给返回按钮留位置 */
margin-right: 30rpx;
border: 4rpx solid rgba(255, 255, 255, 0.3);
}
.driver-info {
flex: 1;
}
.driver-name {
font-size: 36rpx;
font-weight: bold;
color: white;
margin-bottom: 10rpx;
}
.driver-status {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15rpx;
}
.driver-stats {
display: flex;
gap: 30rpx;
}
.stat-item {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.9);
}
.settings-icon {
font-size: 36rpx;
color: white;
@@ -521,21 +485,18 @@ function goToFeedback() {
border-radius: 20rpx;
padding: 30rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.view-all, .view-more {
font-size: 24rpx;
color: #74b9ff;
@@ -546,19 +507,16 @@ function goToFeedback() {
flex-direction: column;
gap: 20rpx;
}
.status-toggle {
display: flex;
justify-content: space-between;
align-items: center;
}
.toggle-label {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.toggle-switch {
position: relative;
width: 100rpx;
@@ -567,11 +525,9 @@ function goToFeedback() {
border-radius: 25rpx;
transition: all 0.3s;
}
.toggle-switch.active {
background: #74b9ff;
}
.toggle-handle {
position: absolute;
top: 5rpx;
@@ -582,17 +538,14 @@ function goToFeedback() {
border-radius: 50%;
transition: all 0.3s;
}
.toggle-switch.active .toggle-handle {
left: 55rpx;
}
.current-location {
padding: 15rpx 20rpx;
background: #e8f4fd;
border-radius: 15rpx;
}
.location-text {
font-size: 24rpx;
color: #74b9ff;
@@ -602,7 +555,6 @@ function goToFeedback() {
display: flex;
justify-content: space-between;
}
.task-tab {
display: flex;
flex-direction: column;
@@ -610,17 +562,14 @@ function goToFeedback() {
flex: 1;
position: relative;
}
.tab-icon {
font-size: 48rpx;
margin-bottom: 10rpx;
}
.tab-text {
font-size: 24rpx;
color: #666;
}
.tab-badge {
position: absolute;
top: -10rpx;
@@ -633,12 +582,10 @@ function goToFeedback() {
min-width: 30rpx;
text-align: center;
}
.tab-badge.alert {
background: #ff4757;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
@@ -651,7 +598,6 @@ function goToFeedback() {
flex-wrap: wrap;
gap: 20rpx;
}
.stat-card {
display: flex;
flex-direction: column;
@@ -662,14 +608,12 @@ function goToFeedback() {
background: #e8f4fd;
border-radius: 15rpx;
}
.stat-value {
font-size: 36rpx;
font-weight: bold;
color: #74b9ff;
margin-bottom: 5rpx;
}
.stat-label {
font-size: 24rpx;
color: #666;
@@ -681,20 +625,17 @@ function goToFeedback() {
border-radius: 15rpx;
border-left: 6rpx solid #74b9ff;
}
.task-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.task-id {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.task-status {
font-size: 22rpx;
padding: 6rpx 12rpx;
@@ -702,39 +643,32 @@ function goToFeedback() {
background: #74b9ff;
color: white;
}
.task-route {
margin-bottom: 25rpx;
}
.route-point {
display: flex;
align-items: flex-start;
margin-bottom: 15rpx;
}
.point-icon {
font-size: 32rpx;
margin-right: 15rpx;
margin-top: 5rpx;
}
.point-info {
flex: 1;
}
.point-label {
font-size: 22rpx;
color: #666;
margin-bottom: 5rpx;
}
.point-address {
font-size: 26rpx;
color: #333;
line-height: 1.4;
}
.route-line {
width: 2rpx;
height: 30rpx;
@@ -742,12 +676,10 @@ function goToFeedback() {
margin-left: 16rpx;
margin-bottom: 5rpx;
}
.task-actions {
display: flex;
gap: 20rpx;
}
.action-btn {
flex: 1;
padding: 20rpx;
@@ -757,7 +689,6 @@ function goToFeedback() {
color: #333;
border: none;
}
.action-btn.primary {
background: #74b9ff;
color: white;
@@ -768,44 +699,37 @@ function goToFeedback() {
flex-direction: column;
gap: 20rpx;
}
.task-item {
padding: 25rpx;
background: #f8f9ff;
border-radius: 15rpx;
border-left: 6rpx solid #74b9ff;
}
.task-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15rpx;
}
.task-order {
font-size: 26rpx;
color: #333;
font-weight: 500;
}
.task-fee {
font-size: 24rpx;
color: #74b9ff;
font-weight: bold;
}
.task-time {
display: flex;
justify-content: space-between;
align-items: center;
}
.time-text {
font-size: 22rpx;
color: #999;
}
.status-text {
font-size: 22rpx;
padding: 4rpx 8rpx;
@@ -813,7 +737,6 @@ function goToFeedback() {
background: #e3f2fd;
color: #1976d2;
}
.status-4 {
background: #e8f5e8;
color: #388e3c;
@@ -822,15 +745,13 @@ function goToFeedback() {
.chart-container {
padding: 20rpx 0;
}
.chart-bar {
display: flex;
justify-content: space-between;
align-items: end;
align-items: flex-end;
height: 200rpx;
gap: 10rpx;
}
.bar-item {
display: flex;
flex-direction: column;
@@ -838,7 +759,6 @@ function goToFeedback() {
flex: 1;
position: relative;
}
.bar-item::before {
content: '';
width: 100%;
@@ -846,7 +766,6 @@ function goToFeedback() {
border-radius: 8rpx 8rpx 0 0;
min-height: 20rpx;
}
.bar-label {
font-size: 20rpx;
color: #666;
@@ -856,34 +775,28 @@ function goToFeedback() {
.menu-group {
margin-bottom: 30rpx;
}
.menu-group:last-child {
margin-bottom: 0;
}
.menu-item {
display: flex;
align-items: center;
padding: 25rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-icon {
font-size: 36rpx;
width: 60rpx;
margin-right: 25rpx;
}
.menu-label {
flex: 1;
font-size: 28rpx;
color: #333;
}
.menu-arrow {
font-size: 24rpx;
color: #ccc;
@@ -893,9 +806,8 @@ function goToFeedback() {
text-align: center;
padding: 60rpx 0;
}
.no-data-text {
font-size: 24rpx;
color: #999;
}
</style>
</style>