<template>
<view class="parking-lock">
<view class="Jump">
<view class="Jump-btn" @click="jumpArrears"> 欠费补缴 </view>
</view>
<!-- 车位锁 -->
<view class="parking-lock-box">
<!-- 车位锁支付 -->
<template v-if="parkingLockStatus === 1">
<view class="parking-lock-pay">
<view class="parking-lock-title">支付停车费</view>
<view class="parking-lock-tips">请您确认停车费用，确认后请支付费用，结束停车。谢谢您的使用！</view>
<view class="parking-lock-info">
<view class="parking-lock-info-item">
<view>停车场名称</view>
<view>{{ orderInfo.roadName }}</view>
</view>
<view class="parking-lock-info-item">
<view>停车泊位</view>
<view>{{ orderInfo.spaceName }}</view>
</view>
<!-- <view class="parking-lock-info-item">
<view>入场时间</view>
<view>{{orderInfo.inTime}}</view>
</view>
<view class="parking-lock-info-item">
<view>出场时间</view>
<view>{{orderInfo.outTime}}</view>
</view>
<view class="parking-lock-info-item">
<view>停车时长</view>
<view>{{ orderInfo.duration || 0}}</view>
</view>
<view class="parking-lock-info-item">
<view>免费时长</view>
<view>{{ orderInfo.freeDuration || 0 }}</view>
</view> -->
<view class="parking-lock-info-item">
<view>开始计费</view>
<view>{{ orderInfo.inTime }}</view>
</view>
<view class="parking-lock-info-item">
<view>结束计费</view>
<view>{{ orderInfo.outTime }}</view>
</view>
<view class="parking-lock-info-item">
<view>免费时长</view>
<view>{{ orderInfo.freeDuration || `0天0时${free_time}分0秒` }}</view>
</view>
<view class="parking-lock-info-item">
<view>计费时长</view>
<view>{{ orderInfo.calcDuration || 0 }}</view>
</view>
<view class="parking-lock-info-item">
<view>累计停车时长</view>
<view>{{ orderInfo.duration || 0 }}</view>
</view>
<!-- <view class="parking-lock-info-item">
<view>合计金额</view>
<view>{{orderInfo.totalAmount}} 元</view>
</view>
<view class="parking-lock-info-item">
<view>优惠金额</view>
<view>{{orderInfo.preferentialAmount}} 元</view>
</view> -->
<view class="parking-lock-info-item">
<view>应缴金额</view>
<view class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
</view>
<view class="parking-lock-info-item">
<view>订单编号</view>
<view>{{ orderInfo.orderId }}</view>
</view>
<!-- <view class="parking-lock-info-item" v-if="orderInfo.vehicleNo">
<view>车牌信息</view>
<view class="really-license">{{ orderInfo.vehicleNo }}</view>
</view> -->
<!-- <view class="parking-lock-info-item" v-if="orderInfo.vehicleNo==''">
<view>车牌信息</view>
<view class="really-license"><text class="really-license-txt" @click="addvehicleNo">添加车牌</text>
</view>
</view>
<view class="parking-lock-info-item" v-else>
<view>车牌信息</view>
<view class="really-license">{{orderInfo.vehicleNo}} <text @click="changevehicleNo"
class="really-license-txt1">更换</text></view>
</view> -->
</view>
<view class="parking-lock-pay-btn">
<button type="default" @click="payMoney">立即支付</button>
</view>
<!-- <view class="parking-lock-pay-attention">
<text>
温馨提示：车牌信息可填可不填，如果您已通过本机号码办理了特定车或包月车业务，则需要输入车牌号，否则将按照常规收费标准进行收费。
</text>
</view> -->
<view class="parking-lock-pay-attention">
<text>
温馨提示：车辆计费前您有{{ orderInfo.freeDurationNum / 60 }}分钟免费停车时长，{{
orderInfo.freeDurationNum / 60
}}分钟过后则升板锁车开始计费。
</text>
</view>
</view>
</template>
<!-- 车位锁开始状态 -->
<template v-else-if="parkingLockStatus === 2">
<view class="parking-lock-begin">
<view class="parking-lock-begin-box">
<view class="parking-lock-begin-bg">
<image src="../../static/img/parking-lock-bg.png" mode=""></image>
</view>
</view>
<view class="parking-lock-begin-info">车位锁正在动作，还未到位</view>
</view>
</template>
<!-- 车位锁正在状态 -->
<template v-else-if="parkingLockStatus === 3">
<view class="parking-lock-loading">
<view class="parking-lock-loading-box">
<view class="parking-lock-loading-bg">
<image src="../../static/img/parking-lock-bg.png" mode=""></image>
</view>
</view>
<view class="parking-lock-loading-info">开锁中，请等待！</view>
</view>
</template>
<!-- 开锁完成 -->
<template v-else-if="parkingLockStatus === 4">
<view class="parking-lock-success">
<view class="parking-lock-success-box">
<image src="../../static/img/parking-lock-achieve.png" mode=""></image>
</view>
<view class="parking-lock-success-info">开锁已完成</view>
<view class="parking-lock-success-button">
<button @click="cancel">返回</button>
</view>
</view>
</template>
<template v-else-if="parkingLockStatus === 5">
<view class="parking-lock-pay">
<view class="parking-lock-tips">{{ tipsMsg }}</view>
</view>
</template>
<!-- 支付方式 -->
<PaymentMethod
:payWayPop="payWayPop"
:curOrderList="orderList"
:deviceNo="deviceNo"
:jumpUrl="jumpUrl"
@closePaymentMethod="closePaymentMethod"
></PaymentMethod>
<u-toast ref="uToast" />
<u-popup v-model="show" mode="center" border-radius="14" width="200rpx" height="200rpx">
<view class="loadingSelect">订单查询中...</view>
<view class="spinner">
<view class="rect1"></view>
<view class="rect2"></view>
<view class="rect3"></view>
<view class="rect4"></view>
<view class="rect5"></view>
</view>
</u-popup>
<u-popup class="popup-vehicleNo" v-model="ShowaddvehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
<view class="popup-vehicleNo-title">添加车牌</view>
<view class="popup-vehicleNo-center"></view>
<view class="popup-vehicleNo-content">
<view class="new-plate-number">
<view class="message-input-wrap" @click="messageInputClick">
<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
</view>
</view>
</view>
<view class="popup-vehicleNo-select">暂无绑定车牌</view>
<view class="vehicleNo-btn">
<u-button type="primary" @click="handleAddCar">确认</u-button>
<u-button type="primary" plain @click="ShowaddvehicleNo = false">取消</u-button>
</view>
</u-popup>
<u-popup class="popup-vehicleNo" v-model="ShowchangevehicleNo" mode="center" border-radius="20" width="710rpx" height="auto">
<view class="popup-vehicleNo-title">更换车牌</view>
<view class="popup-vehicleNo-center"></view>
<view class="popup-vehicleNo-content">
<view class="new-plate-number">
<view class="message-input-wrap" @click="messageInputClick">
<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
</view>
</view>
</view>
<view class="popup-vehicleNo-select">
<u-collapse ref="refValue">
<u-collapse-item title="点击选择车牌" align="center">
<u-cell-group>
<u-cell-item :title="item.vehicleNo" v-for="(item, index) in groupList" :key="index" :arrow="false">
<u-radio-group v-model="selectvalue" @change="radioGroupChange">
<u-radio :name="item.vehicleNo" :key="index"></u-radio>
</u-radio-group>
</u-cell-item>
</u-cell-group>
</u-collapse-item>
</u-collapse>
</view>
<view class="vehicleNo-btn">
<u-button type="primary" @click="handleAddCar">确认</u-button>
<u-button type="primary" plain @click="ShowchangevehicleNo = false">取消</u-button>
</view>
</u-popup>
<u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
<u-keyboard
ref="uKeyboard"
mode="car"
@change="keyboardChange"
@confirm="keyboardConfirm"
@backspace="backspace"
v-model="keyboardshow"
></u-keyboard>
</view>
</view>
</template>
<script>
import getUrlParams from '../../utils/getUrlParams.js';
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
export default {
components: {
PaymentMethod
},
data() {
return {
selectvalue: null,
groupList: [],
radiogroupList: [],
keyboardshow: false,
colorShow: false,
colorList: [
{
text: '蓝色',
colorCode: 0
},
{
text: '黄色',
colorCode: 1
},
{
text: '黑色',
colorCode: 2
},
{
text: '白色',
colorCode: 3
},
{
text: '绿色',
colorCode: 4
},
{
text: '其他',
colorCode: 99
}
],
vehicleColor: 0,
newPlateNumber: '',
//更换车牌弹窗
ShowchangevehicleNo: false,
//添加车牌弹窗
ShowaddvehicleNo: false,
// 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
parkingLockStatus: 0,
// 支付方式选择弹框
payWayPop: false,
// 订单编号
orderList: [],
// 提示信息
tipsMsg: null,
// 设备编号
deviceNo: null,
// 轮询
timer: null,
timer1: null,
// 订单信息
orderInfo: {},
// 订单id
orderId: null,
// 重定向地址
jumpUrl: location.href + '&isBack=1',
show: true,
isBack: '',
polyOrderId: ''
};
},
onLoad(page) {
if (page.orderId) {
this.getOrderDetails(page.orderId);
this.orderList = [];
this.orderId = page.orderId;
this.orderList.push(page.orderId);
this.deviceNo = page.deviceNo;
this.isBack = page?.isBack;
this.polyOrderId = page?.polyOrderId;
} else {
this.tipsMsg = page.msg || '参数丢失!';
this.parkingLockStatus = 5;
}
},
onShow() {
if (this.orderId) {
if (this.polyOrderId && this.isBack == 1) {
this.timer1 = setInterval(() => {
this.show = true;
this.handlePayStatus(this.polyOrderId);
}, 2000);
}
} else {
this.show = false;
}
},
onUnload() {
if (this.timer) {
clearInterval(this.timer);
}
if (this.timer1) {
clearInterval(this.timer1);
}
},
methods: {
jumpArrears() {
uni.navigateTo({
url: '../center/order/order?orderStatus=2'
});
},
radioGroupChange(e) {
this.newPlateNumber = e;
},
// 获取车辆列表
handlegetMycars() {
let that = this;
this.$u.api
.getMycars()
.then((res) => {
if (res.code === 200) {
this.groupList = res.data.rows;
this.radiogroupList = res.data.rows;
this.$nextTick(() => {
// dom元素更新后执行，因此这里能正确打印更改之后的值
console.log(that.$refs.refValue.init()); // 改变了的值
});
} else {
this.$refs.uToast.show({
title: res.msg,
type: 'error'
});
}
})
.catch((err) => {
this.$refs.uToast.show({
title: '操作失败!',
type: 'error'
});
});
},
//更换车牌信息
changevehicleNo() {
this.ShowchangevehicleNo = true;
this.handlegetMycars();
},
// 添加车辆
handleAddCar() {
if (!this.$u.test.carNo(this.newPlateNumber)) {
this.$refs.uToast.show({
title: '请正确填写车牌号',
type: 'error'
});
return;
}
let param = {
orderId: this.orderId,
vehicleNo: this.newPlateNumber,
vehicleColor: this.vehicleColor
};
let that = this;
this.$u.api
.bindVehicleNo(param)
.then((res) => {
if (res.code === 200) {
this.$refs.uToast.show({
title: res.msg,
type: 'success'
});
that.getOrderDetails(that.orderId);
that.ShowchangevehicleNo = false;
} else {
this.$refs.uToast.show({
title: res.msg,
type: 'error'
});
}
})
.catch((err) => {
this.$refs.uToast.show({
title: '操作失败!',
type: 'error'
});
});
},
//新增车牌
addvehicleNo() {
this.ShowaddvehicleNo = true;
},
// 点击输入框
messageInputClick() {
this.keyboardshow = true;
},
// 按键被点击(点击退格键不会触发此事件)
keyboardChange(val) {
// 将每次按键的值拼接到value变量中，注意+=写法
this.newPlateNumber += val;
},
// 退格键被点击
backspace() {
// 删除value的最后一个字符
if (this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
},
// 键盘输入完成后确认
keyboardConfirm() {
this.colorShow = true;
},
// 确认颜色
confirmColor(e) {
this.vehicleColor = this.colorList[e].colorCode;
},
/**
* 反复查询支付状态
* @param { String } orderId
*/
handlePayStatus(orderId) {
this.$u.api
.getOrderInfo({
orderId
})
.then((res) => {
if (res.code === 200) {
if (res.data.payStatus === 1 || res.data.payStatus === 3) {
this.show = false;
clearInterval(this.timer1);
this.getOrderDetails(this.orderId);
}
} else {
this.show = false;
clearInterval(this.timer1);
this.$refs.uToast.show({
title: res.msg,
type: 'error'
});
}
})
.catch(() => {
this.show = false;
clearInterval(this.timer1);
});
},
payMoney() {
this.payWayPop = true;
},
// 查询订单信息
getOrderDetails(id) {
this.$u.api
.getOrderDetail({
id
})
.then((res) => {
if (res.code === 200 && res.data.id) {
this.parkingLockStatus = 1;
// 获取页面完整url
const local = window.location.href;
// 获取url后面的参数
const locationLocaturl = window.location.search;
// 截取url中的isBack
let isBack = getUrlParams(local, 'isBack');
// 如果没有isBack，则去请求
if (!isBack) {
// uni.hideLoading();
this.show = false;
clearInterval(this.timer1);
}
this.orderInfo = res.data;
if (res.data.payStatus === 1) {
this.show = false;
clearInterval(this.timer1);
this.checkEqupment();
}
} else {
this.$refs.uToast.show({
title: res.msg || '订单无数据',
type: 'error'
});
this.show = false;
if (this.timer1) {
clearInterval(this.timer1);
}
}
})
.catch(() => {
this.show = false;
if (this.timer1) {
clearInterval(this.timer1);
}
});
},
// 检测设备
checkEqupment() {
this.timer = setInterval(() => {
this.getEqumentStatus(this.deviceNo);
}, 1000);
},
// 查询设备状态
getEqumentStatus(orderNo) {
this.$u.api
.getEquomentInfo({
orderNo
})
.then((res) => {
if (res.code === 200) {
if (res.data.deviceStatus == 0) {
this.parkingLockStatus = 4;
clearInterval(this.timer);
} else if (res.data.deviceStatus == 1 || res.data.deviceStatus == 5) {
this.parkingLockStatus = 2;
} else if (res.data.deviceStatus == 6) {
this.parkingLockStatus = 3;
}
} else {
clearInterval(this.timer);
}
})
.catch(() => {
clearInterval(this.timer);
});
},
// 返回首页
cancel() {
uni.switchTab({
url: '/pages/index/index'
});
},
closePaymentMethod() {
this.payWayPop = false;
}
}
};
</script>
<style lang="scss" scoped>
@import './parkingLock.scss';
.Jump {
display: flex;
justify-content: flex-end;
background-color: #f6f6ff;
&-btn {
color: rgb(0, 140, 255);
padding: 20rpx 30rpx;
}
}
</style>