parking_h5/pages/geomagnetismLock/geomagnetismLock.vue

<template>
	<!-- 地磁 -->
	<view class="parking-lock">
		<!-- 地磁支付 -->
		<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 class="weight">{{ orderInfo.vehicleNo }}</view>
					</view>
					<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.freeDuration || '0天0时15分0秒' }}</view> -->
						<view>{{ '0天0时15分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 class="really-money">{{ orderInfo.payAmount || 0 }} 元</view>
					</view>
					<view class="parking-lock-info-item">
						<view>订单编号</view>
						<view>{{ orderInfo.orderId }}</view>
					</view>
				</view>
				<view class="parking-lock-pay-btn" v-if="is_pay">
					<button type="default" @click="payMoney">立即支付</button>
				</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="[orderId]" :jumpUrl="jumpUrl" :payeeId="payeeId" :payeeName="payeeName"
			@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>
</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: '',
				// 地磁
				spaceId: '',
				payeeId: '',
				payeeName: '',
				is_pay: false
			}
		},
		onLoad(page) {
			if (page.orderId) {
				this.orderId = page?.orderId
				this.spaceId = page?.orderId
				this.payeeId = page?.payeeId
				this.polyOrderId = page?.polyOrderId
				this.isBack = page?.isBack
			} else {
				this.tipsMsg = page.msg || '参数丢失!';
				this.parkingLockStatus = 5
			}
		},
		onShow() {
			if (this.orderId) {
				this.getOrderDetails(this.spaceId, this.orderId, this.payeeId)
				if (this.polyOrderId && this.isBack == 1) {
					this.timer1 = setInterval(() => {
						this.show = true
						this.handlePayStatus(this.polyOrderId)
					}, 1000)
				}
			} 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.is_pay = false
							uni.showModal({
								title: '提示',
								content: '支付成功，返回首页',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							});
						}
					} 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(spaceId, orderId, payeeId) {
				this.$u.api.geomaLockDetailsApi({
					spaceId,
					orderId,
					payeeId
				}).then(res => {
					if (res.code === 200 && res.data.id) {
						this.payeeName = res.data.payeeName
						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) {
							this.show = false
							clearInterval(this.timer1)
						}
						this.orderInfo = res.data
						this.show = false
						if (res.data.payStatus == 0) {
							this.is_pay = true
						} else if (res.data.payStatus == 1){
							this.is_pay = false
							uni.showModal({
								title: '提示',
								content: '订单已支付，返回首页',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							});
						}
					} 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)
					}
				})
			},
			// 返回首页
			cancel() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			closePaymentMethod() {
				this.payWayPop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './geomagnetismLock.scss';
</style>