解决登录显示、首页显示bug
This commit is contained in:
@@ -10,9 +10,13 @@
|
||||
<view class="table-header">
|
||||
<view class="th" style="flex: 1;">序号</view>
|
||||
<view class="th" style="flex: 1.5;">头像</view>
|
||||
<view class="th" style="flex: 2;">名称</view>
|
||||
<view class="th" style="flex: 2.5;">手机号码</view>
|
||||
<view class="th" style="flex: 1.5;">状态</view>
|
||||
<view class="th" style="flex: 1.8;">名称</view>
|
||||
<view class="th" style="flex: 1.8;">编号</view>
|
||||
<view class="th" style="flex: 2.5;">机构</view>
|
||||
<view class="th" style="flex: 2.3;">手机号码</view>
|
||||
<view class="th" style="flex: 1.5;">在线</view>
|
||||
<view class="th" style="flex: 1.7;">资质</view>
|
||||
<view class="th" style="flex: 1.3;">状态</view>
|
||||
<view class="th" style="flex: 3;">添加时间</view>
|
||||
<view class="th" style="flex: 2;">操作</view>
|
||||
</view>
|
||||
@@ -29,9 +33,13 @@
|
||||
<image v-if="item.avatar" class="avatar" :src="item.avatar" mode="aspectFill" />
|
||||
<view v-else class="avatar-placeholder"><text>👤</text></view>
|
||||
</view>
|
||||
<view class="td" style="flex: 2;"><text class="td-txt">{{ item.nickname }}</text></view>
|
||||
<view class="td" style="flex: 2.5;"><text class="td-txt">{{ item.phone }}</text></view>
|
||||
<view class="td" style="flex: 1.5;">
|
||||
<view class="td" style="flex: 1.8;"><text class="td-txt">{{ item.nickname }}</text></view>
|
||||
<view class="td" style="flex: 1.8;"><text class="td-txt">{{ item.staff_no || '-' }}</text></view>
|
||||
<view class="td" style="flex: 2.5;"><text class="td-txt">{{ item.station_name || item.station_id || '-' }}</text></view>
|
||||
<view class="td" style="flex: 2.3;"><text class="td-txt">{{ item.phone }}</text></view>
|
||||
<view class="td" style="flex: 1.5;"><text class="td-txt">{{ item.online_status || '-' }}</text></view>
|
||||
<view class="td" style="flex: 1.7;"><text class="td-txt">{{ item.certificate_status || '-' }}</text></view>
|
||||
<view class="td" style="flex: 1.3;">
|
||||
<switch :checked="item.status === 1" color="#1890ff" scale="0.7" @change="onToggleStatus(item)" />
|
||||
</view>
|
||||
<view class="td" style="flex: 3;"><text class="td-txt-small">{{ formatTime(item.created_at) }}</text></view>
|
||||
@@ -71,6 +79,34 @@
|
||||
<text class="f-label">手机号：</text>
|
||||
<input class="f-input" v-model="form.phone" type="number" placeholder="请输入手机号" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">编号：</text>
|
||||
<input class="f-input" v-model="form.staff_no" placeholder="请输入服务人员编号" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">机构ID：</text>
|
||||
<input class="f-input" v-model="form.station_id" placeholder="请输入服务机构/站点 ID" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">服务区域：</text>
|
||||
<input class="f-input" v-model="form.service_area" placeholder="请输入服务区域" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">在线状态：</text>
|
||||
<input class="f-input" v-model="form.online_status" placeholder="online / resting / busy" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">资质状态：</text>
|
||||
<input class="f-input" v-model="form.certificate_status" placeholder="valid / expired / pending" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">资质到期：</text>
|
||||
<input class="f-input" v-model="form.certificate_expire_at" placeholder="YYYY-MM-DD" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">技能标签：</text>
|
||||
<input class="f-input" v-model="form.skillsText" placeholder="多个标签请用英文逗号分隔" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="f-label">头像：</text>
|
||||
<view class="upload-placeholder" @click="handleUpload">
|
||||
@@ -103,10 +139,18 @@ const showModal = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const form = reactive({
|
||||
id: '' as string | null,
|
||||
uid: '' as string | null,
|
||||
station_id: '' as string | null,
|
||||
staff_no: '',
|
||||
nickname: '',
|
||||
phone: '',
|
||||
avatar: '',
|
||||
status: 1
|
||||
status: 1,
|
||||
online_status: 'resting',
|
||||
certificate_status: 'pending',
|
||||
certificate_expire_at: '',
|
||||
service_area: '',
|
||||
skillsText: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@@ -129,20 +173,36 @@ async function loadData() {
|
||||
function onAdd() {
|
||||
isEdit.value = false
|
||||
form.id = null
|
||||
form.uid = null
|
||||
form.station_id = ''
|
||||
form.staff_no = ''
|
||||
form.nickname = ''
|
||||
form.phone = ''
|
||||
form.avatar = ''
|
||||
form.status = 1
|
||||
form.online_status = 'resting'
|
||||
form.certificate_status = 'pending'
|
||||
form.certificate_expire_at = ''
|
||||
form.service_area = ''
|
||||
form.skillsText = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function onEdit(item : DeliveryStaff) {
|
||||
isEdit.value = true
|
||||
form.id = item.id
|
||||
form.uid = item.uid
|
||||
form.station_id = item.station_id || ''
|
||||
form.staff_no = item.staff_no || ''
|
||||
form.nickname = item.nickname
|
||||
form.phone = item.phone
|
||||
form.avatar = item.avatar || ''
|
||||
form.status = item.status
|
||||
form.online_status = item.online_status || 'resting'
|
||||
form.certificate_status = item.certificate_status || 'pending'
|
||||
form.certificate_expire_at = item.certificate_expire_at || ''
|
||||
form.service_area = item.service_area || ''
|
||||
form.skillsText = item.skills && item.skills.length > 0 ? item.skills.join(',') : ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
@@ -155,6 +215,14 @@ async function handleSave() {
|
||||
uni.showToast({ title: '请填写姓名和手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (form.online_status != 'online' && form.online_status != 'resting' && form.online_status != 'busy') {
|
||||
uni.showToast({ title: '在线状态不合法', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (form.certificate_status != 'valid' && form.certificate_status != 'expired' && form.certificate_status != 'pending') {
|
||||
uni.showToast({ title: '资质状态不合法', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
|
||||
@@ -1,8 +1,17 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
|
||||
<ServicePanel title="提交服务申请" subtitle="先使用 mock 数据模拟申请受理流程。">
|
||||
<view class="form-item">
|
||||
<text class="label">选择服务</text>
|
||||
<view class="apply-page">
|
||||
<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
|
||||
<view class="summary-card">
|
||||
<text class="summary-title">快速预约上门服务</text>
|
||||
<text class="summary-desc">保留现有申请逻辑，把旧入口调整为预约下单流程页体验。</text>
|
||||
<view class="summary-tips-row">
|
||||
<text class="summary-tip">平台认证</text>
|
||||
<text class="summary-tip">可预约</text>
|
||||
<text class="summary-tip">服务保障</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ServicePanel title="Step1 选择服务" subtitle="先确认预约的居家服务项目。">
|
||||
<view class="choice-wrap">
|
||||
<view
|
||||
v-for="item in services"
|
||||
@@ -11,58 +20,109 @@
|
||||
:class="selectedServiceId == item.id ? 'choice-active' : ''"
|
||||
@click="selectService(item.id, item.name)"
|
||||
>
|
||||
<text class="choice-title">{{ item.name }}</text>
|
||||
<text class="choice-desc">{{ item.durationText }} · ¥{{ item.price }}</text>
|
||||
<view class="choice-header-row">
|
||||
<text class="choice-title">{{ item.name }}</text>
|
||||
<text class="choice-price">¥{{ item.price }}</text>
|
||||
</view>
|
||||
<text class="choice-desc">{{ item.durationText }} · {{ item.summary }}</text>
|
||||
<text class="choice-suitable">适用对象：{{ item.suitableFor }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="label">申请人</text>
|
||||
<input v-model="form.applicantName" class="input" placeholder="请输入申请人姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">服务对象</text>
|
||||
<input v-model="form.elderName" class="input" placeholder="请输入老人姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">年龄</text>
|
||||
<input v-model="ageText" class="input" type="number" placeholder="请输入老人年龄" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">联系电话</text>
|
||||
<input v-model="form.phone" class="input" type="number" placeholder="请输入联系电话" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">服务地址</text>
|
||||
<textarea v-model="form.address" class="textarea" placeholder="请输入详细上门地址"></textarea>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">期望时间</text>
|
||||
<input v-model="form.preferredTime" class="input" placeholder="例如 2026-05-14 上午" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">需求说明</text>
|
||||
<textarea v-model="form.demandSummary" class="textarea" placeholder="简要描述照护需求、病情重点、注意事项"></textarea>
|
||||
</view>
|
||||
<ServicePanel title="Step2 服务地址" subtitle="保持原有地址字段，先用预约卡形式承载。">
|
||||
<view class="form-item">
|
||||
<text class="label">服务地址</text>
|
||||
<textarea v-model="form.address" class="textarea" placeholder="请输入详细上门地址"></textarea>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step3 上门时间" subtitle="可直接选择推荐时段，也支持手动输入。">
|
||||
<scroll-view class="booking-day-scroll" direction="horizontal" :show-scrollbar="false">
|
||||
<view class="booking-day-row">
|
||||
<view
|
||||
v-for="item in bookingDays"
|
||||
:key="item.id"
|
||||
:class="['booking-day-card', selectedDayId == item.id ? 'booking-day-card-active' : '']"
|
||||
@click="selectDay(item.id)"
|
||||
>
|
||||
<text :class="['booking-day-label', selectedDayId == item.id ? 'booking-day-label-active' : '']">{{ item.label }}</text>
|
||||
<text :class="['booking-day-date', selectedDayId == item.id ? 'booking-day-date-active' : '']">{{ item.dateText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="booking-slot-grid">
|
||||
<view
|
||||
v-for="item in bookingSlots"
|
||||
:key="item.id"
|
||||
:class="['booking-slot-card', selectedSlotId == item.id ? 'booking-slot-card-active' : '', item.available ? '' : 'booking-slot-card-disabled']"
|
||||
@click="selectSlot(item.id, item.available)"
|
||||
>
|
||||
<text :class="['booking-slot-label', selectedSlotId == item.id ? 'booking-slot-label-active' : '']">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item form-item-last">
|
||||
<text class="label">期望时间</text>
|
||||
<input v-model="form.preferredTime" class="input" placeholder="例如 2026-05-14 上午" />
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step4 联系人信息" subtitle="保留现有字段，不改提交结构。">
|
||||
<view class="form-item">
|
||||
<text class="label">申请人</text>
|
||||
<input v-model="form.applicantName" class="input" placeholder="请输入申请人姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">服务对象</text>
|
||||
<input v-model="form.elderName" class="input" placeholder="请输入老人姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">年龄</text>
|
||||
<input v-model="ageText" class="input" type="number" placeholder="请输入老人年龄" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">联系电话</text>
|
||||
<input v-model="form.phone" class="input" type="number" placeholder="请输入联系电话" />
|
||||
</view>
|
||||
<view class="form-item form-item-last">
|
||||
<text class="label">需求说明</text>
|
||||
<textarea v-model="form.demandSummary" class="textarea" placeholder="简要描述照护需求、病情重点、注意事项"></textarea>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<view class="page-bottom-space"></view>
|
||||
</ServicePageScaffold>
|
||||
|
||||
<view class="bottom-bar">
|
||||
<view>
|
||||
<text class="bottom-bar-label">预计金额</text>
|
||||
<view class="bottom-bar-price-row">
|
||||
<text class="bottom-bar-price-prefix">¥</text>
|
||||
<text class="bottom-bar-price">{{ selectedPrice }}</text>
|
||||
<text class="bottom-bar-price-unit">起</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="submit-btn" @click="submitApplication">提交申请</view>
|
||||
</ServicePanel>
|
||||
</ServicePageScaffold>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
|
||||
import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
|
||||
import { BookingDayOptionType, BookingTimeSlotType, getBookingDayOptions, getBookingTimeSlots } from '@/utils/homeServiceUiMock.uts'
|
||||
|
||||
const services = ref<Array<HomeServiceCatalogType>>([])
|
||||
const selectedServiceId = ref('svc-001')
|
||||
const selectedServiceName = ref('基础上门护理')
|
||||
const ageText = ref('78')
|
||||
const bookingDays = ref<Array<BookingDayOptionType>>([])
|
||||
const bookingSlots = ref<Array<BookingTimeSlotType>>([])
|
||||
const selectedDayId = ref('day-1')
|
||||
const selectedSlotId = ref('slot-1')
|
||||
|
||||
const form = reactive({
|
||||
serviceId: 'svc-001',
|
||||
@@ -76,17 +136,61 @@ const form = reactive({
|
||||
demandSummary: '老人需要基础照护、血压监测和跌倒风险提醒。'
|
||||
} as HomeServiceApplicationDraftType)
|
||||
|
||||
const selectedPrice = computed((): string => {
|
||||
for (let i = 0; i < services.value.length; i++) {
|
||||
if (services.value[i].id == selectedServiceId.value) {
|
||||
return services.value[i].price.toString()
|
||||
}
|
||||
}
|
||||
return '0'
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
bookingDays.value = getBookingDayOptions()
|
||||
bookingSlots.value = getBookingTimeSlots()
|
||||
services.value = await fetchHomeServiceCatalog()
|
||||
}
|
||||
|
||||
function selectService(serviceId: string, serviceName: string) {
|
||||
selectedServiceId.value = serviceId
|
||||
selectedServiceName.value = serviceName
|
||||
form.serviceId = serviceId
|
||||
form.serviceName = serviceName
|
||||
}
|
||||
|
||||
function syncPreferredTime() {
|
||||
let selectedDay = ''
|
||||
for (let i = 0; i < bookingDays.value.length; i++) {
|
||||
if (bookingDays.value[i].id == selectedDayId.value) {
|
||||
selectedDay = bookingDays.value[i].label + ' ' + bookingDays.value[i].dateText
|
||||
break
|
||||
}
|
||||
}
|
||||
let selectedSlot = ''
|
||||
for (let i = 0; i < bookingSlots.value.length; i++) {
|
||||
if (bookingSlots.value[i].id == selectedSlotId.value) {
|
||||
selectedSlot = bookingSlots.value[i].label
|
||||
break
|
||||
}
|
||||
}
|
||||
if (selectedDay != '' && selectedSlot != '') {
|
||||
form.preferredTime = selectedDay + ' ' + selectedSlot
|
||||
}
|
||||
}
|
||||
|
||||
function selectDay(dayId: string) {
|
||||
selectedDayId.value = dayId
|
||||
syncPreferredTime()
|
||||
}
|
||||
|
||||
function selectSlot(slotId: string, available: boolean) {
|
||||
if (!available) {
|
||||
uni.showToast({ title: '该时段暂不可约', icon: 'none' })
|
||||
return
|
||||
}
|
||||
selectedSlotId.value = slotId
|
||||
syncPreferredTime()
|
||||
}
|
||||
|
||||
async function submitApplication() {
|
||||
if (form.applicantName == '' || form.elderName == '' || form.phone == '' || form.address == '' || form.preferredTime == '') {
|
||||
uni.showToast({ title: '请补全申请信息', icon: 'none' })
|
||||
@@ -106,10 +210,66 @@ onLoad(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.apply-page {
|
||||
background: #f4f8fb;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.summary-desc,
|
||||
.choice-desc,
|
||||
.choice-suitable,
|
||||
.bottom-bar-label {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.summary-tips-row,
|
||||
.choice-header-row,
|
||||
.bottom-bar,
|
||||
.bottom-bar-price-row,
|
||||
.booking-day-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-tips-row {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.summary-tip {
|
||||
padding: 10rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
font-size: 22rpx;
|
||||
color: #476072;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-item-last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
@@ -138,13 +298,13 @@ onLoad(() => {
|
||||
}
|
||||
|
||||
.choice-wrap {
|
||||
gap: 16rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.choice-card {
|
||||
padding: 22rpx;
|
||||
background: #f8fbfc;
|
||||
border-radius: 18rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
@@ -156,25 +316,132 @@ onLoad(() => {
|
||||
background: #effcf8;
|
||||
}
|
||||
|
||||
.choice-header-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.choice-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.choice-price,
|
||||
.bottom-bar-price-prefix,
|
||||
.bottom-bar-price {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.choice-desc {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
|
||||
.booking-day-scroll {
|
||||
height: 132rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.booking-day-row {
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.booking-day-card {
|
||||
width: 150rpx;
|
||||
padding: 18rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #f8fbfd;
|
||||
margin-right: 16rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.booking-day-card-active {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.booking-day-label,
|
||||
.booking-day-date,
|
||||
.booking-slot-label {
|
||||
font-size: 24rpx;
|
||||
color: #66788a;
|
||||
line-height: 34rpx;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.booking-day-date {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.booking-day-label-active,
|
||||
.booking-day-date-active,
|
||||
.booking-slot-label-active {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.booking-slot-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.booking-slot-card {
|
||||
width: 48.5%;
|
||||
height: 82rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #f8fbfd;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.booking-slot-card-active {
|
||||
background: #0f766e;
|
||||
border-color: #0f766e;
|
||||
}
|
||||
|
||||
.booking-slot-card-disabled {
|
||||
background: #f1f5f9;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.page-bottom-space {
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
bottom: 28rpx;
|
||||
justify-content: space-between;
|
||||
background: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
padding: 20rpx 22rpx;
|
||||
box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.bottom-bar-price-unit {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
margin-left: 8rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 16rpx;
|
||||
padding: 26rpx 0;
|
||||
border-radius: 20rpx;
|
||||
height: 84rpx;
|
||||
padding: 0 36rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #0f766e;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -1,32 +1,67 @@
|
||||
<template>
|
||||
<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
|
||||
<view class="hero-card">
|
||||
<text class="hero-title">居家上门服务</text>
|
||||
<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
|
||||
<view class="hero-actions">
|
||||
<view class="primary-btn" @click="goApply">立即申请</view>
|
||||
<view>
|
||||
<text class="hero-title">居家服务大厅</text>
|
||||
<text class="hero-desc">从服务选择、预约下单到服务单跟踪，整体体验升级为上门服务预约平台。</text>
|
||||
</view>
|
||||
<view class="hero-right-tag">
|
||||
<text class="hero-right-tag-text">服务保障</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ServicePanel title="推荐服务" subtitle="适老化信息更清晰，入口更聚焦。">
|
||||
<view v-for="item in services" :key="item.id" class="service-card">
|
||||
<view class="service-top">
|
||||
<view>
|
||||
<text class="service-name">{{ item.name }}</text>
|
||||
<text class="service-meta">{{ item.category }} · {{ item.durationText }}</text>
|
||||
</view>
|
||||
<text class="service-price">¥{{ item.price }}</text>
|
||||
<view class="service-category-grid">
|
||||
<view v-for="item in categoryGrid" :key="item.id" class="service-category-card" @click="switchCategory(item.id)">
|
||||
<view class="service-category-icon" :style="{ background: item.color }">
|
||||
<text class="service-category-icon-text">{{ item.iconText }}</text>
|
||||
</view>
|
||||
<text class="service-category-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="promo-scroll" direction="horizontal" :show-scrollbar="false">
|
||||
<view class="promo-row">
|
||||
<view v-for="item in promoCards" :key="item.id" :class="['promo-card', 'promo-card-' + item.tone]" @click="consultService">
|
||||
<text class="promo-card-title">{{ item.title }}</text>
|
||||
<text class="promo-card-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<ServicePanel title="推荐服务" subtitle="优先展示最常预约的居家服务项目。">
|
||||
<view v-for="item in filteredServices" :key="item.id" class="recommend-card">
|
||||
<view class="recommend-card-top">
|
||||
<view class="recommend-card-cover">
|
||||
<text class="recommend-card-cover-text">{{ item.imageText }}</text>
|
||||
</view>
|
||||
<view class="recommend-card-main">
|
||||
<text class="recommend-card-title">{{ item.title }}</text>
|
||||
<text class="recommend-card-subtitle">{{ item.subtitle }}</text>
|
||||
<text class="recommend-card-suitable">适用对象：{{ item.suitableFor }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recommend-card-tags">
|
||||
<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-card-tag">{{ tag }}</text>
|
||||
</view>
|
||||
<view class="recommend-card-bottom">
|
||||
<view>
|
||||
<text class="recommend-card-price-prefix">¥</text>
|
||||
<text class="recommend-card-price">{{ item.price }}</text>
|
||||
<text class="recommend-card-unit">起 / {{ item.unit }}</text>
|
||||
</view>
|
||||
<view class="recommend-card-actions">
|
||||
<view class="recommend-card-secondary" @click="goDetail(item.id)">查看详情</view>
|
||||
<view class="recommend-card-primary" @click="goBooking(item.id)">立即预约</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="service-summary">{{ item.summary }}</text>
|
||||
<text class="service-suitable">适用对象：{{ item.suitableFor }}</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="我的服务单" subtitle="先展示待派单和服务中的 mock 单据。">
|
||||
<ServicePanel title="我的预约 / 服务单" subtitle="按服务预约单的方式呈现状态、机构和上门信息。">
|
||||
<view v-if="cases.length == 0" class="empty-box">
|
||||
<text class="empty-text">当前没有服务单</text>
|
||||
</view>
|
||||
<view v-for="item in cases" :key="item.id" class="case-card" @click="goDetail(item.id)">
|
||||
<view v-for="item in cases" :key="item.id" class="case-card" @click="goOrderDetail(item.id)">
|
||||
<view class="case-row">
|
||||
<view>
|
||||
<text class="case-title">{{ item.serviceName }}</text>
|
||||
@@ -34,127 +69,354 @@
|
||||
</view>
|
||||
<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
|
||||
</view>
|
||||
<text class="case-info">服务对象：{{ item.elderName }}，{{ item.age }} 岁</text>
|
||||
<text class="case-info">服务机构：{{ item.staffName == '待分配' ? '待分配机构' : item.staffName }}</text>
|
||||
<text class="case-info">上门时间：{{ item.serviceTime }}</text>
|
||||
<text class="case-info">服务地址：{{ item.address }}</text>
|
||||
<view class="case-action-row">
|
||||
<view class="case-action-secondary" @click.stop="goDetailByName(item.serviceName)">再次预约</view>
|
||||
<view class="case-action-primary" @click.stop="goOrderDetail(item.id)">查看服务单</view>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
|
||||
import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
|
||||
import { HomeServiceCatalogType, HomeServiceCaseType } from '@/types/home-service.uts'
|
||||
import {
|
||||
HomeServiceCategoryType,
|
||||
HomeServiceItemType,
|
||||
HomeServicePromoCardType,
|
||||
getHomeServiceCategories,
|
||||
getHomeServiceItems,
|
||||
getHomeServicePromoCards
|
||||
} from '@/utils/homeServiceUiMock.uts'
|
||||
|
||||
const services = ref<Array<HomeServiceCatalogType>>([])
|
||||
const cases = ref<Array<HomeServiceCaseType>>([])
|
||||
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
|
||||
const promoCards = ref<Array<HomeServicePromoCardType>>([])
|
||||
const selectedCategory = ref('all-services')
|
||||
|
||||
const filteredServices = computed((): Array<HomeServiceItemType> => {
|
||||
const serviceItems = getHomeServiceItems(services.value)
|
||||
if (selectedCategory.value == 'all-services') {
|
||||
return serviceItems
|
||||
}
|
||||
const result: Array<HomeServiceItemType> = []
|
||||
for (let i = 0; i < serviceItems.length; i++) {
|
||||
if (serviceItems[i].category == selectedCategory.value) {
|
||||
result.push(serviceItems[i])
|
||||
}
|
||||
}
|
||||
if (result.length == 0) {
|
||||
return serviceItems
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
categoryGrid.value = getHomeServiceCategories()
|
||||
promoCards.value = getHomeServicePromoCards()
|
||||
services.value = await fetchHomeServiceCatalog()
|
||||
cases.value = await fetchConsumerHomeServiceCases()
|
||||
}
|
||||
|
||||
function goApply() {
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/apply' })
|
||||
function switchCategory(categoryId: string) {
|
||||
selectedCategory.value = categoryId
|
||||
}
|
||||
|
||||
function goDetail(caseId: string) {
|
||||
function consultService() {
|
||||
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
|
||||
}
|
||||
|
||||
function goDetail(serviceId: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId })
|
||||
}
|
||||
|
||||
function goBooking(serviceId: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking' })
|
||||
}
|
||||
|
||||
function goOrderDetail(caseId: string) {
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
function goDetailByName(serviceName: string) {
|
||||
if (serviceName == '康复训练指导') {
|
||||
goBooking('svc-002')
|
||||
return
|
||||
}
|
||||
if (serviceName == '慢病健康随访') {
|
||||
goBooking('svc-003')
|
||||
return
|
||||
}
|
||||
goBooking('svc-001')
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
const category = options['category']
|
||||
if (category != null) {
|
||||
selectedCategory.value = category as string
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f3f7f9;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: linear-gradient(135deg, #0f766e, #1d4ed8);
|
||||
border-radius: 28rpx;
|
||||
padding: 32rpx;
|
||||
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 56rpx;
|
||||
color: #16324f;
|
||||
line-height: 54rpx;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #5f7284;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
margin-top: 28rpx;
|
||||
.hero-right-tag {
|
||||
height: 56rpx;
|
||||
padding: 0 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #ffffff;
|
||||
color: #0f3d66;
|
||||
font-size: 30rpx;
|
||||
.hero-right-tag-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 18rpx;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.service-category-grid,
|
||||
.promo-row,
|
||||
.recommend-card-top,
|
||||
.recommend-card-bottom,
|
||||
.recommend-card-actions,
|
||||
.case-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-category-grid {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.service-category-card {
|
||||
width: 19%;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.service-category-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 28rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-category-icon-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.service-category-name {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
color: #425466;
|
||||
}
|
||||
|
||||
.promo-scroll {
|
||||
height: 168rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.promo-row {
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
width: 240rpx;
|
||||
height: 144rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
box-sizing: border-box;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.promo-card-green {
|
||||
background: #eafbf7;
|
||||
}
|
||||
|
||||
.promo-card-orange {
|
||||
background: #fff7ed;
|
||||
}
|
||||
|
||||
.promo-card-blue {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.promo-card-teal {
|
||||
background: #ecfeff;
|
||||
}
|
||||
|
||||
.promo-card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.promo-card-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #5f7284;
|
||||
}
|
||||
|
||||
.recommend-card,
|
||||
.case-card {
|
||||
padding: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8fbfc;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.service-top,
|
||||
.case-row {
|
||||
.recommend-card-top,
|
||||
.recommend-card-bottom,
|
||||
.case-row,
|
||||
.case-action-row {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-name,
|
||||
.recommend-card-cover {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 28rpx;
|
||||
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.recommend-card-cover-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.recommend-card-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.recommend-card-title,
|
||||
.case-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.service-meta,
|
||||
.recommend-card-subtitle,
|
||||
.recommend-card-suitable,
|
||||
.case-no,
|
||||
.case-info,
|
||||
.service-summary,
|
||||
.service-suitable,
|
||||
.empty-text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #66788a;
|
||||
}
|
||||
|
||||
.service-price {
|
||||
.recommend-card-tags {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 18rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.recommend-card-tag {
|
||||
padding: 10rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #eef2f7;
|
||||
font-size: 22rpx;
|
||||
color: #476072;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.recommend-card-price-prefix,
|
||||
.recommend-card-price {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.recommend-card-unit {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.recommend-card-secondary,
|
||||
.recommend-card-primary,
|
||||
.case-action-secondary,
|
||||
.case-action-primary {
|
||||
height: 68rpx;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.recommend-card-secondary,
|
||||
.case-action-secondary {
|
||||
background: #ffffff;
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: #cbd5e1;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.recommend-card-primary,
|
||||
.case-action-primary {
|
||||
background: #16a085;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.case-action-row {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 40rpx 0;
|
||||
align-items: center;
|
||||
|
||||
@@ -4,36 +4,70 @@
|
||||
<text class="empty-text">未找到对应服务单</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<ServicePanel title="服务进度" subtitle="申请到执行的关键状态先以 mock 流程展示。">
|
||||
<ServiceInfoCard
|
||||
:title="detail.serviceName"
|
||||
:code="detail.caseNo"
|
||||
:status-text="detail.statusText"
|
||||
:status-tone="detail.statusTone"
|
||||
:items="[
|
||||
{ label: '上门时间', value: detail.serviceTime },
|
||||
{ label: '当前进度', value: '第 ' + detail.currentStep + ' / ' + detail.totalSteps + ' 步' },
|
||||
{ label: '执行人员', value: detail.staffName + ' ' + detail.staffPhone }
|
||||
]"
|
||||
></ServiceInfoCard>
|
||||
</ServicePanel>
|
||||
<view class="summary-card">
|
||||
<view class="summary-top-row">
|
||||
<view>
|
||||
<text class="summary-title">{{ detail.serviceName }}</text>
|
||||
<text class="summary-case-no">服务单号：{{ detail.caseNo }}</text>
|
||||
</view>
|
||||
<ServiceStatusTag :text="detail.statusText" :tone="detail.statusTone"></ServiceStatusTag>
|
||||
</view>
|
||||
<text class="summary-desc">{{ detail.summary }}</text>
|
||||
<view class="summary-price-row">
|
||||
<text class="summary-price-prefix">¥</text>
|
||||
<text class="summary-price">{{ detail.amount }}</text>
|
||||
<text class="summary-price-unit">服务金额</text>
|
||||
</view>
|
||||
<view class="summary-meta-grid">
|
||||
<view class="summary-meta-item">
|
||||
<text class="summary-meta-label">上门时间</text>
|
||||
<text class="summary-meta-value">{{ detail.serviceTime }}</text>
|
||||
</view>
|
||||
<view class="summary-meta-item">
|
||||
<text class="summary-meta-label">当前进度</text>
|
||||
<text class="summary-meta-value">第 {{ detail.currentStep }} / {{ detail.totalSteps }} 步</text>
|
||||
</view>
|
||||
<view class="summary-meta-item">
|
||||
<text class="summary-meta-label">服务机构 / 人员</text>
|
||||
<text class="summary-meta-value">{{ detail.staffName }}</text>
|
||||
</view>
|
||||
<view class="summary-meta-item">
|
||||
<text class="summary-meta-label">联系电话</text>
|
||||
<text class="summary-meta-value">{{ detail.staffPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ServicePanel title="服务对象信息">
|
||||
<ServicePanel title="预约信息" subtitle="围绕联系人、地址和服务对象展示当前预约信息。">
|
||||
<ServiceInfoList
|
||||
:items="[
|
||||
{ label: '申请人：', value: detail.applicantName },
|
||||
{ label: '联系人：', value: detail.applicantName },
|
||||
{ label: '服务对象：', value: detail.elderName + '，' + detail.age + ' 岁' },
|
||||
{ label: '联系电话：', value: detail.phone },
|
||||
{ label: '服务地址：', value: detail.address },
|
||||
{ label: '需求说明：', value: detail.summary }
|
||||
{ label: '预约备注：', value: detail.summary }
|
||||
]"
|
||||
></ServiceInfoList>
|
||||
<view v-if="detail.status == 'pending_acceptance'" class="feedback-btn" @click="goFeedback">去验收反馈</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="过程留痕" subtitle="后续可替换为真实时间线与上传凭证。">
|
||||
<ServicePanel title="服务保障" subtitle="用户在预约后仍可看到平台保障与追溯承诺。">
|
||||
<view class="guarantee-row">
|
||||
<text class="guarantee-chip">平台认证</text>
|
||||
<text class="guarantee-chip">明码标价</text>
|
||||
<text class="guarantee-chip">服务可追溯</text>
|
||||
<text class="guarantee-chip">异常可申诉</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="服务过程" subtitle="当前以 mock 时间线展示预约受理、派单和上门过程。">
|
||||
<ServiceTimeline :items="detail.timeline"></ServiceTimeline>
|
||||
</ServicePanel>
|
||||
|
||||
<view class="action-row">
|
||||
<view class="secondary-btn" @click="bookAgain">再次预约</view>
|
||||
<view v-if="detail.status == 'pending_acceptance'" class="primary-btn" @click="goFeedback">去验收反馈</view>
|
||||
<view v-else class="primary-btn" @click="contactService">联系客服</view>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePageScaffold>
|
||||
</template>
|
||||
@@ -42,9 +76,9 @@
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServiceInfoCard from '@/components/homeService/ServiceInfoCard.uvue'
|
||||
import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
|
||||
import ServiceTimeline from '@/components/homeService/ServiceTimeline.uvue'
|
||||
import { fetchConsumerHomeServiceCaseDetail } from '@/services/homeServiceService.uts'
|
||||
import { HomeServiceCaseType } from '@/types/home-service.uts'
|
||||
@@ -66,6 +100,24 @@ function goFeedback() {
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/feedback?id=' + caseId.value })
|
||||
}
|
||||
|
||||
function bookAgain() {
|
||||
if (detail.value == null) {
|
||||
return
|
||||
}
|
||||
let serviceTargetId = 'svc-001'
|
||||
if (detail.value.serviceName == '康复训练指导') {
|
||||
serviceTargetId = 'svc-002'
|
||||
}
|
||||
if (detail.value.serviceName == '慢病健康随访') {
|
||||
serviceTargetId = 'svc-003'
|
||||
}
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceTargetId + '&mode=booking' })
|
||||
}
|
||||
|
||||
function contactService() {
|
||||
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
const id = options['id']
|
||||
if (id != null) {
|
||||
@@ -80,29 +132,129 @@ onShow(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f3f7f9;
|
||||
padding: 24rpx;
|
||||
|
||||
.summary-card {
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.summary-top-row,
|
||||
.summary-price-row,
|
||||
.action-row,
|
||||
.guarantee-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-top-row,
|
||||
.action-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.summary-case-no,
|
||||
.summary-desc,
|
||||
.summary-meta-label,
|
||||
.summary-meta-value,
|
||||
.empty-text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #66788a;
|
||||
}
|
||||
|
||||
.summary-desc {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.summary-price-row {
|
||||
margin-top: 18rpx;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.summary-price-prefix,
|
||||
.summary-price {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.summary-price-unit {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.summary-meta-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.summary-meta-item {
|
||||
width: 48%;
|
||||
padding: 22rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8fbfd;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.guarantee-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.guarantee-chip {
|
||||
padding: 12rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #eef6ff;
|
||||
font-size: 22rpx;
|
||||
color: #476072;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.secondary-btn,
|
||||
.primary-btn {
|
||||
width: 48%;
|
||||
height: 78rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: #ffffff;
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: #cbd5e1;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: #16a085;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #66788a;
|
||||
}
|
||||
|
||||
.feedback-btn {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
background: #1d4ed8;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
|
||||
628
pages/mall/consumer/home-service/service-detail.uvue
Normal file
628
pages/mall/consumer/home-service/service-detail.uvue
Normal file
@@ -0,0 +1,628 @@
|
||||
<template>
|
||||
<view class="booking-detail-page">
|
||||
<ServicePageScaffold title="预约服务" fallback-url="/pages/mall/consumer/home-service/index">
|
||||
<view class="detail-service-summary">
|
||||
<view class="detail-summary-cover">
|
||||
<text class="detail-summary-cover-text">{{ serviceImageText }}</text>
|
||||
</view>
|
||||
<view class="detail-summary-main">
|
||||
<text class="detail-summary-title">{{ serviceTitle }}</text>
|
||||
<text class="detail-summary-desc">{{ serviceSubtitle }}</text>
|
||||
<text class="detail-summary-duration">服务时长：{{ serviceDuration }}</text>
|
||||
<view class="detail-summary-tags">
|
||||
<text v-for="tag in guaranteeTags" :key="tag.id" class="detail-summary-tag">{{ tag.label }}</text>
|
||||
</view>
|
||||
<view class="detail-summary-price-row">
|
||||
<text class="detail-summary-price-prefix">¥</text>
|
||||
<text class="detail-summary-price">{{ servicePrice }}</text>
|
||||
<text class="detail-summary-price-unit">起 / 次</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ServicePanel title="服务说明卡" subtitle="围绕服务内容、适用人群和注意事项建立预约预期。">
|
||||
<view class="detail-info-list">
|
||||
<view class="detail-info-item">
|
||||
<text class="detail-info-label">服务内容</text>
|
||||
<text class="detail-info-value">{{ serviceSubtitle }}</text>
|
||||
</view>
|
||||
<view class="detail-info-item">
|
||||
<text class="detail-info-label">适用人群</text>
|
||||
<text class="detail-info-value">{{ serviceSuitableFor }}</text>
|
||||
</view>
|
||||
<view class="detail-info-item">
|
||||
<text class="detail-info-label">服务时长</text>
|
||||
<text class="detail-info-value">{{ serviceDuration }}</text>
|
||||
</view>
|
||||
<view class="detail-info-item">
|
||||
<text class="detail-info-label">注意事项</text>
|
||||
<text class="detail-info-value">预约成功后请保持电话畅通，首次上门建议家属在场。</text>
|
||||
</view>
|
||||
<view class="detail-info-item">
|
||||
<text class="detail-info-label">不包含项目</text>
|
||||
<text class="detail-info-value">{{ serviceExcludeText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step1 服务地址" subtitle="没有选过地址时先提示用户补全上门地址。">
|
||||
<view class="booking-step-card">
|
||||
<text class="step-card-title">上门服务地址</text>
|
||||
<text v-if="addressText == ''" class="step-card-placeholder">请选择上门服务地址</text>
|
||||
<text v-else class="step-card-value">{{ addressText }}</text>
|
||||
<view class="step-card-action" @click="selectAddress">选择地址</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step2 服务机构 / 服务人员" subtitle="当前先展示静态推荐机构，后续可接入真实人员选择。">
|
||||
<view class="booking-step-card agency-card">
|
||||
<view class="agency-card-top">
|
||||
<text class="step-card-title">{{ agency.name }}</text>
|
||||
<text class="agency-card-distance">{{ agency.distance }}</text>
|
||||
</view>
|
||||
<text class="agency-card-meta">评分 {{ agency.rating }}</text>
|
||||
<text class="step-card-value">{{ agency.summary }}</text>
|
||||
<text class="agency-card-todo">TODO：后续接入真实服务机构 / 服务人员选择接口。</text>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step3 上门时间" subtitle="先完成日期和时间段选择，再提交预约申请。">
|
||||
<scroll-view class="booking-day-scroll" direction="horizontal" :show-scrollbar="false">
|
||||
<view class="booking-day-row">
|
||||
<view
|
||||
v-for="item in bookingDays"
|
||||
:key="item.id"
|
||||
:class="['booking-day-card', selectedDayId == item.id ? 'booking-day-card-active' : '']"
|
||||
@click="selectDay(item.id)"
|
||||
>
|
||||
<text :class="['booking-day-label', selectedDayId == item.id ? 'booking-day-label-active' : '']">{{ item.label }}</text>
|
||||
<text :class="['booking-day-date', selectedDayId == item.id ? 'booking-day-date-active' : '']">{{ item.dateText }}</text>
|
||||
<text :class="['booking-day-weekday', selectedDayId == item.id ? 'booking-day-weekday-active' : '']">{{ item.weekday }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="booking-slot-grid">
|
||||
<view
|
||||
v-for="item in bookingSlots"
|
||||
:key="item.id"
|
||||
:class="['booking-slot-card', selectedSlotId == item.id ? 'booking-slot-card-active' : '', item.available ? '' : 'booking-slot-card-disabled']"
|
||||
@click="selectSlot(item.id, item.available)"
|
||||
>
|
||||
<text :class="['booking-slot-label', selectedSlotId == item.id ? 'booking-slot-label-active' : '']">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="Step4 联系人信息" subtitle="使用现有 input 组件完成预约联系人填写。">
|
||||
<view class="contact-form-item">
|
||||
<text class="contact-form-label">联系人姓名</text>
|
||||
<input v-model="contactName" class="contact-form-input" placeholder="请输入联系人姓名" />
|
||||
</view>
|
||||
<view class="contact-form-item">
|
||||
<text class="contact-form-label">联系电话</text>
|
||||
<input v-model="contactPhone" class="contact-form-input" type="number" placeholder="请输入联系电话" />
|
||||
</view>
|
||||
<view class="contact-form-item">
|
||||
<text class="contact-form-label">性别</text>
|
||||
<view class="gender-row">
|
||||
<view :class="['gender-pill', contactGender == '先生' ? 'gender-pill-active' : '']" @click="contactGender = '先生'">先生</view>
|
||||
<view :class="['gender-pill', contactGender == '女士' ? 'gender-pill-active' : '']" @click="contactGender = '女士'">女士</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contact-form-item">
|
||||
<text class="contact-form-label">备注</text>
|
||||
<textarea v-model="remarkText" class="contact-form-textarea" placeholder="如行动不便、术后照护重点、上门注意事项"></textarea>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<ServicePanel title="用户保障卡" subtitle="让预约页更像服务平台而不是普通商品页。">
|
||||
<view class="guarantee-grid">
|
||||
<view v-for="item in guaranteeTags" :key="item.id" class="guarantee-grid-item">
|
||||
<text class="guarantee-grid-text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</ServicePanel>
|
||||
|
||||
<view class="detail-page-bottom-space"></view>
|
||||
</ServicePageScaffold>
|
||||
|
||||
<view class="booking-bottom-bar">
|
||||
<view class="booking-bottom-main">
|
||||
<view>
|
||||
<text class="booking-bottom-price-prefix">¥</text>
|
||||
<text class="booking-bottom-price">{{ servicePrice }}</text>
|
||||
<text class="booking-bottom-unit">起</text>
|
||||
</view>
|
||||
<text class="booking-bottom-time">{{ selectedTimeText }}</text>
|
||||
</view>
|
||||
<view class="booking-submit-btn" @click="submitBooking">立即预约</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||||
import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
|
||||
import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
|
||||
import {
|
||||
BookingDayOptionType,
|
||||
BookingTimeSlotType,
|
||||
HomeServiceAgencyType,
|
||||
HomeServiceGuaranteeItemType,
|
||||
getBookingDayOptions,
|
||||
getBookingTimeSlots,
|
||||
getHomeServiceItems,
|
||||
getRecommendedAgency,
|
||||
getServiceExcludes,
|
||||
getServiceGuarantees
|
||||
} from '@/utils/homeServiceUiMock.uts'
|
||||
|
||||
const serviceId = ref('svc-001')
|
||||
const serviceTitle = ref('基础上门护理')
|
||||
const serviceSubtitle = ref('覆盖生命体征监测、基础照护、风险提醒。')
|
||||
const servicePrice = ref(168)
|
||||
const serviceDuration = ref('约 2 小时')
|
||||
const serviceSuitableFor = ref('行动不便、术后恢复、慢病随访老人')
|
||||
const serviceImageText = ref('照护')
|
||||
const serviceExcludeText = ref('高风险处置、住院陪护、急诊陪诊')
|
||||
|
||||
const bookingDays = ref<Array<BookingDayOptionType>>([])
|
||||
const bookingSlots = ref<Array<BookingTimeSlotType>>([])
|
||||
const guaranteeTags = ref<Array<HomeServiceGuaranteeItemType>>([])
|
||||
const agency = ref<HomeServiceAgencyType>({
|
||||
id: 'agency-001',
|
||||
name: '梅江居家护理服务中心',
|
||||
distance: '距您 1.2km',
|
||||
rating: '4.9',
|
||||
summary: '提供基础照护、上门护理和长者陪伴服务。'
|
||||
})
|
||||
|
||||
const addressText = ref('')
|
||||
const selectedDayId = ref('day-1')
|
||||
const selectedSlotId = ref('slot-1')
|
||||
const contactName = ref('李晓兰')
|
||||
const contactPhone = ref('13800138000')
|
||||
const contactGender = ref('女士')
|
||||
const remarkText = ref('老人需要基础照护与血压监测。')
|
||||
|
||||
const selectedTimeText = computed((): string => {
|
||||
let selectedDayLabel = ''
|
||||
for (let i = 0; i < bookingDays.value.length; i++) {
|
||||
if (bookingDays.value[i].id == selectedDayId.value) {
|
||||
selectedDayLabel = bookingDays.value[i].label + ' ' + bookingDays.value[i].dateText
|
||||
break
|
||||
}
|
||||
}
|
||||
let selectedSlotLabel = ''
|
||||
for (let i = 0; i < bookingSlots.value.length; i++) {
|
||||
if (bookingSlots.value[i].id == selectedSlotId.value) {
|
||||
selectedSlotLabel = bookingSlots.value[i].label
|
||||
break
|
||||
}
|
||||
}
|
||||
if (selectedDayLabel == '' || selectedSlotLabel == '') {
|
||||
return '请选择上门时间'
|
||||
}
|
||||
return selectedDayLabel + ' ' + selectedSlotLabel
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
bookingDays.value = getBookingDayOptions()
|
||||
bookingSlots.value = getBookingTimeSlots()
|
||||
guaranteeTags.value = getServiceGuarantees()
|
||||
agency.value = getRecommendedAgency(serviceId.value)
|
||||
serviceExcludeText.value = getServiceExcludes(serviceId.value).join('；')
|
||||
|
||||
const catalog = await fetchHomeServiceCatalog()
|
||||
let matchedService: HomeServiceCatalogType | null = null
|
||||
for (let i = 0; i < catalog.length; i++) {
|
||||
if (catalog[i].id == serviceId.value) {
|
||||
matchedService = catalog[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (matchedService == null) {
|
||||
const fallbackItems = getHomeServiceItems(catalog)
|
||||
if (fallbackItems.length > 0) {
|
||||
serviceTitle.value = fallbackItems[0].title
|
||||
serviceSubtitle.value = fallbackItems[0].subtitle
|
||||
servicePrice.value = fallbackItems[0].price
|
||||
serviceSuitableFor.value = fallbackItems[0].suitableFor
|
||||
serviceImageText.value = fallbackItems[0].imageText
|
||||
}
|
||||
return
|
||||
}
|
||||
serviceTitle.value = matchedService.name
|
||||
serviceSubtitle.value = matchedService.summary
|
||||
servicePrice.value = matchedService.price
|
||||
serviceDuration.value = matchedService.durationText
|
||||
serviceSuitableFor.value = matchedService.suitableFor
|
||||
const mappedItems = getHomeServiceItems([matchedService])
|
||||
if (mappedItems.length > 0) {
|
||||
serviceImageText.value = mappedItems[0].imageText
|
||||
}
|
||||
}
|
||||
|
||||
function selectAddress() {
|
||||
if (addressText.value == '') {
|
||||
addressText.value = '梅州市梅江区学海路 18 号 2 栋 602'
|
||||
uni.showToast({ title: '已填入示例地址', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/address-list' })
|
||||
}
|
||||
|
||||
function selectDay(dayId: string) {
|
||||
selectedDayId.value = dayId
|
||||
}
|
||||
|
||||
function selectSlot(slotId: string, available: boolean) {
|
||||
if (!available) {
|
||||
uni.showToast({ title: '该时段暂不可约', icon: 'none' })
|
||||
return
|
||||
}
|
||||
selectedSlotId.value = slotId
|
||||
}
|
||||
|
||||
async function submitBooking() {
|
||||
if (addressText.value == '') {
|
||||
uni.showToast({ title: '请选择上门服务地址', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (contactName.value == '' || contactPhone.value == '') {
|
||||
uni.showToast({ title: '请补全联系人信息', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const draft: HomeServiceApplicationDraftType = {
|
||||
serviceId: serviceId.value,
|
||||
serviceName: serviceTitle.value,
|
||||
applicantName: contactName.value,
|
||||
elderName: contactName.value,
|
||||
age: 78,
|
||||
phone: contactPhone.value,
|
||||
address: addressText.value,
|
||||
preferredTime: selectedTimeText.value,
|
||||
demandSummary: remarkText.value == '' ? serviceSubtitle.value : remarkText.value
|
||||
}
|
||||
|
||||
const created = await createHomeServiceApplication(draft)
|
||||
uni.showToast({ title: '预约已提交', icon: 'success' })
|
||||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + created.id })
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
const id = options['id']
|
||||
if (id != null) {
|
||||
serviceId.value = id as string
|
||||
}
|
||||
const mode = options['mode']
|
||||
if (mode != null && mode == 'booking') {
|
||||
addressText.value = '梅州市梅江区学海路 18 号 2 栋 602'
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.booking-detail-page {
|
||||
background: #f4f8fb;
|
||||
}
|
||||
|
||||
.detail-service-summary {
|
||||
background: #ffffff;
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-summary-cover {
|
||||
width: 172rpx;
|
||||
height: 172rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.detail-summary-cover-text {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.detail-summary-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.detail-summary-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.detail-summary-desc,
|
||||
.detail-summary-duration,
|
||||
.detail-info-value,
|
||||
.step-card-value,
|
||||
.step-card-placeholder,
|
||||
.agency-card-meta,
|
||||
.agency-card-todo,
|
||||
.booking-bottom-time {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-summary-tags,
|
||||
.gender-row,
|
||||
.guarantee-grid,
|
||||
.agency-card-top,
|
||||
.booking-bottom-bar,
|
||||
.booking-bottom-main {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-summary-tags {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.detail-summary-tag {
|
||||
padding: 10rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #eff6ff;
|
||||
font-size: 22rpx;
|
||||
color: #476072;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.detail-summary-price-row {
|
||||
margin-top: 14rpx;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.detail-summary-price-prefix,
|
||||
.detail-summary-price,
|
||||
.booking-bottom-price-prefix,
|
||||
.booking-bottom-price {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.detail-summary-price-unit,
|
||||
.booking-bottom-unit {
|
||||
font-size: 22rpx;
|
||||
color: #64748b;
|
||||
margin-left: 8rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.detail-info-item,
|
||||
.contact-form-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.detail-info-label,
|
||||
.contact-form-label,
|
||||
.step-card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #16324f;
|
||||
}
|
||||
|
||||
.booking-step-card {
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8fbfd;
|
||||
}
|
||||
|
||||
.step-card-placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.step-card-action {
|
||||
margin-top: 20rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #16a085;
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.agency-card-distance {
|
||||
font-size: 22rpx;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.agency-card-todo {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.booking-day-scroll {
|
||||
height: 156rpx;
|
||||
}
|
||||
|
||||
.booking-day-row {
|
||||
flex-direction: row;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.booking-day-card {
|
||||
width: 160rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8fbfd;
|
||||
margin-right: 16rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.booking-day-card-active {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.booking-day-label,
|
||||
.booking-day-date,
|
||||
.booking-day-weekday {
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.booking-day-date,
|
||||
.booking-day-weekday {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.booking-day-label-active,
|
||||
.booking-day-date-active,
|
||||
.booking-day-weekday-active {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.booking-slot-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.booking-slot-card {
|
||||
width: 48.5%;
|
||||
height: 82rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #f8fbfd;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.booking-slot-card-active {
|
||||
background: #eafbf7;
|
||||
border-color: #16a085;
|
||||
}
|
||||
|
||||
.booking-slot-card-disabled {
|
||||
background: #f1f5f9;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.booking-slot-label {
|
||||
font-size: 24rpx;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.booking-slot-label-active {
|
||||
color: #0f766e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-form-input,
|
||||
.contact-form-textarea {
|
||||
width: 100%;
|
||||
background: #f8fbfd;
|
||||
border-radius: 22rpx;
|
||||
font-size: 26rpx;
|
||||
color: #16324f;
|
||||
box-sizing: border-box;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.contact-form-input {
|
||||
height: 84rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.contact-form-textarea {
|
||||
height: 160rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.gender-pill {
|
||||
height: 64rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #f1f5f9;
|
||||
font-size: 24rpx;
|
||||
color: #476072;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.gender-pill-active {
|
||||
background: #eafbf7;
|
||||
color: #0f766e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.guarantee-grid {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.guarantee-grid-item {
|
||||
width: 48%;
|
||||
height: 72rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f8fbfd;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.guarantee-grid-text {
|
||||
font-size: 24rpx;
|
||||
color: #476072;
|
||||
}
|
||||
|
||||
.detail-page-bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.booking-bottom-bar {
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
bottom: 28rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
padding: 20rpx 22rpx;
|
||||
box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.12);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.booking-submit-btn {
|
||||
height: 84rpx;
|
||||
padding: 0 34rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #16a085;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -191,7 +191,7 @@
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-section">
|
||||
<button class="logout-btn" @click="logout">退出登录</button>
|
||||
<button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
|
||||
</view>
|
||||
|
||||
<!-- 账号注销 -->
|
||||
@@ -207,6 +207,7 @@ import { ref, onMounted } from 'vue'
|
||||
import { onBackPress } from '@dcloudio/uni-app'
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { goToLogin } from '@/utils/utils.uts'
|
||||
import { logout as logoutStore } from '@/utils/store.uts'
|
||||
|
||||
// 拦截返回事件，强制跳转到个人中心页
|
||||
onBackPress((_options): boolean => {
|
||||
@@ -260,9 +261,55 @@ const cacheSize = ref<string>('0.0 MB')
|
||||
const currentLanguage = ref<string>('简体中文')
|
||||
const currentTheme = ref<string>('自动')
|
||||
const appVersion = ref<string>('1.0.0')
|
||||
const isLoggingOut = ref<boolean>(false)
|
||||
|
||||
const statusBarHeight = ref<number>(0)
|
||||
|
||||
const resetLocalUserInfo = (): void => {
|
||||
userInfo.value = {
|
||||
id: '',
|
||||
phone: null,
|
||||
email: null,
|
||||
nickname: null,
|
||||
avatar_url: null
|
||||
} as UserType
|
||||
}
|
||||
|
||||
const clearAuthStorage = (): void => {
|
||||
const keys: Array<string> = [
|
||||
'userInfo',
|
||||
'user_id',
|
||||
'access_token',
|
||||
'refresh_token',
|
||||
'token',
|
||||
'currentUser',
|
||||
'current_user',
|
||||
'user',
|
||||
'auth_user',
|
||||
'supabase.auth.token'
|
||||
]
|
||||
|
||||
for (let i: number = 0; i < keys.length; i++) {
|
||||
const key = keys[i]
|
||||
try {
|
||||
uni.removeStorageSync(key)
|
||||
} catch (e) {
|
||||
console.error('[settings] 清理登录态失败:', key, e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getStoredUserId = (): string => {
|
||||
if (userInfo.value.id != null && userInfo.value.id !== '') {
|
||||
return userInfo.value.id
|
||||
}
|
||||
const storageId = uni.getStorageSync('user_id') as string | null
|
||||
if (storageId != null && storageId !== '') {
|
||||
return storageId
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const loadUserInfo = () => {
|
||||
const userStore = uni.getStorageSync('userInfo')
|
||||
if (userStore != null) {
|
||||
@@ -520,38 +567,70 @@ const rateApp = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const doLogout = (): void => {
|
||||
const executeLogout = async (): Promise<void> => {
|
||||
if (isLoggingOut.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoggingOut.value = true
|
||||
uni.showLoading({
|
||||
title: '正在退出...'
|
||||
})
|
||||
|
||||
uni.removeStorageSync('userInfo')
|
||||
uni.removeStorageSync('user_id')
|
||||
uni.removeStorageSync('access_token')
|
||||
try {
|
||||
logoutStore()
|
||||
|
||||
uni.hideLoading()
|
||||
try {
|
||||
await supa.signOut()
|
||||
} catch (signOutError) {
|
||||
console.error('[settings] supa.signOut failed:', signOutError)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
clearAuthStorage()
|
||||
resetLocalUserInfo()
|
||||
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/user/login'
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '退出成功',
|
||||
icon: 'success',
|
||||
duration: 1200
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
uni.$emit('authChanged', { loggedIn: false })
|
||||
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/main/profile'
|
||||
})
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
console.error('[settings] logout failed:', e)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
})
|
||||
} finally {
|
||||
isLoggingOut.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getStoredUserId = (): string => {
|
||||
if (userInfo.value.id != null && userInfo.value.id !== '') {
|
||||
return userInfo.value.id
|
||||
const showLogoutConfirm = (): void => {
|
||||
if (isLoggingOut.value) {
|
||||
return
|
||||
}
|
||||
const storageId = uni.getStorageSync('user_id')
|
||||
if (storageId != null) {
|
||||
return storageId as string
|
||||
}
|
||||
return ''
|
||||
uni.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
confirmText: '退出',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
executeLogout()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const doDeleteAccount = (): void => {
|
||||
@@ -570,9 +649,8 @@ const doDeleteAccount = (): void => {
|
||||
.execute()
|
||||
}
|
||||
|
||||
uni.removeStorageSync('userInfo')
|
||||
uni.removeStorageSync('user_id')
|
||||
uni.removeStorageSync('access_token')
|
||||
clearAuthStorage()
|
||||
resetLocalUserInfo()
|
||||
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
@@ -588,18 +666,6 @@ const doDeleteAccount = (): void => {
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
const logout = () => {
|
||||
uni.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
doLogout()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const deleteAccount = () => {
|
||||
uni.showModal({
|
||||
title: '注销账号',
|
||||
|
||||
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>
|
||||
@@ -181,15 +181,7 @@
|
||||
|
||||
onShow() {
|
||||
console.log('chat page onShow, chatUserId:', this.chatUserId, 'merchantId:', this.merchantId)
|
||||
if (this.merchantId) {
|
||||
this.loadChatMessages()
|
||||
this.setupRealtimeSubscription()
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.loadChatMessages()
|
||||
this.setupRealtimeSubscription()
|
||||
}, 300)
|
||||
}
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
@@ -199,21 +191,27 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
async initMerchantId() {
|
||||
try {
|
||||
const session = supa.getSession()
|
||||
if (session != null && session.user != null) {
|
||||
this.merchantId = session.user.getString('id') || ''
|
||||
}
|
||||
if (!this.merchantId) {
|
||||
this.merchantId = uni.getStorageSync('user_id') || ''
|
||||
}
|
||||
|
||||
// 加载店铺头像
|
||||
this.loadShopAvatar()
|
||||
} catch (e) {
|
||||
console.error('获取商户ID失败:', e)
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadChatMessages()
|
||||
this.setupRealtimeSubscription()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadShopAvatar()
|
||||
},
|
||||
|
||||
async loadShopAvatar() {
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
async onLoad(options: any) {
|
||||
if (options['user_id']) {
|
||||
this.userId = String(options['user_id'])
|
||||
} else if (options.user_id) {
|
||||
@@ -124,6 +124,11 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
return result.ok
|
||||
},
|
||||
|
||||
async openProductSelect() {
|
||||
this.showProductSelect = true
|
||||
if (this.allProducts.length === 0) {
|
||||
|
||||
@@ -78,6 +78,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, MOCK_BALANCE, MOCK_FINANCE_STATS, getMockFinanceRecords } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type RecordType = {
|
||||
@@ -108,11 +109,28 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.loadBalance()
|
||||
this.loadRecords()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadBalance()
|
||||
this.loadRecords()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
if (USE_MOCK) {
|
||||
this.merchantId = MOCK_MERCHANT_ID
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
<!-- 机构端 - 机构成长页(安读Tab4 -->
|
||||
<template>
|
||||
<view class="growth-page">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- Tab 页无返回按钮，显示顶部安全区 + 页面标题 -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">机构成长</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<scroll-view direction="vertical" class="growth-scroll" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
|
||||
<!-- 成长等级卡片 -->
|
||||
@@ -139,6 +132,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
type TipType = {
|
||||
icon: string
|
||||
@@ -317,10 +311,15 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 预留：后续可对接成长等级接口
|
||||
this.ensureMerchantAuth()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
return result.ok
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
this.refreshing = true
|
||||
// 预留：刷新成长数据
|
||||
@@ -372,7 +371,7 @@
|
||||
|
||||
.growth-scroll {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
padding: calc(24rpx + var(--status-bar-height)) 24rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 成长等级卡片 */
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<!-- 医养综合服务商城 · 机构工作台首页 -->
|
||||
<template>
|
||||
<view class="merchant-container">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- Tab 页无返回按钮，展示顶部安全区 + 蓝色顶栏 -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">机构工作台</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<scroll-view direction="vertical" class="main-scroll" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
|
||||
<!-- ===== 顶部工作台头部（浅蓝渐变，老年友好） ===== -->
|
||||
@@ -280,6 +274,7 @@
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
type ShopInfoType = {
|
||||
id: string | null
|
||||
@@ -351,6 +346,7 @@
|
||||
data() {
|
||||
return {
|
||||
merchantId: '',
|
||||
authChecking: false,
|
||||
shopInfo: {
|
||||
id: null,
|
||||
merchant_id: null,
|
||||
@@ -407,7 +403,7 @@
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.initMerchantId()
|
||||
this.ensureMerchantAuth()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
@@ -436,19 +432,7 @@
|
||||
this.isPageReady = true
|
||||
}
|
||||
} catch(e) {}
|
||||
// 后台刷新数据
|
||||
if (this.merchantId) {
|
||||
this.loadAllData()
|
||||
this.startRealtimeSubscription()
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
// 等待 initMerchantId 完成后再检查，若仍无有效 ID 则不请求
|
||||
if (this.merchantId) {
|
||||
this.loadAllData()
|
||||
this.startRealtimeSubscription()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
onHide() {
|
||||
@@ -460,6 +444,47 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (this.authChecking) {
|
||||
return false
|
||||
}
|
||||
this.authChecking = true
|
||||
try {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
this.stopRealtimeSubscription()
|
||||
return false
|
||||
}
|
||||
|
||||
const uid = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
this.merchantId = uid
|
||||
if (result.merchantInfo != null) {
|
||||
this.shopInfo.id = result.merchantInfo.id
|
||||
this.shopInfo.merchant_id = result.merchantInfo.merchant_id
|
||||
this.shopInfo.shop_name = result.merchantInfo.shop_name !== '' ? result.merchantInfo.shop_name : this.shopInfo.shop_name
|
||||
this.shopInfo.shop_logo = result.merchantInfo.shop_logo !== '' ? result.merchantInfo.shop_logo : this.shopInfo.shop_logo
|
||||
this.shopInfo.shop_banner = result.merchantInfo.shop_banner !== '' ? result.merchantInfo.shop_banner : this.shopInfo.shop_banner
|
||||
this.shopInfo.description = result.merchantInfo.description !== '' ? result.merchantInfo.description : this.shopInfo.description
|
||||
this.shopInfo.contact_name = result.merchantInfo.contact_name !== '' ? result.merchantInfo.contact_name : this.shopInfo.contact_name
|
||||
this.shopInfo.contact_phone = result.merchantInfo.contact_phone !== '' ? result.merchantInfo.contact_phone : this.shopInfo.contact_phone
|
||||
this.shopInfo.status = result.merchantInfo.status
|
||||
}
|
||||
return this.merchantId !== ''
|
||||
} finally {
|
||||
this.authChecking = false
|
||||
}
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) {
|
||||
return
|
||||
}
|
||||
this.loadAllData()
|
||||
this.startRealtimeSubscription()
|
||||
},
|
||||
|
||||
/** UUID 格式校验，非 UUID 不得用于 Supabase 过滤（否则 PostgREST 400）*/
|
||||
isValidUUID(id: string): boolean {
|
||||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
|
||||
@@ -964,7 +989,7 @@
|
||||
|
||||
/* ===== 顶部工作台头部（浅蓝渐变，贴近 mall merchant 风格） ===== */
|
||||
.wt-header { background: linear-gradient(135deg, #A6F1E4 0%, #69DFC2 100%); padding-bottom: 0; }
|
||||
.wt-header-top { padding: 32rpx 28rpx 24rpx; }
|
||||
.wt-header-top { padding: calc(32rpx + var(--status-bar-height)) 28rpx 24rpx; }
|
||||
.wt-shop-row { display: flex; flex-direction: row; align-items: center; }
|
||||
.wt-shop-logo { width: 100rpx; height: 100rpx; border-radius: 16rpx; border-width: 3rpx; border-style: solid; border-color: rgba(255,255,255,0.7); margin-right: 20rpx; background-color: #fff; flex-shrink: 0; }
|
||||
.wt-shop-info { flex: 1; }
|
||||
|
||||
@@ -96,6 +96,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, getMockInventoryStats, MOCK_INVENTORY_PRODUCTS } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type ProductType = {
|
||||
@@ -131,12 +132,29 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.page = 1
|
||||
this.loadProducts()
|
||||
this.loadStats()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.page = 1
|
||||
this.loadProducts()
|
||||
this.loadStats()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
if (USE_MOCK) {
|
||||
this.merchantId = MOCK_MERCHANT_ID
|
||||
|
||||
@@ -97,6 +97,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MEMBER_LEVELS, MOCK_SERVICE_USERS } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type MemberLevel = {
|
||||
@@ -138,13 +139,14 @@
|
||||
merchantId: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
async onLoad() {
|
||||
if (USE_MOCK) {
|
||||
this.merchantId = 'mock-merchant'
|
||||
this.loadLevels()
|
||||
return
|
||||
}
|
||||
this.merchantId = uni.getStorageSync('user_id') || ''
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadLevels()
|
||||
},
|
||||
watch: {
|
||||
@@ -155,6 +157,17 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
handleSearch() {
|
||||
console.log('按钮被点击，触发 handleSearch');
|
||||
this.loadUsers();
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<!-- 机构端 - 消息中心（客服工作台） -->
|
||||
<template>
|
||||
<view class="messages-page">
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mp-tab-navbar">
|
||||
<view class="wb-navbar-content">
|
||||
<text class="mp-tab-title">客服工作台</text>
|
||||
<view class="wb-header-right">
|
||||
<view class="wb-status-wrap">
|
||||
<view class="wb-status-dot"></view>
|
||||
@@ -15,9 +10,6 @@
|
||||
<text class="wb-pending-text">{{ pendingCount }}条待处理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- ===== 三模块 Tab 切换栏 ===== -->
|
||||
<view class="wb-tabs">
|
||||
@@ -347,6 +339,7 @@ class="msg-row"
|
||||
|
||||
<script lang="uts">
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
type ProductCardData = {
|
||||
emoji: string
|
||||
@@ -556,10 +549,21 @@ return total
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.scrollToBottom()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
return result.ok
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.scrollToBottom()
|
||||
},
|
||||
|
||||
selectSession(id: string) {
|
||||
this.currentSessionId = id
|
||||
this.showQuickReplies = false
|
||||
@@ -680,7 +684,10 @@ this.activeTab = 0
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
padding: calc(16rpx + var(--status-bar-height)) 24rpx 16rpx;
|
||||
background-color: #09C39D;
|
||||
}
|
||||
.wb-status-wrap {
|
||||
display: flex;
|
||||
|
||||
@@ -294,6 +294,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
type OrderItemType = {
|
||||
id: string
|
||||
@@ -511,13 +512,17 @@
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
async onLoad(options: any) {
|
||||
let id = ''
|
||||
if (options['id'] != null) {
|
||||
id = options['id'] as string
|
||||
} else if (options.id != null) {
|
||||
id = options.id as string
|
||||
}
|
||||
const authResult = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
if (id !== '') {
|
||||
this.orderId = id
|
||||
this.loadOrderDetail()
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<!-- 机构端 - 服务订单管理页面 -->
|
||||
<template>
|
||||
<view class="orders-page">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">服务订单</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 一级切换：服务订单 / 取消售后 -->
|
||||
<view class="lvl1-tabs">
|
||||
<view
|
||||
@@ -348,6 +342,7 @@
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, getMockOrdersByStatus, getMockAftersaleByStatus, getMockOrderTabCounts, getMockAftersaleTabCounts } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type OrderItemType = {
|
||||
@@ -475,16 +470,27 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.merchantId) {
|
||||
this.refreshCurrentTab()
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.refreshCurrentTab()
|
||||
}, 500)
|
||||
}
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.refreshCurrentTab()
|
||||
},
|
||||
|
||||
// 计算底部安全区
|
||||
initSafeArea() {
|
||||
// #ifdef MP-WEIXIN
|
||||
@@ -1062,6 +1068,7 @@
|
||||
.lvl1-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: var(--status-bar-height);
|
||||
background-color: #ffffff;
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
|
||||
@@ -181,6 +181,7 @@ type ReviewType = {
|
||||
created_at: string
|
||||
}
|
||||
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -212,7 +213,11 @@ export default {
|
||||
recentReviews: [] as Array<ReviewType>
|
||||
}
|
||||
},
|
||||
onLoad(options: any) {
|
||||
async onLoad(options: any) {
|
||||
const authResult = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
return
|
||||
}
|
||||
const productId = options.productId as string
|
||||
if (productId) {
|
||||
this.loadProductDetail(productId)
|
||||
|
||||
@@ -308,6 +308,13 @@
|
||||
} else {
|
||||
uni.setNavigationBarTitle({ title: '发布服务' })
|
||||
}
|
||||
|
||||
const authResult = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!authResult.ok) {
|
||||
this.merchantId = ''
|
||||
return
|
||||
}
|
||||
this.merchantId = authResult.userInfo != null && authResult.userInfo.id != null ? authResult.userInfo.id : ''
|
||||
this.initMerchantId()
|
||||
|
||||
// ── 先探活，通过后再加载业务数据 ──
|
||||
|
||||
@@ -148,6 +148,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
type ProductType = {
|
||||
id: string
|
||||
@@ -200,10 +201,26 @@ async onLoad(options: any) {
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.loadProducts()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadProducts()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
try {
|
||||
const session = supa.getSession()
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<!-- 商家端 - 机构中心 -->
|
||||
<template>
|
||||
<view class="merchant-profile">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mp-tab-navbar">
|
||||
<text class="mp-tab-title">机构中心</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<scroll-view direction="vertical" class="profile-scroll">
|
||||
<!-- 店铺信息头部：与 index 同源数据 -->
|
||||
<view class="profile-header">
|
||||
@@ -181,6 +176,7 @@
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, MOCK_SHOP_INFO, MOCK_TODAY_STATS, MOCK_PENDING_COUNTS, getMockRecentOrders } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
// ---- 复用 index 的类型定义 ----
|
||||
@@ -303,15 +299,27 @@
|
||||
}
|
||||
}
|
||||
} catch(e) {}
|
||||
// 后台完整刷新
|
||||
if (this.merchantId) {
|
||||
this.loadAllData()
|
||||
} else {
|
||||
setTimeout(() => { this.loadAllData() }, 500)
|
||||
}
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadAllData()
|
||||
},
|
||||
|
||||
// 底部安全区动态高度，与 orders.uvue 方式一致
|
||||
initSafeArea() {
|
||||
// #ifdef MP-WEIXIN
|
||||
@@ -711,7 +719,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx;
|
||||
padding: calc(40rpx + var(--status-bar-height)) 30rpx 40rpx;
|
||||
background: linear-gradient(135deg, #A6F1E4 0%, #69DFC2 100%);
|
||||
}
|
||||
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, getMockPromotions } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type PromotionType = {
|
||||
@@ -76,12 +77,27 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.merchantId !== '') {
|
||||
this.loadPromotions()
|
||||
}
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadPromotions()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
if (USE_MOCK) {
|
||||
this.merchantId = MOCK_MERCHANT_ID
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, getMockReviews } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type ReviewType = {
|
||||
@@ -106,19 +107,35 @@
|
||||
this.loadReviews()
|
||||
return
|
||||
}
|
||||
// 同步设置 merchantId，不用 async 包裹，避免 generator 内 this 绑定异常
|
||||
try {
|
||||
const session = supa.getSession()
|
||||
this.merchantId = session?.user?.getString('id') || uni.getStorageSync('user_id') || ''
|
||||
} catch (e) {}
|
||||
this.loadReviews()
|
||||
this.ensureMerchantAuth().then((passed: boolean) => {
|
||||
if (passed) {
|
||||
this.loadReviews()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.loadReviews()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadReviews()
|
||||
},
|
||||
|
||||
async loadReviews() {
|
||||
if (!this.merchantId || this.merchantId.split('-').length !== 5) return
|
||||
if (this.loading) return
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -83,19 +84,20 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
async initMerchantId() {
|
||||
try {
|
||||
const session = supa.getSession()
|
||||
if (session != null && session.user != null) {
|
||||
this.merchantId = session.user.getString('id') || ''
|
||||
}
|
||||
if (!this.merchantId) {
|
||||
this.merchantId = uni.getStorageSync('user_id') || ''
|
||||
}
|
||||
this.loadShop()
|
||||
} catch (e) {
|
||||
console.error('获取商户ID失败:', e)
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadShop()
|
||||
},
|
||||
|
||||
async loadShop() {
|
||||
|
||||
@@ -68,6 +68,7 @@
|
||||
|
||||
<script lang="uts">
|
||||
import supa from '@/components/supadb/aksupainstance.uts'
|
||||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||||
import { USE_MOCK, MOCK_MERCHANT_ID, getMockStats, getMockTrendData, MOCK_HOT_PRODUCTS } from '@/pages/mall/merchant/mock/merchant-mock-data.uts'
|
||||
|
||||
type ProductType = {
|
||||
@@ -102,7 +103,7 @@
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.loadStatistics()
|
||||
this.handlePageShow()
|
||||
},
|
||||
|
||||
computed: {
|
||||
@@ -116,6 +117,23 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
async ensureMerchantAuth(): Promise<boolean> {
|
||||
if (USE_MOCK) return true
|
||||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||||
if (!result.ok) {
|
||||
this.merchantId = ''
|
||||
return false
|
||||
}
|
||||
this.merchantId = result.userInfo != null && result.userInfo.id != null ? result.userInfo.id : ''
|
||||
return this.merchantId !== ''
|
||||
},
|
||||
|
||||
async handlePageShow() {
|
||||
const passed = await this.ensureMerchantAuth()
|
||||
if (!passed) return
|
||||
this.loadStatistics()
|
||||
},
|
||||
|
||||
async initMerchantId() {
|
||||
if (USE_MOCK) {
|
||||
this.merchantId = MOCK_MERCHANT_ID
|
||||
|
||||
Reference in New Issue
Block a user