JP-ChargeTeam51/pages/user/car/carDet.vue

<template>
	<view class="wrap">
		<ujp-navbar title="车辆信息" :background="{
						background: '#b9ead0'
					}" class="wrapbackground1">
 		</ujp-navbar>
		<!-- <p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
		 -->
		 <view class="wrapbackground2">
			<view class="car-head" >
				<view class="car-head-item">
					<img src="@/assets/img/carDet/riFill-parking-box-fill.svg"/>减免停车费
				</view  >
				<view class="car-head-item">
					<img src="@/assets/img/carDet/riFill-arrow-right-circle-fill.svg"/>快速离场
				</view >
				<view class="car-head-item">
					<img src="@/assets/img/carDet/riFill-ticket-2-fill.svg"/>首次认证送卷
				</view>
			</view>
		
		 <p class="car-num" @tap="keyShowBtn(!keyShow)">
			 <span style="color:rgba(238, 49, 56, 1)">*</span>
			 车牌号码<span v-show="!carLicense"
		 		style="color: #9e9e9e;float: right;padding-right: 10px;font-size: 24rpx;">(点击{{keyShow?'收起':'唤起'}}键盘)</span>
				<view style="font-size: 12px;color:rgba(51, 51, 51, 1);margin: 2px 0;">正确填写<span style="color:#ec4f27 ;">绑定车辆</span>的车牌号，可减免部分停车费</view>
				</p>
		 
		<view class="key-input"  @tap="keyShowBtn(true)">
			<umessageInput :focus="true" 
			@selectIndex="getSelectIndex"
			:value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></umessageInput>
		
		</view>
		 </view>
		<p class="car-num" v-show="!keyShow"> <span style="color:rgba(238, 49, 56, 1)">*</span>车辆用途</p>
		<view class="car-type" v-show="!keyShow">
			
			<view class="card"  v-for="(item,i) in carlist" :key="i"
			 @click="usage=item.value"
			 :class="{
				cardselect:usage==item.value,
				cardno:usage!=item.value
			}">
			<view class="cardgo" >
				<view class="cardinfo">
					<img  
					src="@/assets/img/riFill-check-fill.svg" alt="">
					
				</view>
			</view>
				<view class="title">{{item.name}}</view>
				<p class="carimgp">
					<img class="carimg"
					:src="item.img" alt="">
					
				</p>
			</view>
		</view>
		
		<p class="car-num"  v-show="!keyShow" v-if="userInfo.userType==2">
					
					 车辆认证 <span id="talkbubble"  v-if="!carLicense">首次认证送5元代金卷</span>
			
			<view style="font-size: 12px;color:rgba(51, 51, 51, 1);margin: 2px 0;">上传机动车行驶证清晰照片</view>
		</p>
		<view class="car-type" v-show="!keyShow"  v-if="userInfo.userType==2">
			
			<view class="carAuth">
				<view class="mark" v-show="!carAuthImg">
					<view class="text">例</view>
				</view>
				<view class="carAuthIcon" @click="uploadPhoto">
					<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="48"></u-icon>
					
				</view>
				<image class="carAuthImg"  @click="uploadPhoto" v-show="carAuthImg" :src="carAuthImg"></image>
				
				<image class="carAuthImg"  @click="uploadPhoto" v-show="!carAuthImg" src="@/assets/img/carDet/authtest.png"></image>
				
			</view>
			
		</view>
		
		<ucarkeyboard ref="uKeyboard" mode="car"
		  style="    z-index: 999;" :style="!keyShow?'display: none':''"
		 :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace">
			
			<view style="
				text-align: center;
				font-size: 18px;
			">
								<span style="color: #fff;">车牌号:{{form.carNum}}</span>
								<span @tap="keyShow=!keyShow" style="
				float: right;
				padding-right: 10px;
				color: #41a863;
			">确定</span>
							</view>
		</ucarkeyboard>
		
		
		<view class="default"  v-show="!keyShow" >
			
			 <view style="width: 350px;">
			 	<u-checkbox-group>
			 		<u-checkbox class="tips" active-color="green" v-model="value" shape="circle"
			 			@change="checkboxChange()"></u-checkbox>
			 	</u-checkbox-group>
			 	<span>我已阅读并同意</span>
			 	<span @click="gotoUrl('pages/article/details?code=GRXXCLSQS')"
			 		style="color: #3fbd70;">《个人信息处理授权书》</span>
			 
			 </view>
			 <u-button class="login-btn" v-if="!carLicense" type="success" shape="circle" @click="keepCar">保存</u-button>
			<u-button  class="login-btn2"  v-if="carLicense" type="info" shape="circle">已认证</u-button>
						
			
			 <view>.</view>
			 
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	import umessageInput from '@/components/UmessageInput.vue'
	import * as WxJsApi from '@/utils/wxJsApi'
	
	var car1=require("@/assets/img/cartype/car1.png")
	var car2=require("@/assets/img/cartype/car2.png")
	var car3=require("@/assets/img/cartype/car3.png")
	var car4=require("@/assets/img/cartype/car4.png")
	
	export default {
		components: {
			ucarkeyboard,umessageInput
		},
		data() {
			return {
				userInfo:{},
				carLicense:"",
				carAuthImg:"",
				isLogin:false,
				maxlength:8,
				keyShow: false,
				value: false,
				code:"",
				codeId:"",
				form: {
					carNum: '',
					defaultFlag: true,
				},
				selectIndex:-1,
				usage:"",
				carlist:[
					{
						value:1,
						name:"出租车",
						img:car1
					},
					{
						value:2,
						name:"专快车",
						img:car2
					},
					{
						value:3,
						name:"物流车/商用车",
						img:car3
					},
					{
						value:4,
						name:"私家车",
						img:car4
					}
				]
			}
		},
		onLoad(op) {
			
			// //获取微信配置
			// WxJsApi.getWxConfig().then((res)=>{
			
			
			// }).catch(error => {
			// 		//(res)
			// })
			this.userInfo=this.carhelp.getPersonInfo()
			
			if(op.id){
				this.form.id = op.id;	
			}
			this.getCarList();
			if (op.jpcode) {
				var str1 = op.jpcode.slice(0, 19);
				var str2 = op.jpcode.slice(20, 21);
				var str3 = op.jpcode.slice(22);

				if (str1 == 'jp_team51_charge_id') {
					if (str2 == 'A') {
						this.code = str2;
						this.codeId = str3;
					}
				}
			}
			if(op.login){
				this.isLogin=true;
			}
		},
		onReady() {
			//this.$refs.uKeyboard.changeCarInputMode();
			
			this.carLicense=this.carhelp.getPersonInfo().carLicense
			if(this.carLicense){
				this.carAuthImg=this.carLicense
			}
			
		},
		methods: {
			keyShowBtn(keyShow){
				if(this.carLicense){
					uni.showToast({
						title: "车辆认证后不可修改",
						mask: true,
					})	
					return 
				}
				this.keyShow=keyShow;
			},
			uploadFile3(imageSrc){
				// var formData = new FormData();
				// formData.append('photoName', '1.jpg');
				// formData.append('photoBase64Data', imageSrc);
				
				
					var action=process.car.BASE_URL+"uploadBase64"
					var token=this.carhelp.getToken()
					var header={
						'Authorization':token
					}
					 var formData={
					 	photoName:"1.jpg",
						photoBase64Data:imageSrc
					 }
					var _this=this
					uni.showLoading({
					   					title: '上传中',
										mask: true,
					   				})
					   				  uni.uploadFile({
					   					url: action, //仅为示例，非真实的接口地址
					   				//	filePath: imageSrc,
					   					name: 'photoFile',
										header: header,
					   					formData: formData,
					   					success: (res) => {
					   						
					   						uni.hideLoading();
					   						uni.showToast({
					   							title: '上传成功',
					   							icon: 'success',
					   							duration: 1000
					   						})
											
					   						_this.carAuthImg = JSON.parse(res.data).data
											_this.$forceUpdate()
											
											
					   					},
					   					fail: (err) => {
					   						console.log('uploadImage fail', err);
					   						uni.hideLoading();
					   						uni.showModal({
					   							content: err.errMsg,
					   							showCancel: false
					   						});
					   					},
					   				});
									
			},
			uploadFile2(imageSrc){
				WxJsApi.uploadPic(imageSrc).then(response => {
					console.log("error")
				}).catch(error => {
					console.log(error)
				})
			},
			uploadFile(imageSrc){
				var action=process.car.BASE_URL+"uploadPicture"
				var token=this.carhelp.getToken()
				var header={
					'Authorization':token
				}
				var formData={
					subFolder:"/team51/carDet"
				}
				var _this=this
				uni.showLoading({
				   					title: '上传中',
									mask: true,
				   				})
				   				  uni.uploadFile({
				   					url: action, //仅为示例，非真实的接口地址
				   					filePath: imageSrc,
				   					name: 'photoFile',
									header: header,
				   					formData: formData,
				   					success: (res) => {
				   						
				   						uni.hideLoading();
				   						uni.showToast({
				   							title: '上传成功',
				   							icon: 'success',
				   							duration: 1000
				   						})
										
				   						_this.carAuthImg = JSON.parse(res.data).data
				   						_this.$forceUpdate()
										
										
				   					},
				   					fail: (err) => {
				   						console.log('uploadImage fail', err);
				   						uni.hideLoading();
				   						uni.showModal({
				   							content: err.errMsg,
				   							showCancel: false
				   						});
				   					},
				   				});
			},
			uploadPhoto() {
				if(this.carLicense){
					uni.showToast({
						title: "车辆认证后不可修改",
						mask: true,
					})	
					return 
				}
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'],
					success: async (res) => {
						console.log(res)
						var imageSrc = res.tempFilePaths[0]
						this.uploadFile(imageSrc);
							
					},
					fail: (err) => {
					   	console.log('chooseImage fail', err)
					}
				})
			},
			uploadPhoto2() {
				if(this.carLicense){
					uni.showToast({
						title: "车辆认证后不可修改",
						mask: true,
					})	
					return 
				}
				WxJsApi.chooseImage().then(res=>{
					console.log(res)
					var localData = res.localData;
								
					if (localData.indexOf('data:image') != 0) {
						//判断是否有这样的头部
						localData = 'data:image/jpeg;base64,' + localData
					}
					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
					var imageSrc = localData;
					
					
					
					
					this.uploadFile3(imageSrc);
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getCarList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.regUserCarList().then((res) => {
					uni.hideLoading();
					this.carList = res.data;
			
					for(var i=0;i<this.carList.length;i++) {
						var carId = this.carList[i].id
						if(this.form.id == carId||this.carList.length==1) {	
							this.form.id=carId;
							this.form.carNum = this.carList[i].carNum;
							this.form.defaultFlag = this.carList[i].defaultFlag;
							this.value=true
							this.form.usage= this.carList[i].usage;
							this.usage= this.carList[i].usage;
							
							if(this.form.carNum.length == 8) {
								this.carName = '新能源车';
							} else if (this.form.carNum.length == 7) {
								this.carName = '燃油车';
							} else {
								this.carName = '';
							}
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoLink(){
				
				if (this.code == 'A') {
					uni.redirectTo({
						url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
					})
				} else if (this.isLogin){
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}else {
					uni.navigateBack({
					
					})
				}
			},
			
			checkboxChange() {
				this.value = !this.value;
			},
			getSelectIndex(i){
				this.selectIndex=i;
				if(i==0){
					var aaa =	this.$refs.uKeyboard.changeCarInputValue();
					
					if( aaa) {
						this.$refs.uKeyboard.changeCarInputMode();
					}
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				
				if(this.form.carNum.length>=this.maxlength&&this.selectIndex==-1){
					return
				}
				
				if(this.selectIndex==-1){
					this.form.carNum += val;
				}else{
					const replaceStr = (str, index, char) => {
					 const strAry = str.split('');
					 if(index<strAry.length){
						  strAry[index] = char;
					 }
					
					 return strAry.join('');
					 }
					 
					this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,val) ;
					this.selectIndex=-1;
				}
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				
				//(this.form.carNum);
			
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if((this.form.carNum.length == 0) && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}else if(!aaa){
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if(this.form.carNum.length){
					if(this.selectIndex==-1){
						
						this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
						
					}else{
 						const replaceStr = (str, index, char) => {
						 const strAry = str.split('');
						 if(index<strAry.length){
							  strAry[index] = char;
						 }
						
						 return strAry.join('');
						 }
						 
						this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,'') ;
						
						//this.selectIndex=-1;
					}
				}
				
				
				
				
				//(this.form.carNum);
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.form.carNum.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			keepCar() {
				//(this.form)
				if(this.form.carNum.length != 8) {
					uni.showToast({
						title:"请填写新能源车牌"
					})
					return
				}
				if (!this.usage) {
					uni.showToast({
						title: "请选择车辆用途"
					})
					return
				}
				if (!this.value) {
					uni.showToast({
						title: "请阅读并同意《个人信息处理授权书》"
					})
					return
				}
				this.form.usage=this.usage;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.form.photoFile=this.carAuthImg;
				userApi.addRegUserCar(this.form).then((res) => {
					uni.hideLoading();
					
					if(this.carAuthImg){
						var obj=this.carhelp.getPersonInfo()
						obj.carLicense=this.carAuthImg
						this.carhelp.setPersonInfo(obj)
					}
					uni.showModal({
						title:"提示",
						content: "操作成功",
						showCancel: false,
						success: res => {
							this.gotoLink()
						}
					})
					
				}).catch(error => {
					uni.hideLoading();
					uni.showModal({
						title:"提示",
						content: error,
						showCancel: false
					});
				
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wrapbackground1{
		background: rgba(172,236,206,1);
	}
	.wrapbackground2{
		padding-top: 10px;
		padding-bottom: 20px;
		background: linear-gradient(180deg, rgba(172,236,206,1) 0%,rgba(82,211,150,0) 110%);
	}
	.u-char-item{
		width: 58rpx !important;
	}
	.u-drawer{
		z-index: -1 !important;
	}
	::v-deep.u-char-item {
		width: 60rpx !important;
		height: 80rpx !important;
		font-size: 36rpx !important;
	}

	.key-input {
		//padding-top: 24px;
	}
	.car-head{
		    display: flex;
		    align-items: center;
		    justify-content: space-around;
			
			
			border-radius: 50px;
			padding: 12rpx 24rpx;
			margin: 0 48rpx ;
			background-color: #d3f1e0;
			
			.car-head-item{
				display: flex;
				align-items: center;
				color: rgba(0, 90, 48, 1);
				img{
					width: 40rpx;
					height: 40rpx;
				}
			}
	}
	.car-num {
		
		padding-top: 40rpx;
		padding-left:48rpx;
		font-size: 16px;
		line-height: 18px;
	}
	.default {
		margin: 16px 28px;
		padding-bottom: 20px;
	}

	.login-btn {
		//margin: 28px;
		margin-top: 12px;
		background-color: #00B962 !important;
		border-color: #00B962 !important;
		color: #fff !important;
	}
	
	.login-btn2 {
		//margin: 28px;
		margin-top: 12px;
		background-color: #9E9E9E  !important;
		border-color: #9E9E9E  !important;
		color: #fff !important;
	}
	
	.car-type{
		    display: flex;
		    flex-direction: row;
			margin: 0 40rpx;
			flex-wrap: wrap;
	}
	
	.card {
		 width: 45%;
		 margin-right: 5px;
		  margin-left: 5px;
		overflow: hidden;
		padding: 20rpx;
		margin-top: 10px;
		height: 150rpx;
		.title{
			
			font-weight: bold;
		}
		.carimgp{
			float: right;
		}
		.carimg{
			width: 180rpx;
			height: 64rpx;
		}
		
	}
	.cardselect {
		border-radius: 8px;
		border: 2px solid rgba(0, 185, 98, 1);
		.title{
			color:#00B962;
			font-weight: bold;
		}
		.cardgo{
				position: relative;
			 
				.cardinfo{
					    background-color: #57ad55;
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					    top: -12px;
					    right: -12px;
						    border-radius: 0 0 0 4px;
							img{
								width: 36rpx;
							}
				}
		}
	}
	.cardno {
		border: 2px solid #f6f6f6;
		border-radius: 8px;
		    background-color: #f6f6f6;
		.title{
			
			font-weight: bold;
		}
		.cardgo{
			position: relative;
						 
			.cardinfo{
				    background-color: #f6f6f6;
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				    top: -12px;
				    right: -12px;
					    border-radius: 0 0 0 4px;
						img{
							width: 36rpx;
						}
			}
		}
		
	}
	
	.carAuth{
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		border: 2px dashed rgba(187, 187, 187, 1);
		//height: 400rpx;
		width: 100%;
		    overflow: hidden;
			text-align: center;
			.carAuthImg{
				margin-top: 10px;
				margin-bottom: 10px;
				width: 510rpx;
				height: 360rpx;
			}
			.carAuthIcon{
				    position: absolute;
				    background: #6e7175;
				    width: 44px;
				    height: 44px;
					border-radius: 50px;
				    /* left: 200px; */
				    /* top: 200px; */
				    margin: 160rpx 280rpx;
				    z-index: 999;
					    display: flex; 
					    justify-content: center;

			}
	}
	.mark {
	    width: 0px;
	    height: 0px;
	    border-top: 40px solid rgba(0, 185, 98, 1);
	    border-right: 40px solid transparent;
	       position: absolute;
	       z-index: 999;
		.text{
		    white-space: nowrap;
		    transform: rotate(-45deg) scale(0.5);
		    position: absolute;
		    top: -45px;
		    background-color: rgba(0, 185, 98, 1);
		    color: rgba(255, 255, 255, 1);
			font-size: 25px;
		}
	}
	
	 
	
	#talkbubble {
		margin-left: 10px;
		
		padding: 2px 10rpx;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		background: red;
		position: relative;
		border-radius: 4px;
		text-align: center;
	}
	
	 
	

</style>