jp-xpgj-GA-file/src/projects/parking/views/Car/Input.vue

<template>
	<div>
		<common-car ref="common" @asynCallBack="asynCallBack"></common-car>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-car-index">
			<div class="vongi-car-banner">
<!-- 				<h5 class="mui-ellipsis">停车位置：{{detail.parkingName}}</h5>
 -->				<div class="flew">
					<input type="text" v-model="searchForm.carNumber" placeholder="请输入车牌号查询">
					<button @click="searchByCarNumber" class="mui-btn mui-btn-blue">查询</button>
				</div>
			</div>
			
		</div>
		
			<div class="vongi-qingjiadt" v-if="kongResult">
				<form class="mui-input-group vongi-cd-payli">
					
				 <div class="mui-input-row">
				 	<label>车牌号</label>
				 	<span v-text="channelForm.carNumber"></span>
				 </div>
					<div class="mui-input-row">
						<label>生效时间</label>
						<span v-text="detail.inTime"></span>
					</div>
					<div class="mui-input-row">
						<label>截止时间</label>
						<span v-text="detail.memberTime"></span>
					</div>
				</form>
				<div class="fyy-footer padd30">
					<div class="bindfyy-btn">
						<button type="button" @click="submit" class="mui-btn mui-btn-primary ">确认录入</button>
					</div>
				</div>
			</div>
			
		 
	 
		
		
		<div class="vongi-car-footer" style="
    bottom: 80px;
">
			<div class="mui-media-body">
				<b>注:</b>
				<br>
				1.请于确认录入后1分钟再离场。
				
				<br>
				2.会员续租车辆请于到期后再到前台扫码续租
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import * as API_Car from '@/apis/car'
	import CommonCar from '@/components/CommonCar.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'CarSearch',
		components: {
			CommonCar,
			Loading,
			TopHeader,
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '车牌查询',

				searchForm: {
					carNumber: '',
					companyId: '',
				},
				
				channelForm: {
					channelId: '',
					companyId: '',
				},

				kongResult: false,

				detail: {}
			}
		},
		created() {
			if (this.$route.query.companyId) {
				//入口页必须带merchantId
				this.set_parking_company_id(this.$route.query.companyId);
			} else {
				if (!this.parking_company_id) {
					mui.alert('参数错误');
				}
			}

			

		},
		methods: {
			//获取停车场信息
			 submit(){
				 	this.isLoading = true;
				 API_Car.userGetCarMember(this.channelForm.carNumber,this.channelForm.companyId).then(response => {
					
				 	this.isLoading = false;
				 	this.kongResult = false;
					this.searchForm.carNumber=""
					mui.alert('录入成功');
				 
				 }).catch(error => {
				 	this.isLoading = false;
				 	mui.toast(error);
				 	
				 })
			 },
			//检测
			checkForm() {
				if (!this.searchForm.carNumber) {
					mui.toast('请输入车牌号码');
					return false;
				} else {
					return true;
				}
			},
			//查询车牌信息
			searchByCarNumber() {
				if (this.checkForm()) {
					this.isLoading = true;
					
					API_Car.userGetCarDetail(this.searchForm.carNumber,this.parking_company_id).then(response => {
						this.detail=response;
						this.channelForm={
							carNumber:this.searchForm.carNumber,
							companyId:this.parking_company_id
						}
						this.isLoading = false;
						this.kongResult = true;
					

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
						
					})
				}
			},
			
			asynCallBack() {},
			...mapMutations({
				set_parking_company_id: types.SET_PARKING_COMPANY_ID,
			})
		},
		mounted() {
			
		
		},
		destroyed() {

		},
		computed: {
			...mapGetters({
				wx_openId: 'wx_openid',
				ali_openId: 'ali_openid',
				parking_company_id: 'parking_company_id'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>