yicangzongtai_app_240321/pages/research/register/replacePhone.vue

<template>
	<view class="forget-pass">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<form @submit="formSubmit">
			<view class="used-phone">
				<view class="user-phone-item">
					旧手机号
				</view>
				<input type="text"  name="usedPhone" value="" v-model="userPhone" disabled="true" placeholder-style="color:#cccccc; font-size:28rpx;" maxlength="11" @input="onUsedPhone"  placeholder="请输入您以前的手机号"/>
			</view>
			<view class="background">
				
			</view>
			<view class="phone">
				<view class="phone-item">
					新手机号
				</view>
				<input type="number" name="phone" value="" placeholder-style="color:#cccccc; font-size:28rpx;" maxlength="11"  @input="onPhone" placeholder="请输入您的新的手机号码"/>
			</view>
			<view class="verification-code">
				<view class="verification-item">
					验证码
				</view>
				<input type="text"  name="code" value="" placeholder-style="color:#cccccc; font-size:28rpx;" maxlength="6" @input="onCode"  placeholder="请输入您的验证码"/>
				<button class="verification-right" :disabled="disabled" @click="obtainCode" :class="isPhone?'active':''">
					{{verificationCode}}
				</button>
			</view>

			<view class="button">
				<button  form-type="submit">确认提交</button>
			</view>
		</form>
	</view>
</template>

<script>
import {getVerfityCode,changeMobile} from "@/api/login.js"
export default{
	data(){
		return{
			config: {
				back: true, //false是tolbar页面 是则不写
				title: '更换手机号',
				color: '#1A1A1A',
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, "#fff"],
				statusBarFontColor: '#1A1A1A',
				// backTabPage: "/pages/index/my"
			},
			phone:"", //手机号
			usedPhone:"",//旧手机号
			usedIsPhone:false,
			isPhone:false,//手机号正则
			code:"",	//验证码
			disabled:false,
			time:60,
			verificationCode:"发送验证码",
			userPhone:null
		}
	},
	onLoad() {
		this.getUserInfo()
	},
	methods:{
		getUserInfo() {
			
			this.$http.get("/account/app-info").then(res => {
				if(res&&res.code==200){
					console.log(res.data.mobile)
					this.userPhone = res.data.mobile
				}
		
			
			})
		},
		
		//获取验证码
		 obtainCode(){
			 console.log(666)
			if(this.isPhone){
				this.$http.get("/account/verify-mobile/"+this.phone).then(res=>{
					if(res&&res.code==200){
		if(res.data==true){
			this.$mUtil.toast("该手机号已被注册")
		}else{
			 this.$http.post(getVerfityCode,this.phone).then(res=>{
					if(res&&res.code==200){
							this.disabled=false;
							this.isPhone=false;
						this.verificationCode=this.time+"s";
					this.clear=setInterval(this.countDown,1000);
			}
			})
		}
		
	}
  })
			}
		},
		 countDown(){
			if(this.time<=0){
				this.disabled=false;
				this.verificationCode="重新获取";
				this.isPhone=true;
				this.time=60;
				clearInterval(this.clear)
			}else{
				--this.time;
				this.verificationCode=this.time+'s'
			}
		},
		//清楚计时器
		beforeDestroy(){
			clearInterval(this.clear)
		},
		
		//手机号
		onPhone(e){
			this.phone=e.detail.value
			if(this.phone.match(this.$mConfig.telRegex)){
				if(this.verificationCode=='发送验证码'||this.verificationCode=='重新获取'){
					this.isPhone=true
				}
				
			}else{
				this.isPhone=false
			}
		},
		
		//旧手机号
		onUsedPhone(e){
			this.usedPhone= e.detail.value
			if(this.usedPhone.match(this.$mConfig.telRegex)){
				this.usedIsPhone=true
			}else{
				this.usedIsPhone=false
			}
		},
		//验证码
		onCode(e){
			this.code=e.detail.value
		},

		//提交信息
		formSubmit(e){
			let target = e.detail.value;
			if(!target.usedPhone){
				this.$mUtil.toast('请输入旧手机号')
				return false
			}
			if(!target.phone){
				this.$mUtil.toast("请输入新手机号")
				return false
			}
			if(target.phone==target.usedPhone){
				this.$mUtil.toast('新手机号和旧手机号相同')
				return false
			}
			if(!(target.phone.match(this.$mConfig.telRegex))){
				this.$mUtil.toast("请输入正确的手机号")
				return false
			}
			if(!target.code){
				this.$mUtil.toast("请输入验证码")
				return false
			}
			let param= {
				mobile:target.usedPhone,
				new_mobile:target.phone,
				captcha:target.code
			}
			this.$http.get("/account/verify-mobile/"+param.new_mobile).then(res=>{
				if(res &&res.code==200){
					if(res.data==true){
						this.$mUtil.toast("该手机号已被注册")
					}else{
						this.$http.post(changeMobile,param)
						.then(res=>{
							if(res.code==200){
								this.$mUtil.toast("修改成功")
								setTimeout(()=>{
									uni.reLaunch({
										url:"../register/login"
									})
								},2000)
							this.$mUtil.toast("修改成功")
							}
						})
					}
				}
			})
			

		}
	}
}
</script>

<style lang="scss" scoped>
	.used-phone{
		display: flex;
		align-items: center;
		align-items: center;
		margin: 0 30rpx;
		padding: 30rpx 0;
		.user-phone-item{
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 400;
			
		}
		input{
			flex: 1;
			margin-left: 60rpx;
		}
	}
	
	.button{
		margin: 700rpx 30rpx 0 30rpx;
		
		button{
			font-size: 36rpx;
			color: #ffffff;
			font-weight: 400;
			background-color: #FA6138;
			border-radius: 43rpx;
		}
	}
	.phone{
		margin: 0 30rpx;
		display: flex;
		padding: 27rpx 0 30rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;
		.phone-item{
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
			
		}
		input{
			flex: 1;
			margin-left: 60rpx;
		}
	}
	.verification-code{
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #E6E6E6;
		.verification-item{
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
		}
		input{
			flex: 1;
			margin-left: 88rpx;
		}
		.verification-right{
			font-size: 28rpx;
			color: #999999;
			background-color: #F5F5F5;
			font-weight: 400;
			border: 1rpx solid #b3b3b3;
			border-radius: 36rpx;
			padding: 0 30rpx;
		}
		.active{
			background-color: #FA6138;
			color: #FFFFFF;
		}
	}
	.background{
		height: 10rpx;
		background-color: #F5F5F5;
	}
	.new-pass{
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 23rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;
		.new-pass-item{
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 400;
		}
		input{
			flex: 1;
			margin-left: 88rpx;
		}
	}
	.confirm-pass{
		margin: 0 30rpx;
		display: flex;
		padding: 34rpx 0 30rpx 0 ;
		border-bottom: 1rpx solid #E6E6E6;
		.confirm-pass-item{
			font-size: 28rpx ;
			font-weight: 400;
			color: #1A1A1A;
		}
		input{
			flex: 1;
			margin-left: 60rpx;
		}
	}
</style>