144 lines
4.6 KiB
Plaintext
144 lines
4.6 KiB
Plaintext
<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>
|
||
</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>
|
||
</ServicePanel>
|
||
|
||
<ServicePanel title="状态时间轴" subtitle="所有关键动作都需要留痕。">
|
||
<ServiceTimeline :items="timelineItems"></ServiceTimeline>
|
||
</ServicePanel>
|
||
|
||
<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>
|
||
</ServicePageScaffold>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
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 ServiceTimeline from '@/components/homeService/ServiceTimeline.uvue'
|
||
import { acceptDeliveryOrder, getDeliveryOrderDetail } from '@/services/deliveryService.uts'
|
||
import type { DeliveryOrderType } from '@/types/delivery.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>)
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
async function acceptOrder() {
|
||
await acceptDeliveryOrder(orderId.value)
|
||
uni.showToast({ title: '接单成功', icon: 'success' })
|
||
loadData()
|
||
}
|
||
|
||
function goRoute() {
|
||
uni.navigateTo({ url: '/pages/mall/delivery/orders/route?id=' + orderId.value })
|
||
}
|
||
|
||
function goExecute() {
|
||
uni.navigateTo({ url: '/pages/mall/delivery/orders/execute?id=' + orderId.value })
|
||
}
|
||
|
||
function goException() {
|
||
uni.navigateTo({ url: '/pages/mall/delivery/orders/exception?id=' + orderId.value })
|
||
}
|
||
|
||
onLoad((options) => {
|
||
if (options != null) {
|
||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||
}
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.row-text {
|
||
display: block;
|
||
margin-bottom: 14rpx;
|
||
font-size: 26rpx;
|
||
line-height: 38rpx;
|
||
color: #16324f;
|
||
}
|
||
|
||
.item-row {
|
||
padding: 16rpx 0;
|
||
border-bottom: 1rpx solid #e6edf1;
|
||
}
|
||
|
||
.bottom-space {
|
||
height: 140rpx;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.bar-btn {
|
||
width: 48%;
|
||
padding: 20rpx 0;
|
||
border-radius: 18rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.primary-btn {
|
||
background: #0f766e;
|
||
}
|
||
|
||
.secondary-btn {
|
||
background: #eaf2f0;
|
||
}
|
||
|
||
.bar-text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.secondary-text {
|
||
color: #0f766e;
|
||
}
|
||
</style> |