JP-ChargeTeam51/pages/login/completeInfo.vue

<template>
	<view>
		<ujp-navbar title="完善信息">
			
				
				<view slot="right"  @click="gotoLink" style=" margin-right: 10px;"> 跳过</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" label="昵称"><u-input v-model="form.nickName" placeholder="请填写昵称"/></u-form-item>
				</u-form>
			</view>
			<p class="car-num"  @tap="keyShow=!keyShow" >车牌号码<span style="color: #9e9e9e;float: right;padding-right: 10px;">(点击唤起键盘)</span></p>
<!-- 			<p class="car-num"  style="padding: 10px 0 0 40px;" >根据平台要求，车牌号码输入后暂时<span style="color:red">不可以修改</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>
			
			<!-- <view class="default" >
				<u-checkbox-group>
					<u-checkbox class="tips" v-model="form.defaultFlag" @change="checkboxChange()" shape="circle" >设为默认车辆</u-checkbox>
				</u-checkbox-group>
			</view> -->
			
			<u-button class="login-btn" v-show="!keyShow"
			  @click="keepCar"
			 type="success" shape="circle" >完成</u-button>
			 
			 <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'
	
	
	export default {
		components: {
			ucarkeyboard,umessageInput
		},
		data() {
			return {
					selectIndex:-1,
				maxlength:8,
				keyShow: false,
				isLogin:false,
				code:"",
				codeId:"",			
				form: {
					nickName: '',
					headImg: '',
					carNum: '鄂',
					defaultFlag: true,
				},
			}
		},
		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: {
			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
						    },
						    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'
					})
				}
			},
			checkboxChange() {
				this.form.defaultFlag = !this.form.defaultFlag;
			},
			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
				}
				//(this.form)
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.perfectPersonInformation(this.form).then((res) => {
					uni.hideLoading();
					
					this.gotoLink()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
		
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.u-char-item{
		width: 29px !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: 108px;
		width: 108px;
		position: relative;
	}
	.data-input{
		margin: 0 40px;
	}
	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
	.car-num{
		padding: 10px 0 0 40px;
		line-height: 18px;
	}
	.key-input {
		padding-top: 19px;
	}
	
	.default {
		margin: 16px 28px;
	}
	/deep/.u-char-item {
		width: 30px !important;
		height: 40px !important;
		font-size: 18px !important;
	}
</style>