CTEQishou/pages/user/Cheshourenzheng.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('user.cheshourenzh')"  tinColor="#006AFF" jiantou="0"></customNav>
		<view class="contentColumnC">
			<view class="contentColumn grupCont" style="justify-content: flex-start;">
				<text>{{$t('user.shenfenzh')}}</text>
				<input class="noinputVcode" style="width: 100%;" type="text" :placeholder="$t('user.qingshursfzh')" :value="idNumber"  @input="idNumberinput">
			</view>
			
			<view class="contentColumn grupCont" @click="selectImg(5)">
				<text>{{$t('user.shenfenzh')}} A</text>
				<netImage width="650" height="650" :mysrc="passportPhA" mymode="scaleToFill"></netImage>
			</view>
			<view class="contentColumn grupCont" @click="selectImg(55)">
				<text>{{$t('user.shenfenzh')}} B</text>
				<netImage width="650" height="650" :mysrc="passportPhB" mymode="scaleToFill"></netImage>
			</view>
			
			<view class="contentInRowL grupCont">
				<text>{{$t('user.chepaihao')}}</text>
				<input class="noinputVcode" type="text" :value="licensePlate" :placeholder="$t('user.qsrchepaihao')"  @input="chepaihao">
			</view>
			<view class="contentColumn grupCont" @click="selectImg(1)">
				<text>{{$t('user.jiashizhe')}}</text>
				<netImage width="650" height="650" :mysrc="driversLicense" mymode="scaleToFill"></netImage>
			</view>
			<view class="contentColumn grupCont" @click="selectImg(11)">
				<text>{{$t('user.shifajlzm')}}</text>
				<netImage width="650" height="650" :mysrc="shifajlzm" mymode="scaleToFill"></netImage>
			</view>
			<view class="contentColumn grupCont" @click="selectImg(2)">
				<text>{{$t('user.xingshizh')}}</text>
				<netImage width="650" height="650" :mysrc="drivingLicense" mymode="scaleToFill"></netImage>
			</view>
			<view class="contentColumn grupCont" @click="selectImg(3)">
				<text>{{$t('user.cheliangtp')}}</text>
				<netImage width="650" height="650" :mysrc="vehiclePhotos" mymode="scaleToFill"></netImage>
			</view>
		</view>
		<view class="contentColumnC" style="margin-top: 60rpx;">
			<text class="tijiaoBT" @click="tijiao">{{$t('index.tijiao')}}</text>
		</view>
		<view style="height: 80rpx;"></view>
		<yhdslCropper ref="yhdslCropper" :quality="1" mode="free"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
	</view>
</template>

