keysass_app/pages/personal/phonelogin.vue

<template>
	<view>
		<view class="bureau">
			<view style="margin-bottom: 43px;">
				<img  src="/static/index/logo.png" alt="">
				<p style="margin: 10px 0;">小关软测宝</p>
				<p style="font-size:.8rem;font-weight: 400;letter-spacing: 0.7rem;">专业软件测试云平台</p>
			</view>
			<view class="inlog">
				<u-field v-model="loginobj.phone" label-width='0' placeholder-style="font-size:15px" :clearable='isclear'   placeholder='请输入手机号'>
					<p slot="right" style="font-size:15px;color:#000000" @click="getCode">+86</p>
				</u-field>
				<u-field v-model="loginobj.code" :clearable='isclear' label-width='0' placeholder-style="font-size:15px"   placeholder='请输入验证码'>
					<!-- <u-button size="mini" plain slot="right" type="primary" @click="getCode">{{codeText}}</u-button> -->
					<p  slot="right"  @click="getCode">{{codeText}}</p>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>	
			<button v-if='loginobj.code.length==6' class="button-g"  @click="login">登录</button>
			<button v-else class="button-g" style="background-color:rgba(25, 123, 239, .5);" >登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				loginobj:{
					phone:'',
					code:'',
					uuid:'',
				},
				cleart:false,
				codeText: '获取验证码',
				uproute:''
			}
		},
		onLoad() {
			let pages = getCurrentPages()
			let prevPage = pages[pages.length - 2];
			if(prevPage){
				this.uproute=prevPage.route
			}
		},
		methods: {
			isMobile(s) {
				  return /^1[0-9]{10}$/.test(s)
			},
			codeChange(text) {
				this.codeText = text;
			},
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					let phone = this.loginobj.phone;
					if (!phone || !this.isMobile(phone)) {
						uni.showToast({ title: '手机格式不对', icon: 'none', duration: 1000 });
						return;
					}
					
					// 获取登录验证码的接口
					this.http.quickGet('/captchaUserLogin?phoneNumber=' + phone).then((res)=> {
						console.log('获取登录验证码',res);
						if(res.data.code==200){
							this.loginobj.uuid=res.data.uuid;
							uni.showToast({title: '发送成功', icon: 'none', duration:1000 });
							setTimeout(() => {
								uni.hideLoading();
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 1000);
						}else{
							uni.showToast({title:res.data.msg, icon: 'none', duration:1000 });
						}           
					}).catch((err) => {
						console.log('err',err);
					});
					
					
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			login(){
				console.log('123123');
				const _this = this
				uni.login({
					success(logininfo) {
						console.log(logininfo);
						let data={
							mobile:_this.loginobj.phone,
							code:_this.loginobj.code,
							uuid:_this.loginobj.uuid,
							openidCode: logininfo.code
						}
						_this.http.quickPost('/phoneLogin',data).then(res=>{
							if(res.data.code==200){
								uni.setStorageSync('accessToken', res.data.token)
								_this.http.quickGet('/getInfo',true).then(res=>{
									 if(res.data.code==200){
										console.log('手机验证登录成功',res.data)
										uni.setStorageSync('register', res.data.isRegister)
										uni.setStorageSync('testerStatus', res.data.user.testerStatus)
										uni.setStorageSync('wxUserInfo', res.data.user)
										uni.setStorageSync('email', res.data.user.email)
										uni.setStorageSync('avatar', res.data.user.avatar)
										uni.setStorageSync('nickName', res.data.user.nickName)
										uni.setStorageSync('sex', res.data.user.sex)
										uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 });
										if(_this.uproute=='pages/personal/personal' || _this.uproute=='pages/personal/login'){
											uni.switchTab({
											  url:'/pages/personal/personal'
											})
										}else{
										  setTimeout(()=>{
											uni.navigateBack({
											  delta:2
											})
										  },1000)
										}
											
									 }
								})
								
							}
						})
					},
					fail(error) {
						console.log('失败了', error);
					}
				})
				
			},
		}
	}
</script>

<style>
	.bureau{
		text-align: center;
		margin: 13vh auto;
	}
	.bureau img{
		width:70px;
		height:58px;
		margin-right: 5px;
	}
	.bureau p{	
		font-size:1.3rem;
		font-weight: bold;
		color:#0A8AD3;
	}
	.inlog{
		width:90vw;
		margin: 0 auto;
	}
	.inlog .u-field{
		height:45px;
		border-bottom: 1px solid rgb(187 187 187 / 0.5);
		margin-bottom:10px;
	}
	.inlog p{
		color:#2979ff;
		font-size: 15px;
		font-weight:normal
	}
	.button-g{
		width:90vw;
		height:80rpx;	
		background-color:#197BEF;
		border-radius:25px;
		text-align: center;
		line-height:80rpx;
		color: #FFFFFF;
		font-size:36rpx;
		margin-top:15px;
	}
</style>