Files
medical-mall/pages/mall/delivery/orders/index.uvue

823 lines
17 KiB
Plaintext

<template>
<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="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>
<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 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>
</ServicePageScaffold>
</template>
<script setup lang="uts">
import { computed, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
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'
const tabs = getDeliveryOrderTabs()
const currentTab = ref('pending')
const orders = ref([] as Array<DeliveryOrderType>)
const emptyText = computed((): string => {
if (currentTab.value == 'pending') return '暂无待接单订单'
if (currentTab.value == 'today') return '暂无今日订单'
return '暂无历史订单'
})
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()
}
})
}
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 (status == 'accepted' || status == 'waiting_departure') {
await markDeparted(orderId)
uni.showToast({ title: '已标记出发', icon: 'success' })
loadData()
return
}
if (status == 'departed' || status == 'on_the_way') {
await markArrived(orderId)
uni.showToast({ title: '已标记到达', icon: 'success' })
loadData()
return
}
if (status == 'arrived') {
await checkInServiceOrder(orderId, '已到达并签到', null)
uni.showToast({ title: '签到成功', icon: 'success' })
loadData()
return
}
if (status == 'checked_in') {
await startServiceOrder(orderId)
uni.showToast({ title: '已开始服务', icon: 'success' })
loadData()
return
}
if (status == 'in_service' || status == 'serving' || status == 'completed') {
goRecord(orderId)
return
}
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
}
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;
}
.hero {
padding: 68rpx 28rpx 26rpx;
border-bottom-left-radius: 32rpx;
border-bottom-right-radius: 32rpx;
background: linear-gradient(180deg, #1f7db4 0%, #1aa67f 100%);
}
.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 {
const storedTab = uni.getStorageSync('delivery_orders_tab') as string | null
if (storedTab != null && storedTab != '') {
uni.removeStorageSync('delivery_orders_tab')
applyTab(storedTab)
}
}
function getEmptyText(): string {
if (currentTab.value == 'pending_accept') {
return '暂无待接单工单'
}
if (currentTab.value == 'accepted') {
return '暂无待出发工单'
}
if (currentTab.value == 'serving') {
return '暂无服务中工单'
}
if (currentTab.value == 'pending_submit') {
return '暂无待提交工单'
}
if (currentTab.value == 'completed') {
return '暂无已完成工单'
}
if (currentTab.value == 'exception') {
return '暂无异常工单'
}
return '暂无工单'
}
function formatRiskTags(tags: Array<string>): string {
if (tags.length == 0) {
return '常规服务'
}
return tags.join(' / ')
}
function getPrimaryActionText(status: string): string {
if (status == 'pending_accept') {
return '立即接单'
}
if (status == 'accepted') {
return '准备出发'
}
if (status == 'on_the_way' || status == 'arrived') {
return '去签到'
}
if (status == 'checked_in' || status == 'serving' || status == 'pending_submit' || status == 'pending_acceptance') {
return '继续服务'
}
if (status == 'exception_pending') {
return '处理异常'
}
if (status == 'completed' || status == 'settled' || status == 'archived') {
return '查看结果'
}
return '查看详情'
}
function getPrimaryActionClass(status: string): string {
if (status == 'pending_accept') {
return 'action-warning'
}
if (status == 'accepted' || status == 'on_the_way' || status == 'arrived') {
return 'action-primary'
}
if (status == 'checked_in' || status == 'serving' || status == 'pending_submit' || status == 'pending_acceptance') {
return 'action-teal'
}
if (status == 'exception_pending') {
return 'action-danger'
}
if (status == 'completed' || status == 'settled' || status == 'archived') {
return 'action-success'
}
return 'action-default'
}
function getStatusSurfaceClass(status: string): string {
if (status == 'pending_accept') {
return 'status-surface-warning'
}
if (status == 'accepted' || status == 'on_the_way' || status == 'arrived') {
return 'status-surface-primary'
}
if (status == 'checked_in' || status == 'serving' || status == 'pending_submit' || status == 'pending_acceptance') {
return 'status-surface-teal'
}
if (status == 'exception_pending') {
return 'status-surface-danger'
}
if (status == 'completed' || status == 'settled' || status == 'archived') {
return 'status-surface-success'
}
return 'status-surface-default'
}
async function loadData() {
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
if (!authResult.ok) {
return
}
orders.value = await getDeliveryOrders({ tab: currentTab.value, keyword: '' })
}
function switchTab(tab: string) {
if (currentTab.value == tab) {
return
}
applyTab(tab)
loadData()
}
function goDetail(id: string) {
uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + id })
}
function goRoute(id: string) {
uni.navigateTo({ url: '/pages/mall/delivery/orders/route?id=' + id })
}
function goCheckin(id: string) {
uni.navigateTo({ url: '/pages/mall/delivery/orders/checkin?id=' + id })
}
function goExecute(id: string) {
uni.navigateTo({ url: '/pages/mall/delivery/orders/execute?id=' + id })
}
function acceptOrder(id: string) {
uni.showModal({
title: '确认接单',
content: '接单后将展示完整服务对象信息,并进入待出发状态。',
success: async (result) => {
if (result.confirm) {
await acceptDeliveryOrder(id)
uni.showToast({ title: '接单成功', icon: 'success' })
loadData()
}
}
})
}
onLoad((options) => {
let routeTab = ''
if (options != null) {
const tab = getDeliveryRouteParam(options as UTSJSONObject, 'tab')
if (tab != null && tab != '') {
routeTab = tab
}
}
if (routeTab != '') {
uni.removeStorageSync('delivery_orders_tab')
applyTab(routeTab)
} else {
consumeStoredTab()
}
loadData()
})
onShow(() => {
consumeStoredTab()
loadData()
})
</script>
<style scoped>
.delivery-orders-page {
min-height: 100%;
margin-left: -24rpx;
margin-right: -24rpx;
margin-top: -24rpx;
padding-bottom: 32rpx;
background-color: #f4f8fb;
}
.delivery-orders-hero {
padding: 72rpx 28rpx 34rpx;
border-bottom-left-radius: 36rpx;
border-bottom-right-radius: 36rpx;
background-color: #0f766e;
}
.delivery-orders-hero-top,
.delivery-orders-card-header,
.card-top,
.order-footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.delivery-orders-hero-top {
align-items: center;
}
.delivery-orders-hero-main {
flex: 1;
padding-right: 16rpx;
}
.delivery-orders-hero-title {
font-size: 38rpx;
font-weight: 700;
color: #ffffff;
}
.delivery-orders-hero-subtitle {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 34rpx;
color: rgba(255, 255, 255, 0.9);
}
.delivery-orders-hero-badge {
padding: 10rpx 18rpx;
border-radius: 999rpx;
background-color: rgba(255, 255, 255, 0.18);
}
.delivery-orders-hero-badge-text {
font-size: 24rpx;
color: #ffffff;
}
.delivery-orders-hero-tip-box {
margin-top: 28rpx;
padding: 20rpx 22rpx;
border-radius: 22rpx;
background-color: rgba(255, 255, 255, 0.16);
}
.delivery-orders-hero-tip {
font-size: 23rpx;
line-height: 34rpx;
color: rgba(255, 255, 255, 0.88);
}
.delivery-orders-card {
margin-left: 24rpx;
margin-right: 24rpx;
margin-top: 22rpx;
padding: 26rpx;
border-radius: 28rpx;
background-color: #ffffff;
box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
}
.delivery-orders-filter-card {
margin-top: -18rpx;
position: relative;
}
.delivery-orders-card-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.delivery-orders-card-subtitle {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
line-height: 34rpx;
color: #64748b;
}
.status-scroll {
margin-top: 22rpx;
width: 100%;
flex-direction: row;
}
.status-tabs-row {
flex-direction: row;
align-items: center;
padding-left: 4rpx;
padding-right: 20rpx;
padding-top: 4rpx;
padding-bottom: 4rpx;
}
.status-tab-item {
flex-shrink: 0;
height: 64rpx;
padding-left: 28rpx;
padding-right: 28rpx;
margin-right: 16rpx;
border-radius: 999rpx;
background-color: #f1f5f9;
flex-direction: row;
align-items: center;
justify-content: center;
}
.status-tab-active {
background-color: #0f766e;
box-shadow: 0 8rpx 18rpx rgba(15, 118, 110, 0.18);
}
.status-tab-text {
font-size: 26rpx;
font-weight: 500;
color: #64748b;
}
.status-tab-text-active {
color: #ffffff;
font-weight: 700;
}
.order-card {
margin-top: 22rpx;
padding: 24rpx;
border-radius: 24rpx;
background: #f8fbfc;
border-width: 1rpx;
border-style: solid;
border-color: #e5edf5;
border-top-width: 8rpx;
}
.status-surface-warning {
border-top-color: #b45309;
background: linear-gradient(180deg, #fffaf5, #f8fbfc);
}
.status-surface-primary {
border-top-color: #2563eb;
background: linear-gradient(180deg, #f5f9ff, #f8fbfc);
}
.status-surface-teal {
border-top-color: #0f766e;
background: linear-gradient(180deg, #f3fbfa, #f8fbfc);
}
.status-surface-success {
border-top-color: #15803d;
background: linear-gradient(180deg, #f4fbf6, #f8fbfc);
}
.status-surface-danger {
border-top-color: #dc2626;
background: linear-gradient(180deg, #fff6f6, #f8fbfc);
}
.status-surface-default {
border-top-color: #94a3b8;
}
.card-top,
.order-footer {
align-items: center;
}
.order-main {
flex: 1;
padding-right: 16rpx;
}
.order-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.order-info-box {
margin-top: 18rpx;
padding: 20rpx;
border-radius: 20rpx;
background: #ffffff;
}
.order-meta,
.empty-text,
.order-next-text {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #64748b;
}
.order-footer {
margin-top: 20rpx;
}
.order-action-btn {
min-width: 132rpx;
margin-left: 14rpx;
padding-top: 14rpx;
padding-bottom: 14rpx;
padding-left: 22rpx;
padding-right: 22rpx;
border-radius: 18rpx;
align-items: center;
justify-content: center;
}
.order-action-btn-secondary {
background: #eaf2f0;
}
.order-action-btn-text {
font-size: 28rpx;
font-weight: 700;
color: #ffffff;
}
.order-action-btn-text-secondary {
color: #0f766e;
}
.action-warning {
background: #b45309;
}
.action-primary {
background: #2563eb;
}
.action-teal {
background: #0f766e;
}
.action-success {
background: #15803d;
}
.action-danger {
background: #dc2626;
}
.action-default {
background: #64748b;
}
.empty-box {
padding: 24rpx;
margin-top: 22rpx;
border-radius: 22rpx;
background: #f8fbfc;
display: flex;
align-items: center;
justify-content: center;
}
.delivery-orders-safe {
height: 40rpx;
}
</style>