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-26 17:12:37 +08:00
parent b1c845d571
commit 1c83f29f7d
10 changed files with 1297 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
pages/mall/delivery/order-detail.uvue
View File

@@ -1,17 +1,30 @@
<!-- 配送端 - 订单详情页 -->
<template>
<view class="delivery-order-detail">
<!-- 返回按钮 -->
<view class="back-header">
<view class="back-box" @click="goBack">
<text class="back-icon">‹</text>
<text class="back-text">返回</text>
</view>
</view>
<!-- 订单状态 -->
<view class="order-status">
<view class="status-progress">
<view class="progress-item" :class="{ active: order.status >= 2 }">
<view class="progress-dot"></view>
<text class="progress-text">已接单</text>
</view>
<view class="progress-line" :class="{ active: order.status >= 3 }"></view>
<view class="progress-item" :class="{ active: order.status >= 3 }">
<view class="progress-dot"></view>
<text class="progress-text">待接单</text>
<text class="progress-text">取货中</text>
</view>
<view class="progress-line" :class="{ active: order.status >= 4 }"></view>
<view class="progress-item" :class="{ active: order.status >= 4 }">
<view class="progress-dot"></view>
<text class="progress-text">配送中</text>
<text class="progress-text">已取货</text>
</view>
<view class="progress-line" :class="{ active: order.status >= 5 }"></view>
<view class="progress-item" :class="{ active: order.status >= 5 }">
@@ -33,7 +46,8 @@
<text class="route-address">{{ merchant.contact_name }} · {{ merchant.contact_phone }}</text>
<text class="route-detail">{{ pickupAddress }}</text>
</view>
<button v-if="order.status === 3" class="route-action" @click="confirmPickup">确认取货</button>
<!-- 只在取货中状态且订单未完成时显示按钮 -->
<button v-if="order.status === 3 && order.status < 5" class="route-action" @click="confirmPickup">确认取货</button>
</view>
<view class="route-line"></view>
@@ -45,7 +59,8 @@
<text class="route-address">{{ getDeliveryAddress().name }} · {{ getDeliveryAddress().phone }}</text>
<text class="route-detail">{{ getDeliveryAddress().detail }}</text>
</view>
<button v-if="order.status === 4" class="route-action" @click="confirmDelivery">确认送达</button>
<!-- 只在已取货状态且订单未完成时显示按钮 -->
<button v-if="order.status === 4 && order.status < 5" class="route-action" @click="confirmDelivery">确认送达</button>
</view>
</view>
@@ -104,10 +119,16 @@
<text class="note-label">商家备注：</text>
<text class="note-content">{{ merchantNote || '无备注' }}</text>
</view>
<view class="note-item">
<!-- 只在订单未完成时显示输入框 -->
<view v-if="order.status < 5" class="note-item">
<text class="note-label">配送备注：</text>
<input v-model="deliveryNote" class="note-input" placeholder="请输入配送备注" />
</view>
<!-- 如果订单已完成，显示存储的备注 -->
<view v-else-if="deliveryNote" class="note-item">
<text class="note-label">配送备注：</text>
<text class="note-content">{{ deliveryNote }}</text>
</view>
</view>
<!-- 联系方式 -->
@@ -133,17 +154,21 @@
<!-- 底部操作 -->
<view class="bottom-actions">
<button v-if="order.status === 3" class="action-btn accept" @click="acceptOrder">接受订单</button>
<button v-if="order.status === 3" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
<button v-if="order.status === 4" class="action-btn navigate" @click="startNavigation">开始导航</button>
<button v-if="order.status === 4" class="action-btn complete" @click="completeDelivery">完成配送</button>
<!-- 只在已接单状态且订单未完成时显示订单操作按钮 -->
<button v-if="order.status === 2 && order.status < 5" class="action-btn accept" @click="acceptOrder">接受订单</button>
<button v-if="order.status === 2 && order.status < 5" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
<!-- 只在取货中状态且订单未完成时显示导航按钮 -->
<button v-if="order.status === 3 && order.status < 5" class="action-btn navigate" @click="startNavigation">开始导航</button>
<!-- 只在已取货状态且订单未完成时显示完成按钮 -->
<button v-if="order.status === 4 && order.status < 5" 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'
<script lang="uts">
import type { OrderType, OrderItemType, MerchantType } from '@/types/mall-types.uts'
type DeliveryInfoType = {
distance: number
@@ -161,7 +186,7 @@ export default {
order_no: '',
user_id: '',
merchant_id: '',
status: 0,
status: 0, // 👈 从 URL 参数获取
total_amount: 0,
discount_amount: 0,
delivery_fee: 0,
@@ -196,24 +221,36 @@ export default {
pickupAddress: '',
customerNote: '',
merchantNote: '',
deliveryNote: ''
deliveryNote: '', // 配送备注
}
},
onLoad(options: any) {
const orderId = options.orderId as string
const orderId = options.id as string
// 👇 从 URL 参数获取 status
const status = parseInt(options.status as string) || 0
if (orderId) {
// 将从 URL 获取的状态赋值给 order 对象
this.order.id = orderId
this.order.status = status // 👈 设置状态
this.loadOrderDetail(orderId)
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack()
},
loadOrderDetail(orderId: string) {
// 模拟加载订单详情数据
// 注意：现在 status 的值在 onLoad 时已经从 URL 获取并设置，这里可以依据它来调整数据加载逻辑（如果需要）
// 为了演示，我们保持模拟数据不变，但实际应用中可以根据 status 加载不同的数据
this.order = {
id: orderId,
...this.order, // 保留从 URL 获取的 id 和 status
order_no: 'ORD202401150001',
user_id: 'user_001',
merchant_id: 'merchant_001',
status: 3, // 3:待接单 4:配送中 5:已送达
total_amount: 299.98,
discount_amount: 30.00,
delivery_fee: 8.00,
@@ -261,26 +298,30 @@ export default {
this.pickupAddress = '北京市朝阳区商家街道123号'
this.customerNote = '请送到门口，谢谢'
this.merchantNote = '商品易碎，小心搬运'
this.deliveryNote = '已按时送达，顾客签收'
this.deliveryInfo = {
distance: 3.2,
estimated_time: 25,
courier_id: 'courier_001',
pickup_time: '',
delivery_time: ''
pickup_time: '2024-01-15 15:00:00',
delivery_time: '2024-01-15 15:25:00'
}
},
getStatusDesc(): string {
const statusDescs = [
'',
'',
'',
'等待配送员接单',
'配送员正在前往取货',
'订单已送达完成'
]
return statusDescs[this.order.status] || ''
// 根据 order.status 动态返回描述
if (this.order.status >= 5) {
return '订单已送达完成'
} else if (this.order.status === 4) {
return '已取货，正在前往送达'
} else if (this.order.status === 3) {
return '配送员正在前往取货'
} else if (this.order.status === 2) {
return '订单已接取'
} else {
return '订单状态未知'
}
},
getDeliveryAddress(): any {
@@ -293,96 +334,113 @@ export default {
},
confirmPickup() {
uni.showModal({
title: '确认取货',
content: '确认已从商家处取到商品？',
success: (res) => {
if (res.confirm) {
this.deliveryInfo.pickup_time = new Date().toISOString()
uni.showToast({
title: '取货确认成功',
icon: 'success'
})
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '确认取货',
content: '确认已从商家处取到商品？',
success: (res) => {
if (res.confirm) {
this.order.status = 4 // 更新状态为已取货
this.deliveryInfo.pickup_time = new Date().toISOString()
uni.showToast({
title: '取货确认成功',
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'
})
// 仅在订单未完成时执行
if (this.order.status < 5) {
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'
})
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '接受订单',
content: '确定接受这个配送订单吗？',
success: (res) => {
if (res.confirm) {
this.order.status = 3 // 更新状态为取货中
uni.showToast({
title: '订单接受成功',
icon: 'success'
})
}
}
}
})
})
}
},
rejectOrder() {
uni.showModal({
title: '拒绝订单',
content: '确定拒绝这个配送订单吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '订单已拒绝',
icon: 'success'
})
uni.navigateBack()
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showModal({
title: '拒绝订单',
content: '确定拒绝这个配送订单吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '订单已拒绝',
icon: 'success'
})
uni.navigateBack()
}
}
}
})
})
}
},
startNavigation() {
// 开启导航功能
uni.showToast({
title: '正在启动导航',
icon: 'loading'
})
// 模拟调用地图导航
setTimeout(() => {
// 仅在订单未完成时执行
if (this.order.status < 5) {
uni.showToast({
title: '导航已启动',
icon: 'success'
title: '正在启动导航',
icon: 'loading'
})
}, 1000)
setTimeout(() => {
uni.showToast({
title: '导航已启动',
icon: 'success'
})
}, 1000)
}
},
completeDelivery() {
if (!this.deliveryNote.trim()) {
uni.showToast({
title: '请填写配送备注',
icon: 'none'
})
return
// 仅在订单未完成时执行
if (this.order.status < 5) {
if (!this.deliveryNote.trim()) {
uni.showToast({
title: '请填写配送备注',
icon: 'none'
})
return
}
this.confirmDelivery()
}
this.confirmDelivery()
},
callCustomer() {
@@ -408,12 +466,52 @@ export default {
</script>
<style>
/* ... 保持原有 style 部分不变 ... */
.delivery-order-detail {
background-color: #f5f5f5;
min-height: 100vh;
padding-bottom: 160rpx;
}
/* 返回按钮头部 */
.back-header {
background-color: #fff;
padding: 20rpx 30rpx;
position: relative;
height: 80rpx;
display: flex;
align-items: center;
}
.back-box {
position: absolute;
left: 30rpx;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
cursor: pointer;
padding: 10rpx;
border-radius: 8rpx;
transition: background-color 0.2s ease;
}
.back-box:active {
background-color: #f0f0f0;
}
.back-icon {
font-size: 36rpx;
color: #333;
margin-right: 5rpx;
}
.back-text {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
.order-status {
background-color: #fff;
padding: 40rpx 30rpx;
@@ -771,4 +869,4 @@ export default {
background-color: #ffa726;
color: #fff;
}
</style>
</style>