parking-manage-mobile/pages/whiteList/editWhite.vue

<template>
	<view class="container">
		<u-navbar title="编辑会员车辆"  :background="{backgroundColor: '#ffffff'}" class="top-navbar" title-size="30">
			<view slot="right" class="my-nav-right" @tap="delHandler" v-if="isUpdate"><u-icon name="trash" size="40" color="#2979ff"></u-icon></view>
		</u-navbar>
		<u-form :model="white" ref="uForm" style="background-color: #ffffff;" :label-style="formLabelCss" label-width="180">
			<u-form-item label="持有人"><u-input v-model="white.memberName" placeholder="姓名或单位名" @focus="whenOthFocus"/></u-form-item>
			<u-form-item label="持有人电话*" prop="memberPhone"><u-input v-model="white.memberPhone" placeholder="联系电话" @focus="whenOthFocus"/></u-form-item>
			<u-form-item label="车牌号码*" prop="memberCarNum">
				<!--<u-input v-model="white.memberCarNum" placeholder="请输入完整车牌号码" maxlength="8" disabled="disabled" @tap="carboardShow=true"/>-->
				<view @click="openCarboard" style="width:500rpx;height:70rpx;">
					{{white.memberCarNum}}
					<text style="color:#c0c4cc;font-size:28rpx;" v-show="white.memberCarNum==null || white.memberCarNum.length==0">请输入完整车牌号码</text>
				</view>
			</u-form-item>
			<!-- <u-form-item>
				<u-message-input  :value="white.memberCarNum" :maxlength="maxlength" :breathe="true"  :disabled-keyboard="true" :fontSize="50" :width="70" @focus="carboardShow=true"></u-message-input>
			</u-form-item>-->
			
			<u-form-item label="使用场所*" prop="parkingName">
				<u-input v-model="white.parkingName" type="select" @click="parkSelShow = true;whenOthFocus()" placeholder="选择可使用的停车场" @focus="whenOthFocus"/>
			</u-form-item>
			<u-form-item label="使用期限*">
				<!-- <u-input :value="expireDateRange" type="select" @click="showCalendar = true;" placeholder="选择起始截止日期"/> -->
			</u-form-item>
			
			<u-form-item prop="memberStartTime">
			   <u-input  type="select" @click="timePickShow = true;timePickFor='memberStartTime';whenOthFocus()" placeholder="选择起始时间" :value="white.memberStartTime"/>
			</u-form-item>
			
			<u-form-item  prop="memberEndTime">
			   <u-input  type="select" @click="timePickShow = true;timePickFor='memberEndTime';whenOthFocus()" placeholder="选择截止时间" :value="white.memberEndTime"/>
			</u-form-item>
			
			<u-form-item label="类型">
				<text>{{white.memberType==0?'充电附赠':(white.memberType==1?'正式会员':'')}}</text>
			</u-form-item>	
			
			
		</u-form>
		
		<u-picker mode="selector" v-model="parkSelShow"   :range="myParkSites" range-key="parking_name" @confirm="confirmPark"></u-picker>
		
		<u-picker mode="time" v-model="timePickShow" :params="timePickParams" @confirm="confirmTimePick"></u-picker>
		
		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
		
		
		<ucarkeyboard ref="uKeyboard" mode="car" :zIndex="999999" :showTips="false" :mask="true"  :confirmBtn="true" :mask-close-able="false" :tooltip="true" v-model="carboardShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
	    
		<view class="btn-bar">
			<u-button type="primary" style="flex:2;" :disabled="!(white.memberCarNum&&white.parkingName&&white.memberPhone&&white.memberStartTime)" @click="saveData">保存</u-button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/apis/whiteBill.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	export default {
		components: {
			ucarkeyboard
		},
		data() {
			return {
				carboardShow: false,
				maxlength:8,
				formLabelCss:{
					'color':'#7d7d7d'
				},
				isUpdate:false,
				white:{
					memberName:'',
					memberPhone:'',
					memberCarNum:'',
					parkingName:'',
					memberStartTime:'',
					memberEndTime:'',
					parkId:'',
					memberType:null
				},
				timePickShow:false,
				parkSelShow:false,
				myParkSites:[],
				showCalendar:false,
				timePickFor:'',
				timePickParams:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				rules:{
					memberPhone:[
						{
							pattern: /1\d{10}/,
							message: '请输入有效的持有人电话',
							trigger: 'blur'
					   }
					],
					memberCarNum:[
						{
							min:7,
							max:8,
							message: '请输入有效的车牌号码',
							
						}
					],
					parkingName:[
						{
							required:true,
							message: '请选择一个停车场',
							trigger: 'blur'
						}
					],
					memberStartTime:[
						{
							required:true,
							message: '请选择一个起始时间',
							trigger: 'blur'
						}
					],
					memberEndTime:[
						{
							required:true,
							message: '请选择一个截止时间',
							trigger: 'blur'
						}
					]
				}
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
				if(!this.isUpdate){
					//document.querySelectorAll('.uni-page-head .uni-page-head-ft .uni-page-head-btn')[0].querySelector('.uni-btn-icon').innerText='';
				}
		},
		onLoad(opts){
			this.myParkSites=api.getMyParkSites();
			if(opts.id!=null){
				this.loadDate(opts.id);
				this.isUpdate=true;
			}
			else{
				

				

			}
			
			
		},
		
		methods: {
			whenOthFocus(){ //其它输入聚焦会弹出系统键盘，所以要关闭车牌输入键盘
				this.carboardShow=false
			},
			openCarboard(){
				this.carboardShow=true
				if(this.white.memberCarNum && this.white.memberCarNum.length>0){
					this.$refs.uKeyboard.changeCarInputValue();
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				if(this.white.memberCarNum.length>=this.maxlength){
					return
				}
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				this.white.memberCarNum += val;
			
				if(this.white.memberCarNum.length == 1) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},			
			// 退格键被点击
			backspace() {
				if (this.white.memberCarNum.length>0) {
					this.white.memberCarNum = this.white.memberCarNum.substr(0, this.white.memberCarNum.length - 1);
				}
				
				let inputVal =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.white.memberCarNum.length == 0 && inputVal) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},			
			confirmPark(data){
				let sel=this.myParkSites[data[0]];
				this.white.parkingName=sel.parking_name;
				this.white.parkId=sel.park_id;
			},
			confirmTimePick(date){
				//console.log(date)
				if(this.timePickFor&&this.timePickFor!=''){
					this.white[this.timePickFor]=date.year+"-"+date.month+'-'+date.day+" "+date.hour+":"+date.minute+":"+date.second;
				}
				
			},
			changeCalendar(e){
				this.white.memberStartTime=e.startDate;
				this.white.memberEndTime=e.endDate;
			},
			loadDate(id){
				uni.showLoading({
					title:'加载中...'
				});
				
				api.getOne(id).then(resp => {
					console.log(resp)
					uni.hideLoading();
					if(!resp.success){
						return;
					}
					
					//this.memberRecord=resp.data;
					let {memberName,memberPhone,memberCarNum,parkingName,memberStartTime,memberEndTime,parkId,memberType,id}=resp.data;
					this.white={memberName,memberPhone,memberCarNum,parkingName,memberStartTime,memberEndTime,parkId,memberType,id};
					console.log(this.white);
					
				}).catch(error => {
					uni.hideLoading();
				});
			},
			saveData(){
				this.$refs.uForm.validate(valid => {
					if(!valid){
						console.log('验证失败');
						return;
					}
					else{
						this.saveSubmit()
					}
				});	
				
				
				
			},
			saveSubmit(){
				let apifun=this.isUpdate?api.saveForUpdate:api.saveForAdd;
				uni.showLoading({
					title:'保存中...'
				});
				let submitData={...this.white};
				delete submitData['memberType'];
				console.log(this.isUpdate);
				apifun(submitData).then(resp => {
					console.log(resp)
					uni.hideLoading();
					if(!resp.success){
						uni.showToast({
							title: resp.msg||'操作失败',
							icon:'none'
						});
					}
					else{
						uni.showToast({
							title: '操作成功',
							icon:'success'
						});
						setTimeout(function(){
							uni.$emit('reloadWhiteList');
							uni.navigateBack();
						},1000);
						
					}
				}).catch(error => {
					uni.hideLoading();
				});
			},
			delHandler(id){
				uni.showModal({
				    title: '操作确认',
				    content: '确定要删除吗？',
				    success: (res)=> {
				        if (res.confirm) {
							
							if(!this.white.id){
								uni.showToast({
									title: '无此记录',
									icon:'none'
								});
								return;
							}
							
				            api.del(this.white.id).then(resp => {
								if(!resp.success){
									uni.showToast({
										title: resp.msg||'操作失败',
										icon:'none'
									});
								}
								else{
									uni.showToast({
										title: '操作成功',
										icon:'success'
									});
									setTimeout(function(){
										uni.$emit('reloadWhiteList');
										uni.navigateBack();
									},1000);
								}
				           	
				           }).catch(error => {
				           	
				           });
						   
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				})
				
			}
		}
		
		/* computed:{
			expireDateRange(){
				return this.white.memberStartTime?(this.white.memberStartTime+' 至 '+this.white.memberEndTime):'';
			}
		} */
	}
</script>

<style>
	page{
			
			background-color: #f4f4f4;
			font-family: '华文行楷';
			height: 100%;
		}
	.my-nav-right{
		margin:0rpx 20rpx;
	}
	.u-form-item{
		padding:10rpx 20rpx;
	}
	.btn-bar{
		margin:100rpx 0rpx;
		padding:0rpx 20rpx;
		/* display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center; */
	}
	
	/* .custom-btn{
		flex:1;
		border-top-right-radius: 20rpx !important;
		border-bottom-right-radius: 0rpx;
	} */
	
	
</style>