Waterinvoice_uiapp/pages/login/registerphone.vue

<template>
	<view>
		<uni-nav-bar shadow :title="toptitle" left-icon="left" @clickLeft="back" backgroundColor="#000" color="#fff" />
		<view class="box">
			<view v-if="id==0">
				<view><uni-easyinput prefixIcon="phone-filled" v-model="mobile" @blur="onInput" placeholder="请输入手机号"></uni-easyinput></view>
				<view style="margin-top: 10px;"><uni-easyinput prefixIcon="contact-filled" v-model="pucode" placeholder="请输入用户编号"></uni-easyinput></view>
				<view class="input">
					<uni-easyinput v-model="snsCode" placeholder="请输入内容" style="width: 100px;margin-right: 10px;"></uni-easyinput>
					<button class="mini-btn" type="primary" size="mini" @click="toCode" :disabled="num > 0"> {{ num > 0 ? `${num}秒后重新获取` : '获取验证码' }}</button>
				</view>
				<view><button type="primary" style="width: 180px;margin-top: 20px;" @click="register">绑定手机号</button></view>
			</view>
			<view v-else>
				<view><uni-easyinput prefixIcon="phone-filled" v-model="phone" @blur="onInput1" placeholder="请输入手机号"></uni-easyinput></view>
				<view class="input">
					<uni-easyinput v-model="smsCode" placeholder="请输入内容" style="width: 100px;margin-right: 10px;"></uni-easyinput>
					<button class="mini-btn" type="primary" size="mini" @click="toCode" :disabled="num > 0"> {{ num > 0 ? `${num}秒后重新获取` : '获取验证码' }}</button>
				</view>
				<view><button type="primary" style="width: 180px;margin-top: 20px;" @click="register">手机号登录</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				id:'',
				mobile:'',
				pucode:'',
				snsCode:'',
				intervalId: null,
				num: 0,
				phone:'',
				smsCode:'',
				toptitle:'',
				styles:{
					width:'100px'
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.toptitle = options.id == '0' ? '手机号绑定' : '手机号登录';
			if (!uni.getStorageSync('phone') && options.id == '0'){
				uni.showToast({title: '请先绑定手机号',icon: 'none'});
			}
			// 从本地存储中获取倒计时值
			const savedNum = localStorage.getItem('countdownNum');
			if (savedNum) {
				this.num = parseInt(savedNum, 10);
				if (this.num > 0) {
					this.intervalId = setInterval(this.countDownTimer, 1000);
				}
			}
		},
		beforeDestroy() {
		    // 清除定时器
			clearInterval(this.intervalId);
			uni.removeStorageSync('countdownNum');
		},
		methods: {
			countDownTimer() {
				if (this.num > 0) {
					this.num --;
					localStorage.setItem('countdownNum', this.num);
				} else {
					clearInterval(this.intervalId);
					localStorage.setItem('countdownNum', this.num);
				}
			},
			toCode(){
				if(!this.mobile && this.id=='0'){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(this.mobile) && this.id=='0') {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				
				if(!this.phone && this.id=='1'){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				
				const phonePattern1 = /^1[3-9]\d{9}$/;
				if (!phonePattern1.test(this.phone) && this.id=='1') {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				
				this.num = 60; // 设置倒计时总时间
				localStorage.setItem('countdownNum', this.num);
				this.intervalId = setInterval(this.countDownTimer, 1000);
				let data = this.id=='0'? {mobile:this.mobile} : {mobile:this.phone}
				API.sendSms(data, res => {
					uni.showToast({title: res.msg,icon: 'none'});
				})
			},
			// 限制手机号
			onInput(event) {
				this.mobile = event.detail.value
			},
			onInput1(event){
				this.phone = event.detail.value
			},
			register(){
				if(!this.mobile && this.id=='0'){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				if(!this.phone && this.id=='1'){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				if(!this.pucode && this.id=='0'){
					uni.showToast({title: '请输入用户编号',icon: 'none'});
					return
				}
				if(!this.snsCode && this.id=='0'){
				console.log(this.smsCode);
					uni.showToast({title: '请输入短信验证码',icon: 'none'});
					return
				}
				if(!this.smsCode && this.id=='1'){
				console.log(this.smsCode);
					uni.showToast({title: '请输入短信验证码',icon: 'none'});
					return
				}
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(this.mobile) && this.id=='0') {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				if (!phonePattern.test(this.phone) && this.id=='1') {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				
				let url = this.id=='0'?'/wechat/wechat/savePuCode':'/wechat/login/phoneLogin'
				let data = this.id=='0'?{mobile:this.mobile,pucode:this.pucode,snsCode:this.snsCode}:{phone:this.phone,smsCode:this.smsCode}
				console.log(data);
				API.request(url,data, res => {
					if(res.code==1){
						uni.setStorageSync('AccessToken', res.data.token);
						uni.setStorageSync('pucode', res.data.pucode?res.data.pucode:this.pucode);
						if(this.id=='0'){
							uni.setStorageSync('phone', this.mobile);
							uni.showToast({title: '手机号绑定成功',icon: 'none'})
						}else{
							uni.setStorageSync('phone', this.phone);
							uni.showToast({title: '手机号登录成功',icon: 'none'})
						}
						
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/index/index"
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	padding: 40px;
}
.input{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
</style>