JP-ChargeTeam51/pages/login/completeInfo.vue

<template>
	<view>
		<ujp-navbar title="完善信息">

			<view slot="right" @click="gotoLink" style=" margin-right: 20rpx;"> 跳过</view>

		</ujp-navbar>
		<view class="data">
			<view class="data-img" v-show="!keyShow">
				<view class="data-icon">
					<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="32"></u-icon>
				</view>
				<u-avatar :src="form.headImg+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="216"
					@click="uploadPhoto" /></u-avatar>
			</view>

			<view class="data-input">
				<u-form :model="form" ref="uForm">
					<u-form-item label-position="top" required label="昵称"><u-input v-model="form.nickName"
							placeholder="请填写昵称" /></u-form-item>
				</u-form>
			</view>
			
			<p class="car-num" ><span style="color:rgba(238, 49, 56, 1)">*</span>车牌号码
					
					<span  @click="gotoLink" 
							style="color: rgb(63, 189, 112);float: right;">临时车牌,点击快速充电</span>
					</p>
			
			<view class="key-input" @tap="keyShow=true">

				<umessageInput :focus="true" @selectIndex="getSelectIndex" :value="form.carNum" :maxlength="maxlength"
					:disabled-keyboard="true"></umessageInput>

				<!-- 				<u-message-input :focus="true" :value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></u-message-input>
 -->
			</view>
			<p class="car-num" ><span @tap="keyShow=!keyShow"
					style="float: right;color: #9e9e9e;">点击输入框{{keyShow?'收起':'唤起'}}键盘</span></p>
			<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"
				>
				<view class="cardin"  :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>
			</view>
			
			<p class="car-num"  v-show="!keyShow">
						
						 车辆认证
				<view style="font-size: 12px;color:rgba(51, 51, 51, 1);margin: 2px 0;">上传机动车行驶证清晰照片</view>
			</p>
			<view class="car-type" v-show="!keyShow">
				
				<view class="carAuth">
					<view class="mark" v-show="!carAuthImg">
						<view class="text">例</view>
					</view>
					<view class="carAuthIcon" @click="uploadPhoto2">
						<u-icon name="camera-fill" custom-prefix="custom-icon" color="#fff" size="48"></u-icon>
						
					</view>
					<image class="carAuthImg"  @click="uploadPhoto2" v-show="carAuthImg" :src="carAuthImg"></image>
					
					<image class="carAuthImg"  @click="uploadPhoto2" v-show="!carAuthImg" src="@/assets/img/carDet/authtest.png"></image>
					
				</view>
				<view class="position" v-if="!carLicense">
					<view id="talkbubble">首次认证送5元代金卷</view>
				</view>
			</view>
			
			
			
			<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"  @click="keepCar" type="success" shape="circle">完成</u-button>
				
			</view>
		


			<ucarkeyboard ref="uKeyboard" style="    z-index: 999;" :style="!keyShow?'display: none':''" mode="car"
				:confirmBtn="false" :mask-close-able="false" :tooltip="false" v-show="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>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	import * as loginApi from '@/apis/login.js'
	import umessageInput from '@/components/UmessageInput.vue'
	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 {
				carLicense:"",
				carAuthImg:"",
				value: false,
				selectIndex: -1,
				maxlength: 8,
				keyShow: false,
				isLogin: false,
				code: "",
				codeId: "",
				form: {
					nickName: '',
					headImg: '',
					carNum: '',
					defaultFlag: true,
				},
				usage:"",
				carlist:[
					{
						value:1,
						name:"出租车",
						img:car1
					},
					{
						value:2,
						name:"专快车",
						img:car2
					},
					{
						value:3,
						name:"物流车/商用车",
						img:car3
					},
					{
						value:4,
						name:"私家车",
						img:car4
					}
				]
				
			}
		},
		onLoad(op) {
			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.getUserInfo();
		},
		methods: {
			
			uploadFile(imageSrc){
				var action=process.car.BASE_URL+"uploadPicture"
				var token=this.carhelp.getToken()
				var header={
					'Authorization':token
				}
				var formData={
					subFolder:"/team51/message"
				}
				var _this=this
				uni.showLoading({
				   					title: '上传中'
				   				})
				   				  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
				   						});
				   					},
				   				});
			},
			uploadPhoto2() {
				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)
					}
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					this.form.nickName = res.data.regUser.nickName;
					this.form.headImg = res.data.regUser.headImg;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			uploadPhoto() {
				let _self = this;

				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};

				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]

						// #ifndef APP-PLUS
						//(`filePath=${filePath}`)

						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/user/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif

						//返回 base64 图片
						//(fileData);

						var token = _self.carhelp.getToken()

						uni.showLoading({
							title: '上传中'
						});

						uni.request({
							url: process.car.BASE_URL + "uploadBase64",
							method: 'POST',
							data: {
								photoBase64Data: fileData,
								branchParameter:process.car.branchParameter
							},
							header: {
								'Authorization': token,
								'content-type': 'application/x-www-form-urlencoded'
							},
							success: (res) => {
								let jsonData = res.data;
								_self.form.headImg = jsonData.data;

								uni.hideLoading();
							}
						});
					}
				});
			},
			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.redirectTo({
						url: '/pages/index/index'
					})
				}
			},
			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() {
				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)
				this.form.usage=this.usage;
				this.form.photoFile=this.carAuthImg;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.perfectPersonInformation(this.form).then((res) => {
					uni.hideLoading();
					if(this.carAuthImg){
						var obj=this.carhelp.getPersonInfo()
						obj.carLicense=this.carAuthImg
						this.carhelp.setPersonInfo(obj)
					}
					 
					this.gotoLink()
				}).catch(error => {
					
					uni.hideLoading();
					uni.showModal({
						content: error,
						showCancel: false
					});
				})
			}
		}

	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.u-char-item {
		width: 58rpx !important;
	}

	.skip {
		margin-left: 81.3%;
	}

	.data-icon {
		height: 28px;
		width: 28px;
		background-color: #00B962;
		border-radius: 14px;
		border: 2px solid #fff;
		text-align: center;
		line-height: 24px;
		position: absolute;
		z-index: 999;
		right: 0;
		bottom: 0px
	}

	.data-img {
		margin: 10px auto;
		height: 216rpx;
		width: 216rpx;
		position: relative;
	}

	.data-input {
		margin: 0 60rpx;
	}

	.login-btn {
		margin-top: 12px;
		background-color: #00B962 !important;
		border-color: #00B962 !important;
		color: #fff !important;
	}

	.car-num {
		padding: 20rpx 60rpx 0 60rpx;
		line-height: 18px;
	}

	.key-input {
		padding-top: 19px;
	}

	.default {
		margin: 30rpx 60rpx;
	}

	::v-deep .u-char-item {
		width: 60rpx !important;
		height: 80rpx !important;
		font-size: 36rpx !important;
	}
	.car-type{
		    display: flex;
		    flex-direction: row;
			margin: 0 40rpx;
			flex-wrap: wrap;
	}
	.cardone{
		// margin-right: 20rpx;
	}
	.card{
		width: 50%;
		padding: 0 10rpx;
		.cardin {
			
			 // margin-left: 5px;
			overflow: hidden;
			padding: 20rpx;
			margin-top: 20rpx;
			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;
		}
	}
	
	.position {
		    position: relative;
		    top: -520rpx;
		    left: 54%;
		    z-index: 999;
		    width: 130px;
	}
	
	#talkbubble {
		
		top: 0;
		left: 0;
		padding: 0 10rpx;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		background: red;
		position: relative;
		border-radius: 4px;
		text-align: center;
	}
	
	#talkbubble:before {
		content: "";
		position: absolute;
		top: 100%;
		right: 25%;
		border-top: 5px solid red;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
	}
</style>