JP-ChargeTeam51/components/QuickRegistration.vue

<template>
	<view v-show="show1">
		<view class="QuickRegistration">
			<view class="view1">
				<image class="quick1" src="@/assets/img/quick/1.png"></image>
			</view>
		
			<view  class="view2">
				
				<view class="view3">
					<image class="quick4" @click="close"
					 src="@/assets/img/quick/4.png"></image>
				</view>
				
				<view class="view4">
					
					<image class="quick2" src="@/assets/img/quick/2.png"></image>
					
					<view class="viewbtn" @click="show2=true">
						
						<image class="quick3" src="@/assets/img/quick/3.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="show2" mode="bottom" border-radius="14" :closeable="true" >
			<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 class="ucarkeyboardView"  >
										<span >车牌号:{{form.carNumber}}</span>
										<span @tap="keyShow=!keyShow" style="
						float: right;
						padding-right: 10px;
						color: #41a863;
					">确定</span>
									</view>
				</ucarkeyboard>
			<view  class="QuickRegistrationPopup" >
				
					
				
				<view class="popup1">快速注册</view>
				<view class="popup2">欢迎来到优电联盟</view>
				
				<view v-show="!keyShow">
					
				
				<view class="popup3" >
					<view class="input">
						<u-input :customStyle="customStyle"  :clearable="false"
						
							v-model="form.telephone" type="number" placeholder="请输入手机号"
							placeholder-style="font-size:16px;color:#ccc;" />
					</view>
				</view>
				<view class="popup4" >未注册的手机号验证后将自动注册</view>
				<view class="popup5">验证码</view>
				<view class="popup3">
					<view class="input">
						<u-input :customStyle="customStyle"  :clearable="false"
						
							v-model="form.verifyCode" type="number" placeholder="请输入验证码"
							placeholder-style="font-size:16px;color:#ccc;" />
						<view class="code" :style="isCodeTipsColor ? 'color: #999999;' : ''" @click="getCode">
							{{codeTips}}</view>
					</view>
				</view>
				</view>
				<view class="popup5">车牌号码</view>
				<view class="popup6"  @tap="keyShowBtn(true)" >
					<umessageInput :focus="true"
					@selectIndex="getSelectIndex"
					:value="form.carNumber" :maxlength="maxlength" :disabled-keyboard="true"></umessageInput>
							
				</view>
				<view class="popup7">
					<view >
						<u-checkbox-group>
							<u-checkbox class="tips" active-color="green" v-model="value" shape="circle"
								@change="checkboxChange()"></u-checkbox>
						</u-checkbox-group>
						<span style="font-size: 24rpx;">我已阅读并同意</span>
						<span @click="gotoUrl('pages/article/details?code=YHXY')" style="color: #3fbd70;font-size: 24rpx;">《会员协议》</span>和
						<span @click="gotoUrl('pages/article/details?code=YSZC')" style="color: #3fbd70;font-size: 24rpx;">《隐私协议》</span>
					</view>
				</view>
				<view class="popup8">
					<u-button class="success-btn" shape="circle" type="success" @click="keepCar" >
						完成
					</u-button>
				</view>
			</view>
				
			
			
			<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start"
				change-text="已发送(Xs)">
			</u-verification-code>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import umessageInput from '@/components/UmessageInput.vue'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	import * as loginApi from '@/apis/login.js'
	import {
		checkPhone,newDate
	} from '@/utils'
	export default {
		name:"QuickRegistration",
		components: {
			ucarkeyboard,umessageInput
		},
		props:{
			carNum:""
		},
		data() {
			return {
				customStyle: {
					'font-size': '28rpx',
					'border-radius': '50px',
					'background-color': 'rgba(237, 240, 239, 1)',
					'text-align':'center'

				},
				
				
				keyShow:false,
				show1:true,
				show2:false,
				selectIndex:-1,
				maxlength:8,
				value:false,
				personInfo: null,
				isSendMsgIng: false,
				isCodeTipsColor: false,
				sendMsgSecond: 60,
				codeTips: '',
				form: {
					telephone: '',
					verifyCode: '',
					carNumber: '',
					defaultFlag: true,
					
				},
			};
		},
		created() {
			console.log("1")
			this.form.carNumber=this.carNum
			var personInfo = this.carhelp.getPersonInfo()
			this.personInfo = personInfo
			
		},
		mounted() {
			
		},
		methods:{
			
			codeChange(text) {
				this.codeTips = text;
			},
			start() {
				if (!this.isSendMsgIng) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					loginApi.getVerifyCode(this.form.telephone).then((response) => {
						uni.hideLoading();
						this.carhelp.set("getvcodetime", new Date().getTime());
			
						if (!"") {
							//倒计时
							uni.showToast({
								title: "发送成功"
							})
						} else {
							uni.showToast({
								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			},
			//倒计时
			end() {
				this.sendMsgSecond = 60;
				this.isSendMsgIng = false;
				this.isCodeTipsColor = false;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}
			
				var checkPhoneResult = checkPhone(this.form.telephone);
			
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				this.$refs.uCode.start();
				this.isCodeTipsColor = true;
			},
			keyShowBtn(keyShow){
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				console.log(aaa,this.form.carNumber.length)
				 if((this.form.carNumber.length == 0) && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}else if(!aaa&&(this.form.carNumber.length > 0)){
					this.$refs.uKeyboard.changeCarInputMode();
				}
				
				this.keyShow=keyShow;
			},
			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.carNumber.length>=this.maxlength&&this.selectIndex==-1){
					return
				}
				
				if(this.selectIndex==-1){
					this.form.carNumber += val;
				}else{
					const replaceStr = (str, index, char) => {
					 const strAry = str.split('');
					 if(index<strAry.length){
						  strAry[index] = char;
					 }
					
					 return strAry.join('');
					 }
					 
					this.form.carNumber=replaceStr(this.form.carNumber,this.selectIndex,val) ;
					this.selectIndex=-1;
				}
				// 将每次按键的值拼接到form.carNumber变量中，注意+=写法
				
				//(this.form.carNumber);
			
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if((this.form.carNumber.length == 0) && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}else if(!aaa){
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNumber的最后一个字符
				if(this.form.carNumber.length){
					if(this.selectIndex==-1){
						
						this.form.carNumber = this.form.carNumber.substr(0, this.form.carNumber.length - 1);
						
					}else{
						const replaceStr = (str, index, char) => {
						 const strAry = str.split('');
						 if(index<strAry.length){
							  strAry[index] = char;
						 }
						
						 return strAry.join('');
						 }
						 
						this.form.carNumber=replaceStr(this.form.carNumber,this.selectIndex,'') ;
						
						//this.selectIndex=-1;
					}
				}
				
				
				
				
				//(this.form.carNumber);
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.form.carNumber.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			keepCar() {
				
				var checkPhoneResult = checkPhone(this.form.telephone);
				
				if (!this.form.telephone || checkPhoneResult != true) {
					uni.showToast({
						title: checkPhoneResult,
						icon: "none"
					})
					return;
				}
				if (!this.form.verifyCode) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				//(this.form)
				if(this.form.carNumber.length != 8) {
					uni.showToast({
						title:"请填写新能源车牌"
					})
					return
				}
				
				if (!this.value) {
					uni.showToast({
						title: "请勾选协议"
					})
					return
				}
				
				//this.form.nickName= this.form.telephone;
				if(this.carhelp.getUserInfo().nickname){
					this.form.nickName = this.carhelp.getUserInfo().nickname;
					this.form.headImg = this.carhelp.getUserInfo().headimgurl;
				}
				
				this.form.openId = this.carhelp.getOpenId();
				this.form.source = 2 //创建渠道1电单车2电车
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (this.personInfo && this.personInfo.userType == "1") {
				
					loginApi.validateGuestCode(this.form).then((response) => {
						this.loginresponse(response, true)
				
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				} else {
					loginApi.validateCode(this.form).then((response) => {
						this.loginresponse(response)
				
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
			},
			loginresponse(response, bl) {
				
				var token = response ? response.data.token : '';
				this.carhelp.setToken(token);
				this.carhelp.setPersonInfo(response.data.regUser);
				this.carhelp.setPersonInfoPlus(response.data);
				this.show1=false
				this.show2=false
				uni.hideLoading()
				this.$emit("login",this.form);
			},
			open(){
				
			},
			close() {
				// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
				// 造成@close事件触发两次
				this.show1=false
				this.$emit("close");
			},
		}
	}
</script>

<style  lang="scss" scoped>
	::v-deep.u-char-item {
		width: 60rpx !important;
		height: 80rpx !important;
		font-size: 36rpx !important;
		margin:8rpx !important;
	}
	.QuickRegistration{
		position: fixed;
		bottom: 80rpx;
		z-index: 1000;
		    width: 100%;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
			
		.quick1{
			width: 240rpx;
			height: 190rpx;
			position: relative;
			    bottom: -100rpx;
		}
		.quick2{
			
			width: 500rpx;
			height: 72rpx;
			    margin-bottom: 26rpx;
		}
		.quick3{
			width: 176rpx;
			height: 60rpx;
		}
		.quick4{
			width: 40rpx;
			height: 40rpx;
			position: fixed;
			right: 70rpx;
		}
		.view4{
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-direction: column;
		}
		.view3{
			
		}
		.view1{
			
		}
		.view2{
			background: linear-gradient(180deg, rgba(79,205,145,1) 0%,rgba(30,159,84,1) 100%);
			box-shadow: 0px 2px 8px 0px rgba(34, 125, 63, 0.5);
			border: 1px solid rgba(79, 205, 145, 1);
			border-radius: 12px;
			width: 670rpx;
			height: 320rpx;
			
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0 40rpx 0;
		}
		.viewbtn{
			width: 448rpx;
			height: 88rpx;
			border-radius: 50px;
			background: linear-gradient(180deg, rgba(255,228,0,1) 0%,rgba(255,188,0,1) 100%);
		
			    display: flex;
			    align-items: center;
			    justify-content: center;
		}
	}
	
	.QuickRegistrationPopup{
		padding: 56rpx;
		text-align: center;
		.popup1{
			color: rgba(16, 16, 16, 1);
			font-size: 56rpx;
			font-weight: bold;
		}
		.popup2{
			color: rgba(119, 119, 119, 1);
			font-size: 36rpx;
			margin-bottom: 40rpx;
		}
		.popup3{
			margin-bottom: 24rpx;
			.input{
				display: flex;
				    align-items: center;
				.code {
					
					top: 7px;
					color: rgb(63, 189, 112);
				}
			}
		}
		.popup4{
			margin-bottom: 40rpx;
			color: rgba(102, 102, 102, 1);
			font-size: 28rpx;
		}
		.popup5{
			margin-bottom: 16rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.popup6{
			margin-bottom: 40rpx;
		}
		.popup7{
			margin-bottom: 40rpx;
		}
		.popup8{
			
		}
	}
	.ucarkeyboardView{
		text-align: center;
		    font-size: 40rpx;
		    height: 200rpx;
		    display: flex;
		    align-items: flex-end;
		    justify-content: space-between;
	}
</style>