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

补充数据库数据，修改分类栏内容

Browse Source
This commit is contained in:
huangzhenbao
2026-05-21 11:50:32 +08:00
parent b8b0b453e0
commit 7ba3d313be
32 changed files with 6657 additions and 1684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
pages/mall/delivery/orders/detail.uvue
View File

@@ -1,82 +1,214 @@
<template>
<ServicePageScaffold title="工单详情" fallback-url="/pages/mall/delivery/orders/index">
<ServicePanel title="基础信息" subtitle="接单前脱敏，接单后展示完整信息。">
<view v-if="order != null">
<text class="row-text">工单号：{{ order.orderNo }}</text>
<text class="row-text">服务项目：{{ order.serviceName }}</text>
<text class="row-text">服务对象：{{ order.status == 'pending_accept' ? order.elderNameMasked : order.fullElderName }}</text>
<text class="row-text">联系电话：{{ order.status == 'pending_accept' ? order.elderPhoneMasked : order.fullPhone }}</text>
<text class="row-text">服务地址：{{ order.status == 'pending_accept' ? order.addressSummary : order.fullAddress }}</text>
<text class="row-text">预约时间：{{ order.appointmentStartTime }} - {{ order.appointmentEndTime }}</text>
<text class="row-text">联系人：{{ order.contactName }} / {{ order.contactPhone }}</text>
<text class="row-text">注意事项：{{ order.notices.join('；') }}</text>
<ServicePageScaffold title="订单详情" fallback-url="/pages/mall/delivery/orders/index">
<view v-if="order != null" class="page">
<view class="status-card">
<view class="status-head">
<view>
<text class="status-title">当前状态</text>
<text class="status-subtitle">{{ order.statusText }}</text>
</view>
<text class="status-tag">{{ nextStepText }}</text>
</view>
<view class="timeline-box">
<view v-for="item in order.timeline" :key="item.id" class="timeline-item">
<text class="timeline-title">{{ item.title }}</text>
<text class="timeline-meta">{{ item.time }}</text>
<text class="timeline-desc">{{ item.description }}</text>
</view>
</view>
</view>
</ServicePanel>
<ServicePanel title="服务项目" subtitle="未完成项需在执行页填写原因。">
<view v-if="order != null" v-for="item in order.serviceItems" :key="item.id" class="item-row">
<text class="row-text">{{ item.name }}</text>
<view class="card">
<text class="section-title">服务信息</text>
<text class="row-text">服务名称：{{ order.serviceName }}</text>
<text class="row-text">服务类型：{{ order.serviceType }}</text>
<text class="row-text">预约时间：{{ order.appointmentTime }}</text>
<text class="row-text">预计时长：{{ order.duration }} 分钟</text>
<text class="row-text">服务价格：¥{{ order.price }}</text>
<text class="row-text">预计收入：¥{{ order.staffIncome }}</text>
</view>
</ServicePanel>
<ServicePanel title="状态时间轴" subtitle="所有关键动作都需要留痕。">
<ServiceTimeline :items="timelineItems"></ServiceTimeline>
</ServicePanel>
<view class="card">
<text class="section-title">服务对象</text>
<text class="row-text">姓名：{{ order.elderName }}</text>
<text class="row-text">性别：{{ order.elderGender }}</text>
<text class="row-text">年龄：{{ order.elderAge }}</text>
<text class="row-text">电话：{{ order.elderPhone }}</text>
<text class="row-text">健康标签：{{ joinTags(order.healthTags) }}</text>
</view>
<view class="bottom-space"></view>
<view v-if="order != null" class="fixed-bar">
<view class="bar-btn secondary-btn" @click="goException"><text class="bar-text secondary-text">异常上报</text></view>
<view v-if="order.status == 'pending_accept'" class="bar-btn primary-btn" @click="acceptOrder"><text class="bar-text">接单</text></view>
<view v-else-if="order.status == 'accepted' || order.status == 'on_the_way' || order.status == 'arrived'" class="bar-btn primary-btn" @click="goRoute"><text class="bar-text">出发/签到</text></view>
<view v-else class="bar-btn primary-btn" @click="goExecute"><text class="bar-text">进入执行</text></view>
<view class="card">
<text class="section-title">联系人信息</text>
<text class="row-text">联系人：{{ order.contactName }}</text>
<text class="row-text">联系电话：{{ order.contactPhone }}</text>
<text class="row-text">关系：{{ order.contactRelation }}</text>
<view class="inline-actions">
<view class="outline-btn" @click="makePhoneCall(order.contactPhone)"><text class="outline-btn-text">拨打联系人</text></view>
<view class="outline-btn" @click="makePhoneCall(order.elderPhone)"><text class="outline-btn-text">拨打服务对象</text></view>
</view>
</view>
<view class="card">
<text class="section-title">地址信息</text>
<text class="row-text">完整地址：{{ order.address }}</text>
<text class="row-text">门牌号：{{ order.addressDetail }}</text>
<text class="row-text">距离：{{ order.distance }}</text>
<view class="inline-actions">
<view class="outline-btn" @click="mockNavigate"><text class="outline-btn-text">导航按钮</text></view>
<view class="outline-btn" @click="makePhoneCall(order.contactPhone)"><text class="outline-btn-text">拨打电话</text></view>
</view>
</view>
<view class="card">
<text class="section-title">用户备注</text>
<text class="row-text">特殊需求：{{ order.remark }}</text>
<text class="row-text">需家属在场：{{ order.needFamilyPresent ? '是' : '否' }}</text>
<text class="row-text">需携带耗材：{{ order.needMaterials ? '是' : '否' }}</text>
<text class="row-text">风险标签：{{ joinTags(order.riskTags) }}</text>
</view>
<view v-if="order.abnormalReport != null" class="card">
<text class="section-title">异常记录</text>
<text class="row-text">异常类型：{{ order.abnormalReport!.type }}</text>
<text class="row-text">异常说明：{{ order.abnormalReport!.description }}</text>
<text class="row-text">发生时间：{{ order.abnormalReport!.occurredAt }}</text>
</view>
<view class="action-card">
<view class="action-row">
<view class="outline-btn" @click="goException"><text class="outline-btn-text">异常上报</text></view>
<view v-if="showRejectButton" class="warn-btn" @click="rejectOrder"><text class="warn-btn-text">拒单</text></view>
<view class="primary-btn" @click="handlePrimary"><text class="primary-btn-text">{{ primaryText }}</text></view>
</view>
</view>
</view>
</ServicePageScaffold>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import ServiceTimeline from '@/components/homeService/ServiceTimeline.uvue'
import { acceptDeliveryOrder, getDeliveryOrderDetail } from '@/services/deliveryService.uts'
import type { DeliveryOrderType } from '@/types/delivery.uts'
import {
acceptServiceOrder,
checkInServiceOrder,
completeServiceOrder,
getServiceOrderDetail,
markArrived,
markDeparted,
rejectServiceOrder,
startServiceOrder
} from '@/services/deliveryService.uts'
import { getNextStepText, getPrimaryActionText, needsServiceRecord } from '@/utils/deliveryCareUi.uts'
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
const orderId = ref('')
const order = ref<DeliveryOrderType | null>(null)
const timelineItems = ref([] as Array<any>)
const primaryText = computed((): string => order.value == null ? '查看详情' : getPrimaryActionText(order.value!.status))
const nextStepText = computed((): string => order.value == null ? '' : getNextStepText(order.value!.status))
const showRejectButton = computed((): boolean => order.value != null && (order.value!.status == 'pending_assignment' || order.value!.status == 'pending_accept'))
async function loadData() {
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
if (!authResult.ok || orderId.value == '') {
return
}
order.value = await getDeliveryOrderDetail(orderId.value)
if (order.value != null) {
timelineItems.value = order.value.timeline
}
order.value = await getServiceOrderDetail(orderId.value)
}
async function acceptOrder() {
await acceptDeliveryOrder(orderId.value)
uni.showToast({ title: '接单成功', icon: 'success' })
loadData()
function joinTags(tags: Array<string>): string {
if (tags.length == 0) return '无'
return tags.join(' / ')
}
function goRoute() {
uni.navigateTo({ url: '/pages/mall/delivery/orders/route?id=' + orderId.value })
function makePhoneCall(phone: string) {
uni.makePhoneCall({ phoneNumber: phone })
}
function goExecute() {
uni.navigateTo({ url: '/pages/mall/delivery/orders/execute?id=' + orderId.value })
function mockNavigate() {
uni.showToast({ title: '导航为 mock 占位', icon: 'none' })
}
function goException() {
uni.navigateTo({ url: '/pages/mall/delivery/orders/exception?id=' + orderId.value })
}
function goRecord() {
uni.navigateTo({ url: '/pages/mall/delivery/service-record/index?id=' + orderId.value })
}
async function rejectOrder() {
uni.showActionSheet({
itemList: ['时间冲突', '距离过远', '技能不匹配', '其他原因'],
success: async (result) => {
const reasons = ['时间冲突', '距离过远', '技能不匹配', '其他原因']
await rejectServiceOrder(orderId.value, reasons[result.tapIndex])
uni.showToast({ title: '已拒单', icon: 'success' })
loadData()
}
})
}
async function handlePrimary() {
if (order.value == null) {
return
}
const status = order.value.status
if (status == 'pending_assignment' || status == 'pending_accept') {
await acceptServiceOrder(orderId.value)
uni.showToast({ title: '已接单', icon: 'success' })
loadData()
return
}
if (status == 'accepted' || status == 'waiting_departure') {
await markDeparted(orderId.value)
uni.showToast({ title: '已出发', icon: 'success' })
loadData()
return
}
if (status == 'departed' || status == 'on_the_way') {
await markArrived(orderId.value)
uni.showToast({ title: '已到达', icon: 'success' })
loadData()
return
}
if (status == 'arrived') {
await checkInServiceOrder(orderId.value, '详情页签到', null)
uni.showToast({ title: '签到成功', icon: 'success' })
loadData()
return
}
if (status == 'checked_in') {
await startServiceOrder(orderId.value)
uni.showToast({ title: '开始服务', icon: 'success' })
loadData()
return
}
if (status == 'in_service' || status == 'serving' || status == 'completed') {
goRecord()
return
}
if (status == 'pending_confirm' || status == 'pending_acceptance' || status == 'pending_submit') {
if (needsServiceRecord(order.value)) {
uni.showToast({ title: '请先填写服务记录', icon: 'none' })
goRecord()
return
}
await completeServiceOrder(orderId.value)
uni.showToast({ title: '服务已完成', icon: 'success' })
loadData()
return
}
if (status == 'abnormal' || status == 'exception_pending') {
goException()
return
}
goRecord()
}
onLoad((options) => {
if (options != null) {
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
@@ -86,59 +218,123 @@ onLoad((options) => {
</script>
<style scoped>
.row-text {
display: block;
margin-bottom: 14rpx;
font-size: 26rpx;
line-height: 38rpx;
.page {
padding-bottom: 32rpx;
}
.status-card,
.card,
.action-card {
margin-bottom: 18rpx;
padding: 24rpx;
border-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0 10rpx 24rpx rgba(15, 35, 55, 0.06);
}
.status-head,
.inline-actions,
.action-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.status-title,
.section-title,
.timeline-title,
.primary-btn-text {
font-weight: 700;
}
.status-title,
.section-title {
font-size: 30rpx;
color: #16324f;
}
.item-row {
padding: 16rpx 0;
border-bottom: 1rpx solid #e6edf1;
.status-subtitle,
.status-tag,
.row-text,
.timeline-meta,
.timeline-desc,
.outline-btn-text,
.warn-btn-text {
font-size: 24rpx;
line-height: 36rpx;
}
.bottom-space {
height: 140rpx;
.status-subtitle,
.timeline-meta,
.timeline-desc,
.outline-btn-text {
color: #5e758c;
}
.fixed-bar {
position: fixed;
left: 24rpx;
right: 24rpx;
bottom: 24rpx;
padding: 16rpx;
flex-direction: row;
justify-content: space-between;
background: #ffffff;
border-radius: 24rpx;
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
.status-tag {
padding: 10rpx 18rpx;
border-radius: 999rpx;
background-color: #e6f3fa;
color: #176e97;
}
.bar-btn {
width: 48%;
padding: 20rpx 0;
.timeline-box {
margin-top: 18rpx;
padding: 18rpx;
border-radius: 18rpx;
background-color: #f7fbfd;
}
.timeline-item {
margin-bottom: 16rpx;
}
.timeline-title {
font-size: 26rpx;
color: #16324f;
}
.row-text {
display: block;
margin-top: 12rpx;
color: #16324f;
}
.inline-actions,
.action-row {
margin-top: 18rpx;
}
.outline-btn,
.warn-btn,
.primary-btn {
width: 31%;
padding: 18rpx 0;
border-radius: 18rpx;
align-items: center;
justify-content: center;
}
.primary-btn {
background: #0f766e;
.outline-btn {
background-color: #eef6fa;
}
.secondary-btn {
background: #eaf2f0;
.warn-btn {
background-color: #fff3e6;
}
.bar-text {
font-size: 28rpx;
.warn-btn-text {
color: #c77413;
font-weight: 700;
}
.primary-btn {
background-color: #1f7db4;
}
.primary-btn-text {
font-size: 26rpx;
color: #ffffff;
}
.secondary-text {
color: #0f766e;
}
</style>

250
pages/mall/delivery/orders/exception.uvue
View File

@@ -1,84 +1,104 @@
<template>
<ServicePageScaffold title="异常上报" fallback-url="/pages/mall/delivery/orders/detail">
<ServicePanel title="异常类型" subtitle="高风险异常需立即提醒联系家属、调度或 120。">
<view class="type-grid">
<view v-for="item in exceptionTypes" :key="item.value" class="type-item" :class="currentType == item.value ? 'type-active' : ''" @click="currentType = item.value">
<text class="type-text">{{ item.label }}</text>
<view class="page">
<view class="card">
<text class="section-title">异常类型</text>
<view class="type-grid">
<view v-for="item in exceptionTypes" :key="item.value" class="type-item" :class="currentType == item.value ? 'type-active' : ''" @click="currentType = item.value">
<text class="type-text">{{ item.label }}</text>
</view>
</view>
</view>
</ServicePanel>
<ServicePanel title="异常说明" subtitle="说明必填，支持上传图片凭证。">
<textarea class="textarea" v-model="description" placeholder="请填写异常发生情况、现场处置动作和需要协同的事项"></textarea>
<button class="secondary-btn" @click="chooseImage">上传异常图片</button>
<text class="info-text">已选择图片：{{ images.length }} 张</text>
<text v-if="isHighRisk" class="risk-text">高风险异常：请同步联系家属/调度/120，并保留处置留痕。</text>
</ServicePanel>
<button class="primary-btn" :disabled="submitting" @click="submitForm">{{ submitting ? '提交中...' : '提交异常' }}</button>
<view class="card">
<text class="section-title">异常说明</text>
<textarea class="textarea" v-model="description" placeholder="请填写异常说明"></textarea>
<input class="field" v-model="occurredAt" placeholder="发生时间，例如 2026-05-20 15:36" />
<input class="field" v-model="locationText" placeholder="当前位置 mock" />
<view class="switch-row"><text class="switch-label">需要平台介入</text><switch :checked="needPlatformIntervention" color="#1f7db4" @change="changePlatformIntervention" /></view>
<view class="switch-row"><text class="switch-label">申请取消订单</text><switch :checked="requestCancelOrder" color="#1f7db4" @change="changeCancelOrder" /></view>
<view class="switch-row"><text class="switch-label">申请改期</text><switch :checked="requestReschedule" color="#1f7db4" @change="changeReschedule" /></view>
<view class="mock-upload" @click="addMockImage"><text class="mock-upload-text">图片上传占位</text></view>
<text class="info-text">已添加图片占位：{{ imageCount }} 张</text>
</view>
<view class="action-row">
<view class="outline-btn" @click="goBack"><text class="outline-btn-text">返回详情</text></view>
<view class="primary-btn" @click="submitForm"><text class="primary-btn-text">提交异常</text></view>
</view>
</view>
</ServicePageScaffold>
</template>
<script setup lang="uts">
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import { submitException } from '@/services/deliveryService.uts'
import { submitAbnormalReport } from '@/services/deliveryService.uts'
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
const orderId = ref('')
const currentType = ref('cannot_contact_elder')
const currentType = ref('cannot_contact_user')
const description = ref('')
const images = ref([] as Array<string>)
const submitting = ref(false)
const occurredAt = ref(new Date().toISOString().replace('T', ' ').substring(0, 19))
const locationText = ref('当前位置 mock')
const needPlatformIntervention = ref(false)
const requestCancelOrder = ref(false)
const requestReschedule = ref(false)
const imageCount = ref(0)
const exceptionTypes = [
{ label: '无法联系老人', value: 'cannot_contact_elder' },
{ label: '无法入户', value: 'cannot_enter_home' },
{ label: '联系不上用户', value: 'cannot_contact_user' },
{ label: '用户不在家', value: 'user_not_home' },
{ label: '地址错误', value: 'wrong_address' },
{ label: '老人拒绝服务', value: 'elder_refuse_service' },
{ label: '家属要求改期', value: 'family_requests_reschedule' },
{ label: '现场存在安全风险', value: 'safety_risk' },
{ label: '老人身体异常', value: 'elder_health_abnormal' },
{ label: '家属不配合', value: 'family_uncooperative' },
{ label: '服务对象身体异常', value: 'elder_health_abnormal' },
{ label: '环境不适合服务', value: 'safety_risk' },
{ label: '超出服务范围', value: 'outside_service_scope' },
{ label: '服务人员无法继续服务', value: 'staff_cannot_continue' },
{ label: '突发疾病', value: 'emergency_illness' },
{ label: '服务项目无法完成', value: 'item_unavailable' },
{ label: '投诉纠纷', value: 'complaint_dispute' },
{ label: '其他', value: 'other' }
]
const isHighRisk = computed(() => currentType.value == 'safety_risk' || currentType.value == 'elder_health_abnormal' || currentType.value == 'emergency_illness')
function wrapChooseImage(): Promise<Array<string>> {
return new Promise((resolve, reject) => {
uni.chooseImage({
count: 3,
sourceType: ['camera', 'album'],
success: (res) => { resolve(res.tempFilePaths) },
fail: () => { reject(new Error('选择图片失败')) }
})
})
function changePlatformIntervention(event: any) {
needPlatformIntervention.value = event.detail.value === true
}
async function chooseImage() {
try {
images.value = await wrapChooseImage()
} catch (error) {
uni.showToast({ title: '图片选择失败', icon: 'none' })
}
function changeCancelOrder(event: any) {
requestCancelOrder.value = event.detail.value === true
}
function changeReschedule(event: any) {
requestReschedule.value = event.detail.value === true
}
function addMockImage() {
imageCount.value = imageCount.value + 1
uni.showToast({ title: '已添加图片占位', icon: 'success' })
}
async function submitForm() {
if (submitting.value) return
if (description.value.trim() == '') {
uni.showToast({ title: '异常说明不能为空', icon: 'none' })
uni.showToast({ title: '请填写异常说明', icon: 'none' })
return
}
submitting.value = true
try {
await submitException(orderId.value, { exceptionType: currentType.value as any, description: description.value.trim(), images: images.value })
uni.showToast({ title: '异常已上报', icon: 'success' })
uni.setStorageSync('delivery_orders_tab', 'exception')
uni.switchTab({ url: '/pages/mall/delivery/orders/index' })
} finally {
submitting.value = false
}
await submitAbnormalReport(orderId.value, {
exceptionType: currentType.value as any,
description: description.value,
images: imageCount.value > 0 ? ['mock-abnormal-image-' + String(imageCount.value)] : [] as Array<string>,
occurredAt: occurredAt.value,
locationText: locationText.value,
needPlatformIntervention: needPlatformIntervention.value,
requestCancelOrder: requestCancelOrder.value,
requestReschedule: requestReschedule.value
})
uni.showToast({ title: '异常已提交', icon: 'success' })
setTimeout(() => {
uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
}, 300)
}
function goBack() {
uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
}
onLoad(async (options) => {
@@ -93,6 +113,51 @@ onLoad(async (options) => {
</script>
<style scoped>
.page {
padding-bottom: 32rpx;
}
.card {
margin-bottom: 18rpx;
padding: 24rpx;
border-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0 10rpx 24rpx rgba(15, 35, 55, 0.06);
}
.section-title,
.primary-btn-text,
.type-text {
font-weight: 700;
}
.section-title {
font-size: 30rpx;
color: #16324f;
}
.field,
.textarea {
margin-top: 16rpx;
padding: 0 20rpx;
border-radius: 18rpx;
background-color: #f4f8fb;
font-size: 26rpx;
color: #16324f;
box-sizing: border-box;
}
.field {
height: 84rpx;
}
.textarea {
width: 100%;
min-height: 180rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.type-grid {
flex-direction: row;
flex-wrap: wrap;
@@ -102,13 +167,13 @@ onLoad(async (options) => {
.type-item {
width: 48%;
padding: 18rpx 16rpx;
margin-bottom: 16rpx;
margin-top: 16rpx;
border-radius: 18rpx;
background: #eef2f6;
}
.type-active {
background: #0f766e;
background: #1f7db4;
}
.type-text {
@@ -121,47 +186,54 @@ onLoad(async (options) => {
color: #ffffff;
}
.textarea {
width: 100%;
min-height: 220rpx;
padding: 24rpx;
border-radius: 20rpx;
background: #f2f7f6;
font-size: 28rpx;
box-sizing: border-box;
}
.secondary-btn,
.primary-btn {
margin-top: 18rpx;
border-radius: 18rpx;
font-size: 28rpx;
}
.secondary-btn {
background: #eaf2f0;
color: #0f766e;
}
.primary-btn {
background: #0f766e;
color: #ffffff;
.switch-row,
.action-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 16rpx;
}
.switch-label,
.info-text,
.risk-text {
display: block;
margin-top: 12rpx;
.outline-btn-text {
font-size: 24rpx;
line-height: 36rpx;
}
.info-text {
color: #5e758c;
}
.risk-text {
color: #b45309;
font-weight: 700;
.mock-upload,
.outline-btn,
.primary-btn {
margin-top: 18rpx;
padding: 18rpx 0;
border-radius: 18rpx;
align-items: center;
justify-content: center;
}
.mock-upload,
.outline-btn {
background: #eaf2f0;
}
.mock-upload-text,
.outline-btn-text {
font-size: 26rpx;
color: #176e97;
}
.outline-btn,
.primary-btn {
width: 48%;
}
.primary-btn {
background: #1f7db4;
}
.primary-btn-text {
font-size: 26rpx;
color: #ffffff;
}
</style>

459
pages/mall/delivery/orders/index.uvue
View File

@@ -1,164 +1,371 @@
<template>
<ServicePageScaffold title="工单列表" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
<view class="delivery-orders-page">
<view class="delivery-orders-hero">
<view class="delivery-orders-hero-top">
<view class="delivery-orders-hero-main">
<text class="delivery-orders-hero-title">服务工单</text>
<text class="delivery-orders-hero-subtitle">{{ getCurrentTabLabel() }} · {{ getCurrentTabSubtitle() }}</text>
</view>
<view class="delivery-orders-hero-badge">
<text class="delivery-orders-hero-badge-text">{{ orders.length }} 单</text>
</view>
</view>
<view class="delivery-orders-hero-tip-box">
<text class="delivery-orders-hero-tip">接单前仅显示脱敏信息，接单后查看详情可见完整信息。</text>
<ServicePageScaffold title="订单" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
<view class="page">
<view class="hero">
<text class="hero-title">服务订单</text>
<text class="hero-subtitle">待接单、今日订单、历史订单统一查看</text>
</view>
<view class="tab-row">
<view v-for="item in tabs" :key="item.value" class="tab-item" :class="currentTab == item.value ? 'tab-item-active' : ''" @click="switchTab(item.value)">
<text class="tab-text" :class="currentTab == item.value ? 'tab-text-active' : ''">{{ item.label }}</text>
</view>
</view>
<view class="delivery-orders-card delivery-orders-filter-card">
<view class="delivery-orders-card-header">
<view>
<text class="delivery-orders-card-title">状态筛选</text>
<text class="delivery-orders-card-subtitle">横向切换工单状态，列表会同步刷新对应内容</text>
</view>
</view>
<scroll-view
class="status-scroll"
direction="horizontal"
:show-scrollbar="false"
:scroll-into-view="activeTabViewId"
scroll-with-animation="true"
>
<view class="status-tabs-row">
<view
v-for="item in tabs"
:key="item.value"
:id="'status-tab-' + item.value"
class="status-tab-item"
:class="currentTab == item.value ? 'status-tab-active' : ''"
@click="switchTab(item.value)"
>
<text class="status-tab-text" :class="currentTab == item.value ? 'status-tab-text-active' : ''">{{ item.label }}</text>
<view class="list-card">
<view v-if="orders.length == 0" class="empty-box"><text class="empty-text">{{ emptyText }}</text></view>
<view v-for="item in orders" :key="item.id" class="order-card">
<view class="order-top" @click="goDetail(item.id)">
<view class="order-main">
<text class="order-title">{{ item.serviceName }}</text>
<text class="order-subtitle">{{ item.elderName }} · {{ item.appointmentTime }}</text>
</view>
<text class="order-status">{{ item.statusText }}</text>
</view>
</scroll-view>
</view>
<view class="delivery-orders-card delivery-orders-list-card">
<view class="delivery-orders-card-header">
<view>
<text class="delivery-orders-card-title">工单列表</text>
<text class="delivery-orders-card-subtitle">突出状态、地址、风险与下一步处理动作</text>
<view class="meta-box" @click="goDetail(item.id)">
<text class="meta-text">地址：{{ item.address }} {{ item.addressDetail }}</text>
<text class="meta-text">时长：{{ item.duration }} 分钟 · 预计收入：¥{{ item.staffIncome }}</text>
<text class="meta-text">风险：{{ formatTags(item.riskTags) }}</text>
</view>
</view>
<view v-if="orders.length == 0" class="empty-box"><text class="empty-text">{{ getEmptyText() }}</text></view>
<view v-for="item in orders" :key="item.id" class="order-card" :class="getStatusSurfaceClass(item.status)">
<view class="card-top">
<view class="order-main" @click="goDetail(item.id)">
<text class="order-title">{{ item.serviceType }} · {{ item.serviceName }}</text>
<text class="order-meta">服务对象：{{ item.elderNameMasked }}</text>
</view>
<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
</view>
<view class="order-info-box" @click="goDetail(item.id)">
<text class="order-meta">预约时间：{{ item.appointmentStartTime }}</text>
<text class="order-meta">服务地址：{{ item.addressSummary }}</text>
<text class="order-meta">距离：{{ item.distanceKm }} · 风险：{{ formatRiskTags(item.riskTags) }}</text>
</view>
<view class="order-footer">
<text class="order-next-text">下一步：{{ getPrimaryActionText(item.status) }}</text>
<view class="order-action-btn order-action-btn-secondary" @click="goDetail(item.id)">
<text class="order-action-btn-text order-action-btn-text-secondary">查看详情</text>
</view>
<view v-if="item.status == 'pending_accept'" class="order-action-btn" :class="getPrimaryActionClass(item.status)" @click="acceptOrder(item.id)"><text class="order-action-btn-text">接单</text></view>
<view v-else-if="item.status == 'accepted'" class="order-action-btn" :class="getPrimaryActionClass(item.status)" @click="goRoute(item.id)"><text class="order-action-btn-text">去出发</text></view>
<view v-else-if="item.status == 'on_the_way' || item.status == 'arrived'" class="order-action-btn" :class="getPrimaryActionClass(item.status)" @click="goCheckin(item.id)"><text class="order-action-btn-text">去签到</text></view>
<view v-else-if="item.status == 'checked_in' || item.status == 'serving' || item.status == 'pending_submit' || item.status == 'pending_acceptance'" class="order-action-btn" :class="getPrimaryActionClass(item.status)" @click="goExecute(item.id)"><text class="order-action-btn-text">继续服务</text></view>
<view class="action-row">
<view class="outline-btn" @click="goDetail(item.id)"><text class="outline-btn-text">查看详情</text></view>
<view v-if="showReject(item.status)" class="warn-btn" @click="rejectOrder(item.id)"><text class="warn-btn-text">拒单</text></view>
<view class="primary-btn" @click="handleAction(item.id, item.status)"><text class="primary-btn-text">{{ getActionText(item.status) }}</text></view>
</view>
</view>
</view>
<view class="delivery-orders-safe"></view>
</view>
</ServicePageScaffold>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
import { acceptDeliveryOrder, getDeliveryOrders } from '@/services/deliveryService.uts'
import type { DeliveryOrderType } from '@/types/delivery.uts'
import type { DeliveryOrderStatus, DeliveryOrderType } from '@/types/delivery.uts'
import {
acceptServiceOrder,
checkInServiceOrder,
completeServiceOrder,
getHistoryServiceOrders,
getPendingServiceOrders,
getTodayServiceOrders,
markArrived,
markDeparted,
rejectServiceOrder,
startServiceOrder
} from '@/services/deliveryService.uts'
import { getDeliveryOrderTabs, getPrimaryActionText } from '@/utils/deliveryCareUi.uts'
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
const tabs = [
{ label: '全部', value: 'all' },
{ label: '待接单', value: 'pending_accept' },
{ label: '待出发', value: 'accepted' },
{ label: '服务中', value: 'serving' },
{ label: '待提交', value: 'pending_submit' },
{ label: '已完成', value: 'completed' },
{ label: '异常', value: 'exception' }
]
const tabs = getDeliveryOrderTabs()
const currentTab = ref('pending')
const orders = ref([] as Array<DeliveryOrderType>)
const currentTab = ref('all')
const activeTabViewId = ref('status-tab-all')
const orders = ref<Array<DeliveryOrderType>>([])
const emptyText = computed((): string => {
if (currentTab.value == 'pending') return '暂无待接单订单'
if (currentTab.value == 'today') return '暂无今日订单'
return '暂无历史订单'
})
function getCurrentTabLabel(): string {
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].value == currentTab.value) {
return tabs[i].label
async function loadData() {
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
if (!authResult.ok) {
return
}
if (currentTab.value == 'pending') {
orders.value = await getPendingServiceOrders()
return
}
if (currentTab.value == 'history') {
orders.value = await getHistoryServiceOrders()
return
}
orders.value = await getTodayServiceOrders()
}
function consumeStoredTab(): void {
const storedTab = uni.getStorageSync('delivery_order_tab') as string | null
if (storedTab != null && storedTab != '') {
currentTab.value = storedTab
uni.removeStorageSync('delivery_order_tab')
}
}
function switchTab(tab: string) {
currentTab.value = tab
loadData()
}
function formatTags(tags: Array<string>): string {
if (tags.length == 0) return '常规'
return tags.join(' / ')
}
function showReject(status: DeliveryOrderStatus): boolean {
return status == 'pending_assignment' || status == 'pending_accept'
}
function getActionText(status: DeliveryOrderStatus): string {
return getPrimaryActionText(status)
}
function goDetail(orderId: string) {
uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId })
}
function goRecord(orderId: string) {
uni.navigateTo({ url: '/pages/mall/delivery/service-record/index?id=' + orderId })
}
function rejectOrder(orderId: string) {
uni.showActionSheet({
itemList: ['时间冲突', '距离过远', '技能不匹配', '其他原因'],
success: async (result) => {
const reasons = ['时间冲突', '距离过远', '技能不匹配', '其他原因']
const reason = reasons[result.tapIndex]
await rejectServiceOrder(orderId, reason)
uni.showToast({ title: '已拒单', icon: 'success' })
loadData()
}
})
}
return '全部'
}
function getCurrentTabSubtitle(): string {
if (currentTab.value == 'pending_accept') {
return '优先响应新派单，避免错过服务时效'
async function handleAction(orderId: string, status: DeliveryOrderStatus) {
if (status == 'pending_assignment' || status == 'pending_accept') {
await acceptServiceOrder(orderId)
uni.showToast({ title: '接单成功', icon: 'success' })
loadData()
return
}
if (currentTab.value == 'accepted') {
return '确认出发路线，尽快进入上门流程'
if (status == 'accepted' || status == 'waiting_departure') {
await markDeparted(orderId)
uni.showToast({ title: '已标记出发', icon: 'success' })
loadData()
return
}
if (currentTab.value == 'serving') {
return '关注执行进度、签到与服务记录'
if (status == 'departed' || status == 'on_the_way') {
await markArrived(orderId)
uni.showToast({ title: '已标记到达', icon: 'success' })
loadData()
return
}
if (currentTab.value == 'pending_submit') {
return '尽快补齐记录，完成本次服务提交'
if (status == 'arrived') {
await checkInServiceOrder(orderId, '已到达并签到', null)
uni.showToast({ title: '签到成功', icon: 'success' })
loadData()
return
}
if (currentTab.value == 'completed') {
return '回顾已完成服务，跟进结算与评价反馈'
if (status == 'checked_in') {
await startServiceOrder(orderId)
uni.showToast({ title: '已开始服务', icon: 'success' })
loadData()
return
}
if (currentTab.value == 'exception') {
return '优先处理异常事项，保障服务连续性'
if (status == 'in_service' || status == 'serving' || status == 'completed') {
goRecord(orderId)
return
}
return '集中查看全部服务工单与处理进展'
}
function isValidTab(tab: string): boolean {
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].value == tab) {
return true
if (status == 'pending_confirm' || status == 'pending_acceptance' || status == 'pending_submit') {
const result = await completeServiceOrder(orderId)
if (result == null) {
uni.showToast({ title: '请先填写服务记录', icon: 'none' })
return
}
uni.showToast({ title: '服务已完成', icon: 'success' })
loadData()
return
}
return false
goDetail(orderId)
}
onLoad(() => {
consumeStoredTab()
loadData()
})
onShow(() => {
consumeStoredTab()
loadData()
})
</script>
<style scoped>
.page {
min-height: 100%;
margin-left: -24rpx;
margin-right: -24rpx;
margin-top: -24rpx;
padding: 0 24rpx 36rpx;
background-color: #f3f8fb;
}
function syncActiveTabViewId(): void {
activeTabViewId.value = 'status-tab-' + currentTab.value
.hero {
padding: 68rpx 28rpx 26rpx;
border-bottom-left-radius: 32rpx;
border-bottom-right-radius: 32rpx;
background: linear-gradient(180deg, #1f7db4 0%, #1aa67f 100%);
}
function applyTab(tab: string): void {
if (tab == '' || !isValidTab(tab)) {
currentTab.value = 'all'
} else {
currentTab.value = tab
}
syncActiveTabViewId()
.hero-title {
font-size: 40rpx;
font-weight: 700;
color: #ffffff;
}
.hero-subtitle,
.meta-text,
.empty-text,
.outline-btn-text,
.tab-text {
font-size: 24rpx;
line-height: 36rpx;
}
.hero-subtitle {
margin-top: 10rpx;
color: rgba(255, 255, 255, 0.9);
}
.tab-row,
.order-top,
.action-row {
display: flex;
flex-direction: row;
}
.tab-row {
justify-content: space-between;
margin-top: 20rpx;
padding: 10rpx;
border-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
}
.tab-item {
width: 32%;
padding: 18rpx 0;
border-radius: 18rpx;
align-items: center;
justify-content: center;
}
.tab-item-active {
background-color: #e6f3fa;
}
.tab-text {
color: #5e758c;
}
.tab-text-active {
font-weight: 700;
color: #176e97;
}
.list-card {
margin-top: 22rpx;
padding: 24rpx;
border-radius: 28rpx;
background-color: #ffffff;
box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
}
.order-card {
padding: 24rpx;
margin-bottom: 18rpx;
border-radius: 22rpx;
background-color: #f7fbfd;
}
.order-top,
.action-row {
justify-content: space-between;
align-items: center;
}
.order-main {
flex: 1;
padding-right: 18rpx;
}
.order-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.order-subtitle,
.order-status,
.meta-text,
.empty-text,
.outline-btn-text,
.warn-btn-text,
.primary-btn-text {
margin-top: 10rpx;
}
.order-subtitle,
.meta-text,
.empty-text,
.outline-btn-text {
color: #5e758c;
}
.order-status {
font-size: 24rpx;
color: #176e97;
}
.meta-box {
margin-top: 14rpx;
padding: 18rpx;
border-radius: 18rpx;
background-color: #eef7fb;
}
.action-row {
margin-top: 18rpx;
flex-wrap: wrap;
}
.outline-btn,
.warn-btn,
.primary-btn {
width: 31%;
padding: 18rpx 0;
border-radius: 18rpx;
align-items: center;
justify-content: center;
}
.outline-btn {
background-color: #eef6fa;
}
.warn-btn {
background-color: #fff3e6;
}
.warn-btn-text {
font-size: 26rpx;
font-weight: 700;
color: #c77413;
}
.primary-btn {
background-color: #1f7db4;
}
.primary-btn-text {
font-size: 26rpx;
font-weight: 700;
color: #ffffff;
}
.empty-box {
padding: 24rpx 0;
}
</style>
}
function consumeStoredTab(): void {