修改点击查询停车费的页面展示逻辑
This commit is contained in:
赵毅
parent
07ffe842bd
commit
a64939a86a
@ -410,6 +410,12 @@ page {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notice-text2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.payment-methods {
|
.payment-methods {
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -67,49 +67,61 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 停车费展示部分 -->
|
<!-- 停车费展示部分 -->
|
||||||
<view v-if="showCost1" class="cost-container">
|
<view v-if="showCost1">
|
||||||
<view>
|
<view v-if="payStatus === 2" class="cost-container">
|
||||||
<image class="cost-image"
|
<view>
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
|
<image class="cost-image"
|
||||||
mode="aspectFit" />
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderLoading.png"
|
||||||
</view>
|
mode="aspectFit" />
|
||||||
<view class="cost-header">
|
|
||||||
<text class="cost-title">{{ parkingLotName }} <text class="cost-title2">待支付</text></text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-amount">
|
|
||||||
<text class="amount-symbol">¥</text>
|
|
||||||
<text class="amount-number">{{ costAmount }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="cost-info">
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">车牌号：</text>
|
|
||||||
<text class="info-value">{{ currentCarNumber }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="cost-header">
|
||||||
<text class="info-label">进场时间：</text>
|
<text class="cost-title">{{ parkingLotName }} <text class="cost-title2">待支付</text></text>
|
||||||
<text class="info-value">{{ entryTime }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="cost-amount">
|
||||||
<text class="info-label">计费时间：</text>
|
<text class="amount-symbol">¥</text>
|
||||||
<text class="info-value">{{ billingTime }}</text>
|
<text class="amount-number">{{ costAmount }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="cost-info">
|
||||||
<view class="notice">
|
<view class="info-item">
|
||||||
<text class="notice-text">⚠️ 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费</text>
|
<text class="info-label">车牌号：</text>
|
||||||
</view>
|
<text class="info-value">{{ currentCarNumber }}</text>
|
||||||
<view class="payment-methods">
|
</view>
|
||||||
<view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
|
<view class="info-item">
|
||||||
@tap="selectPayment('wechat')">
|
<text class="info-label">进场时间：</text>
|
||||||
<view class="payment-item-content">
|
<text class="info-value">{{ entryTime }}</text>
|
||||||
<image
|
</view>
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
<view class="info-item">
|
||||||
mode="aspectFit" class="payment-icon"></image>
|
<text class="info-label">计费时间：</text>
|
||||||
<text class="payment-name">微信支付</text>
|
<text class="info-value">{{ billingTime }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="paymentMethod === 'wechat'" class="payment-selected"></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="notice">
|
||||||
|
<!-- 未支付状态显示 -->
|
||||||
|
<text class="notice-text">⚠️ 请于付款后{{ feeOutTime }}分钟内离场否则将加收停车费</text>
|
||||||
|
</view>
|
||||||
|
<view class="payment-methods">
|
||||||
|
<view class="payment-item" :class="{ 'selected': paymentMethod === 'wechat' }"
|
||||||
|
@tap="selectPayment('wechat')">
|
||||||
|
<view class="payment-item-content">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
mode="aspectFit" class="payment-icon"></image>
|
||||||
|
<text class="payment-name">微信支付</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="paymentMethod === 'wechat'" class="payment-selected"></view>
|
||||||
|
</view>
|
||||||
|
</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 class="pay-button" @tap="confirmPayment">立即付款</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view v-if="showCost2" class="cost-container not-found">
|
<view v-if="showCost2" class="cost-container not-found">
|
||||||
未找到停车记录
|
未找到停车记录
|
||||||
@ -178,7 +190,13 @@ export default {
|
|||||||
billingTime: '',
|
billingTime: '',
|
||||||
paymentMethod: 'wechat',
|
paymentMethod: 'wechat',
|
||||||
// 定时器ID，用于清除定时器
|
// 定时器ID，用于清除定时器
|
||||||
timerId: null
|
timerId: null,
|
||||||
|
|
||||||
|
// 支付状态相关数据
|
||||||
|
payStatus: 0,
|
||||||
|
payTime: '',
|
||||||
|
countdownTime: '',
|
||||||
|
isTimeout: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@ -215,6 +233,10 @@ export default {
|
|||||||
numberInputResult(e) {
|
numberInputResult(e) {
|
||||||
this.defaultNum = e;
|
this.defaultNum = e;
|
||||||
|
|
||||||
|
// 当车牌数据改变时，隐藏停车费显示
|
||||||
|
this.showCost1 = false;
|
||||||
|
this.showCost2 = false;
|
||||||
|
|
||||||
// 使用$nextTick确保DOM更新完成后再尝试操作组件
|
// 使用$nextTick确保DOM更新完成后再尝试操作组件
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.$refs.carNumberInput) {
|
if (this.$refs.carNumberInput) {
|
||||||
@ -266,6 +288,31 @@ export default {
|
|||||||
this.billingTime = timeStr;
|
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) {
|
selectColor(index) {
|
||||||
this.selectedColorIndex = index;
|
this.selectedColorIndex = index;
|
||||||
@ -327,17 +374,33 @@ export default {
|
|||||||
this.timerId = null;
|
this.timerId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (res.car_billing_type == 1) {
|
// 重置支付状态相关数据
|
||||||
this.billingTime = '月租车';
|
this.payStatus = res.pay_status || 0;
|
||||||
} else if (res.car_billing_type == 2) {
|
this.payTime = res.pay_time || '';
|
||||||
this.billingTime = '临时车';
|
this.countdownTime = '';
|
||||||
} else {
|
this.isTimeout = false;
|
||||||
// 计算并实时更新进场时间到现在的时长
|
|
||||||
this.updateBillingTime();
|
// 如果是已支付状态(pay_status=1)
|
||||||
// 设置定时器，每秒更新一次
|
if (this.payStatus === 1 && this.payTime) {
|
||||||
|
// 计算并显示倒计时
|
||||||
|
this.updateCountdown();
|
||||||
|
// 设置定时器，每秒更新一次倒计时
|
||||||
this.timerId = setInterval(() => {
|
this.timerId = setInterval(() => {
|
||||||
this.updateBillingTime();
|
this.updateCountdown();
|
||||||
}, 1000);
|
}, 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;
|
this.showCost1 = true;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user