caimei-applets-mcare/pages/login/login.vue

<template>
	<view class="container login">
		<view class="login-main">
			<image class="logo" :src="staticUrl + 'logo@2x.png'" mode=""></image>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template else>
			<view class="login-form" v-if="loginType === 0">
				<view class="login-input">
					<text class="iconfont icon-shoujihao"></text>
					<input
						type="number"
						v-model="codeParams.mobile"
						maxlength="11"
						class="input"
						placeholder="请输入已注册的手机号"
						@input="handleMobile"
					/>
				</view>
				<view class="login-input">
					<text class="iconfont icon-duanxin"></text>
					<input
						type="number"
						v-model="codeParams.code"
						maxlength="6"
						class="input code"
						placeholder="请输入短信验证码"
						@input="handleSmsCode"
					/>
					<view class="code-btn" :class="isMobileDisabled ? 'disabled':''" @click.stop="handleMobileCode"> {{ mobileCodeText }} </view>
				</view>
				<view class="login-input link">
					<view class="login-reg" v-if="!isUnderLogin" @click.stop="navigatorRegirst('/pages/login/register')">免费注册</view>
					<view class="login-pwd" @click.stop="handeleLogin(1)">密码登录</view>
				</view>
			</view>
			<view class="login-form" v-if="loginType === 1">
				<view class="login-input">
					<text class="iconfont icon-shoujihao"></text>
					<input
						type="text"
						v-model="accountParams.mobileOrEmail"
						maxlength="11"
						class="input"
						placeholder="请输入已注册的手机号"
						@input="handleMobileOrEmail"
					/>
				</view>
				<view class="login-input">
					<text class="iconfont icon-mima"></text>
					<input
						type="password"
						v-model="accountParams.password"
						maxlength="18"
						class="input"
						placeholder="请输入密码"
						autocomplete="new-password"
						@input="handlePassword"
					/>
				</view>
				<view class="login-input link">
					<view class="login-reg" v-if="!isUnderLogin" @click.stop="navigatorRegirst('/pages/login/register')">免费注册</view>
					<view class="login-pwd" @click.stop="handeleLogin(0)">验证码登录</view>
				</view>
			</view>
			<button class="login-btn" :disabled="isDisabled" :class="isDisabled ? 'disabled' : ''" @click="handleSubLogin">
				登录
			</button>
			<view class="login-text" v-if="loginType === 1" @click.stop="this.$api.navigateTo('/pages/login/password')"
				>忘记密码?</view
			>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
