车位申请

src/projects/business/apis/Master/Property/car.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+//申请
+export function submitParkingApply(params) {
+	return request({
+		url: '/mobile/personInfoApi/submitParkingApply',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+//车库位子
+export function parkingList(params) {
+	return request({
+		url: '/mobile/parkingInfoApi/parkingList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+//申请单位
+export function parkingUnit(params) {
+	return request({
+		url: '/mobile/parkingInfoApi/parkingUnit',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+//车库照片
+export function parkingPicList(params) {
+	return request({
+		url: '/mobile/parkingInfoApi/parkingPicList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

src/projects/business/views/Master/Property/Car/Apply.vue

@@ -1,27 +1,23 @@
 <template>
 <div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">车位申请</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
-		<div class="mui-content">
+ 	<top-header :pageTitle="pageTitle"   v-if="step==1"  ></top-header>
+
+
+		<div class="mui-content"  v-if="step==1" >
 			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>业主姓名</label>
-						<span>赵刚</span>
+						<span>{{person_data.name}}</span>
 					</div>
 					<div class="mui-input-row">
 						<label>手机号码</label>
-						<span>15500001111</span>
-					</div>
-					<div class="mui-input-row">
-						<label>房号</label>
-						<span>1-1-2201</span>
+						<span>{{person_data.phone}}</span>
 					</div>
+
 					<div class="mui-input-row">
 						<label>车牌号</label>
-						<input type="text" class="mui-input-clear" placeholder="输入车牌号">
+						<input type="text" class="mui-input-clear" v-model="detail.carNum" placeholder="输入车牌号">
 					</div>
 				</form>
 			</div>
@@ -29,32 +25,302 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>选择车位</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">请选择</button>
+						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%" @click="selectCar"  v-text="carName" >请选择</button>
 					</div>
 					<div class="mui-input-row">
 						<label>开始时间</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">请选择</button>
+						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%" @click="selectTime" v-text="detail.startTime?detail.startTime:'请选择'"></button>
 					</div>
 					<div class="mui-input-row">
 						<label>租用时长</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:65%">请选择</button>
-					</div>
-					<div class="mui-input-row">
-						<label>截止时间</label>
-						<span>2021-10-20</span>
+						<input type="number"  class="mui-input-clear" style="width: 50%" v-model="detail.num" placeholder="租用时长">
+
+						<span  style="width: 10%">{{unitName}}</span>
+
 					</div>
+
 				</form>
 			</div>
 		</div>
-		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button class="mui-btn mui-btn-primary ">提交</button></div>
+		<div class="fyy-footer"  v-if="step==1" >
+			<div class="bindfyy-btn"><button class="mui-btn mui-btn-primary " @click="submit()">提交</button></div>
+		</div>
+
+
+	<header class="mui-bar mui-bar-nav"  v-show="step==2" >
+		<a class="  mui-icon mui-icon-left-nav mui-pull-left" @click="step=1"></a>
+		<h1 class="mui-title">车位选择</h1>
+	</header>
+	<div class="mui-content margin60" v-show="step==2">
+		<div class="mui-content-padded">
+			<img src="~$project/assets/img/02.jpg" width="100%" />
+		</div>
+		<div class="vongi-meform-pho vongi-car">
+			<h5>车位筛选</h5>
+			<ul class="mui-table-view mui-table-view-radio flew" v-for="(cen,i) in listcen">
+				<template v-for="m in map.get(cen)">
+					<li class="mui-table-view-cell " @click="ckbtn(m,i,cen)" :class="m.show?'mui-selected':''" >
+						<a>
+							{{m.parkingName}}
+						</a>
+					</li>
+				</template>
+
+			</ul>
+
 		</div>
+	</div>
+	<div class="vongi-cashier-btn-row" v-show="step==2">
+		<div class="vongi-cashier-btn-white">
+			<span>当前选择：{{selectName}}</span>
+			<div class="vongi-cashier-btn" v-if="parkingId" @click="okCar">确认选择</div>
+		</div>
+	</div>
+	<loading :visible="isLoading"></loading>
+
 </div>
 </template>
 
+
 <script>
-</script>
+	require('$project/assets/js/mui.picker.min.js');
+
+	import * as API from '@/apis/Master/Property/car'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import {
+
+	} from '$project/utils'
+	export default {
+		name: 'GuestFromInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '车位申请',
+				step:'1',
+
+				detail: {
+					carNum:'',
+					parkingId:'',
+					startTime:'',
+					num:'',
+					unitId:'',
+				},
+				carName:"请选择",
+				unitName:'月',
+				map:null,
+				picList:null,
+				isLoading: false,
+				listcen:[],
+				listcenindex:0,
+				selectName:'',
+				parkingId:'',
+				car:null,
+
+			}
+		},
+		created() {
+			this.map = new Map();
+		},
+		methods:  {
+			okCar(){
+				this.detail.parkingId=this.parkingId;
+				this.carName=this.selectName
+				this.detail.parkingName=this.car.parkingName;
+				this.step='1';
+			},
+			ckbtn(m,i,cen){
+				this.car=m;
+				this.listcen.splice(i+1,this.listcen.length-i+1);
+ 				this.getSelect(m.id);
+				m.show=true;
+				this.selectName="";
+				for(var str in this.listcen){
+
+					if(eval(str+"+1")==this.listcen.length){
+						if(str!="0"){
+							this.selectName+="-";
+						}
+						this.selectName+=m.parkingName;
+						break;
+					}
+					var k= this.listcen[str]
+					var k2= this.listcen[eval(str+"+1")]
+
+					var list=this.map.get(k);
+					for(var i in list){
+						var mod=list[i]
+						if(mod.id==k2){
+							if(str!="0"){
+								this.selectName+="-";
+							}
+							this.selectName+=mod.parkingName;
+
+						}
+					}
+
+				}
+			},
+			//表单校验
+			checkForm() {
 
+				if (!this.detail.unitId) {
+					mui.toast('未配置租用单位，请联系管理员');
+					return false;
+				}else if (!this.detail.carNum) {
+					mui.toast('请输入车牌号');
+					return false;
+				}else if (!this.detail.parkingId) {
+					mui.toast('请选择租用车位');
+					return false;
+				} else if (!this.detail.startTime) {
+					mui.toast('请输入开始时间');
+					return false;
+				}else if (!this.detail.num) {
+					mui.toast('请输入租用时长');
+					return false;
+				}else if(!(/(^[1-9]\d*$)/.test(this.detail.num))){
+					mui.toast('请输入正整数');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			submit(){
+				if (this.checkForm()) {
+					this.isLoading = true;
+
+					API.submitParkingApply(this.detail ).then(response => {
+						this.isLoading = false;
+						mui.toast("操作成功");
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+
+			},
+
+			//选择时间
+			selectTime() {
+				var _this = this;
+
+				var picker = new mui.DtPicker({
+					"type": "date",
+					"beginYear": 2020,
+					"endYear": 2040,
+					"beginDate": new Date(),
+
+				});
+				picker.show(function(rs) {
+					_this.detail.startTime = rs.text;
+				});
+			},
+			//选择停车位
+			selectCar() {
+				this.step=2;
+				if(!this.picList){
+					this.getPic();
+				}
+
+			},
+			//获取详情
+			getPic() {
+
+				API.parkingPicList().then(response => {
+ 					this.picList=response;
+				}).catch(error => {
+ 					mui.toast(error);
+				})
+
+				this.getSelect('');
+			} ,
+			//获取详情
+			getSelect(val) {
+				this.parkingId="";
+				var list =this.map.get(val)
+				var newlist=[];
+				for(var i in list){
+					var mod=list[i];
+					mod.show=false
+					newlist.push(mod);
+				}
+				this.map.set(val,newlist)
+
+				if(list){
+
+
+					if(list.length==0){
+						this.parkingId=val;
+					}else{
+						this.listcen.push(val);
+
+					}
+
+				}else{
+
+					API.parkingList({id:val}).then(response => {
+  						this.map.set(val,response.list)
+
+						if(response.list.length==0){
+							this.parkingId=val;
+						}else{
+							this.listcen.push(val);
+						}
+
+					}).catch(error => {
+
+					})
+
+				}
+
+
+			} ,
+
+			//获取详情
+			getDetail() {
+				this.isLoading = true;
+
+				API.parkingUnit().then(response => {
+					this.detail.unitId=response.unit.id;
+					this.unitName=response.unit.name;
+					this.isLoading = false;
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},asynCallBack(){},
+		},
+		mounted() {
+
+			this.getDetail();
+		},
+
+
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
+</script>
+<style src="$project/assets/css/mui.picker.min.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
 <style>