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="姓名或单位名"/></u-form-item>
			<u-form-item label="持有人电话*" prop="memberPhone"><u-input v-model="white.memberPhone" placeholder="联系电话"/></u-form-item>
			<u-form-item label="车牌号码*" prop="memberCarNum"><u-input v-model="white.memberCarNum" placeholder="完整车牌号码"/></u-form-item>
			<u-form-item label="使用场所*" prop="parkingName">
				<u-input v-model="white.parkingName" type="select" @click="parkSelShow = true" placeholder="选择可使用的停车场"/>
			</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';" placeholder="选择起始时间" :value="white.memberStartTime"/>
			</u-form-item>
			
			<u-form-item  prop="memberEndTime">
			   <u-input  type="select" @click="timePickShow = true;timePickFor='memberEndTime';" 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>
		
		
		<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'
	
	export default {
		data() {
			return {
				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: /\d{11}/,
							message: '请输入有效的持有人电话',
							trigger: 'blur'
					   }
					],
					memberCarNum:[
						{
							required:true,
							message: '请输入有效的车牌号码',
							trigger: 'blur'
						}
					],
					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: {
			
			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;
					}
				});	
				
				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){
				if(!this.white.id){
					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 => {
					
				});
			}
		}
		
		/* 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:40rpx 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>