parking_h5/pages/parkingLock/parkingLock.vue

<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时30分0秒' }}</view>
							<!-- <view>{{ '0天0时30分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>
							温馨提示：车辆计费前您有15分钟免费停车时长，15分钟过后则升板锁车开始计费。
						</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: {
			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);
				})
			},
			jumpArrears() {
				uni.navigateTo({
					url: '../center/order/order?swiperIndex=2'
				})
			},
			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>