export default {
	data() {
		return {
			staticUrl:this.global.staticUrl,
			skeletonShow:true,
			getOption: '', //页面传递参数
			accountParams: {
				mobileOrEmail: '', //用户登录账号
				password: '', //用户登录密码
				unionId: ''
			},
			codeParams: {
				mobile: '', //用户登录手机号
				code: '',
				unionId: ''
			},
			smsCodeParams: {
				mobile: '' ,//用户登录手机号
				imgCode:'',
				platformType:0,
				isCheckCaptcha:1,
				activateCodeType:9
			},
			loginType: 0,
			isMobileDisabled: false, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '获取验证码',
			mobilTime: null,
			isDisabled: true,
			isUnderLogin:false
		}
	},
	onLoad(option) {
		this.getOption = JSON.stringify(option)
	},
	computed: {
		...mapState(['hasLogin', 'isWxAuthorize', 'isLoginType'])
	},
	methods: {
		...mapMutations(['login']),
		async infoClucbUser(){
			const user = await this.$api.getStorage()
			if(user.clubStatus === 1 || user.clubStatus === 99){
				this.isUnderLogin = true
			}
			this.skeletonShow = false
		},
		handleMobileOrEmail(e) {
			//账号输入
			this.accountParams.mobileOrEmail = e.detail.value
			this.handldeCheckInput()
		},
		handlePassword(e) {
			//密码输入
			this.accountParams.password = e.detail.value
			this.handldeCheckInput()
		},
		handleMobile(e) {
			//短信验证手机号输入
			this.codeParams.mobile = this.smsCodeParams.mobile = e.detail.value
			this.handldeCheckInput()
		},
		handleSmsCode(e) {
			//短信验证码输入
			this.codeParams.code = e.detail.value
			this.handldeCheckInput()
		},
		handldeCheckInput() {
			// 控制按钮按钮高亮
			if (this.loginType === 0) {
				this.isDisabled = !(this.codeParams.mobile !== '' && this.codeParams.code !== '')
			} else {
				this.isDisabled = !(this.accountParams.mobileOrEmail !== '' && this.accountParams.password !== '')
			}
		},
		handleMobileCode() {
			// 获取短信验证码
			if(this.isMobileDisabled){ return }
			if (this.smsCodeParams.mobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.smsCodeParams.mobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			this.isMobileDisabled = true
			this.userLoginCode(this.smsCodeParams)
		},
		async userLoginCode(params) {
			// 获取登录短息验证码
			try{
				const res = await this.UserService.userLoginCode(params)
				this.$util.msg('获取验证码成功', 2000)
				const TIME_COUNT = 60
				if (!this.mobilTime) {
					this.mobilCount = TIME_COUNT
					this.isMobileDisabled = true
					this.mobilTime = setInterval(() => {
						if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
							this.mobilCount--
							this.mobileCodeText = this.mobilCount + 's'
						} else {
							this.isMobileDisabled = false
							clearInterval(this.mobilTime)
							this.mobilTime = null
							this.mobileCodeText = '获取验证码'
						}
					}, 1000)
				}
			}catch(error){
				//TODO handle the exception
				this.$util.msg(error.msg, 2000)
				this.isMobileDisabled = false
			}
		},
		async handleSubLogin() {
			// 点击登录
			const stor = await this.$api.getStorage()
			this.accountParams.unionId = this.codeParams.unionId = stor.unionId ? stor.unionId : ''
			if (this.loginType === 0) {
				this.userCodeLogin()
			} else {
				this.userPasswordLogin()
			}
		},
		async userCodeLogin() {
			// 短信验证码登录
			try{
				const res =await this.UserService.userCodeLogin(this.codeParams)
				this.updataeStatus(res)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		async userPasswordLogin() {
			// 账号密码登录
			try{
				const res =await this.UserService.AorganizationLogin(this.accountParams)
				this.updataeStatus(res)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		updataeStatus(data) {
			// 处理返回数据
			if (data.code === 0) {
				uni.setStorageSync('token', data.data.token)
				this.$store.commit('updateStatus', data.data)
				this.login(data.data)
				// 登录成功处理
				const url = uni.getStorageSync('LOGIN_REDIRECT_URL')
				if (url) {
				    if (url.indexOf('tabBar') > -1) {
				        uni.switchTabTo(url)
				    } else {
						this.$api.redirectTo(url)
				    }
				} else {
				   this.$api.switchTabTo('/pages/tabBar/user/user')
				}
			} else {
				this.$util.msg(data.msg, 2000)
			}
		},
		navigatorRegirst(url) {
			this.$api.navigateTo(url)
		},
		handeleLogin(type) {
			this.loginType = type
		},
		async checkedAuthorize() {
			//是否已授权 0:为取消授权 1:为已授权 2:为未操作
			// wxLogin.wxLoginQuick()
		}
	},
	onShow() {
		this.infoClucbUser()
	}
}
</script>

<style lang="scss">
.login {
	width: 100%;
	height: auto;
	.model-warp.none {
		display: none;
	}
	.model-warp.show {
		display: block;
	}
	.login-main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 206rpx;
		padding: 60rpx 0 40rpx 0;
		margin-bottom: 70rpx;
		.logo {
			width: 358rpx;
			height: 206rpx;
			display: block;
		}
	}
	.login-input {
		width: 600rpx;
		height: 88rpx;
		padding: 24rpx 0;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #ffffff;
		position: relative;
		box-sizing: border-box;
		border-bottom: 1px solid #e1e1e1;
		.input {
			width: 100%;
			height: 100%;
			background: #ffffff;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #333333;
			padding-left: 100rpx;
			box-sizing: border-box;
			&.code {
				padding-right: 200rpx;
			}
		}
		.code-btn {
			width: 180rpx;
			height: 64rpx;
			position: absolute;
			right: 0;
			top: 10rpx;
			line-height: 64rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: $font-size-24;
			border-radius: 32rpx;
			background: $btn-confirm;
			&.disabled{
				background: #E1E1E1;
			}
		}
		.iconfont {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 48rpx;
			color: #333333;
			width: 100rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: left;
		}
		&.link {
			background: #ffffff;
			margin-bottom: 40rpx;
			padding: 0 0;
			line-height: 40rpx;
			font-size: $font-size-24;
			border-bottom: none;
			.login-reg {
				float: left;
				color: $color-system;
			}
			.login-pwd {
				float: right;
				color: $text-color;
			}
		}
	}
	.login-btn {
		width: 600rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: $font-size-28;
		line-height: 88rpx;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
		background: $btn-confirm;
		&.disabled {
			background: #e2e2e2;
		}
	}
	.login-text {
		width: 600rpx;
		height: 88rpx;
		font-size: $font-size-28;
		line-height: 88rpx;
		color: #333333;
		margin: 0 auto;
		text-align: center;
	}
	.login-tel {
		width: 702rpx;
		font-size: $font-size-28;
		line-height: 80rpx;
		margin: 0 auto;
		color: $text-color;
		text-align: center;
		margin-top: 150rpx;
	}
	.model-authorization {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.authorization {
			width: 518rpx;
			height: 320rpx;
			position: absolute;
			background: rgba(255, 255, 255, 0.7);
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			.to-btn {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 70%;
				height: 88rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #ffffff;
				text-align: center;
				border-radius: 44rpx;
			}
		}
	}
}
</style>