239 lines
6.4 KiB
Plaintext
239 lines
6.4 KiB
Plaintext
<template>
|
|
<ServicePageScaffold title="异常上报" fallback-url="/pages/mall/delivery/orders/detail">
|
|
<view class="page">
|
|
<view class="card">
|
|
<text class="section-title">异常类型</text>
|
|
<view class="type-grid">
|
|
<view v-for="item in exceptionTypes" :key="item.value" class="type-item" :class="currentType == item.value ? 'type-active' : ''" @click="currentType = item.value">
|
|
<text class="type-text">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<text class="section-title">异常说明</text>
|
|
<textarea class="textarea" v-model="description" placeholder="请填写异常说明"></textarea>
|
|
<input class="field" v-model="occurredAt" placeholder="发生时间，例如 2026-05-20 15:36" />
|
|
<input class="field" v-model="locationText" placeholder="当前位置 mock" />
|
|
<view class="switch-row"><text class="switch-label">需要平台介入</text><switch :checked="needPlatformIntervention" color="#1f7db4" @change="changePlatformIntervention" /></view>
|
|
<view class="switch-row"><text class="switch-label">申请取消订单</text><switch :checked="requestCancelOrder" color="#1f7db4" @change="changeCancelOrder" /></view>
|
|
<view class="switch-row"><text class="switch-label">申请改期</text><switch :checked="requestReschedule" color="#1f7db4" @change="changeReschedule" /></view>
|
|
<view class="mock-upload" @click="addMockImage"><text class="mock-upload-text">图片上传占位</text></view>
|
|
<text class="info-text">已添加图片占位：{{ imageCount }} 张</text>
|
|
</view>
|
|
<view class="action-row">
|
|
<view class="outline-btn" @click="goBack"><text class="outline-btn-text">返回详情</text></view>
|
|
<view class="primary-btn" @click="submitForm"><text class="primary-btn-text">提交异常</text></view>
|
|
</view>
|
|
</view>
|
|
</ServicePageScaffold>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
|
import { submitAbnormalReport } from '@/services/deliveryService.uts'
|
|
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
|
import { getDeliveryRouteParam } from '@/utils/deliveryRoute.uts'
|
|
|
|
const orderId = ref('')
|
|
const currentType = ref('cannot_contact_user')
|
|
const description = ref('')
|
|
const occurredAt = ref(new Date().toISOString().replace('T', ' ').substring(0, 19))
|
|
const locationText = ref('当前位置 mock')
|
|
const needPlatformIntervention = ref(false)
|
|
const requestCancelOrder = ref(false)
|
|
const requestReschedule = ref(false)
|
|
const imageCount = ref(0)
|
|
const exceptionTypes = [
|
|
{ label: '联系不上用户', value: 'cannot_contact_user' },
|
|
{ label: '用户不在家', value: 'user_not_home' },
|
|
{ label: '地址错误', value: 'wrong_address' },
|
|
{ label: '家属不配合', value: 'family_uncooperative' },
|
|
{ label: '服务对象身体异常', value: 'elder_health_abnormal' },
|
|
{ label: '环境不适合服务', value: 'safety_risk' },
|
|
{ label: '超出服务范围', value: 'outside_service_scope' },
|
|
{ label: '服务人员无法继续服务', value: 'staff_cannot_continue' },
|
|
{ label: '突发疾病', value: 'emergency_illness' },
|
|
{ label: '投诉纠纷', value: 'complaint_dispute' },
|
|
{ label: '其他', value: 'other' }
|
|
]
|
|
|
|
function changePlatformIntervention(event: any) {
|
|
needPlatformIntervention.value = event.detail.value === true
|
|
}
|
|
|
|
function changeCancelOrder(event: any) {
|
|
requestCancelOrder.value = event.detail.value === true
|
|
}
|
|
|
|
function changeReschedule(event: any) {
|
|
requestReschedule.value = event.detail.value === true
|
|
}
|
|
|
|
function addMockImage() {
|
|
imageCount.value = imageCount.value + 1
|
|
uni.showToast({ title: '已添加图片占位', icon: 'success' })
|
|
}
|
|
|
|
async function submitForm() {
|
|
if (description.value.trim() == '') {
|
|
uni.showToast({ title: '请填写异常说明', icon: 'none' })
|
|
return
|
|
}
|
|
await submitAbnormalReport(orderId.value, {
|
|
exceptionType: currentType.value as any,
|
|
description: description.value,
|
|
images: imageCount.value > 0 ? ['mock-abnormal-image-' + String(imageCount.value)] : [] as Array<string>,
|
|
occurredAt: occurredAt.value,
|
|
locationText: locationText.value,
|
|
needPlatformIntervention: needPlatformIntervention.value,
|
|
requestCancelOrder: requestCancelOrder.value,
|
|
requestReschedule: requestReschedule.value
|
|
})
|
|
uni.showToast({ title: '异常已提交', icon: 'success' })
|
|
setTimeout(() => {
|
|
uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
|
|
}, 300)
|
|
}
|
|
|
|
function goBack() {
|
|
uni.redirectTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId.value })
|
|
}
|
|
|
|
onLoad(async (options) => {
|
|
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>
|
|
.page {
|
|
padding-bottom: 32rpx;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 18rpx;
|
|
padding: 24rpx;
|
|
border-radius: 24rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 10rpx 24rpx rgba(15, 35, 55, 0.06);
|
|
}
|
|
|
|
.section-title,
|
|
.primary-btn-text,
|
|
.type-text {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
color: #16324f;
|
|
}
|
|
|
|
.field,
|
|
.textarea {
|
|
margin-top: 16rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 18rpx;
|
|
background-color: #f4f8fb;
|
|
font-size: 26rpx;
|
|
color: #16324f;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.field {
|
|
height: 84rpx;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
min-height: 180rpx;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.type-grid {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.type-item {
|
|
width: 48%;
|
|
padding: 18rpx 16rpx;
|
|
margin-top: 16rpx;
|
|
border-radius: 18rpx;
|
|
background: #eef2f6;
|
|
}
|
|
|
|
.type-active {
|
|
background: #1f7db4;
|
|
}
|
|
|
|
.type-text {
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: #476178;
|
|
}
|
|
|
|
.type-active .type-text {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.switch-row,
|
|
.action-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.switch-label,
|
|
.info-text,
|
|
.outline-btn-text {
|
|
font-size: 24rpx;
|
|
color: #5e758c;
|
|
}
|
|
|
|
.mock-upload,
|
|
.outline-btn,
|
|
.primary-btn {
|
|
margin-top: 18rpx;
|
|
padding: 18rpx 0;
|
|
border-radius: 18rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mock-upload,
|
|
.outline-btn {
|
|
background: #eaf2f0;
|
|
}
|
|
|
|
.mock-upload-text,
|
|
.outline-btn-text {
|
|
font-size: 26rpx;
|
|
color: #176e97;
|
|
}
|
|
|
|
.outline-btn,
|
|
.primary-btn {
|
|
width: 48%;
|
|
}
|
|
|
|
.primary-btn {
|
|
background: #1f7db4;
|
|
}
|
|
|
|
.primary-btn-text {
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
</style> |