jp-charge/pagesFinance/accountType8/personmanage/addinfo.vue

<template>
	<view>
		<ujp-navbar :title="id!=0?'编辑':'新增'">

			<view slot="right" @click="infodelete()" v-if="id!=0" style="margin-right: 20px;">
				<span class="delete">删除</span>
			</view>
		</ujp-navbar>
		<u-keyboard ref="uKeyboard" @change="valChange" @backspace="backspace" mode="car" v-model="show"></u-keyboard>

		<view class="ower-infos">

			<view class="infos-item">
				<view class="title">
					员工类型<text class="asterisk">*</text>
				</view>
				<view class="content">
					<u-radio-group 
					@change="radioGroupChange"
					v-model="obj.entAccountEnabled">
						<u-radio name="1">
							充电员工
						</u-radio>
						<u-radio name="0">
							普通员工
						</u-radio>
					</u-radio-group>

				</view>

			</view>
			<view class="infos-item">
				<view class="title">
					手机号码<text class="asterisk">*</text>
				</view>
				<view class="content">

					<u-input v-model="obj.phone" placeholder="请填写手机号码" />

				</view>

			</view>
			<view class="infos-item">
				<view class="title">
					车主姓名<text class="asterisk">*</text>
				</view>
				<view class="content">

					<u-input v-model="obj.userName" placeholder="请填写车主姓名" />
				</view>

			</view>
			
			<view class="infos-item border-none" v-if="obj.entAccountEnabled==0">
				<view class="title">
					车牌号码<text class="asterisk">*</text>
				</view>
				<view class="content" @click="show=true">

					{{obj.carNum?obj.carNum:'请填写车牌号码'}}

				</view>

			</view>

			<view v-else>
				<view class="infos-item border-none"   v-for="(item,i ) in carlist" :key="i">
					<view class="title">
						车牌号码{{i+1}}
					</view>
					<view class="content2"
					 :class="{
						 content3:!item.id
					 }"
					 @click="content2click(i,item)">
				
						{{item.carNum?item.carNum:'请选择企业车牌'}}
							
						
					</view>
					<view class="icon" @click="iconClick(i)" >
					
					
						<u-icon   color="#00B962"
						
						 v-if="i==0"
						
						name="plus-circle" size="40"></u-icon>
						<u-icon
						   v-if="i!=0"
						 name="minus-circle" size="40"></u-icon>
						
					
					</view>
				
				</view>
			</view>
			 

		</view>

		<u-button type="primary" @click="submit()">保存</u-button>
		
		<u-popup
		v-model="showSelect" :closeable="true"
		 mode="bottom"  border-radius="30"	 >
		
			<view class="indexData5content">
				<view class="contentTitle">
					选择充电车辆
				</view>
					<u-input :border="true"
					  v-if="querycarList.length"
					 v-model="querycarListvalue" type="text"  placeholder="搜索车牌号码(不区分大小写)" />

				<view style="text-align: center;margin-top: 100px" v-if="!querycarList.length">
					<img src="@/assets/img/blankpage.png">
					<view>车辆为空，请先添加车辆</view>
				</view>
				<scroll-view scroll-y="true" v-else style="height: 520rpx;">
					
					<view style="padding-bottom: 30rpx;" >
						<u-radio-group 
						style="width: 100%;"
						v-model="defaultsCar.id" size="42">
							<view class="contentbody">
								
								<view v-for="(item,index) in querycarList"
								v-show="!item.select&&item.carNum.indexOf(querycarListvalue.toUpperCase())>-1"
								 @click="popupclickCar(item)"
								 class="contentItem" :key="index" >
									<view class="span1">{{item.carNum}}</view>
									<view class="span2"  >
										<span v-show="!item.vin" style="color:#fff" >aaa</span>
										<img  v-show="item.vin"  style="vertical-align: bottom;"   width="20"  src="@/assets/img/riLine-link-m.png"/>
										<span v-show="item.vin" style="color:#999999 " >已关联Vin码</span>
										
									</view>
									
									<view  class="span3">
										
									<u-radio 
									  :name="item.id">
													<span style="color:#fff">.</span>	
									</u-radio>
									</view>
								</view>
							</view>
						</u-radio-group>
					</view>
					
				</scroll-view>
				 
			</view>
		
		</u-popup>
		
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import * as API_at8 from '@/apis/accountType8.js'
	
	import {
		checkPhone
	} from '@/utils'
	export default {
		data() {
			return {
				show: false,
				carlist: [{}],
				querycarList:[],
				value: '',
				uuid: '',
				id: "",
				querycarListvalue:"",
				platform: "",
				obj: {
					platform: "",
					userName: "",
					phone: "",
					carNum: "",
					entAccountEnabled: "0",
					vipUserId: "",
				},
				defaultsCar:{
					id:''
				},
				showSelect:false,
				pid:"",
			}
		},
		onReady() {

			if (this.id != 0) {
				this.getInfo()
			}else{
				this.getList()	
			}
			
		},
		onLoad(op) {
			this.platform = op.p
			this.id = op.id
			this.pid = op.pid
			this.uuid = op.uuid;

		},
		methods: {
			content2click(i,item){
				 this.showSelect=true,
				 this.defaultsCar.i=i
				this.defaultsCar.id=item.id
				
				var carlist= this.carlist;
				var sz=[]
				for(var i in carlist){
					var item=carlist[i]
					if(item.id){
						sz.push(item.id)
					}
				}
				var accountCarIds=sz.join()
				var querycarList=this.querycarList
				for(var i in querycarList){
					var item=querycarList[i]
					item.select=false;
					if(accountCarIds.indexOf(item.id)>-1){
						item.select=true;
					}
				}
				
				
			},
			
			radioGroupChange(e){
					
					this.obj.entAccountEnabled=e;
					console.log(this.obj.entAccountEnabled)
					this.$forceUpdate()
			},
			iconClick(i){
					if(i==0){
						this.carlist.push({});
					}else{
						
						this.carlist.splice(i,1);
					}
			},
			popupclickCar(item){
				this.defaultsCar.id=(item.id)
				 
				 
				this.carlist[this.defaultsCar.i]=item
				this.showSelect = false;
			},
			getList() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				
				
				API_at8.entCarList({
					entAccountId:this.pid,
					pageIndex:1,
					pageSize:9999
				}).then((res) => {
			
					this.querycarList = res.data.data;
					//this.recordsTotal = res.data.recordsTotal
					uni.hideLoading()
			
				}).catch(error => {
					uni.showToast({
			
						title: error
					})
				})
			},
			confirmCar(){
				
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				console.log(this.value);
				this.obj.carNum = this.value
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
				this.obj.carNum = this.value
			},

			infodelete() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.obj.platform = this.platform
				API.vipUserDelete(this.obj).then((res) => {
					uni.hideLoading()
					this.carhelp.set("addOwnerInformation", {
						uuid: this.uuid,
						selectObj: this.obj
					})
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '操作成功',
						success: function(res) {

							uni.navigateBack({

							})
						}
					});

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			submit() {

				if (!this.obj.phone) {
					uni.showToast({
						title: "请填写手机号码"
					})
					return false
				}

				if (!this.obj.userName) {
					uni.showToast({
						title: "请填写车主姓名"
					})
					return false
				}
				if (!this.obj.carNum&&this.obj.entAccountEnabled==0) {
					uni.showToast({
						title: "请填写车牌号码"
					})
					return false
				}
				if(this.obj.entAccountEnabled==1){
					var sz=[]
					//
					var carlist= this.carlist;
					for(var i in carlist){
						var item=carlist[i]
						if(item.id){
							sz.push(item.id)
						}
					}
					this.obj.accountCarIds=sz.join()
					
				}
				var checkPhoneResult = checkPhone(this.obj.phone);

				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				this.obj.platform = this.platform
				API.vipUserSave(this.obj).then((res) => {
					uni.hideLoading()
					this.carhelp.set("addOwnerInformation", {
						uuid: this.uuid,
						selectObj: this.obj
					})
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '操作成功',
						success: function(res) {

							uni.navigateBack({

							})
						}
					});

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getInfo() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.vipUserDetails({
					vipUserId: this.id,

				}).then((res) => {

					this.obj = res.data.vipUser;
					var entRegCarList=res.data.entRegCarList;
					this.querycarList = entRegCarList;
					this.obj.vipUserId = this.id
					var carlist=[];
					if(this.obj.accountCarIds){
						
						for(var i in entRegCarList){
							var item=entRegCarList[i];
							
							if(this.obj.accountCarIds.indexOf(item.id)>-1){
								
								carlist.push(item);
							}
						}
						
					}
					if(carlist.length){
						this.carlist=carlist
					}else{
						this.carlist=[{}]
					}
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.indexData5content {
		padding: 40rpx 40rpx;
	.contentTitle{
		color:#333333;
		font-size: 40rpx;
		
		font-weight: bold;
		margin-bottom: 8px;
	}
		.contentbody{
			
		  width: 100%;
			  display: block;
			
			  .contentItem{
				  border-bottom: 1px solid #ededed;
				    padding:12rpx 0;
				  font-size: 32rpx;
				   display: flex;
				   width: 100%;
				   .span1{
					    padding-top:8rpx ;
					    width: 50%;
				   }
				   .span2{
					     padding-top:8rpx ;
				   					    width: 35%;
				   }
				   .span3{
					     padding-top:8rpx ;
						 padding-left: 8rpx;
				   		 width: 10%;
										  
				   }
			  }
		}
	}
	
	page {
		background-color: #f3f4f7;
	}

	.ower-infos {
		background-color: #fff;
		padding-left: 16px;

		.border-none {
			border: none !important;
		}

		.infos-item {
			padding: 24rpx 0;
			display: flex;
			border-bottom: 1px solid #e9e9e9;

			.title {
				width: 30%;
				font-size: 32rpx;
				line-height: 64rpx;
				color: #7d7d7d;

				.asterisk {
					color: #EE3138;
				}
			}

			.content {
				
				font-size: 32rpx;
				line-height: 64rpx;
				width: 70%;
			}
			.content2 {
				
				font-size: 32rpx;
				line-height: 64rpx;
				width: 40%;
			}
			.content3 {
				
				color: rgba(172, 172, 172, 100);
			}
			.icon{
				line-height: 64rpx;
				width: 10%;
			}
		}
	}

	.u-btn {
		background-color: rgba(0, 90, 217, 100);
		margin: 16px;
		height: 44px;
		line-height: 44px;
		font-size: 18px
	}

	.delete {
		color: rgba(238, 49, 56, 100);
		font-size: 16px;
	}
</style>