完善设置页面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>

pages/mall/consumer/order-detail.uvue

@@ -262,7 +262,8 @@ const getPendingCountdownText = (): string => {
 const shouldShowCancelledActions = (): boolean => {
     const source = toOrderStatusSource()
     if (source == null) return false
-    return getOrderDisplayStatus(source) == 'cancelled'
+    const displayStatus = getOrderDisplayStatus(source)
+    return displayStatus == 'cancelled' || displayStatus == 'expired'
 }
 
 // 辅助函数 - 必须在调用前定义
@@ -272,6 +273,7 @@ const getStatusText = (): string => {
     if (source != null) {
         const displayStatus = getOrderDisplayStatus(source)
         if (displayStatus == 'pending') return '待付款'
+        if (displayStatus == 'expired') return '已超时未支付'
         if (displayStatus == 'cancelled') return '已取消'
     }
     if (status == 1) return '待付款'
@@ -292,6 +294,9 @@ const getStatusDesc = (): string => {
         if (displayStatus == 'pending') {
             return '请在 ' + getPendingCountdownText() + ' 内支付'
         }
+        if (displayStatus == 'expired') {
+            return '订单已超时未支付，请返回订单列表或重新选购'
+        }
         if (displayStatus == 'cancelled') {
             const currentReason = order.value?.cancel_reason ?? ''
             if (currentReason.indexOf('超时') >= 0) {
@@ -325,7 +330,7 @@ const getStatusClass = (): string => {
     if (source != null) {
         const displayStatus = getOrderDisplayStatus(source)
         if (displayStatus == 'pending') return 'status-pending'
-        if (displayStatus == 'cancelled') return 'status-cancelled'
+        if (displayStatus == 'cancelled' || displayStatus == 'expired') return 'status-cancelled'
     }
     const status = order.value?.order_status ?? 0
     return 'status-' + status

pages/mall/consumer/orders.uvue

@@ -1335,7 +1335,8 @@ const onRefresh = async () => {
 const getOrderStatusText = (order: OrderItem): string => {
     const displayState = getUnifiedDisplayState(toOrderStatusSource(order))
     if (displayState == 'pending_pay') return '待付款'
-    if (displayState == 'cancelled' || displayState == 'expired') return '已取消'
+    if (displayState == 'expired') return '已超时未支付'
+    if (displayState == 'cancelled') return '已取消'
 
     if (order.biz_type === 'service') {
         if (order.payment_status == 1 && order.status == 1) return '待付款'

pages/mall/consumer/payment.uvue

@@ -11,7 +11,7 @@
 
 				<view class="jd-title-center">
 					<text class="jd-title-clock">◷</text>
-					<text class="jd-title-text">{{ orderMissing ? '订单不存在' : (isPaymentExpired ? '已取消' : '等待付款') }}</text>
+					<text class="jd-title-text">{{ orderMissing ? '订单不存在' : (isPaymentExpired ? '已超时未支付' : '等待付款') }}</text>
 				</view>
 			</view>
 
@@ -26,7 +26,7 @@
 			</view>
 
 			<view class="jd-countdown-row" v-else>
-				<text class="jd-expired-text">订单超时未支付，已自动取消</text>
+				<text class="jd-expired-text">订单已超时未支付</text>
 			</view>
 		</view>
 
@@ -555,11 +555,11 @@ const countdownText = computed((): string => {
 })
 
 const payStatusTitle = computed((): string => {
-	return isPaymentExpired.value ? '已取消' : '等待付款'
+	return isPaymentExpired.value ? '已超时未支付' : '等待付款'
 })
 
 const payStatusDesc = computed((): string => {
-	return isPaymentExpired.value ? '订单超时未支付，已自动取消' : '请在 ' + countdownText.value + ' 内支付'
+	return isPaymentExpired.value ? '订单已超时未支付，请返回订单列表或重新选购' : '请在 ' + countdownText.value + ' 内支付'
 })
 
 const getDeadlineByCreatedAt = (createdAt: string): number => {
@@ -944,10 +944,10 @@ const handlePaymentTimeout = async () => {
 	updateOrderInStorage(orderId.value, cancelledStatus, ORDER_TIMEOUT_CANCEL_REASON)
 	uni.$emit('orderUpdated', { orderId: orderId.value, status: cancelledStatus, paymentStatus: PAYMENT_STATUS_TIMEOUT, cancelReason: ORDER_TIMEOUT_CANCEL_REASON, payExpireAt: payExpireAtText.value })
 	if (success) {
-		uni.showToast({ title: '订单已取消', icon: 'none' })
+		uni.showToast({ title: '订单已超时未支付', icon: 'none' })
 		return
 	}
-	uni.showToast({ title: '订单已取消', icon: 'none' })
+	uni.showToast({ title: '订单已超时未支付', icon: 'none' })
 }
 
 const parseAddressFromOrder = (orderObj: UTSJSONObject) => {
@@ -1363,7 +1363,7 @@ const confirmPayment = async () => {
 	}
 	if (isPaymentExpired.value || remainingSeconds.value <= 0) {
 		markPaymentExpiredInPage()
-		uni.showToast({ title: '订单已取消，不能继续支付', icon: 'none' })
+		uni.showToast({ title: '订单已超时未支付，不能继续支付', icon: 'none' })
 		return
 	}
 	if (!ensureLoggedIn()) return
@@ -1390,7 +1390,7 @@ const confirmPayment = async () => {
 			if (latestState == 'expired' || latestState == 'cancelled') {
 				await supabaseService.expireUnifiedOrder(orderId.value, source.value)
 				markPaymentExpiredInPage()
-				uni.showToast({ title: '订单已取消，不能继续支付', icon: 'none' })
+				uni.showToast({ title: '订单已超时未支付，不能继续支付', icon: 'none' })
 				isPaying.value = false
 				return
 			}
@@ -1440,7 +1440,7 @@ const confirmPayment = async () => {
 					if (isExpiredState(latestStatus, latestPayment, latestReason, latestExpire)) {
 						markPaymentExpiredInPage()
 						uni.hideLoading()
-						uni.showToast({ title: '订单已取消，不能继续支付', icon: 'none' })
+						uni.showToast({ title: '订单已超时未支付，不能继续支付', icon: 'none' })
 						isPaying.value = false
 						return
 					}