medical-mall/pages/mall/delivery/orders/evidence.uvue

<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>