JP-ChargeTeam51/pages/parking/search.vue

<template>
	<view>
		<view class="wrap" v-if="!kongResult">
			<u-navbar title="车牌查询" :is-back="false">
			</u-navbar>
			<view class="key-input">
				<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
			</view>
			<ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
			 
			<!-- <view class="carNone"  v-if="kongResult">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p>没有找到停车信息</p>
			</view> -->
			<u-button class="login-btn" type="success" shape="circle" @click="keepCar">查询</u-button>
			
			<view style="padding: 20px;">
				<b>停车场收费说明:</b><br>
				缴费后请于规定时间离场，离场会自动抬杆。如果找不到停车信息，或者临牌停车，请至集中缴费处缴纳现金。
				
			</view>
		</view>
		
		<view class="wrap"  v-if="kongResult">
			<u-navbar title="停车缴费">
				
			</u-navbar>
			
			<view >
				<view class="">
					<view class="cartitle"> 缴费信息</view>
					<view class="info" >
						<view class="info-name">
							车牌号
						</view>
						<view class="info-text">
							{{detail.carNumber}}			
							<a @click="goToBack" class="color4fc5f7 marginl5">修改</a>
					
						</view>
					</view>
					
					<view class="info" >
						<view class="info-name"  style="font-size: 16px;">
							停车费
						</view>
						<view class="info-text" style="font-size: 16px;">
							 			
 					{{detail.price}}元
						</view>
					</view>
					<view class="cartitle"> 停车详情</view>
					<view class="info" >
						<view class="info-name">
							停车位置
						</view>
						<view class="info-text">
							 			
					{{detail.parkingName}}
						</view>
					</view>
					<view class="info" >
						<view class="info-name">
							入场时间
						</view>
						<view class="info-text">
							 			
						{{detail.inParkingTime}}
						</view>
					</view>
					<view class="info" >
						<view class="info-name">
							停车时间
						</view>
						<view class="info-text">
							 			
					{{detail.parkingTimeStr}}
						</view>
					</view>
				
				
 			</view>
			<u-button class="login-btn" type="success" shape="circle" @click="pay()">支付离场</u-button>
			
			<u-button class="login-btn2"  type="default" shape="circle" @click="keepCar">刷新</u-button>
			
			 
		</view>
		
		
		</view>
	</view>
</template>

<script>
	
	import * as API from '@/apis/parking.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'

	import {
		wxPayJs
	} from '@/utils/wxpay'
	import {
		aliPayJs
	} from '@/utils/alipay'
	
	export default {
		components: {
			ucarkeyboard
		},
		data() {
			return {
			 
				maxlength:8,
				keyShow: true,
				detail:{},
				form: {
					carNum: '鄂',
					parkId: "",
				},
				
				kongResult: false,
			}
		},
		onLoad(op) {
			
			if(op.id){
				this.form.parkId=op.id
			}else{
				uni.showModal({
					content:"参数错误"
				})
			}
			
		},
		onReady() {
			this.$refs.uKeyboard.changeCarInputMode();
		},
		methods: {
			//微信支付
			payWx() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.parkingWxPay({
					id: this.detail.id,
					openId: this.carhelp.getOpenId()
				}).then(data => {
					
					data.data.url = window.location.href.split("#")[0] + "/#/car/payResult";
			
					uni.hideLoading()
					wxPayJs(data.data)
				}).catch(error => {
						uni.hideLoading()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//支付宝支付
			payAli() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.parkingTradeWebPay({
					id: this.detail.id,
					openId:  this.carhelp.getOpenIdALI()
				}).then(response => {
				 	uni.hideLoading()
					let opthions = {
						tradeNo: response.data.tradeOrder.tradeNo,
						succUrl: window.location.href.split("#")[0] + "/#/pages/parking/payResult?id="+ response.data.tradeOrder.tradeNo,
						cancelUrl: window.location.href.split("#")[0] + "/#/pages/parking/search?id=" + this.form.parkId,
					}
					console.log(opthions);
					aliPayJs(opthions);
				}).catch(error => {
						uni.hideLoading()
					 uni.showToast({
					 	title: error,
					 	icon: "none"
					 })
				})
			},
			//支付
			pay() {
				var IS_WEIXIN = /MicroMessenger/.test(window.navigator.userAgent)
				var IS_ALI = /AlipayClient/.test(window.navigator.userAgent)
				
				
				if (IS_WEIXIN) {
					this.payWx();
				} else if (IS_ALI) {
					this.payAli();
				} else {
					this.payWx();
					uni.showModal({
						content:"请用微信或支付宝打开"
					})
				}
			},
			
			 goToBack() {
			 	this.kongResult=false
			 },
			 
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				if(this.form.carNum.length>=this.maxlength){
					return
				}
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				this.form.carNum += val;
				console.log(this.form.carNum);
				
				if(this.form.carNum.length == 1) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if (this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
				console.log(this.form.carNum);
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.form.carNum.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			keepCar() {
				console.log(this.form)
				if (this.form.carNum.length <7) {
					uni.showToast({
						title:"车牌号至少输入7位"
					})
					return false;
				} 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.carPayDetail(this.form).then((res) => {
					
					uni.hideLoading();
					
					this.detail = res.data;
					this.kongResult=true;
				}).catch(error => {
						uni.hideLoading()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.cartitle{
		font-size: 16px;
		margin-left: 20px;
		font-weight: bold;
		 margin-top: 5px;
	}
	.color4fc5f7{
		color:#4fc5f7;
		margin-left: 5px;
	}
	.info {
		    font-size: 14px;
			display: flex;
			justify-content: space-between;
			margin: 0 40px;
			// height: 48px;
			line-height: 48px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(16, 16, 16, 100);
			
			
			border-bottom: 1px solid #ededed;
	
			.info-text {
				
	/*			line-height: 23px;*/
			//	padding: 13px 0 12px;
				//width: 200px;
				text-align: right;
			}
		}
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.u-char-item{
		width: 29px !important;
	}
	.u-drawer{
		z-index: -1 !important;
	}
	/deep/.u-char-item {
		width: 30px !important;
		height: 40px !important;
		font-size: 18px !important;
	}

	.key-input {
		padding-top: 24px;
	}

	.default {
		margin: 16px 28px;
	}

	.login-btn {
		margin: 28px;
		background-color: #00B962 !important;
		border-color: #00B962 !important;
		color: #fff !important;
	}
	.login-btn2 {
		margin: 28px;
	
	}
</style>