解决登录显示、首页显示bug
This commit is contained in:
934
pages/mall/delivery/home/index.uvue
Normal file
934
pages/mall/delivery/home/index.uvue
Normal file
@@ -0,0 +1,934 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="工作台" fallback-url="/pages/user/login?mode=delivery" :hide-header="true">
|
||||
<view class="delivery-home-page">
|
||||
<view class="delivery-home-hero">
|
||||
<view class="delivery-home-hero-top">
|
||||
<view class="delivery-home-hero-main">
|
||||
<text class="delivery-home-hero-title">服务工作台</text>
|
||||
<text class="delivery-home-hero-subtitle">聚焦今日任务、异常处理和服务进度，帮助你快速进入当前工作状态。</text>
|
||||
<view class="delivery-home-user-tags">
|
||||
<text class="delivery-home-user-tag delivery-home-user-tag-light">{{ onlineStatusText }}</text>
|
||||
<text class="delivery-home-user-tag delivery-home-user-tag-soft">今日完成 {{ dashboard.completedCount }} 单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-home-hero-actions">
|
||||
<view class="delivery-home-hero-action" @click="loadData()">
|
||||
<text class="delivery-home-hero-action-text">刷新</text>
|
||||
</view>
|
||||
<view class="delivery-home-hero-action" @click="goMessages()">
|
||||
<text class="delivery-home-hero-action-text">消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-hero-info-row">
|
||||
<view class="delivery-home-hero-info-item">
|
||||
<text class="delivery-home-hero-info-value">{{ dashboard.pendingAcceptCount }}</text>
|
||||
<text class="delivery-home-hero-info-label">待接单</text>
|
||||
</view>
|
||||
<view class="delivery-home-hero-info-item">
|
||||
<text class="delivery-home-hero-info-value">{{ dashboard.servingCount }}</text>
|
||||
<text class="delivery-home-hero-info-label">服务中</text>
|
||||
</view>
|
||||
<view class="delivery-home-hero-info-item">
|
||||
<text class="delivery-home-hero-info-value">{{ dashboard.exceptionCount }}</text>
|
||||
<text class="delivery-home-hero-info-label">异常待跟进</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-card delivery-home-overview-card">
|
||||
<view class="delivery-home-card-header">
|
||||
<view>
|
||||
<text class="delivery-home-card-title">今日概览</text>
|
||||
<text class="delivery-home-card-subtitle">聚焦待接单、服务执行和异常处理</text>
|
||||
</view>
|
||||
<text class="delivery-status-pill" :class="getStatusPillClass()">{{ onlineStatusText }}</text>
|
||||
</view>
|
||||
<view class="delivery-overview-row">
|
||||
<view class="delivery-overview-item">
|
||||
<text class="delivery-overview-num delivery-overview-num-warning">{{ dashboard.pendingAcceptCount }}</text>
|
||||
<text class="delivery-overview-label">待接单</text>
|
||||
</view>
|
||||
<view class="delivery-overview-item">
|
||||
<text class="delivery-overview-num delivery-overview-num-active">{{ dashboard.pendingDepartCount }}</text>
|
||||
<text class="delivery-overview-label">待出发</text>
|
||||
</view>
|
||||
<view class="delivery-overview-item">
|
||||
<text class="delivery-overview-num delivery-overview-num-teal">{{ dashboard.servingCount }}</text>
|
||||
<text class="delivery-overview-label">服务中</text>
|
||||
</view>
|
||||
<view class="delivery-overview-item">
|
||||
<text class="delivery-overview-num delivery-overview-num-success">{{ dashboard.completedCount }}</text>
|
||||
<text class="delivery-overview-label">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-home-inline-alert" @click="goOrders('exception')">
|
||||
<view class="delivery-status-left">
|
||||
<text class="delivery-status-title">异常任务</text>
|
||||
<text class="delivery-status-desc">待优先跟进 {{ dashboard.exceptionCount }} 个异常事项</text>
|
||||
</view>
|
||||
<view class="delivery-status-right">
|
||||
<text class="delivery-exception-num">{{ dashboard.exceptionCount }}</text>
|
||||
<text class="delivery-inline-link">立即查看</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="dashboard.exceptionCount > 0" class="delivery-home-card delivery-home-alert-card" @click="goOrders('exception')">
|
||||
<view class="delivery-alert-main">
|
||||
<text class="delivery-alert-title">当前有 {{ dashboard.exceptionCount }} 个异常任务待处理</text>
|
||||
<text class="delivery-alert-desc">建议先进入异常工单列表，确认原因、联系对象并更新处理进度。</text>
|
||||
</view>
|
||||
<view class="delivery-alert-action">
|
||||
<text class="delivery-alert-action-text">查看异常</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-card delivery-home-current-card">
|
||||
<view class="delivery-home-card-header">
|
||||
<view>
|
||||
<text class="delivery-home-card-title">当前任务</text>
|
||||
<text class="delivery-home-card-subtitle">首页先看这一单，明确今天的下一步动作</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="dashboard.recentOrders.length == 0" class="empty-box"><text class="empty-text">暂无待执行服务</text></view>
|
||||
<view v-else class="current-task-card" :class="getStatusSurfaceClass(dashboard.recentOrders[0].status)" @click="goDetail(dashboard.recentOrders[0].id)">
|
||||
<view class="current-task-top">
|
||||
<view class="current-task-main">
|
||||
<text class="current-task-title">{{ dashboard.recentOrders[0].serviceName }}</text>
|
||||
<text class="current-task-subtitle">{{ dashboard.recentOrders[0].elderNameMasked }} · {{ dashboard.recentOrders[0].appointmentStartTime }}</text>
|
||||
</view>
|
||||
<ServiceStatusTag :text="dashboard.recentOrders[0].statusText" :tone="dashboard.recentOrders[0].statusTone"></ServiceStatusTag>
|
||||
</view>
|
||||
<view class="current-task-info-card">
|
||||
<view class="current-task-field">
|
||||
<text class="current-task-field-label">服务地址</text>
|
||||
<text class="current-task-field-value">{{ dashboard.recentOrders[0].addressSummary }}</text>
|
||||
</view>
|
||||
<view class="current-task-field current-task-field-last">
|
||||
<text class="current-task-field-label">风险标签</text>
|
||||
<text class="current-task-field-value">{{ formatRiskTags(dashboard.recentOrders[0].riskTags) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="current-task-footer">
|
||||
<view class="current-task-step">
|
||||
<text class="current-task-step-label">下一步</text>
|
||||
<text class="current-task-step-text">{{ getPrimaryActionText(dashboard.recentOrders[0].status) }}</text>
|
||||
</view>
|
||||
<view class="current-task-btn" :class="getPrimaryActionClass(dashboard.recentOrders[0].status)" @click.stop="handlePrimaryAction(dashboard.recentOrders[0])">
|
||||
<text class="current-task-btn-text">{{ getPrimaryActionText(dashboard.recentOrders[0].status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-card delivery-home-tools-card">
|
||||
<view class="delivery-home-card-header">
|
||||
<view>
|
||||
<text class="delivery-home-card-title">常用功能</text>
|
||||
<text class="delivery-home-card-subtitle">保留当前可用入口，缩短日常处理路径</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shortcut-grid">
|
||||
<view class="shortcut-item" @click="goOrders('pending_accept')">
|
||||
<view class="shortcut-icon shortcut-icon-warning"><text class="shortcut-icon-text">接</text></view>
|
||||
<text class="shortcut-title">待接单</text>
|
||||
<text class="shortcut-desc">优先查看新派单</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goOrders('all')">
|
||||
<view class="shortcut-icon shortcut-icon-primary"><text class="shortcut-icon-text">单</text></view>
|
||||
<text class="shortcut-title">今日任务</text>
|
||||
<text class="shortcut-desc">进入全部工单列表</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goMessages()">
|
||||
<view class="shortcut-icon shortcut-icon-teal"><text class="shortcut-icon-text">讯</text></view>
|
||||
<text class="shortcut-title">消息提醒</text>
|
||||
<text class="shortcut-desc">查看沟通与通知</text>
|
||||
</view>
|
||||
<view class="shortcut-item" @click="goRecords()">
|
||||
<view class="shortcut-icon shortcut-icon-success"><text class="shortcut-icon-text">档</text></view>
|
||||
<text class="shortcut-title">服务记录</text>
|
||||
<text class="shortcut-desc">回顾已完成服务</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-card delivery-home-list-card">
|
||||
<view class="delivery-home-card-header">
|
||||
<view>
|
||||
<text class="delivery-home-card-title">服务工单</text>
|
||||
<text class="delivery-home-card-subtitle">保留最近工单，突出状态、地址和下一步动作</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="dashboard.recentOrders.length == 0" class="empty-box"><text class="empty-text">暂无任务</text></view>
|
||||
<view v-for="item in dashboard.recentOrders" :key="item.id" class="order-card" :class="getStatusSurfaceClass(item.status)" @click="goDetail(item.id)">
|
||||
<view class="card-top">
|
||||
<view class="order-main">
|
||||
<text class="order-title">{{ item.serviceName }} · {{ item.elderNameMasked }}</text>
|
||||
<text class="order-meta">预约时间：{{ item.appointmentStartTime }}</text>
|
||||
</view>
|
||||
<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
|
||||
</view>
|
||||
<view class="order-info-box">
|
||||
<text class="order-meta">服务地址：{{ item.addressSummary }}</text>
|
||||
<text class="order-meta">风险标签：{{ formatRiskTags(item.riskTags) }}</text>
|
||||
</view>
|
||||
<view class="order-footer">
|
||||
<text class="order-next-text">下一步：{{ getPrimaryActionText(item.status) }}</text>
|
||||
<view class="order-action-btn" :class="getPrimaryActionClass(item.status)" @click.stop="handlePrimaryAction(item)">
|
||||
<text class="order-action-btn-text">立即处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-home-safe"></view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
|
||||
import type { DeliveryDashboardType, DeliveryInfoType, DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { getDeliveryDashboard, getDeliveryProfile } from '@/services/deliveryService.uts'
|
||||
import { getDeliveryInfo, requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
const dashboard = ref<DeliveryDashboardType>({
|
||||
pendingAcceptCount: 0,
|
||||
pendingDepartCount: 0,
|
||||
servingCount: 0,
|
||||
completedCount: 0,
|
||||
exceptionCount: 0,
|
||||
onlineStatus: 'resting',
|
||||
recentOrders: [] as Array<any>
|
||||
} as DeliveryDashboardType)
|
||||
const onlineStatusText = ref('休息中')
|
||||
const deliveryInfo = ref<DeliveryInfoType | null>(null)
|
||||
|
||||
function syncStatusText(status: string) {
|
||||
if (status == 'online') {
|
||||
onlineStatusText.value = '在线接单'
|
||||
return
|
||||
}
|
||||
if (status == 'busy') {
|
||||
onlineStatusText.value = '忙碌中'
|
||||
return
|
||||
}
|
||||
onlineStatusText.value = '休息中'
|
||||
}
|
||||
|
||||
function getStatusPillClass(): string {
|
||||
if (onlineStatusText.value == '在线接单') {
|
||||
return 'delivery-status-online'
|
||||
}
|
||||
if (onlineStatusText.value == '忙碌中') {
|
||||
return 'delivery-status-busy'
|
||||
}
|
||||
return 'delivery-status-resting'
|
||||
}
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
function formatRiskTags(tags: Array<string>): string {
|
||||
if (tags.length == 0) {
|
||||
return '常规服务'
|
||||
}
|
||||
return tags.join(' / ')
|
||||
}
|
||||
|
||||
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 goException(id: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/exception?id=' + id })
|
||||
}
|
||||
|
||||
function handlePrimaryAction(order: DeliveryOrderType) {
|
||||
if (order.status == 'pending_accept') {
|
||||
goDetail(order.id)
|
||||
return
|
||||
}
|
||||
if (order.status == 'accepted') {
|
||||
goRoute(order.id)
|
||||
return
|
||||
}
|
||||
if (order.status == 'on_the_way' || order.status == 'arrived') {
|
||||
goCheckin(order.id)
|
||||
return
|
||||
}
|
||||
if (order.status == 'checked_in' || order.status == 'serving' || order.status == 'pending_submit' || order.status == 'pending_acceptance') {
|
||||
goExecute(order.id)
|
||||
return
|
||||
}
|
||||
if (order.status == 'exception_pending') {
|
||||
goException(order.id)
|
||||
return
|
||||
}
|
||||
goDetail(order.id)
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const startedAt = Date.now()
|
||||
console.log('[deliveryHome] loadData start')
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
console.log('[deliveryHome] auth done', {
|
||||
ok: authResult.ok,
|
||||
message: authResult.message,
|
||||
elapsed: Date.now() - startedAt
|
||||
})
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
dashboard.value = await getDeliveryDashboard()
|
||||
console.log('[deliveryHome] dashboard loaded, elapsed=' + (Date.now() - startedAt))
|
||||
deliveryInfo.value = await getDeliveryProfile()
|
||||
console.log('[deliveryHome] profile loaded, elapsed=' + (Date.now() - startedAt))
|
||||
const info = deliveryInfo.value != null ? deliveryInfo.value : getDeliveryInfo()
|
||||
if (info != null) {
|
||||
syncStatusText(info.onlineStatus)
|
||||
}
|
||||
console.log('[deliveryHome] loadData complete, elapsed=' + (Date.now() - startedAt))
|
||||
}
|
||||
|
||||
function goOrders(tab: string) {
|
||||
uni.setStorageSync('delivery_orders_tab', tab)
|
||||
uni.switchTab({ url: '/pages/mall/delivery/orders/index' })
|
||||
}
|
||||
|
||||
function goDetail(id: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + id })
|
||||
}
|
||||
|
||||
function goMessages() {
|
||||
uni.switchTab({ url: '/pages/mall/delivery/messages/index' })
|
||||
}
|
||||
|
||||
function goRecords() {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/records/index' })
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.delivery-home-page {
|
||||
min-height: 100%;
|
||||
margin-left: -24rpx;
|
||||
margin-right: -24rpx;
|
||||
margin-top: -24rpx;
|
||||
padding-bottom: 32rpx;
|
||||
background-color: #f4f8fb;
|
||||
}
|
||||
|
||||
.delivery-home-hero {
|
||||
padding: 72rpx 28rpx 34rpx;
|
||||
border-bottom-left-radius: 36rpx;
|
||||
border-bottom-right-radius: 36rpx;
|
||||
background-color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-home-hero-top,
|
||||
.card-top,
|
||||
.current-task-top,
|
||||
.current-task-footer,
|
||||
.delivery-home-alert-card,
|
||||
.shortcut-grid,
|
||||
.order-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-home-hero-top {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.delivery-home-hero-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.delivery-home-hero-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-home-hero-subtitle {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.delivery-home-user-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.delivery-home-user-tag {
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.delivery-home-user-tag-light {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.delivery-home-user-tag-soft {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
color: #0f766e;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.delivery-home-hero-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.delivery-home-hero-action {
|
||||
margin-left: 16rpx;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-home-hero-action-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-home-hero-info-row {
|
||||
margin-top: 32rpx;
|
||||
padding: 22rpx 18rpx;
|
||||
border-radius: 26rpx;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.delivery-home-hero-info-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-home-hero-info-value {
|
||||
max-width: 180rpx;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-home-hero-info-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.delivery-home-card,
|
||||
.delivery-home-alert-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-home-overview-card {
|
||||
margin-top: -18rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delivery-home-card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-home-card-title,
|
||||
.delivery-status-title,
|
||||
.delivery-alert-title,
|
||||
.current-task-title,
|
||||
.order-title,
|
||||
.shortcut-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.delivery-home-card-subtitle,
|
||||
.delivery-overview-label,
|
||||
.delivery-status-desc,
|
||||
.current-task-field-label,
|
||||
.current-task-step-label,
|
||||
.order-meta,
|
||||
.empty-text,
|
||||
.shortcut-desc,
|
||||
.delivery-alert-desc {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
line-height: 34rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-status-pill {
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.delivery-status-online {
|
||||
color: #0ea5a4;
|
||||
background: #e6fffb;
|
||||
}
|
||||
|
||||
.delivery-status-busy {
|
||||
color: #f97316;
|
||||
background: #fff4eb;
|
||||
}
|
||||
|
||||
.delivery-status-resting {
|
||||
color: #64748b;
|
||||
background: #eef2f7;
|
||||
}
|
||||
|
||||
.delivery-overview-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.delivery-overview-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-overview-num,
|
||||
.delivery-exception-num {
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.delivery-overview-num {
|
||||
color: #1f2937;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.delivery-overview-num-warning {
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.delivery-overview-num-active {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.delivery-overview-num-teal {
|
||||
color: #0ea5a4;
|
||||
}
|
||||
|
||||
.delivery-overview-num-success {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.delivery-home-inline-alert {
|
||||
margin-top: 18rpx;
|
||||
padding: 20rpx 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #f8fbff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-status-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.delivery-status-title {
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.delivery-status-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.delivery-exception-num {
|
||||
color: #ef4444;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.delivery-inline-link {
|
||||
font-size: 22rpx;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-home-alert-card {
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #fff4eb, #fff8f3);
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: #fed7aa;
|
||||
}
|
||||
|
||||
.delivery-alert-main {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.delivery-alert-title {
|
||||
margin-bottom: 8rpx;
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.delivery-alert-desc {
|
||||
color: #9a3412;
|
||||
}
|
||||
|
||||
.delivery-alert-action {
|
||||
padding: 14rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-alert-action-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.current-task-card,
|
||||
.order-card {
|
||||
margin-top: 22rpx;
|
||||
background: #f8fbfc;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: #e5edf5;
|
||||
border-top-width: 8rpx;
|
||||
}
|
||||
|
||||
.current-task-card {
|
||||
background: linear-gradient(180deg, #f9fcff, #f5fbfb);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.current-task-top,
|
||||
.card-top {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.current-task-main,
|
||||
.order-main {
|
||||
flex: 1;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.current-task-subtitle {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #6b7280;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.current-task-info-card,
|
||||
.order-info-box {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.current-task-field {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #eef2f7;
|
||||
}
|
||||
|
||||
.current-task-field-last {
|
||||
padding-bottom: 0;
|
||||
margin-top: 16rpx;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.current-task-field-value,
|
||||
.current-task-step-text,
|
||||
.order-next-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #16324f;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.current-task-footer,
|
||||
.order-footer {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.current-task-step {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.current-task-btn,
|
||||
.order-action-btn {
|
||||
padding-top: 14rpx;
|
||||
padding-bottom: 14rpx;
|
||||
padding-left: 22rpx;
|
||||
padding-right: 22rpx;
|
||||
border-radius: 18rpx;
|
||||
min-width: 148rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.current-task-btn-text,
|
||||
.order-action-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.action-warning {
|
||||
background: #b45309;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.action-teal {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.action-success {
|
||||
background: #15803d;
|
||||
}
|
||||
|
||||
.action-danger {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.action-default {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
.shortcut-grid {
|
||||
margin-top: 22rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.shortcut-item {
|
||||
width: 48%;
|
||||
padding: 24rpx 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
background: #f8fbfc;
|
||||
border-radius: 22rpx;
|
||||
border-width: 1rpx;
|
||||
border-style: solid;
|
||||
border-color: #e5edf5;
|
||||
}
|
||||
|
||||
.shortcut-icon {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.shortcut-icon-warning {
|
||||
background: #fff4eb;
|
||||
}
|
||||
|
||||
.shortcut-icon-primary {
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.shortcut-icon-teal {
|
||||
background: #e8fbfb;
|
||||
}
|
||||
|
||||
.shortcut-icon-success {
|
||||
background: #edf9f0;
|
||||
}
|
||||
|
||||
.shortcut-icon-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.shortcut-title {
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.shortcut-desc {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 24rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #f8fbfc;
|
||||
margin-top: 20rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.order-next-text {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.delivery-home-safe {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
949
pages/mall/delivery/messages/index.uvue
Normal file
949
pages/mall/delivery/messages/index.uvue
Normal file
@@ -0,0 +1,949 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="消息中心" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
|
||||
<view class="delivery-messages-page">
|
||||
<view class="delivery-messages-hero">
|
||||
<view class="delivery-messages-hero-top">
|
||||
<view class="delivery-messages-hero-main">
|
||||
<text class="delivery-messages-hero-title">业务消息</text>
|
||||
<text class="delivery-messages-hero-subtitle">{{ getCurrentTabLabel() }} · {{ getCurrentTabSubtitle() }}</text>
|
||||
</view>
|
||||
<view class="delivery-messages-hero-badge">
|
||||
<text class="delivery-messages-hero-badge-text">{{ formatTabCount(getTabCount(currentTab)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-messages-hero-tip-box">
|
||||
<text class="delivery-messages-hero-tip">新工单、改派、异常、验收与结算消息会在这里汇总。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-messages-card delivery-messages-filter-card">
|
||||
<view class="delivery-messages-card-header">
|
||||
<view>
|
||||
<text class="delivery-messages-card-title">消息分类</text>
|
||||
<text class="delivery-messages-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="getTabItemClass(item.value)"
|
||||
@click="switchTab(item.value)"
|
||||
>
|
||||
<view class="status-tab-content">
|
||||
<text class="status-tab-text" :class="getTabTextClass(item.value)">{{ item.label }}</text>
|
||||
<text class="status-tab-count" :class="getTabCountClass(item.value)">{{ formatTabCount(getTabCount(item.value)) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view v-if="messages.length > 0" class="delivery-messages-card delivery-messages-summary-card">
|
||||
<view class="delivery-messages-card-header">
|
||||
<view>
|
||||
<text class="delivery-messages-card-title">消息概览</text>
|
||||
<text class="delivery-messages-card-subtitle">关注未读、今日更新与全部消息总量</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="message-summary">
|
||||
<view class="summary-card summary-card-accent">
|
||||
<text class="summary-value">{{ messageStats.unread }}</text>
|
||||
<text class="summary-label">未读消息</text>
|
||||
</view>
|
||||
<view class="summary-card">
|
||||
<text class="summary-value summary-value-dark">{{ messageStats.today }}</text>
|
||||
<text class="summary-label">今日更新</text>
|
||||
</view>
|
||||
<view class="summary-card summary-card-last">
|
||||
<text class="summary-value summary-value-dark">{{ messageStats.all }}</text>
|
||||
<text class="summary-label">全部消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-messages-card delivery-messages-list-card">
|
||||
<view class="delivery-messages-card-header">
|
||||
<view>
|
||||
<text class="delivery-messages-card-title">消息列表</text>
|
||||
<text class="delivery-messages-card-subtitle">突出消息级别、业务类型、未读状态与关联工单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="filteredMessages.length == 0" class="empty-box"><text class="empty-text">{{ getEmptyText() }}</text></view>
|
||||
<view
|
||||
v-for="item in filteredMessages"
|
||||
:key="item.id"
|
||||
class="message-card"
|
||||
:class="getMessageCardClass(item.title, item.type, item.read)"
|
||||
@click="openMessage(item.orderId)"
|
||||
>
|
||||
<view class="message-icon" :class="getMessageLevelClass(item.title, item.type)">
|
||||
<text class="message-icon-text" :class="getMessageTextLevelClass(item.title, item.type)">{{ getMessageIconText(item.title, item.type) }}</text>
|
||||
</view>
|
||||
<view class="message-main">
|
||||
<view class="message-title-row">
|
||||
<text class="message-title" :class="getMessageTitleClass(item.title, item.type, item.read)">{{ item.title }}</text>
|
||||
<text v-if="!item.read" class="message-badge">未读</text>
|
||||
<text v-else class="message-read-text">已读</text>
|
||||
</view>
|
||||
<text class="message-biz-line" :class="getMessageTextLevelClass(item.title, item.type)">{{ getMessageBizLine(item.title, item.type, item.orderId) }}</text>
|
||||
<text class="message-content">{{ item.content }}</text>
|
||||
<text class="message-meta">{{ item.createdAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-messages-safe"></view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import type { DeliveryMessageType } from '@/types/delivery.uts'
|
||||
import { getDeliveryMessages } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
type MessageStatsType = {
|
||||
all: number
|
||||
unread: number
|
||||
dispatch: number
|
||||
exception: number
|
||||
result: number
|
||||
notice: number
|
||||
today: number
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '未读', value: 'unread' },
|
||||
{ label: '调度', value: 'dispatch' },
|
||||
{ label: '异常', value: 'exception' },
|
||||
{ label: '结果', value: 'result' },
|
||||
{ label: '通知', value: 'notice' }
|
||||
]
|
||||
|
||||
const currentTab = ref('all')
|
||||
const activeTabViewId = ref('status-tab-all')
|
||||
const messages = ref([] as Array<DeliveryMessageType>)
|
||||
const filteredMessages = ref([] as Array<DeliveryMessageType>)
|
||||
const messageStats = ref(createEmptyMessageStats())
|
||||
|
||||
function getCurrentTabLabel(): string {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
if (tabs[i].value == currentTab.value) {
|
||||
return tabs[i].label
|
||||
}
|
||||
}
|
||||
return '全部'
|
||||
}
|
||||
|
||||
function getCurrentTabSubtitle(): string {
|
||||
if (currentTab.value == 'unread') {
|
||||
return '优先处理未读提醒，避免遗漏服务动作'
|
||||
}
|
||||
if (currentTab.value == 'dispatch') {
|
||||
return '关注派单、改派、出发与签到类调度消息'
|
||||
}
|
||||
if (currentTab.value == 'exception') {
|
||||
return '优先处理异常与风险反馈，保障服务连续性'
|
||||
}
|
||||
if (currentTab.value == 'result') {
|
||||
return '查看验收、提交与结算结果类消息'
|
||||
}
|
||||
if (currentTab.value == 'notice') {
|
||||
return '查看系统公告、平台通知与通用提醒'
|
||||
}
|
||||
return '集中查看全部业务消息与处理进展'
|
||||
}
|
||||
|
||||
function createEmptyMessageStats(): MessageStatsType {
|
||||
return {
|
||||
all: 0,
|
||||
unread: 0,
|
||||
dispatch: 0,
|
||||
exception: 0,
|
||||
result: 0,
|
||||
notice: 0,
|
||||
today: 0
|
||||
} as MessageStatsType
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
messages.value = [] as Array<DeliveryMessageType>
|
||||
filteredMessages.value = [] as Array<DeliveryMessageType>
|
||||
refreshSummary([] as Array<DeliveryMessageType>)
|
||||
return
|
||||
}
|
||||
messages.value = await getDeliveryMessages()
|
||||
refreshSummary(messages.value)
|
||||
applyFilter()
|
||||
}
|
||||
|
||||
function isValidTab(tab: string): boolean {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
if (tabs[i].value == tab) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function syncActiveTabViewId(): void {
|
||||
activeTabViewId.value = 'status-tab-' + currentTab.value
|
||||
}
|
||||
|
||||
function applyTab(tab: string): void {
|
||||
if (tab == '' || !isValidTab(tab)) {
|
||||
currentTab.value = 'all'
|
||||
} else {
|
||||
currentTab.value = tab
|
||||
}
|
||||
syncActiveTabViewId()
|
||||
applyFilter()
|
||||
}
|
||||
|
||||
function switchTab(tab: string) {
|
||||
if (currentTab.value == tab) {
|
||||
return
|
||||
}
|
||||
applyTab(tab)
|
||||
}
|
||||
|
||||
function matchesTabMessage(tab: string, item: DeliveryMessageType): boolean {
|
||||
if (tab == 'all') {
|
||||
return true
|
||||
}
|
||||
if (tab == 'unread') {
|
||||
return !item.read
|
||||
}
|
||||
if (tab == 'dispatch') {
|
||||
return item.type == 'order' || item.type == 'dispatch' || item.type == 'reminder' || item.type == 'checkin'
|
||||
}
|
||||
if (tab == 'exception') {
|
||||
return item.type == 'exception'
|
||||
}
|
||||
if (tab == 'result') {
|
||||
return item.type == 'result' || item.type == 'settlement'
|
||||
}
|
||||
if (tab == 'notice') {
|
||||
return item.type == 'notice'
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function applyFilter(): void {
|
||||
const nextList = [] as Array<DeliveryMessageType>
|
||||
for (let i = 0; i < messages.value.length; i++) {
|
||||
const item = messages.value[i]
|
||||
if (matchesTabMessage(currentTab.value, item)) {
|
||||
nextList.push(item)
|
||||
}
|
||||
}
|
||||
filteredMessages.value = nextList
|
||||
}
|
||||
|
||||
function getTabCount(tab: string): number {
|
||||
if (tab == 'unread') {
|
||||
return messageStats.value.unread
|
||||
}
|
||||
if (tab == 'dispatch') {
|
||||
return messageStats.value.dispatch
|
||||
}
|
||||
if (tab == 'exception') {
|
||||
return messageStats.value.exception
|
||||
}
|
||||
if (tab == 'result') {
|
||||
return messageStats.value.result
|
||||
}
|
||||
if (tab == 'notice') {
|
||||
return messageStats.value.notice
|
||||
}
|
||||
return messageStats.value.all
|
||||
}
|
||||
|
||||
function formatTabCount(count: number): string {
|
||||
if (count > 99) {
|
||||
return '99+'
|
||||
}
|
||||
return '' + count
|
||||
}
|
||||
|
||||
function getTabLevel(tab: string): string {
|
||||
if (tab == 'exception') {
|
||||
return 'danger'
|
||||
}
|
||||
if (tab == 'dispatch' || tab == 'unread') {
|
||||
return 'warning'
|
||||
}
|
||||
if (tab == 'result') {
|
||||
return 'success'
|
||||
}
|
||||
if (tab == 'notice') {
|
||||
return 'neutral'
|
||||
}
|
||||
return 'default'
|
||||
}
|
||||
|
||||
function getTabItemClass(tab: string): string {
|
||||
if (currentTab.value != tab) {
|
||||
return ''
|
||||
}
|
||||
const level = getTabLevel(tab)
|
||||
if (level == 'danger') {
|
||||
return 'status-tab-active status-tab-active-danger'
|
||||
}
|
||||
if (level == 'warning') {
|
||||
return 'status-tab-active status-tab-active-warning'
|
||||
}
|
||||
if (level == 'success') {
|
||||
return 'status-tab-active status-tab-active-success'
|
||||
}
|
||||
if (level == 'neutral') {
|
||||
return 'status-tab-active status-tab-active-neutral'
|
||||
}
|
||||
return 'status-tab-active'
|
||||
}
|
||||
|
||||
function getTabTextClass(tab: string): string {
|
||||
if (currentTab.value != tab) {
|
||||
return ''
|
||||
}
|
||||
const level = getTabLevel(tab)
|
||||
if (level == 'danger') {
|
||||
return 'status-tab-text-active status-tab-text-active-danger'
|
||||
}
|
||||
if (level == 'warning') {
|
||||
return 'status-tab-text-active status-tab-text-active-warning'
|
||||
}
|
||||
if (level == 'success') {
|
||||
return 'status-tab-text-active status-tab-text-active-success'
|
||||
}
|
||||
if (level == 'neutral') {
|
||||
return 'status-tab-text-active status-tab-text-active-neutral'
|
||||
}
|
||||
return 'status-tab-text-active'
|
||||
}
|
||||
|
||||
function getTabCountClass(tab: string): string {
|
||||
if (tab == 'unread' && messageStats.value.unread > 0) {
|
||||
if (currentTab.value == tab) {
|
||||
return 'status-tab-count-active status-tab-count-unread status-tab-count-unread-active'
|
||||
}
|
||||
return 'status-tab-count-unread'
|
||||
}
|
||||
if (currentTab.value == tab) {
|
||||
return 'status-tab-count-active'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function padDatePart(value: number): string {
|
||||
if (value < 10) {
|
||||
return '0' + value
|
||||
}
|
||||
return '' + value
|
||||
}
|
||||
|
||||
function getTodayText(): string {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth() + 1
|
||||
const day = now.getDate()
|
||||
return '' + year + '-' + padDatePart(month) + '-' + padDatePart(day)
|
||||
}
|
||||
|
||||
function refreshSummary(list: Array<DeliveryMessageType>): void {
|
||||
const nextStats = createEmptyMessageStats()
|
||||
const todayText = getTodayText()
|
||||
nextStats.all = list.length
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i]
|
||||
if (!item.read) {
|
||||
nextStats.unread++
|
||||
}
|
||||
if (item.type == 'order' || item.type == 'dispatch' || item.type == 'reminder' || item.type == 'checkin') {
|
||||
nextStats.dispatch++
|
||||
}
|
||||
if (item.type == 'exception') {
|
||||
nextStats.exception++
|
||||
}
|
||||
if (item.type == 'result' || item.type == 'settlement') {
|
||||
nextStats.result++
|
||||
}
|
||||
if (item.type == 'notice') {
|
||||
nextStats.notice++
|
||||
}
|
||||
if (item.createdAt.length >= 10 && item.createdAt.substring(0, 10) == todayText) {
|
||||
nextStats.today++
|
||||
}
|
||||
}
|
||||
messageStats.value = nextStats
|
||||
}
|
||||
|
||||
function getEmptyText(): string {
|
||||
if (currentTab.value == 'unread') {
|
||||
return '暂无未读消息'
|
||||
}
|
||||
if (currentTab.value == 'dispatch') {
|
||||
return '暂无调度消息'
|
||||
}
|
||||
if (currentTab.value == 'exception') {
|
||||
return '暂无异常消息'
|
||||
}
|
||||
if (currentTab.value == 'result') {
|
||||
return '暂无结果消息'
|
||||
}
|
||||
if (currentTab.value == 'notice') {
|
||||
return '暂无通知消息'
|
||||
}
|
||||
return '暂无消息'
|
||||
}
|
||||
|
||||
function openMessage(orderId: string) {
|
||||
if (orderId == '') {
|
||||
uni.showToast({
|
||||
title: '暂无关联工单',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId })
|
||||
}
|
||||
|
||||
function getMessageIconText(title: string, messageType: string): string {
|
||||
if (title.indexOf('异常') >= 0 || messageType == 'exception') {
|
||||
return '!'
|
||||
}
|
||||
if (title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0 || messageType == 'order' || messageType == 'dispatch') {
|
||||
return '单'
|
||||
}
|
||||
if (title.indexOf('出发') >= 0 || title.indexOf('签到') >= 0 || messageType == 'reminder' || messageType == 'checkin') {
|
||||
return '行'
|
||||
}
|
||||
if (title.indexOf('结算') >= 0 || messageType == 'settlement') {
|
||||
return '结'
|
||||
}
|
||||
if (title.indexOf('公告') >= 0 || title.indexOf('系统') >= 0 || messageType == 'notice') {
|
||||
return '告'
|
||||
}
|
||||
if (messageType == 'result') {
|
||||
return '验'
|
||||
}
|
||||
return '息'
|
||||
}
|
||||
|
||||
function getMessageLevel(title: string, messageType: string): string {
|
||||
if (title.indexOf('异常') >= 0 || messageType == 'exception') {
|
||||
return 'danger'
|
||||
}
|
||||
if (title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0 || messageType == 'order' || messageType == 'dispatch') {
|
||||
return 'warning'
|
||||
}
|
||||
if (title.indexOf('出发') >= 0 || title.indexOf('签到') >= 0 || messageType == 'reminder' || messageType == 'checkin') {
|
||||
return 'info'
|
||||
}
|
||||
if (title.indexOf('结算') >= 0 || messageType == 'settlement' || messageType == 'result') {
|
||||
return 'success'
|
||||
}
|
||||
return 'neutral'
|
||||
}
|
||||
|
||||
function getMessageLevelClass(title: string, messageType: string): string {
|
||||
const level = getMessageLevel(title, messageType)
|
||||
if (level == 'danger') {
|
||||
return 'message-level-danger'
|
||||
}
|
||||
if (level == 'warning') {
|
||||
return 'message-level-warning'
|
||||
}
|
||||
if (level == 'info') {
|
||||
return 'message-level-info'
|
||||
}
|
||||
if (level == 'success') {
|
||||
return 'message-level-success'
|
||||
}
|
||||
return 'message-level-neutral'
|
||||
}
|
||||
|
||||
function getMessageTextLevelClass(title: string, messageType: string): string {
|
||||
const level = getMessageLevel(title, messageType)
|
||||
if (level == 'danger') {
|
||||
return 'message-text-danger'
|
||||
}
|
||||
if (level == 'warning') {
|
||||
return 'message-text-warning'
|
||||
}
|
||||
if (level == 'info') {
|
||||
return 'message-text-info'
|
||||
}
|
||||
if (level == 'success') {
|
||||
return 'message-text-success'
|
||||
}
|
||||
return 'message-text-neutral'
|
||||
}
|
||||
|
||||
function getMessageTitleClass(title: string, messageType: string, read: boolean): string {
|
||||
const levelClass = getMessageTextLevelClass(title, messageType)
|
||||
if (read) {
|
||||
return 'message-title-read ' + levelClass
|
||||
}
|
||||
return levelClass
|
||||
}
|
||||
|
||||
function getMessageCardClass(title: string, messageType: string, read: boolean): string {
|
||||
const level = getMessageLevel(title, messageType)
|
||||
let cardClass = read ? 'message-read' : 'message-unread'
|
||||
if (level == 'danger') {
|
||||
cardClass += ' message-card-danger'
|
||||
}
|
||||
return cardClass
|
||||
}
|
||||
|
||||
function getMessageBizLine(title: string, messageType: string, orderId: string): string {
|
||||
let bizText = '业务类型：服务通知'
|
||||
if (messageType == 'order' || title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0) {
|
||||
bizText = '业务类型：基础照护'
|
||||
} else if (messageType == 'dispatch' || title.indexOf('改派') >= 0) {
|
||||
bizText = '业务类型：陪诊协助'
|
||||
} else if (messageType == 'reminder' || title.indexOf('出发') >= 0) {
|
||||
bizText = '业务类型：康复指导'
|
||||
} else if (messageType == 'checkin' || title.indexOf('签到') >= 0) {
|
||||
bizText = '业务类型：上门签到'
|
||||
} else if (messageType == 'exception' || title.indexOf('异常') >= 0) {
|
||||
bizText = '业务类型：异常处理'
|
||||
} else if (messageType == 'result' || title.indexOf('验收') >= 0) {
|
||||
bizText = '业务类型：服务验收'
|
||||
} else if (messageType == 'settlement' || title.indexOf('结算') >= 0) {
|
||||
bizText = '业务类型：结算通知'
|
||||
} else if (messageType == 'notice' || title.indexOf('系统') >= 0 || title.indexOf('公告') >= 0) {
|
||||
bizText = '业务类型：系统通知'
|
||||
}
|
||||
if (orderId != '') {
|
||||
return bizText + ' · 关联工单可查看详情'
|
||||
}
|
||||
return bizText + ' · 暂无关联工单'
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delivery-messages-page {
|
||||
min-height: 100%;
|
||||
margin-left: -24rpx;
|
||||
margin-right: -24rpx;
|
||||
margin-top: -24rpx;
|
||||
padding-bottom: 32rpx;
|
||||
background-color: #f4f8fb;
|
||||
}
|
||||
|
||||
.delivery-messages-hero {
|
||||
padding: 72rpx 28rpx 34rpx;
|
||||
border-bottom-left-radius: 36rpx;
|
||||
border-bottom-right-radius: 36rpx;
|
||||
background-color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-top,
|
||||
.delivery-messages-card-header,
|
||||
.message-title-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-top {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-main {
|
||||
flex: 1;
|
||||
padding-right: 16rpx;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-subtitle {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.delivery-messages-hero-badge {
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.delivery-messages-hero-badge-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-messages-hero-tip-box {
|
||||
margin-top: 28rpx;
|
||||
padding: 20rpx 22rpx;
|
||||
border-radius: 22rpx;
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.delivery-messages-hero-tip {
|
||||
font-size: 23rpx;
|
||||
line-height: 34rpx;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.delivery-messages-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-messages-filter-card {
|
||||
margin-top: -18rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delivery-messages-card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.delivery-messages-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-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-tab-active {
|
||||
background-color: #0f766e;
|
||||
box-shadow: 0 8rpx 18rpx rgba(15, 118, 110, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-active-danger {
|
||||
background-color: #dc2626;
|
||||
box-shadow: 0 8rpx 18rpx rgba(220, 38, 38, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-active-warning {
|
||||
background-color: #d97706;
|
||||
box-shadow: 0 8rpx 18rpx rgba(217, 119, 6, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-active-success {
|
||||
background-color: #16a34a;
|
||||
box-shadow: 0 8rpx 18rpx rgba(22, 163, 74, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-active-neutral {
|
||||
background-color: #475569;
|
||||
box-shadow: 0 8rpx 18rpx rgba(71, 85, 105, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-tab-count {
|
||||
margin-left: 10rpx;
|
||||
min-width: 30rpx;
|
||||
padding-left: 8rpx;
|
||||
padding-right: 8rpx;
|
||||
padding-top: 2rpx;
|
||||
padding-bottom: 2rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 24rpx;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
background-color: rgba(148, 163, 184, 0.16);
|
||||
}
|
||||
|
||||
.status-tab-text-active {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-tab-count-active {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.status-tab-count-unread {
|
||||
min-width: 34rpx;
|
||||
color: #ffffff;
|
||||
background-color: #ef4444;
|
||||
}
|
||||
|
||||
.status-tab-count-unread-active {
|
||||
background-color: rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
.status-tab-text-active-danger,
|
||||
.status-tab-text-active-warning,
|
||||
.status-tab-text-active-success,
|
||||
.status-tab-text-active-neutral {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.message-summary {
|
||||
flex-direction: row;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
flex: 1;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
padding-left: 18rpx;
|
||||
padding-right: 18rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #f8fbfc;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.summary-card-accent {
|
||||
background-color: #ecfdf5;
|
||||
}
|
||||
|
||||
.summary-card-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.summary-value-dark {
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
color: #6b7a89;
|
||||
}
|
||||
|
||||
.message-card {
|
||||
margin-top: 22rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 8rpx 24rpx rgba(15, 35, 55, 0.06);
|
||||
border-left-width: 0rpx;
|
||||
border-left-style: solid;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.message-unread {
|
||||
background-color: #f0fdfa;
|
||||
}
|
||||
|
||||
.message-read {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 18rpx;
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.message-level-danger {
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.message-level-warning {
|
||||
background-color: #fef3c7;
|
||||
}
|
||||
|
||||
.message-level-info {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
.message-level-success {
|
||||
background-color: #dcfce7;
|
||||
}
|
||||
|
||||
.message-level-neutral {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.message-icon-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.message-text-danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.message-text-warning {
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.message-text-info {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.message-text-success {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.message-text-neutral {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.message-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-title-row {
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.message-title-read {
|
||||
color: #38526b;
|
||||
}
|
||||
|
||||
.message-card-danger {
|
||||
border-left-width: 8rpx;
|
||||
border-left-color: #dc2626;
|
||||
}
|
||||
|
||||
.message-badge {
|
||||
font-size: 20rpx;
|
||||
color: #ef4444;
|
||||
background-color: #fee2e2;
|
||||
border-radius: 999rpx;
|
||||
padding-left: 12rpx;
|
||||
padding-right: 12rpx;
|
||||
padding-top: 4rpx;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.message-read-text {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.message-biz-line {
|
||||
display: block;
|
||||
margin-top: 2rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.message-content,
|
||||
.message-meta {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 40rpx 24rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #f8fbfc;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.delivery-messages-safe {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
182
pages/mall/delivery/orders/checkin.uvue
Normal file
182
pages/mall/delivery/orders/checkin.uvue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="到达签到" fallback-url="/pages/mall/delivery/orders/route">
|
||||
<ServicePanel title="签到要求" subtitle="定位签到或扫码签到，要求在 50 米范围内并上传现场图片。">
|
||||
<text v-if="order != null" class="info-text">服务地址：{{ order.fullAddress }}</text>
|
||||
<text class="info-text">当前定位：{{ locationText }}</text>
|
||||
<text class="info-text">现场图片：{{ photos.length }} 张</text>
|
||||
</ServicePanel>
|
||||
<ServicePanel title="签到操作" subtitle="定位失败时要给出清晰提示。">
|
||||
<view class="button-stack">
|
||||
<button class="secondary-btn" @click="getCurrentLocation">获取 GPS 定位</button>
|
||||
<button class="secondary-btn" @click="choosePhoto">拍照上传现场图片</button>
|
||||
<input class="note-input" v-model="note" placeholder="补充签到说明，例如入户前核验联系人" />
|
||||
<button class="primary-btn" :disabled="submitting" @click="submitCheckin">{{ submitting ? '签到中...' : '完成签到' }}</button>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</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 type { DeliveryLocationType, DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { checkinOrder, getDeliveryOrderDetail } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const order = ref<DeliveryOrderType | null>(null)
|
||||
const currentLocation = ref<DeliveryLocationType | null>(null)
|
||||
const locationText = ref('未获取')
|
||||
const photos = ref([] as Array<string>)
|
||||
const note = ref('')
|
||||
const submitting = ref(false)
|
||||
|
||||
function toRadians(value: number): number {
|
||||
return value * 3.1415926 / 180
|
||||
}
|
||||
|
||||
function calculateDistance(lat1: number, lng1: number, lat2: number, lng2: number): number {
|
||||
const earthRadius = 6378137
|
||||
const deltaLat = toRadians(lat2 - lat1)
|
||||
const deltaLng = toRadians(lng2 - lng1)
|
||||
const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2)
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
|
||||
return earthRadius * c
|
||||
}
|
||||
|
||||
function wrapLocation(): Promise<DeliveryLocationType> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
resolve({ latitude: res.latitude, longitude: res.longitude, address: '当前位置', time: new Date().toISOString().replace('T', ' ').substring(0, 19) })
|
||||
},
|
||||
fail: () => {
|
||||
reject(new Error('定位失败'))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function wrapChooseImage(): Promise<Array<string>> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: 3,
|
||||
sourceType: ['camera'],
|
||||
success: (res) => {
|
||||
resolve(res.tempFilePaths)
|
||||
},
|
||||
fail: () => {
|
||||
reject(new Error('拍照失败'))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok || orderId.value == '') {
|
||||
return
|
||||
}
|
||||
order.value = await getDeliveryOrderDetail(orderId.value)
|
||||
}
|
||||
|
||||
async function getCurrentLocation() {
|
||||
try {
|
||||
currentLocation.value = await wrapLocation()
|
||||
locationText.value = '纬度 ' + String(currentLocation.value.latitude) + ' / 经度 ' + String(currentLocation.value.longitude)
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '签到定位失败，请检查定位权限', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function choosePhoto() {
|
||||
try {
|
||||
const selected = await wrapChooseImage()
|
||||
photos.value = selected
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '拍照失败，请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function submitCheckin() {
|
||||
if (submitting.value) return
|
||||
if (order.value == null) return
|
||||
if (currentLocation.value == null) {
|
||||
await getCurrentLocation()
|
||||
if (currentLocation.value == null) return
|
||||
}
|
||||
if (photos.value.length == 0) {
|
||||
uni.showToast({ title: '请至少上传一张现场图片', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const distance = calculateDistance(currentLocation.value.latitude, currentLocation.value.longitude, order.value.latitude, order.value.longitude)
|
||||
if (distance > order.value.allowCheckinRadiusMeters) {
|
||||
uni.showToast({ title: '距离服务地址超出允许范围，不能签到', icon: 'none' })
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await checkinOrder(orderId.value, {
|
||||
location: currentLocation.value as DeliveryLocationType,
|
||||
note: note.value,
|
||||
photos: photos.value,
|
||||
checkinMode: 'gps'
|
||||
})
|
||||
uni.showToast({ title: '签到成功', icon: 'success' })
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/execute?id=' + orderId.value })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-text {
|
||||
display: block;
|
||||
margin-bottom: 14rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.button-stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #eaf2f0;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f2f7f6;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
144
pages/mall/delivery/orders/detail.uvue
Normal file
144
pages/mall/delivery/orders/detail.uvue
Normal file
@@ -0,0 +1,144 @@
|
||||
<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>
|
||||
186
pages/mall/delivery/orders/evidence.uvue
Normal file
186
pages/mall/delivery/orders/evidence.uvue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="证据上传" fallback-url="/pages/mall/delivery/orders/execute">
|
||||
<ServicePanel title="上传分组" subtitle="服务前、服务中、服务后图片，音频/视频先预留。">
|
||||
<view class="phase-tabs">
|
||||
<view v-for="item in phases" :key="item.value" class="phase-item" :class="currentPhase == item.value ? 'phase-active' : ''" @click="switchPhase(item.value)">
|
||||
<text class="phase-text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="secondary-btn" @click="chooseImageUpload">拍照并上传</button>
|
||||
<button class="secondary-btn" @click="simulateFailedUpload">模拟失败上传</button>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="材料列表" subtitle="失败材料可重试。">
|
||||
<view v-if="evidenceList.length == 0" class="empty-box"><text class="empty-text">当前阶段暂无材料</text></view>
|
||||
<view v-for="item in evidenceList" :key="item.id" class="evidence-card">
|
||||
<text class="row-text">{{ item.name }}</text>
|
||||
<text class="row-text">状态：{{ item.status }} · 进度：{{ item.progress }}%</text>
|
||||
<text class="row-text">创建时间：{{ item.createdAt }}</text>
|
||||
<view v-if="item.retryable" class="retry-btn" @click="retryUpload(item.id)"><text class="retry-text">重试上传</text></view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</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 type { DeliveryEvidenceRecordType, DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { getDeliveryOrderDetail, retryUploadEvidence, uploadEvidence } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const order = ref<DeliveryOrderType | null>(null)
|
||||
const currentPhase = ref('before')
|
||||
const evidenceList = ref([] as Array<DeliveryEvidenceRecordType>)
|
||||
const phases = [
|
||||
{ label: '服务前', value: 'before' },
|
||||
{ label: '服务中', value: 'during' },
|
||||
{ label: '服务后', value: 'after' }
|
||||
]
|
||||
|
||||
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 rebuildPhaseList() {
|
||||
const list: Array<DeliveryEvidenceRecordType> = []
|
||||
if (order.value == null) {
|
||||
evidenceList.value = list
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < order.value.evidenceList.length; i++) {
|
||||
const item = order.value.evidenceList[i]
|
||||
if (item.phase == currentPhase.value) {
|
||||
list.push(item)
|
||||
}
|
||||
}
|
||||
evidenceList.value = list
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok || orderId.value == '') {
|
||||
return
|
||||
}
|
||||
order.value = await getDeliveryOrderDetail(orderId.value)
|
||||
rebuildPhaseList()
|
||||
}
|
||||
|
||||
function switchPhase(value: string) {
|
||||
currentPhase.value = value
|
||||
rebuildPhaseList()
|
||||
}
|
||||
|
||||
async function chooseImageUpload() {
|
||||
try {
|
||||
const files = await wrapChooseImage()
|
||||
await uploadEvidence(orderId.value, currentPhase.value, files)
|
||||
uni.showToast({ title: '上传请求已提交', icon: 'success' })
|
||||
loadData()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '上传失败，请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function simulateFailedUpload() {
|
||||
await uploadEvidence(orderId.value, 'during', ['mock-failed-image'])
|
||||
loadData()
|
||||
}
|
||||
|
||||
async function retryUpload(evidenceId: string) {
|
||||
await retryUploadEvidence(orderId.value, evidenceId)
|
||||
uni.showToast({ title: '已重试上传', icon: 'success' })
|
||||
loadData()
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.phase-tabs {
|
||||
flex-direction: row;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.phase-item {
|
||||
padding: 14rpx 24rpx;
|
||||
margin-right: 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.phase-active {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.phase-text {
|
||||
font-size: 24rpx;
|
||||
color: #476178;
|
||||
}
|
||||
|
||||
.phase-active .phase-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #eaf2f0;
|
||||
color: #0f766e;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.evidence-card {
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.row-text,
|
||||
.empty-text {
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 16rpx 0;
|
||||
border-radius: 16rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff4e5;
|
||||
}
|
||||
|
||||
.retry-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
167
pages/mall/delivery/orders/exception.uvue
Normal file
167
pages/mall/delivery/orders/exception.uvue
Normal file
@@ -0,0 +1,167 @@
|
||||
<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>
|
||||
</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>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, computed } 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 { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const currentType = ref('cannot_contact_elder')
|
||||
const description = ref('')
|
||||
const images = ref([] as Array<string>)
|
||||
const submitting = ref(false)
|
||||
const exceptionTypes = [
|
||||
{ label: '无法联系老人', value: 'cannot_contact_elder' },
|
||||
{ label: '无法入户', value: 'cannot_enter_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: 'emergency_illness' },
|
||||
{ label: '服务项目无法完成', value: 'item_unavailable' },
|
||||
{ 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('选择图片失败')) }
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function chooseImage() {
|
||||
try {
|
||||
images.value = await wrapChooseImage()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '图片选择失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (submitting.value) return
|
||||
if (description.value.trim() == '') {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.type-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.type-item {
|
||||
width: 48%;
|
||||
padding: 18rpx 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.type-active {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #476178;
|
||||
}
|
||||
|
||||
.type-active .type-text {
|
||||
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;
|
||||
}
|
||||
|
||||
.info-text,
|
||||
.risk-text {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.risk-text {
|
||||
color: #b45309;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
258
pages/mall/delivery/orders/execute.uvue
Normal file
258
pages/mall/delivery/orders/execute.uvue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="服务执行" fallback-url="/pages/mall/delivery/orders/detail">
|
||||
<ServicePanel title="执行计时" subtitle="服务开始后持续计时，提交前可暂存。">
|
||||
<text class="timer-text">已服务时长：{{ elapsedText }}</text>
|
||||
<text class="info-text">备注：{{ progressNote }}</text>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="服务项目打卡" subtitle="未完成项必须填写原因。">
|
||||
<view v-for="item in serviceItems" :key="item.id" class="item-card">
|
||||
<view class="item-header">
|
||||
<text class="item-title">{{ item.name }}</text>
|
||||
<switch :checked="item.completed" color="#0f766e" @change="toggleItem(item.id, $event)" />
|
||||
</view>
|
||||
<input class="note-input" v-model="item.remark" placeholder="服务备注，例如监测结果、陪护说明" />
|
||||
<input v-if="item.completed == false" class="note-input" v-model="item.incompleteReason" placeholder="未完成原因，必填" />
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="过程留痕" subtitle="服务中可补充备注、证据和异常上报。">
|
||||
<input class="note-input" v-model="progressNote" placeholder="请输入服务过程备注" />
|
||||
<input class="note-input" v-model="serviceSummary" placeholder="请输入服务总结，完成提交时会带入" />
|
||||
<view class="action-row">
|
||||
<view class="secondary-btn" @click="goEvidence"><text class="btn-text secondary-text">证据上传</text></view>
|
||||
<view class="secondary-btn" @click="goException"><text class="btn-text secondary-text">异常上报</text></view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<view class="bottom-space"></view>
|
||||
<view class="fixed-bar">
|
||||
<view class="bar-btn secondary-btn" @click="saveDraft"><text class="btn-text secondary-text">暂存</text></view>
|
||||
<view class="bar-btn primary-btn" @click="goFinish"><text class="btn-text">完成服务</text></view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import { getDeliveryOrderDetail, saveServiceProgress, startService } from '@/services/deliveryService.uts'
|
||||
import type { DeliveryOrderType, DeliveryServiceItemType } 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 serviceItems = ref([] as Array<DeliveryServiceItemType>)
|
||||
const progressNote = ref('')
|
||||
const serviceSummary = ref('')
|
||||
const elapsedText = ref('00:00')
|
||||
let timerId: number | null = null
|
||||
|
||||
function formatElapsed() {
|
||||
if (order.value == null || order.value.actualStartTime == '') {
|
||||
elapsedText.value = '00:00'
|
||||
return
|
||||
}
|
||||
const start = new Date(order.value.actualStartTime.replace(' ', 'T')).getTime()
|
||||
const diffMinutes = Math.floor((Date.now() - start) / 60000)
|
||||
const hours = Math.floor(diffMinutes / 60)
|
||||
const minutes = diffMinutes % 60
|
||||
const hourText = hours < 10 ? '0' + String(hours) : String(hours)
|
||||
const minuteText = minutes < 10 ? '0' + String(minutes) : String(minutes)
|
||||
elapsedText.value = hourText + ':' + minuteText
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
formatElapsed()
|
||||
if (timerId != null) {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
timerId = setInterval(() => {
|
||||
formatElapsed()
|
||||
}, 60000)
|
||||
}
|
||||
|
||||
function toggleItem(itemId: string, event: any) {
|
||||
for (let i = 0; i < serviceItems.value.length; i++) {
|
||||
if (serviceItems.value[i].id == itemId) {
|
||||
const checked = event.detail.value === true
|
||||
serviceItems.value[i].completed = checked
|
||||
serviceItems.value[i].updatedAt = new Date().toISOString().replace('T', ' ').substring(0, 19)
|
||||
if (checked) {
|
||||
serviceItems.value[i].incompleteReason = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureStarted(orderData: DeliveryOrderType) {
|
||||
if (orderData.status == 'checked_in' || orderData.status == 'arrived') {
|
||||
order.value = await startService(orderId.value)
|
||||
} else {
|
||||
order.value = orderData
|
||||
}
|
||||
if (order.value != null) {
|
||||
serviceItems.value = order.value.serviceItems
|
||||
progressNote.value = order.value.progressNote
|
||||
serviceSummary.value = order.value.serviceSummary
|
||||
startTimer()
|
||||
}
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok || orderId.value == '') {
|
||||
return
|
||||
}
|
||||
const detail = await getDeliveryOrderDetail(orderId.value)
|
||||
if (detail != null) {
|
||||
await ensureStarted(detail)
|
||||
}
|
||||
}
|
||||
|
||||
function validateItems(): boolean {
|
||||
for (let i = 0; i < serviceItems.value.length; i++) {
|
||||
const item = serviceItems.value[i]
|
||||
if (item.completed == false && item.incompleteReason == '') {
|
||||
uni.showToast({ title: '未完成项目必须填写原因', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function saveDraft() {
|
||||
if (!validateItems()) {
|
||||
return
|
||||
}
|
||||
await saveServiceProgress(orderId.value, { items: serviceItems.value, progressNote: progressNote.value, serviceSummary: serviceSummary.value })
|
||||
uni.showToast({ title: '已暂存服务记录', icon: 'success' })
|
||||
loadData()
|
||||
}
|
||||
|
||||
async function goFinish() {
|
||||
if (!validateItems()) {
|
||||
return
|
||||
}
|
||||
await saveServiceProgress(orderId.value, { items: serviceItems.value, progressNote: progressNote.value, serviceSummary: serviceSummary.value })
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/finish?id=' + orderId.value })
|
||||
}
|
||||
|
||||
function goEvidence() {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/evidence?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()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
if (timerId != null) {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timer-text {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.item-card {
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.item-header,
|
||||
.action-row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 14rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f2f7f6;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.secondary-btn,
|
||||
.primary-btn,
|
||||
.bar-btn {
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 18rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #eaf2f0;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #0f766e;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.fixed-bar {
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
padding: 16rpx;
|
||||
flex-direction: row;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
|
||||
}
|
||||
</style>
|
||||
176
pages/mall/delivery/orders/finish.uvue
Normal file
176
pages/mall/delivery/orders/finish.uvue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="完成确认" fallback-url="/pages/mall/delivery/orders/execute">
|
||||
<ServicePanel title="完成摘要" subtitle="结算由机构端或后台处理，这里只做执行完成提交。">
|
||||
<text v-if="order != null" class="row-text">开始时间：{{ order.actualStartTime }}</text>
|
||||
<text v-if="order != null" class="row-text">结束时间：{{ order.actualEndTime == '' ? '提交后生成' : order.actualEndTime }}</text>
|
||||
<text v-if="order != null" class="row-text">完成项目：{{ completedCount }}</text>
|
||||
<text v-if="order != null" class="row-text">未完成项目：{{ incompleteCount }}</text>
|
||||
<text v-if="order != null" class="row-text">有效证据：{{ evidenceCount }}</text>
|
||||
</ServicePanel>
|
||||
<ServicePanel title="确认信息" subtitle="至少要有服务记录和必要证据，签名先采用文本签名 mock。">
|
||||
<textarea class="textarea" v-model="serviceSummary" placeholder="请填写服务总结"></textarea>
|
||||
<input class="note-input" v-model="signatureName" placeholder="请输入老人或家属签名姓名" />
|
||||
<label class="confirm-row">
|
||||
<switch :checked="confirmByFamily" color="#0f766e" @change="toggleConfirm" />
|
||||
<text class="confirm-text">已由老人/家属确认本次服务结果</text>
|
||||
</label>
|
||||
</ServicePanel>
|
||||
<button class="primary-btn" :disabled="submitting" @click="submitFinish">{{ submitting ? '提交中...' : '提交完成确认' }}</button>
|
||||
</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 type { DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { finishService, getDeliveryOrderDetail } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const order = ref<DeliveryOrderType | null>(null)
|
||||
const serviceSummary = ref('')
|
||||
const signatureName = ref('')
|
||||
const confirmByFamily = ref(false)
|
||||
const submitting = ref(false)
|
||||
const completedCount = ref(0)
|
||||
const incompleteCount = ref(0)
|
||||
const evidenceCount = ref(0)
|
||||
|
||||
function rebuildCounters() {
|
||||
if (order.value == null) {
|
||||
completedCount.value = 0
|
||||
incompleteCount.value = 0
|
||||
evidenceCount.value = 0
|
||||
return
|
||||
}
|
||||
let completed = 0
|
||||
let incomplete = 0
|
||||
for (let i = 0; i < order.value.serviceItems.length; i++) {
|
||||
if (order.value.serviceItems[i].completed) {
|
||||
completed++
|
||||
} else {
|
||||
incomplete++
|
||||
}
|
||||
}
|
||||
let evidence = 0
|
||||
for (let i = 0; i < order.value.evidenceList.length; i++) {
|
||||
if (order.value.evidenceList[i].status == 'success') {
|
||||
evidence++
|
||||
}
|
||||
}
|
||||
completedCount.value = completed
|
||||
incompleteCount.value = incomplete
|
||||
evidenceCount.value = evidence
|
||||
}
|
||||
|
||||
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) {
|
||||
serviceSummary.value = order.value.serviceSummary
|
||||
signatureName.value = order.value.signatureName
|
||||
}
|
||||
rebuildCounters()
|
||||
}
|
||||
|
||||
function toggleConfirm(event: any) {
|
||||
confirmByFamily.value = event.detail.value === true
|
||||
}
|
||||
|
||||
async function submitFinish() {
|
||||
if (submitting.value) return
|
||||
if (serviceSummary.value.trim() == '') {
|
||||
uni.showToast({ title: '请填写服务总结', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (signatureName.value.trim() == '') {
|
||||
uni.showToast({ title: '请填写签名姓名', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!confirmByFamily.value) {
|
||||
uni.showToast({ title: '请确认已取得老人/家属确认', icon: 'none' })
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await finishService(orderId.value, { serviceSummary: serviceSummary.value.trim(), signatureName: signatureName.value.trim(), confirmByFamily: confirmByFamily.value })
|
||||
uni.showToast({ title: '已提交待验收', icon: 'success' })
|
||||
uni.setStorageSync('delivery_orders_tab', 'completed')
|
||||
uni.switchTab({ url: '/pages/mall/delivery/orders/index' })
|
||||
} catch (error) {
|
||||
let message = '提交失败'
|
||||
try {
|
||||
const err = error as Error
|
||||
if (err.message != null && err.message != '') {
|
||||
message = err.message
|
||||
}
|
||||
} catch (e) {}
|
||||
uni.showToast({ title: message, icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-text,
|
||||
.confirm-text {
|
||||
display: block;
|
||||
margin-bottom: 14rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 220rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f2f7f6;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.note-input {
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f2f7f6;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.confirm-row {
|
||||
margin-top: 18rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.confirm-text {
|
||||
margin-left: 16rpx;
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
margin-top: 24rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
616
pages/mall/delivery/orders/index.uvue
Normal file
616
pages/mall/delivery/orders/index.uvue
Normal file
@@ -0,0 +1,616 @@
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-orders-safe"></view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { 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 { 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 currentTab = ref('all')
|
||||
const activeTabViewId = ref('status-tab-all')
|
||||
const orders = ref<Array<DeliveryOrderType>>([])
|
||||
|
||||
function getCurrentTabLabel(): string {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
if (tabs[i].value == currentTab.value) {
|
||||
return tabs[i].label
|
||||
}
|
||||
}
|
||||
return '全部'
|
||||
}
|
||||
|
||||
function getCurrentTabSubtitle(): 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 isValidTab(tab: string): boolean {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
if (tabs[i].value == tab) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function syncActiveTabViewId(): void {
|
||||
activeTabViewId.value = 'status-tab-' + currentTab.value
|
||||
}
|
||||
|
||||
function applyTab(tab: string): void {
|
||||
if (tab == '' || !isValidTab(tab)) {
|
||||
currentTab.value = 'all'
|
||||
} else {
|
||||
currentTab.value = tab
|
||||
}
|
||||
syncActiveTabViewId()
|
||||
}
|
||||
|
||||
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>
|
||||
151
pages/mall/delivery/orders/route.uvue
Normal file
151
pages/mall/delivery/orders/route.uvue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="出发与导航" fallback-url="/pages/mall/delivery/orders/detail">
|
||||
<ServicePanel title="路线信息" subtitle="支持出发状态回写、地图导航和位置上报。">
|
||||
<text v-if="order != null" class="info-text">服务地址：{{ order.fullAddress }}</text>
|
||||
<text v-if="order != null" class="info-text">预约时间：{{ order.appointmentStartTime }}</text>
|
||||
<text class="info-text">当前位置：{{ currentLocationText }}</text>
|
||||
</ServicePanel>
|
||||
<ServicePanel title="执行动作" subtitle="先获取位置，再执行出发或到达。">
|
||||
<view class="button-stack">
|
||||
<button class="secondary-btn" @click="getCurrentLocation">获取当前位置</button>
|
||||
<button class="primary-btn" :disabled="submitting" @click="startDepartAction">{{ submitting ? '处理中...' : '点击出发' }}</button>
|
||||
<button class="secondary-btn" @click="openMap">打开地图导航</button>
|
||||
<button class="primary-btn" :disabled="submitting" @click="arriveAction">标记到达</button>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</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 type { DeliveryLocationType, DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { arriveOrder, getDeliveryOrderDetail, startDepart } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const order = ref<DeliveryOrderType | null>(null)
|
||||
const currentLocation = ref<DeliveryLocationType | null>(null)
|
||||
const currentLocationText = ref('未获取')
|
||||
const submitting = ref(false)
|
||||
|
||||
function wrapLocation(): Promise<DeliveryLocationType> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
resolve({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
address: '当前位置',
|
||||
time: new Date().toISOString().replace('T', ' ').substring(0, 19)
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
reject(new Error('定位失败，请检查定位权限后重试'))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok || orderId.value == '') {
|
||||
return
|
||||
}
|
||||
order.value = await getDeliveryOrderDetail(orderId.value)
|
||||
}
|
||||
|
||||
async function getCurrentLocation() {
|
||||
try {
|
||||
currentLocation.value = await wrapLocation()
|
||||
currentLocationText.value = '纬度 ' + String(currentLocation.value.latitude) + ' / 经度 ' + String(currentLocation.value.longitude)
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '定位失败，请检查定位权限', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function startDepartAction() {
|
||||
if (submitting.value) return
|
||||
if (currentLocation.value == null) {
|
||||
await getCurrentLocation()
|
||||
if (currentLocation.value == null) {
|
||||
return
|
||||
}
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await startDepart(orderId.value, currentLocation.value as DeliveryLocationType)
|
||||
uni.showToast({ title: '已更新为出发中', icon: 'success' })
|
||||
loadData()
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function arriveAction() {
|
||||
if (submitting.value) return
|
||||
if (currentLocation.value == null) {
|
||||
await getCurrentLocation()
|
||||
if (currentLocation.value == null) {
|
||||
return
|
||||
}
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await arriveOrder(orderId.value, currentLocation.value as DeliveryLocationType)
|
||||
uni.showToast({ title: '已标记到达', icon: 'success' })
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/orders/checkin?id=' + orderId.value })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openMap() {
|
||||
if (order.value == null) {
|
||||
return
|
||||
}
|
||||
uni.openLocation({ latitude: order.value.latitude, longitude: order.value.longitude, address: order.value.fullAddress })
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-text {
|
||||
display: block;
|
||||
margin-bottom: 14rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.button-stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
margin-bottom: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #eaf2f0;
|
||||
color: #0f766e;
|
||||
}
|
||||
</style>
|
||||
92
pages/mall/delivery/profile/certificates.uvue
Normal file
92
pages/mall/delivery/profile/certificates.uvue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="资质证书" fallback-url="/pages/mall/delivery/profile/index">
|
||||
<ServicePanel title="证书列表" subtitle="基于当前服务人员档案展示资质状态和到期信息。">
|
||||
<view v-if="certificates.length == 0" class="empty-box"><text class="empty-text">暂无资质信息</text></view>
|
||||
<view v-for="item in certificates" :key="item.id" class="cert-card">
|
||||
<text class="row-title">{{ item.name }}</text>
|
||||
<text class="row-text">状态：{{ item.status }}</text>
|
||||
<text class="row-text">到期时间：{{ item.expireAt }}</text>
|
||||
<text class="row-text">发证机构：{{ item.issuer }}</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import type { DeliveryCertificateType, DeliveryInfoType } from '@/types/delivery.uts'
|
||||
import { getDeliveryProfile } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
const certificates = ref([] as Array<DeliveryCertificateType>)
|
||||
|
||||
function buildProfileCertificates(profile: DeliveryInfoType): Array<DeliveryCertificateType> {
|
||||
if (profile.certificates.length > 0) {
|
||||
return profile.certificates
|
||||
}
|
||||
const result = [] as Array<DeliveryCertificateType>
|
||||
result.push({
|
||||
id: 'primary-certificate',
|
||||
name: '服务人员主资质',
|
||||
status: profile.certificateStatus,
|
||||
expireAt: profile.certificateExpireAt != '' ? profile.certificateExpireAt : '待完善',
|
||||
issuer: profile.organizationName != '' ? profile.organizationName : '机构待完善',
|
||||
imageUrl: ''
|
||||
} as DeliveryCertificateType)
|
||||
if (profile.skills.length > 0) {
|
||||
result.push({
|
||||
id: 'skills-certificate',
|
||||
name: '服务能力标签',
|
||||
status: 'valid',
|
||||
expireAt: '长期有效',
|
||||
issuer: profile.skills.join(' / '),
|
||||
imageUrl: ''
|
||||
} as DeliveryCertificateType)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
const profile = await getDeliveryProfile()
|
||||
certificates.value = profile != null ? buildProfileCertificates(profile) : [] as Array<DeliveryCertificateType>
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cert-card {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.row-text,
|
||||
.empty-text {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
736
pages/mall/delivery/profile/index.uvue
Normal file
736
pages/mall/delivery/profile/index.uvue
Normal file
@@ -0,0 +1,736 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="我的" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
|
||||
<view class="delivery-profile-page">
|
||||
<view class="delivery-profile-hero">
|
||||
<view class="delivery-hero-top">
|
||||
<view class="delivery-avatar">
|
||||
<text class="delivery-avatar-text">{{ getAvatarText() }}</text>
|
||||
</view>
|
||||
<view class="delivery-user-main">
|
||||
<text class="delivery-user-name">{{ deliveryInfo != null ? deliveryInfo.name : '服务人员' }}</text>
|
||||
<view class="delivery-user-tags">
|
||||
<text class="delivery-user-tag">{{ deliveryInfo != null ? deliveryInfo.role : '居家服务人员' }}</text>
|
||||
<text class="delivery-user-tag delivery-user-tag-light">{{ getOnlineStatusText() }}</text>
|
||||
</view>
|
||||
<text class="delivery-user-org">{{ displayOrganizationName() }}</text>
|
||||
</view>
|
||||
<view class="delivery-setting-btn" @click="goSettings">
|
||||
<text class="delivery-setting-text">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-hero-info-row">
|
||||
<view class="delivery-hero-info-item">
|
||||
<text class="delivery-hero-info-value">{{ displayStaffNo() }}</text>
|
||||
<text class="delivery-hero-info-label">人员编号</text>
|
||||
</view>
|
||||
<view class="delivery-hero-info-item">
|
||||
<text class="delivery-hero-info-value">{{ getCertificateStatusText() }}</text>
|
||||
<text class="delivery-hero-info-label">资质状态</text>
|
||||
</view>
|
||||
<view class="delivery-hero-info-item">
|
||||
<text class="delivery-hero-info-value">{{ displayServiceArea() }}</text>
|
||||
<text class="delivery-hero-info-label">服务区域</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-level-card">
|
||||
<view class="delivery-card-header">
|
||||
<view>
|
||||
<text class="delivery-card-title">服务等级</text>
|
||||
<text class="delivery-card-subtitle">接单、完成服务和用户好评会提升等级</text>
|
||||
</view>
|
||||
<text class="delivery-level-badge">{{ growthStats.levelName }}</text>
|
||||
</view>
|
||||
|
||||
<view class="delivery-level-main">
|
||||
<text class="delivery-growth-value">{{ growthStats.growthValue }}</text>
|
||||
<text class="delivery-growth-total"> / {{ growthStats.nextLevelValue }} 成长值</text>
|
||||
</view>
|
||||
|
||||
<view class="delivery-progress-track">
|
||||
<view class="delivery-progress-fill" :style="{ width: getLevelProgressWidth() }"></view>
|
||||
</view>
|
||||
|
||||
<text class="delivery-level-tip">{{ growthStats.nextTips }}</text>
|
||||
|
||||
<view class="delivery-level-tags">
|
||||
<text class="delivery-level-tag">接单稳定</text>
|
||||
<text class="delivery-level-tag">好评优秀</text>
|
||||
<text class="delivery-level-tag">准时服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-stats-card">
|
||||
<view class="delivery-stat-item">
|
||||
<text class="delivery-stat-value">{{ deliveryInfo != null ? deliveryInfo.todayAccepted : 0 }}</text>
|
||||
<text class="delivery-stat-label">今日接单</text>
|
||||
</view>
|
||||
<view class="delivery-stat-item">
|
||||
<text class="delivery-stat-value">{{ deliveryInfo != null ? deliveryInfo.todayServing : 0 }}</text>
|
||||
<text class="delivery-stat-label">服务中</text>
|
||||
</view>
|
||||
<view class="delivery-stat-item">
|
||||
<text class="delivery-stat-value">{{ deliveryInfo != null ? deliveryInfo.todayCompleted : 0 }}</text>
|
||||
<text class="delivery-stat-label">今日完成</text>
|
||||
</view>
|
||||
<view class="delivery-stat-item">
|
||||
<text class="delivery-stat-value">{{ growthStats.goodRate }}%</text>
|
||||
<text class="delivery-stat-label">好评率</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-status-card">
|
||||
<view class="delivery-card-header">
|
||||
<view>
|
||||
<text class="delivery-card-title">当前状态</text>
|
||||
<text class="delivery-card-subtitle">切换后会影响平台派单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-status-row">
|
||||
<view class="delivery-status-btn" :class="deliveryInfo != null && deliveryInfo.onlineStatus == 'online' ? 'delivery-status-active' : ''" @click="changeStatus('online')">
|
||||
<text class="delivery-status-text">在线</text>
|
||||
</view>
|
||||
<view class="delivery-status-btn" :class="deliveryInfo != null && deliveryInfo.onlineStatus == 'resting' ? 'delivery-status-active' : ''" @click="changeStatus('resting')">
|
||||
<text class="delivery-status-text">休息</text>
|
||||
</view>
|
||||
<view class="delivery-status-btn" :class="deliveryInfo != null && deliveryInfo.onlineStatus == 'busy' ? 'delivery-status-active' : ''" @click="changeStatus('busy')">
|
||||
<text class="delivery-status-text">忙碌</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-tools-card">
|
||||
<view class="delivery-card-header">
|
||||
<text class="delivery-card-title">常用功能</text>
|
||||
</view>
|
||||
<view class="delivery-tools-grid">
|
||||
<view class="delivery-tool-item" @click="goOrders">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">单</text></view>
|
||||
<text class="delivery-tool-name">工单列表</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="goMessages">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">息</text></view>
|
||||
<text class="delivery-tool-name">消息中心</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="goCertificates">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">证</text></view>
|
||||
<text class="delivery-tool-name">资质证书</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="goRecords">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">记</text></view>
|
||||
<text class="delivery-tool-name">服务记录</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="showTodo('异常上报')">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">异</text></view>
|
||||
<text class="delivery-tool-name">异常上报</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="showTodo('服务规范')">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">规</text></view>
|
||||
<text class="delivery-tool-name">服务规范</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="goSettings">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">设</text></view>
|
||||
<text class="delivery-tool-name">设置</text>
|
||||
</view>
|
||||
<view class="delivery-tool-item" @click="showTodo('联系平台')">
|
||||
<view class="delivery-tool-icon"><text class="delivery-tool-icon-text">客</text></view>
|
||||
<text class="delivery-tool-name">联系平台</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-account-card">
|
||||
<view class="delivery-card-header">
|
||||
<view>
|
||||
<text class="delivery-card-title">账号与资质</text>
|
||||
<text class="delivery-card-subtitle">展示机构、区域、证书与账号安全信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-account-row">
|
||||
<text class="delivery-account-label">所属机构</text>
|
||||
<text class="delivery-account-value">{{ displayOrganizationName() }}</text>
|
||||
</view>
|
||||
<view class="delivery-account-row">
|
||||
<text class="delivery-account-label">服务区域</text>
|
||||
<text class="delivery-account-value">{{ displayServiceArea() }}</text>
|
||||
</view>
|
||||
<view class="delivery-account-row">
|
||||
<text class="delivery-account-label">资质状态</text>
|
||||
<text class="delivery-account-value">{{ getCertificateStatusText() }}</text>
|
||||
</view>
|
||||
<view class="delivery-account-row delivery-account-row-last">
|
||||
<text class="delivery-account-label">资质到期</text>
|
||||
<text class="delivery-account-value">{{ displayCertificateExpireAt() != '' ? displayCertificateExpireAt() : '暂无' }}</text>
|
||||
</view>
|
||||
<view class="delivery-logout-btn" @click="logout">
|
||||
<text class="delivery-logout-text">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="delivery-profile-safe"></view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import type { DeliveryInfoType } from '@/types/delivery.uts'
|
||||
import { getDeliveryProfile, updateDeliveryOnlineStatus } from '@/services/deliveryService.uts'
|
||||
import { logoutDelivery, requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
type DeliveryGrowthStatsType = {
|
||||
levelName: string
|
||||
growthValue: number
|
||||
nextLevelValue: number
|
||||
completedTotal: number
|
||||
goodRate: number
|
||||
goodReviewCount: number
|
||||
onTimeRate: number
|
||||
nextTips: string
|
||||
}
|
||||
|
||||
const deliveryInfo = ref<DeliveryInfoType | null>(null)
|
||||
|
||||
// TODO: 后续接入真实 delivery 服务等级统计接口
|
||||
const growthStats = ref({
|
||||
levelName: '银牌服务师',
|
||||
growthValue: 486,
|
||||
nextLevelValue: 800,
|
||||
completedTotal: 126,
|
||||
goodRate: 98,
|
||||
goodReviewCount: 112,
|
||||
onTimeRate: 96,
|
||||
nextTips: '再完成 12 单并获得 5 个好评可升级'
|
||||
} as DeliveryGrowthStatsType)
|
||||
|
||||
function displayOrganizationName(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '暂未绑定服务机构'
|
||||
}
|
||||
const organizationName = deliveryInfo.value.organizationName.trim()
|
||||
if (organizationName != '') {
|
||||
return organizationName
|
||||
}
|
||||
return '暂未绑定服务机构'
|
||||
}
|
||||
|
||||
function displayStaffNo(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '待分配'
|
||||
}
|
||||
const staffNo = deliveryInfo.value.staffNo.trim()
|
||||
if (staffNo != '') {
|
||||
return staffNo
|
||||
}
|
||||
return '待分配'
|
||||
}
|
||||
|
||||
function displayServiceArea(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '待完善'
|
||||
}
|
||||
const serviceArea = deliveryInfo.value.serviceArea.trim()
|
||||
if (serviceArea != '') {
|
||||
return serviceArea
|
||||
}
|
||||
return '待完善'
|
||||
}
|
||||
|
||||
function displayCertificateExpireAt(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return ''
|
||||
}
|
||||
return deliveryInfo.value.certificateExpireAt.trim()
|
||||
}
|
||||
|
||||
function getOnlineStatusText(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '未登录'
|
||||
}
|
||||
const status = deliveryInfo.value.onlineStatus
|
||||
if (status == 'online') {
|
||||
return '在线接单'
|
||||
}
|
||||
if (status == 'resting') {
|
||||
return '休息中'
|
||||
}
|
||||
if (status == 'busy') {
|
||||
return '忙碌中'
|
||||
}
|
||||
return '未知状态'
|
||||
}
|
||||
|
||||
function getCertificateStatusText(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '待认证'
|
||||
}
|
||||
const status = deliveryInfo.value.certificateStatus.trim()
|
||||
if (status == 'valid') {
|
||||
return '已认证'
|
||||
}
|
||||
if (status == 'expired') {
|
||||
return '已过期'
|
||||
}
|
||||
if (status == 'pending') {
|
||||
return '审核中'
|
||||
}
|
||||
if (status != '') {
|
||||
return status
|
||||
}
|
||||
return '待认证'
|
||||
}
|
||||
|
||||
function getAvatarText(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return '护'
|
||||
}
|
||||
const name = deliveryInfo.value.name.trim()
|
||||
if (name == '') {
|
||||
return '护'
|
||||
}
|
||||
return name.substring(0, 1)
|
||||
}
|
||||
|
||||
function getLevelProgressWidth(): string {
|
||||
if (growthStats.value.nextLevelValue <= 0) {
|
||||
return '0%'
|
||||
}
|
||||
const percent = growthStats.value.growthValue * 100 / growthStats.value.nextLevelValue
|
||||
if (percent >= 100) {
|
||||
return '100%'
|
||||
}
|
||||
if (percent <= 0) {
|
||||
return '0%'
|
||||
}
|
||||
return percent.toString() + '%'
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
deliveryInfo.value = await getDeliveryProfile()
|
||||
}
|
||||
|
||||
async function changeStatus(status: string) {
|
||||
const nextInfo = await updateDeliveryOnlineStatus(status)
|
||||
if (nextInfo != null) {
|
||||
deliveryInfo.value = nextInfo
|
||||
uni.showToast({ title: '状态已更新', icon: 'success' })
|
||||
}
|
||||
}
|
||||
|
||||
function goCertificates() {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/profile/certificates' })
|
||||
}
|
||||
|
||||
function goSettings() {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/profile/settings' })
|
||||
}
|
||||
|
||||
function goOrders() {
|
||||
uni.switchTab({ url: '/pages/mall/delivery/orders/index' })
|
||||
}
|
||||
|
||||
function goMessages() {
|
||||
uni.switchTab({ url: '/pages/mall/delivery/messages/index' })
|
||||
}
|
||||
|
||||
function goRecords() {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/records/index' })
|
||||
}
|
||||
|
||||
function showTodo(title: string) {
|
||||
uni.showToast({
|
||||
title: title + '建设中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await logoutDelivery()
|
||||
uni.reLaunch({ url: '/pages/user/login?mode=delivery' })
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delivery-profile-page {
|
||||
min-height: 100%;
|
||||
margin-left: -24rpx;
|
||||
margin-right: -24rpx;
|
||||
margin-top: -24rpx;
|
||||
padding-bottom: 32rpx;
|
||||
background-color: #f4f8fb;
|
||||
}
|
||||
|
||||
.delivery-profile-hero {
|
||||
padding: 72rpx 28rpx 34rpx;
|
||||
border-bottom-left-radius: 36rpx;
|
||||
border-bottom-right-radius: 36rpx;
|
||||
background-color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-hero-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
margin-right: 22rpx;
|
||||
border-radius: 56rpx;
|
||||
background-color: rgba(255, 255, 255, 0.92);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-avatar-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-user-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.delivery-user-name {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-user-tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.delivery-user-tag {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
color: #0f766e;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.delivery-user-tag-light {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.delivery-user-org {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.delivery-setting-btn {
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.delivery-setting-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-hero-info-row {
|
||||
margin-top: 32rpx;
|
||||
padding: 22rpx 18rpx;
|
||||
border-radius: 26rpx;
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.delivery-hero-info-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-hero-info-value {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
max-width: 180rpx;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.delivery-hero-info-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.delivery-level-card,
|
||||
.delivery-stats-card,
|
||||
.delivery-status-card,
|
||||
.delivery-tools-card,
|
||||
.delivery-account-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-level-card {
|
||||
margin-top: -18rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delivery-card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.delivery-card-subtitle {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-level-badge {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
color: #92400e;
|
||||
background-color: #fef3c7;
|
||||
}
|
||||
|
||||
.delivery-level-main {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.delivery-growth-value {
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-growth-total {
|
||||
margin-left: 6rpx;
|
||||
margin-bottom: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-progress-track {
|
||||
margin-top: 18rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #e2e8f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.delivery-progress-fill {
|
||||
height: 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-level-tip {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 34rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-level-tags {
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.delivery-level-tag {
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
color: #0f766e;
|
||||
background-color: #ecfdf5;
|
||||
}
|
||||
|
||||
.delivery-stats-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 28rpx;
|
||||
padding-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.delivery-stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.delivery-stat-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-status-row {
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.delivery-status-btn {
|
||||
width: 31%;
|
||||
height: 68rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: #f1f5f9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-status-active {
|
||||
background-color: #0f766e;
|
||||
box-shadow: 0 8rpx 18rpx rgba(15, 118, 110, 0.18);
|
||||
}
|
||||
|
||||
.delivery-status-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-status-active .delivery-status-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delivery-tools-grid {
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.delivery-tool-item {
|
||||
width: 25%;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delivery-tool-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ecfdf5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-tool-icon-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.delivery-tool-name {
|
||||
margin-top: 10rpx;
|
||||
font-size: 23rpx;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.delivery-account-row {
|
||||
min-height: 72rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-color: #eef2f7;
|
||||
}
|
||||
|
||||
.delivery-account-row-last {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.delivery-account-label {
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.delivery-account-value {
|
||||
max-width: 420rpx;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.delivery-logout-btn {
|
||||
margin-top: 24rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff1f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delivery-logout-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.delivery-profile-safe {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
123
pages/mall/delivery/profile/settings.uvue
Normal file
123
pages/mall/delivery/profile/settings.uvue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="设置" fallback-url="/pages/mall/delivery/profile/index">
|
||||
<ServicePanel title="账号信息" subtitle="展示当前服务人员账号和档案状态。">
|
||||
<text v-if="deliveryInfo != null" class="info-text">姓名：{{ deliveryInfo.name }}</text>
|
||||
<text v-if="deliveryInfo != null" class="info-text">编号：{{ displayStaffNo() }}</text>
|
||||
<text v-if="deliveryInfo != null" class="info-text">机构：{{ displayOrganizationName() }}</text>
|
||||
<text v-if="deliveryInfo != null" class="info-text">在线状态：{{ deliveryInfo.onlineStatus }}</text>
|
||||
<text v-if="deliveryInfo != null" class="info-text">资质状态：{{ deliveryInfo.certificateStatus }}</text>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="提醒与权限" subtitle="预留定位权限、语音播报和消息提醒控制。">
|
||||
<view class="setting-row">
|
||||
<text class="setting-text">消息提醒</text>
|
||||
<switch :checked="messageEnabled" color="#0f766e" @change="toggleMessage" />
|
||||
</view>
|
||||
<view class="setting-row">
|
||||
<text class="setting-text">语音播报</text>
|
||||
<switch :checked="voiceEnabled" color="#0f766e" @change="toggleVoice" />
|
||||
</view>
|
||||
<view class="setting-row">
|
||||
<text class="setting-text">定位权限提示</text>
|
||||
<text class="setting-hint">请确保 Android 和小程序侧授权开启</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import type { DeliveryInfoType } from '@/types/delivery.uts'
|
||||
import { getDeliveryProfile } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
const messageEnabled = ref(true)
|
||||
const voiceEnabled = ref(false)
|
||||
const deliveryInfo = ref<DeliveryInfoType | null>(null)
|
||||
|
||||
function displayOrganizationName(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return ''
|
||||
}
|
||||
const organizationName = deliveryInfo.value.organizationName.trim()
|
||||
if (organizationName != '') {
|
||||
return organizationName
|
||||
}
|
||||
return '暂未绑定服务机构'
|
||||
}
|
||||
|
||||
function displayStaffNo(): string {
|
||||
if (deliveryInfo.value == null) {
|
||||
return ''
|
||||
}
|
||||
const staffNo = deliveryInfo.value.staffNo.trim()
|
||||
if (staffNo != '') {
|
||||
return staffNo
|
||||
}
|
||||
return '待分配'
|
||||
}
|
||||
|
||||
function restoreSettings() {
|
||||
const msg = uni.getStorageSync('delivery_setting_message') as boolean | null
|
||||
const voice = uni.getStorageSync('delivery_setting_voice') as boolean | null
|
||||
messageEnabled.value = msg == null ? true : msg
|
||||
voiceEnabled.value = voice == null ? false : voice
|
||||
}
|
||||
|
||||
function toggleMessage(event: any) {
|
||||
messageEnabled.value = event.detail.value === true
|
||||
uni.setStorageSync('delivery_setting_message', messageEnabled.value)
|
||||
}
|
||||
|
||||
function toggleVoice(event: any) {
|
||||
voiceEnabled.value = event.detail.value === true
|
||||
uni.setStorageSync('delivery_setting_voice', voiceEnabled.value)
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
restoreSettings()
|
||||
deliveryInfo.value = await getDeliveryProfile()
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.setting-row {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e6edf1;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
font-size: 28rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.setting-hint {
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
text-align: right;
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
69
pages/mall/delivery/records/detail.uvue
Normal file
69
pages/mall/delivery/records/detail.uvue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="记录详情" fallback-url="/pages/mall/delivery/records/index">
|
||||
<ServicePanel title="执行留痕" subtitle="展示轨迹摘要、证据材料、验收与结算状态。">
|
||||
<text v-if="order != null" class="row-text">工单号：{{ order.orderNo }}</text>
|
||||
<text v-if="order != null" class="row-text">服务总结：{{ order.serviceSummary }}</text>
|
||||
<text v-if="order != null" class="row-text">验收状态：{{ order.statusText }}</text>
|
||||
<text v-if="order != null" class="row-text">结算状态：{{ order.settlementStatus }}</text>
|
||||
<text v-if="order != null" class="row-text">轨迹点数量：{{ order.trackPoints.length }}</text>
|
||||
</ServicePanel>
|
||||
<ServicePanel title="证据材料" subtitle="第一阶段展示图片证据，音视频先预留。">
|
||||
<view v-if="order != null && order.evidenceList.length == 0" class="empty-box"><text class="empty-text">暂无证据材料</text></view>
|
||||
<view v-if="order != null" v-for="item in order.evidenceList" :key="item.id" class="evidence-card">
|
||||
<text class="row-text">{{ item.phase }} / {{ item.name }}</text>
|
||||
<text class="row-text">状态：{{ item.status }}</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</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 type { DeliveryOrderType } from '@/types/delivery.uts'
|
||||
import { getDeliveryOrderDetail } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
||||
|
||||
const orderId = ref('')
|
||||
const order = ref<DeliveryOrderType | null>(null)
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok || orderId.value == '') {
|
||||
return
|
||||
}
|
||||
order.value = await getDeliveryOrderDetail(orderId.value)
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options != null) {
|
||||
orderId.value = getDeliveryRouteParam(options as UTSJSONObject, 'id')
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-text,
|
||||
.empty-text {
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.evidence-card {
|
||||
padding: 18rpx;
|
||||
margin-bottom: 14rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
70
pages/mall/delivery/records/index.uvue
Normal file
70
pages/mall/delivery/records/index.uvue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="服务记录" fallback-url="/pages/mall/delivery/home/index">
|
||||
<ServicePanel title="历史记录" subtitle="展示服务留痕、验收结果、评价与结算状态。">
|
||||
<view v-if="records.length == 0" class="empty-box"><text class="empty-text">暂无服务记录</text></view>
|
||||
<view v-for="item in records" :key="item.id" class="record-card" @click="goDetail(item.orderId)">
|
||||
<text class="row-title">{{ item.orderNo }} · {{ item.serviceName }}</text>
|
||||
<text class="row-text">服务对象：{{ item.elderNameMasked }}</text>
|
||||
<text class="row-text">状态：{{ item.statusText }}</text>
|
||||
<text class="row-text">时间：{{ item.actualStartTime }} ~ {{ item.actualEndTime }}</text>
|
||||
<text class="row-text">结算：{{ item.settlementStatus }} · 评价：{{ item.ratingText }}</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import type { DeliveryRecordType } from '@/types/delivery.uts'
|
||||
import { getDeliveryRecords } from '@/services/deliveryService.uts'
|
||||
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
||||
|
||||
const records = ref([] as Array<DeliveryRecordType>)
|
||||
|
||||
async function loadData() {
|
||||
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
records.value = await getDeliveryRecords()
|
||||
}
|
||||
|
||||
function goDetail(orderId: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/delivery/records/detail?id=' + orderId })
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.record-card {
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f8fbfc;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.row-text,
|
||||
.empty-text {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5e758c;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user