<script>
	import {
		UploadImage
	} from '@/pages/api/basic.js';
	import {
		updataUserMsg,
	} from '@/pages/api/login';
	import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	export default {
		components: {
		        yhdslCropper
		},
		data() {
			return {
				userInfo:null,
				idNumber:'',
				licensePlate:'',
				driversLicense:'',
				shifajlzm:'',
				drivingLicense:'',
				vehiclePhotos:'',
				passportPhA:'',
				passportPhB:'',
				scale:1.8,
				index:-1
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
			this.licensePlate=this.userInfo.licensePlate;
			var temp=[];
			if(this.userInfo.driversLicense){
				temp = this.userInfo.driversLicense.split(",");
				if(temp.length>0){
					this.driversLicense =  temp[0];
				}
				if(temp.length>1){
					this.shifajlzm =  temp[1];
				}
			}
			if(this.userInfo.drivingLicense){
				this.drivingLicense=this.userInfo.drivingLicense;
			}
			if(this.userInfo.vehiclePhotos){
				this.vehiclePhotos=this.userInfo.vehiclePhotos;
			}
			if(this.userInfo.passportPhoto){
				temp = this.userInfo.passportPhoto.split(",");
				if(temp.length==2){
					this.passportPhA =  temp[0];
					this.passportPhB =  temp[1];
				}
			}
			this.idNumber = this.userInfo.idNumber;
		},
		methods: {
			idNumberinput(e){
				this.idNumber = e.detail.value;
			},
			chepaihao(e){
				this.licensePlate = e.detail.value;
			},
			selectImg(index){
				this.index = index;
				console.log('userIconkl');
				this.selectImage();
			},
			
			selectImage(){
				var that = this;
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							mask:true
						})
						uni.uploadFile({
							url: this.$baseurl+UploadImage, //上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								//"Authorization": userinfo.token
							},
							success: (res) => {
								uni.hideLoading();
								let group =  JSON.parse(res.data);
								console.log(group);
								if(that.index==1){
									that.driversLicense=group.data;
								}
								if(that.index==2){
									that.drivingLicense=group.data;
								}
								if(that.index==3){
									that.vehiclePhotos=group.data;
								}
								if(that.index==11){
									that.shifajlzm=group.data;
								}
								if(that.index==5){
									that.passportPhA=group.data;
								}
								if(that.index==55){
									that.passportPhB=group.data;
								}
							},
							fail() {
								uni.hideLoading();
							}
						});
					}
				});
			},
			
			
			uploadImg(e) {
				console.log('------------uploadImg:',e)
				uni.showLoading({
					mask:true
				})
				var that = this;
				uni.uploadFile({
					url: this.$baseurl+UploadImage, //上传图片api
					filePath: e,
					name: 'file',
					header:{
						//"Authorization": userinfo.token
					},
					success: (res) => {
						uni.hideLoading();
						let group =  JSON.parse(res.data);
						console.log(group);
						if(that.index==1){
							that.driversLicense=group.data;
						}
						if(that.index==2){
							that.drivingLicense=group.data;
						}
						if(that.index==3){
							that.vehiclePhotos=group.data;
						}
						if(that.index==11){
							that.shifajlzm=group.data;
						}
						if(that.index==5){
							that.passportPhA=group.data;
						}
						if(that.index==55){
							that.passportPhB=group.data;
						}
					},
					fail() {
						uni.hideLoading();
					}
				});
			},
			tijiao(){
				var that = this;
				uni.showModal({
					cancelText: that.$t('index.quxiao'), // 取消按钮的文字
					confirmText: that.$t('index.queren'), // 确认按钮的文字 
				    title: that.$t('api.message'),
				    content: that.$t('index.tijiao')+'？',
				    success: function (res) {
						if (res.confirm) { //这里是点击了确定以后
							that.updataUserMsg();
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
						
				    }
				})
			},
			updataUserMsg(){
				var that = this;
				
				var temp1=[];
				var temp2=[];
				var temp3=[];
				var temp5=[];
				temp1.push(this.driversLicense);
				temp1.push(this.shifajlzm);
				temp2.push(this.drivingLicense);
				temp3.push(this.vehiclePhotos);
				
				temp5.push(this.passportPhA);
				temp5.push(this.passportPhB);
				this.licensePlate
				var usdata = {
					"licensePlate":that.licensePlate,
					"driversLicense":temp1+'',
					"drivingLicense":temp2+'',
					"vehiclePhotos":temp3+'',
					"passportPhoto":temp5+'',
					"idNumber":this.idNumber
				};
				console.log(usdata);
				uni.showLoading({
					mask:true
				})
				this.$http.post(`${updataUserMsg}`,usdata,true)
				.then(r => {
					uni.hideLoading();
					console.log('updataUserMsg',r)
					if(r.data.code==200){
						uni.navigateBack();
					}
					else{
						uni.showToast({
						    title:r.data.msg,
						    icon: 'none',
						    duration: 2500
						})
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.grupCont{
		width: 90%;
		margin-top: 40rpx;
		align-items: center;
	}
.noinputVcode{
	margin-left: 10rpx;
	width: 70%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 10rpx;
	border: 2rpx solid #F2F3F7;
	background-color: #F2F3F7;
}
.tijiaoBT{
	width: 80%;
	text-align: center;
	line-height: 70rpx;
	font-size: 30rpx;
	color: white;
	background-color: #006AFF;
	border-radius: 8rpx;
}
</style>