udemo-im/pages/user/login.vue

<template>
	<view class="nine-content-001">
		<view class="login">
			<view class="login-logo">
				<image class="login-logo-image" lazy-load="true" src="/static/image/ninecloud-white.png"></image>
			</view>
			<view class="login-block">
				<view class="login-type">
					<span @click="onNavBarTap(0)" :class="loginType == 0?'login-type-span-alive login-type-span':'login-type-span'">
						密码登录
					</span>
					<span @click="onNavBarTap(1)" :class="loginType == 1?'login-type-span-alive login-type-span':'login-type-span'">
						短信登录
					</span>
				</view>
				<view class="login-phone">		
					<image class="login-phone-image" src="/static/image/user/login-phone-blue.png"></image>
					<input class="login-phone-input input" :focus="isFocus=='username'" name="phone" placeholder="请输入您的账号/手机号" v-model="userName" @confirm="loginClick"/>
				</view>
				<view class="nine-line-001 mlr30"></view>
				<view v-if="loginType == 0" class="login-phone">
					<image class="login-phone-image" src="/static/image/user/login-password-blue.png"></image>
					<input class="login-phone-input input" :focus="isFocus=='password'" password placeholder="请输入您的密码" v-model="password" @confirm="loginClick"/>
				</view>
				<view v-if="loginType == 1" class="login-verify">
					<view class="display-flex-row">
						<image class="login-verify-image" src="/static/image/user/login-password-blue.png"></image>
						<input class="login-verify-input input" :focus="isFocus=='verify'" placeholder="请输入验证码" v-model="verifyCode" @confirm="loginClick"/>
					</view>
					<view class="nine-btn-verify-001 font-size12 text-nowrap pa10" @click="verifyClick">
						{{verifyText}}
					</view>
				</view>
				<view class="nine-line-001 mlr30"></view>
				<view class="ma15 mr30 text-right color-blue" @click="forgetClick">	
					忘记密码?
				</view>
				<view class="nine-btn-save-001 ma20" @click="loginClick">登 录</view>
				<!--#ifndef MP-WEIXIN-->
				<view class="text-center ma20">没有账号?
					<span class="ml10 color-blue" @click="registerClick">
						立即注册
					</span>
				</view>
				<!--#endif-->
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
  import socketStore from '@/uni_modules/vrapile-im/store'
  import { getToken } from '@/utils/token'
	export default {
		data() {
			return {
				loginType: 0,
				
				userName: "",
				password: "",
				
				verifyTimer: null,
				verifyCode: "",
				verifyTime: 0,
				verifyText: "发送验证码",
				
				isFocus: ""
			}
		},
		// onBackPress(e){
		// 	return true;
		// },
		onUnload() {
			if(this.verifyTimer) {  
				clearTimeout(this.verifyTimer);  
				this.verifyTimer = null;  
				this.verifyTime = 0;
			}  
		},
		onShow(){
			let loginInfo = this.$store.state.user.loginInfo;
			this.loginType = loginInfo.loginType || 0;
			this.userName = loginInfo.userName;
			this.password = loginInfo.password;
			if(!this.userName){
				this.usernamefocus();
			}else	if(this.loginType == 0){
				this.passwordfocus();
			}else{
				this.verifyfocus();
			}
		},
		
		methods: {
			onNavBarTap (index) {
				this.loginType = index;
			},
			verifyClick(){
				if(this.verifyTime != 0){
					return;
				}
				if(!this.isPhone(this.userName)){
					this.msg("必须为有效手机号");
					return;
				}
				
				this.verifyTime = 60;
				this.verifyText = this.verifyTime + " S";
				this.verifyTimer = setInterval(() => {
					this.timeInterval();
				}, 1000)
				this.diyApiGet('/captchaSms', {phone: this.userName}).catch(error => {
					if(this.verifyTimer) {  
						clearTimeout(this.verifyTimer);  
						this.verifyTimer = null;  
						this.verifyTime = 0;
					}  
					this.verifyText = "发送验证码";
				});
			},
			timeInterval() {
				this.verifyTime--;
				if (this.verifyTime > 0) {
					this.verifyText = this.verifyTime + " S";
				}else{
					if(this.verifyTimer) {  
						clearInterval(this.verifyTimer);  
						this.verifyTimer = null;  
					} 
					this.verifyText = "发送验证码";
				}
			},
			loginClick(){
				if(!this.userName){
					this.usernamefocus();
					return;
				}
				if(this.loginType==0 && !this.password){
					this.passwordfocus();
					return;
				}
				if(this.loginType==1 && !this.verifyCode){
					this.verifyfocus();
					return;
				}
				this.loading("正在登录...");
				store.dispatch('Login', {
					loginType: this.loginType,
					userName: this.userName.trim(),
					password: this.password,
					smsCode: this.verifyCode,
					registerFlag: "Y"
				}).then(() => {
					this.loginSuccess()
				}).catch(() => {
				})
			},
			loginSuccess() {
				store.dispatch('GetInfo').then(res => {
					socketStore.dispatch('GetChatList', {userId: store.state.user.userInfo.userId}).then(res=>{
						socketStore.dispatch('ConnSocket', { url: import.meta.env.VITE_APP_SOCKET_URL, token: getToken() });
					});
					this.reLaunch('/pages/home/user')
					this.closeLoading()
				}).catch(()=>{
					this.closeLoading()
				})
			},
			registerClick() {
				this.navigateTo('/pages/user/register')
			},
			forgetClick() {
				// this.navigateTo('/pages/user/forget')
			},
			usernamefocus() {
				this.isFocus = "username";
			},
			passwordfocus() {
				this.isFocus = "password";
			},
			verifyfocus() {
				this.isFocus = "verify";
			}
		}
	}
</script>

<style scoped>
	.login{
		width: 750rpx;
		height: 100vh;
		background-color: #55aaff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 50rpx;
	}
	.login-logo{
		width: 650rpx;
		opacity: 0.9;
	}
	.login-logo-image{
		width: 600rpx;
		height: 160rpx;
	}
	.login-block{
		width: 630rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 40rpx 0 150rpx 0;
		padding: 15rpx;
	}
	.login-type{
		margin: 20rpx;
		display: flex;
		justify-content: space-around;
	}
	.login-type-span{
		width: 280rpx;
		padding: 15rpx 0;
		font-size: 20px;
		border-radius: 10rpx;
		text-align: center;
		color: gray;
		background-color: #ebf7ff;
	}
	.login-type-span-alive{
		color: #fff;
		background-color: #55aaff;
	}
	.login-phone{
		display: flex;
		align-items: center;
		margin: 30rpx;
		padding: 20rpx 20rpx 0 0rpx;
	}
	.login-verify{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx;
		padding-top: 20rpx;
	}

	.login-phone-image,
	.login-verify-image{
		padding: 10rpx;
		height: 40rpx;
		width: 40rpx;
	}
	.login-phone-input,
	.login-verify-input{
		padding: 10rpx;
		width: 100%;
	}

</style>