完善设置页面UI设计

This commit is contained in:
2026-06-02 17:34:44 +08:00
parent 881262940c
commit 714e63e12a
21 changed files with 697 additions and 850 deletions

View File

@@ -10,7 +10,7 @@
export default {
props: {
text: { type: String, default: '暂无数据' },
image: { type: String, default: '/static/default.png' }
image: { type: String, default: '/static/consumer/defaul_picture.png' }
}
}
</script>

View File

@@ -357,8 +357,8 @@ export default {
topActionsWidth: 104,
userHeaderRightReserve: 118,
userHeaderTopOffset: 0,
addressIconPath: '/static/location.png',
settingIconPath: '/static/setting.png',
addressIconPath: '/static/consumer/location.png',
settingIconPath: '/static/consumer/setting.png',
navBarRight: 0, // 导航栏右侧预留空间(小程序胶囊按钮)
currentOrderTab: 'all' as string,
pendingReceiptGoods: {

View File

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

View File

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

View File

@@ -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 '待付款'

View File

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

File diff suppressed because it is too large Load Diff

View File

@@ -173,14 +173,14 @@ const loginType = ref<number>(0)
// 默认账号密码(唯一来源,修改只改这里)
// 必须在 account/password ref 之前声明,否则 ref 初始化时无法引用
// ─────────────────────────────────────────────
// const TEST_ACCOUNT = 'test@mall.com' // ← 旧账号(已停用)
// const TEST_PASSWORD = 'Hf2152111' // ← 旧密码(已停用)
const TEST_ACCOUNT = 'test19@163.com'
const TEST_PASSWORD = 'huang123456'
const CONSUMER_TEST_ACCOUNT = 'test@mall.com'
const CONSUMER_TEST_PASSWORD = 'Hf2152111'
const MERCHANT_TEST_ACCOUNT = 'test19@163.com'
const MERCHANT_TEST_PASSWORD = 'huang123456'
// ✅ account/password 直接以常量作初始值,上线/刷新立即生效,不再依赖 onMounted 延迟赋值
const account = ref<string>('')
const password = ref<string>('')
const account = ref<string>(CONSUMER_TEST_ACCOUNT)
const password = ref<string>(CONSUMER_TEST_PASSWORD)
const captcha = ref<string>('')
const isPasswordVisible = ref<boolean>(false)
@@ -375,7 +375,7 @@ onMounted(() => {
console.log('[Login] ▶ onMounted 开始')
console.log('[Login] 📝 form 初始值:', {
account: account.value,
password: account.value === TEST_ACCOUNT ? '(TEST_PASSWORD 默认)' : '(ref 已被其他逻辑覆盖)'
password: account.value === CONSUMER_TEST_ACCOUNT ? '(CONSUMER_TEST_PASSWORD 默认)' : '(ref 已被其他逻辑覆盖)'
})
// 检查是否存在旧版本 loginn.uvue 遗留的 rememberEmail 缓存
@@ -389,7 +389,7 @@ onMounted(() => {
password.value = '' // 密码不缓存,须用户手动输入
} else {
console.log('[Login] 无缓存,使用默认账号密码(已由 ref 初始化)')
// account 和 password 已在 ref 声明时直接用 TEST_ACCOUNT/TEST_PASSWORD 初始化,无需重复赋值
// account 和 password 已在 ref 声明时直接用消费者默认值初始化,无需重复赋值
}
} catch (e) {
console.error('[Login] ⚠️ 读取 rememberEmail 失败(已忽略):', e)
@@ -397,15 +397,15 @@ onMounted(() => {
console.log('[Login] 📝 onMounted 完成,最终 form 値:', {
account: account.value,
isDefault: account.value === TEST_ACCOUNT
isDefault: account.value === CONSUMER_TEST_ACCOUNT
})
if (isDeliveryMode()) {
account.value = ''
password.value = ''
} else if (isMerchantMode()) {
account.value = TEST_ACCOUNT
password.value = TEST_PASSWORD
account.value = MERCHANT_TEST_ACCOUNT
password.value = MERCHANT_TEST_PASSWORD
}
checkLoginStatus()

View File

@@ -655,6 +655,9 @@ function mapOrderToCase(order: ServiceOrderType): HomeServiceCaseType {
const displayStatus = getHomecareOrderDisplayStatus(order)
let statusText = displayStatus
let statusTone = getCaseTone(order.status)
if (displayStatus == '已超时未支付') {
statusTone = 'danger'
}
if (order.dispatchStatus == HOMECARE_DISPATCH_STATUS_FAILED) {
statusTone = 'danger'
}

View File

@@ -951,6 +951,9 @@ export function buildAddressSnapshot(address: UserAddress, latitude: number, lon
}
export function getHomecareOrderDisplayStatus(order: ServiceOrderType): string {
if (order.paymentStatus == 1 && order.status == 'created' && isHomecarePaymentExpired(order)) {
return '已超时未支付'
}
if (order.paymentStatus == 1 && order.status == 'created') {
return '待付款'
}
@@ -969,6 +972,21 @@ export function getHomecareOrderDisplayStatus(order: ServiceOrderType): string {
return getServiceOrderStatusText(order.status)
}
function isHomecarePaymentExpired(order: ServiceOrderType): boolean {
if (order.paymentStatus != 1 || order.status != 'created') {
return false
}
const payExpireAt = order.payExpireAt != null ? order.payExpireAt : ''
if (payExpireAt == '') {
return false
}
const expireMs = Date.parse(payExpireAt)
if (isNaN(expireMs)) {
return false
}
return expireMs <= Date.now()
}
export async function dispatchPaidHomecareOrder(orderId: string): Promise<HomecareDispatchResult> {
if (orderId == null || orderId.trim() == '') {
return {

BIN
static/consumer/bell.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/consumer/change.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -136,9 +136,12 @@ export function getOrderDisplayStatus(order: OrderStatusSource): string {
if (displayState == 'pending_pay') {
return 'pending'
}
if (displayState == 'cancelled' || displayState == 'expired') {
if (displayState == 'cancelled') {
return 'cancelled'
}
if (displayState == 'expired') {
return 'expired'
}
if (displayState == 'processing') {
return 'shipping'
}