parking_h5/pages/parkingLock/parkingLock.vue

<template>
	<!-- 车位锁 -->
	<view class="parking-lock">
		<!-- 车位锁支付 -->
		<view class="parking-lock-pay" v-if="parkingLockStatus === 1">
			<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}}</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}} 元</view>
				</view>
			</view>
			<view class="parking-lock-pay-btn">
				<button type="default" @click="payMoney">立即支付</button>
			</view>
		</view>
		<!-- 车位锁开始状态 -->
		<view class="parking-lock-begin" v-else-if="parkingLockStatus === 2">
			<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>
		<!-- 车位锁正在状态 -->
		<view class="parking-lock-loading" v-else-if="parkingLockStatus === 3">
			<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>
		<!-- 开锁完成 -->
		<view class="parking-lock-success" v-else-if="parkingLockStatus === 4">
			<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>
		<view class="parking-lock-pay" v-else-if="parkingLockStatus === 5">
			<view class="parking-lock-tips">{{tipsMsg}}</view>
		</view>
		<!-- 缴费方式-->
		<u-modal
		v-model="payWayPop"
		:title-style="{color: '#404040'}"
		title="缴费方式"
		:show-confirm-button="false"
		:show-cancel-button="false">
			<view class="slot-content">
				<view class="pay-way">
					<view class="pay-way-item" @click="gyBankPay">
						<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
						<view>贵州银行</view>
					</view>
					<view class="pay-way-item" @click="wechatPay">
						<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
						<view>微信支付</view>
					</view>
				</view>
				<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { config } from './../../common/config'
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		data() {
			return {
				// 车位锁状态 1:支付 2:开始开锁 3:开锁中 4:开锁完成
				parkingLockStatus: 1,
				// 支付方式选择弹框
				payWayPop: false,
				// 订单编号
				orderList: [],
				// 提示信息
				tipsMsg: null,
				// 设备编号
				deviceNo: null,
				// 轮询
				timer: null,
				// 订单信息
				orderInfo: {},
				// 订单id
				orderId: null
			}
		},
		onLoad(page) {
			console.log(page)
			if (page.orderId) {
				this.getOrderDetails(page.orderId)
				this.orderList = []
				this.orderId = page.orderId
				this.orderList.push(page.orderId)
				this.deviceNo = page.deviceNo
			} else {
				this.tipsMsg = page.msg
				this.parkingLockStatus = 5
			}
		},
		methods: {
			payMoney() {
				this.payWayPop = true
			},
			// 查询订单状态
			// getOrderStatus(orderId) {
			// 	this.$u.api.getOrderInfo({orderId: orderId})
			// 		.then(res => {
			// 			if (res.code === 200) {
			// 				if (res.data.payStatus === 0 || res.data.payStatus === 3) {
			// 					this.getOrderDetails(orderId)
			// 				} else {
			// 					this.parkingLockStatus = 2
			// 					setTimeout(() => {
			// 						this.parkingLockStatus = 3
			// 					}, 300)
			// 					this.checkEqupment()
			// 				}
			// 			}
			// 		})
			// },
			// 查询订单信息
			getOrderDetails(id) {
				this.$u.api.getOrderDetail({id: id})
					.then(res => {
						console.log(res)
						if (res.code === 200) {
							this.orderInfo = res.data
							if (res.data.payStatus === 1) {
								this.checkEqupment()
							}
						}
					})
			},
			// 检测设备
			checkEqupment() {
				this.timer = setInterval(() => {
					this.getEqumentStatus(this.deviceNo)
				}, 1000)
			},
			// 查询设备状态
			getEqumentStatus(orderNo) {
				console.log(orderNo)
				this.$u.api.getEquomentInfo({orderNo: orderNo})
					.then(res => {
						if (res.code === 200) {
							console.log(res.data)
							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
							}
						}
					})
			},
			// 返回首页
			cancel() {
				window.location.href = config.jumpHomeUrl
			},
			// 贵阳银行支付
			gyBankPay() {
				this.$u.api.payGzbank({
						orderList: this.orderList,
						deviceNo: this.deviceNo,
						jumpUrl: window.location.href
					}).then(res=>{
						let payUrl = res.data.url;
						this.currentPayUrl=encodeURIComponent(res.data.url);
						this.$u.route({
							url: 'pages/payLists/pay',
							params: {
								currentPayUrl: this.currentPayUrl
							}
						});
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			// 微信支付
			wechatPay() {
				const openId = this.$store.state.vuex_wxinfo.openId
				if (openId) {
					this.getWXPay(this.orderList)
				} else {
					this.getCode()
				}
			},
			async getWXPay(list){
				let params = {
					orderList: list,
					deviceNo: this.deviceNo,
					openid: this.$store.state.vuex_wxinfo.openId
				};
				await this.$wxApi.config();
				this.$pay.wechatPay(params).then(res =>{
					if(res.code == 0){
						// 成功
						
					}else if(res.code == 1){
						// 取消
						// uni.redirectTo({
						// 	url: '/pages/userCenter/myOrder/myOrder'
						// })
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: '支付失败，请检查!',
							type: 'error',
							// url: '/pages/user/index'
						});
					}
					setTimeout(() => {
						window.location.reload()
					}, 1000)
				});
			},
			getCode () {
				var local = window.location.href // 获取页面url
				let locationLocaturl = window.location.search;
				this.code = getUrlParams(locationLocaturl, "code"); // 截取code
				if (this.code == null || this.code === '') { // 如果没有code，则去请求
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
				} else {
					this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
				}
			},
			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
				this.$u.api.getWXInfo(code).then((res) => {
					if (res.code === 200 ) {
						this.$u.vuex('vuex_wxinfo', res.data);
						// 继续支付
						this.getWXPay(this.orderList)
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			}
		}
	}
</script>

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