修改点击查询停车费的页面展示逻辑

This commit is contained in:
赵毅 2025-09-13 17:57:23 +08:00
parent 07ffe842bd
commit a64939a86a
2 changed files with 116 additions and 47 deletions

View File

@ -410,6 +410,12 @@ page {
display: block;
}
.notice-text2 {
font-size: 28rpx;
color: #999999;
text-align: center;
}
.payment-methods {
margin-bottom: 40rpx;
}

View File

@ -67,7 +67,8 @@
</view>
<!-- 停车费展示部分 -->
<view v-if="showCost1" class="cost-container">
<view v-if="showCost1">
<view v-if="payStatus === 2" class="cost-container">
<view>
<image class="cost-image"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
@ -95,6 +96,7 @@
</view>
</view>
<view class="notice">
<!-- 未支付状态显示 -->
<text class="notice-text"> 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费</text>
</view>
<view class="payment-methods">
@ -111,6 +113,16 @@
</view>
<view class="pay-button" @tap="confirmPayment">立即付款</view>
</view>
<view v-else class="cost-container notice-text2">
<view>
<image class="cost-image"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
mode="aspectFit" />
</view>
<span v-if="!isTimeout"> 支付成功请于{{ countdownTime }}内离场否则将加收停车费</span>
<span v-else> 您已超时未离场已重新计费</span>
</view>
</view>
<view v-if="showCost2" class="cost-container not-found">
未找到停车记录
</view>
@ -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;
// 使$nextTickDOM
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,6 +374,21 @@ export default {
this.timerId = null;
}
//
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.updateCountdown();
}, 1000);
} else {
if (res.car_billing_type == 1) {
this.billingTime = '月租车';
} else if (res.car_billing_type == 2) {
@ -339,6 +401,7 @@ export default {
this.updateBillingTime();
}, 1000);
}
}
this.showCost1 = true;
} else {