完善设置页面UI设计

pages/mall/consumer/home-service/order-detail.uvue

@@ -86,7 +86,11 @@
 				<text class="exception-update-time">状态更新时间：{{ consumerViewState.statusUpdatedAt }}</text>
 			</view>
 
-			<view class="action-row">
+			<view v-if="isServicePaymentExpired" class="action-row">
+				<view class="secondary-btn" @click="goHome">返回首页</view>
+				<view class="primary-btn" @click="bookAgain">再次预约</view>
+			</view>
+			<view v-else class="action-row">
 				<view v-if="detail.statusText == '派单未成功'" class="secondary-btn" @click="bookAgain">再次预约</view>
 				<view v-else class="secondary-btn" @click="bookAgain">再次预约</view>
 				<view v-if="detail.status == 'pending_acceptance'" class="primary-btn" @click="goFeedback">去验收反馈</view>
@@ -107,7 +111,7 @@ 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 { dispatchPaidHomecareOrder, getHomecareOrderDisplayStatus, HOMECARE_DISPATCH_STATUS_FAILED, showHomecareDispatchFailureModal } from '@/services/serviceOrderService.uts'
+import { dispatchPaidHomecareOrder, HOMECARE_DISPATCH_STATUS_FAILED, showHomecareDispatchFailureModal } from '@/services/serviceOrderService.uts'
 import { HomeServiceCaseType } from '@/types/home-service.uts'
 import { getCurrentUser, getCurrentUserId } from '@/utils/store.uts'
 import { goToLogin } from '@/utils/utils.uts'
@@ -162,6 +166,10 @@ async function goPayment(): Promise<void> {
 		uni.showToast({ title: '订单信息加载失败，请稍后重试', icon: 'none' })
 		return
 	}
+	if (isServicePaymentExpired.value) {
+		uni.showToast({ title: '订单已超时未支付，请重新预约', icon: 'none' })
+		return
+	}
 	if (!canPayServiceOrder.value) {
 		uni.showToast({ title: '当前订单已不可支付，请刷新查看最新状态', icon: 'none' })
 		return
@@ -192,6 +200,36 @@ function contactService() {
 	uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
 }
 
+function goHome() {
+	uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
+}
+
+function getPayExpireMs(caseDetail: HomeServiceCaseType): number {
+	if (caseDetail.payExpireAt == null || caseDetail.payExpireAt == '') {
+		return 0
+	}
+	const parsed = Date.parse(caseDetail.payExpireAt)
+	return isNaN(parsed) ? 0 : parsed
+}
+
+function isPaymentTimeExpired(caseDetail: HomeServiceCaseType): boolean {
+	if (caseDetail.paymentStatus != 1 || caseDetail.status != 'created') {
+		return false
+	}
+	const expireMs = getPayExpireMs(caseDetail)
+	if (expireMs <= 0) {
+		return false
+	}
+	return expireMs <= Date.now()
+}
+
+const isServicePaymentExpired = computed<boolean>(() => {
+	if (detail.value == null) {
+		return false
+	}
+	return isPaymentTimeExpired(detail.value)
+})
+
 let isRetryDispatching = false
 
 function retryDispatch() {
@@ -260,6 +298,14 @@ const consumerViewState = computed(() => {
 	const remark = getLatestTimelineRemark(detail.value)
 	const result = { ...defaultState }
 
+	if (isPaymentTimeExpired(detail.value)) {
+		result.showExceptionPanel = true
+		result.exceptionTitle = '订单已超时未支付'
+		result.exceptionDesc = '支付时间已结束，请返回首页重新预约或刷新查看最新状态。'
+		result.statusUpdatedAt = detail.value.payExpireAt != null && detail.value.payExpireAt != '' ? detail.value.payExpireAt : detail.value.serviceTime
+		return result
+	}
+
 	if (detail.value.statusText == '派单未成功') {
 		result.showExceptionPanel = true
 		result.exceptionTitle = '派单未成功'
@@ -320,6 +366,7 @@ const canPayServiceOrder = computed<boolean>(() => {
 	}
 	return detail.value.paymentStatus == 1
 		&& detail.value.status == 'created'
+		&& !isPaymentTimeExpired(detail.value)
 })
 
 let detailRefreshTimerId: number = 0
@@ -553,4 +600,4 @@ onUnload(() => {
 	color: #c2410c;
 	line-height: 40rpx;
 }
-</style>
+</style>