diff --git a/packages/park/temporaryOrder/index.css b/packages/park/temporaryOrder/index.css index ffe6aacf..61151fea 100644 --- a/packages/park/temporaryOrder/index.css +++ b/packages/park/temporaryOrder/index.css @@ -410,6 +410,12 @@ page { display: block; } +.notice-text2 { + font-size: 28rpx; + color: #999999; + text-align: center; +} + .payment-methods { margin-bottom: 40rpx; } diff --git a/packages/park/temporaryOrder/index.vue b/packages/park/temporaryOrder/index.vue index ea26571d..7c5cd233 100644 --- a/packages/park/temporaryOrder/index.vue +++ b/packages/park/temporaryOrder/index.vue @@ -67,49 +67,61 @@ - - - - - - {{ parkingLotName }} 待支付 - - - ¥ - {{ costAmount }} - - - - 车牌号: - {{ currentCarNumber }} + + + + - - 进场时间: - {{ entryTime }} + + {{ parkingLotName }} 待支付 - - 计费时间: - {{ billingTime }} + + ¥ + {{ costAmount }} - - - ⚠️ 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费 - - - - - - 微信支付 + + + 车牌号: + {{ currentCarNumber }} + + + 进场时间: + {{ entryTime }} + + + 计费时间: + {{ billingTime }} - + + + ⚠️ 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费 + + + + + + 微信支付 + + + + + 立即付款 + + + + + + ⚠️ 支付成功,请于{{ countdownTime }}内离场否则将加收停车费 + ⚠️ 您已超时未离场,已重新计费 - 立即付款 未找到停车记录 @@ -178,7 +190,13 @@ export default { billingTime: '', paymentMethod: 'wechat', // 定时器ID,用于清除定时器 - timerId: null + timerId: null, + + // 支付状态相关数据 + payStatus: 0, + payTime: '', + countdownTime: '', + isTimeout: false } }, onLoad() { @@ -215,6 +233,10 @@ export default { numberInputResult(e) { this.defaultNum = e; + // 当车牌数据改变时,隐藏停车费显示 + this.showCost1 = false; + this.showCost2 = false; + // 使用$nextTick确保DOM更新完成后再尝试操作组件 this.$nextTick(() => { if (this.$refs.carNumberInput) { @@ -266,6 +288,31 @@ export default { this.billingTime = timeStr; }, + // 更新倒计时 + updateCountdown() { + const payDateTime = new Date(this.payTime); + const currentDateTime = new Date(); + // 计算支付时间加上免费出场时间后的过期时间 + const expireDateTime = new Date(payDateTime.getTime() + parseInt(this.feeOutTime) * 60 * 1000); + + // 判断是否已超时 + if (currentDateTime > expireDateTime) { + this.isTimeout = true; + // 清除定时器,不再更新倒计时 + if (this.timerId) { + clearInterval(this.timerId); + this.timerId = null; + } + } else { + // 计算剩余时间(秒) + const remainingSeconds = Math.floor((expireDateTime - currentDateTime) / 1000); + // 格式化剩余时间为分:秒 + const minutes = Math.floor(remainingSeconds / 60); + const seconds = remainingSeconds % 60; + this.countdownTime = `${minutes}分${seconds}秒`; + } + }, + // 选择颜色 selectColor(index) { this.selectedColorIndex = index; @@ -327,17 +374,33 @@ export default { this.timerId = null; } - if (res.car_billing_type == 1) { - this.billingTime = '月租车'; - } else if (res.car_billing_type == 2) { - this.billingTime = '临时车'; - } else { - // 计算并实时更新进场时间到现在的时长 - this.updateBillingTime(); - // 设置定时器,每秒更新一次 + // 重置支付状态相关数据 + this.payStatus = res.pay_status || 0; + this.payTime = res.pay_time || ''; + this.countdownTime = ''; + this.isTimeout = false; + + // 如果是已支付状态(pay_status=1) + if (this.payStatus === 1 && this.payTime) { + // 计算并显示倒计时 + this.updateCountdown(); + // 设置定时器,每秒更新一次倒计时 this.timerId = setInterval(() => { - this.updateBillingTime(); + this.updateCountdown(); }, 1000); + } else { + if (res.car_billing_type == 1) { + this.billingTime = '月租车'; + } else if (res.car_billing_type == 2) { + this.billingTime = '临时车'; + } else { + // 计算并实时更新进场时间到现在的时长 + this.updateBillingTime(); + // 设置定时器,每秒更新一次 + this.timerId = setInterval(() => { + this.updateBillingTime(); + }, 1000); + } } this.showCost1 = true;