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

<template>
	<view class="container login">
		<!-- logo区域 -->
		<view class="login-main">
			<image class="logo" :src="StaticUrl+'icon-logo@2x.png'" mode="widthFix"></image>
		</view>
		<!-- 邀请码 -->
		<view class="login-input">
			<input class="input" 
				   type="number" 
				   v-model="params.mobile" 
				   @blur="handBlurInput" 
				   placeholder="请输入手机号" 
				   maxlength="11"
			/>
		</view>
		<view class="login-input">
			<input class="input_code" 
				   type="number" 
				   v-model="params.msgCode" 
				   placeholder="请输入短信验证码"
				   maxlength="6"
			/>
			<view class="code-btn" :class="[isMobileDisabled  ? 'disabled' : '']">
				<button type="button"
						@click.stop="GetMobileCodeFn"
						:disabled="isMobileDisabled"
					    class="button"
				>
				{{ mobileCodeText }}
				</button>
			</view>
		</view>
		<!-- 提示信息 -->
		<view class="logo-message"><text>{{ loginMessage }}</text></view>
		<button class="login-btn" @click="goLogin" :disabled="isCodeEmpty">登录</button>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			invitationCode: '', //获取用户登录的邀请码
			loginMessage: '未注册的手机号验证后自动创建呵呵商城账户' ,//登录信息反馈
			StaticUrl:this.$Static,
			params:{
				mobile:'',
				msgCode:''
			},
			count: '',		//倒计时
			isMobileDisabled:true, //获取手机短信按钮
			mobileCodeText: '获取验证码',
			codeTime: null,
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['isWxAuthorize', 'isLoginType', 'isLoginProductId', 'isLoginOrderId']),
		// 邀请码长度是否符合要求
		isCodeEmpty() {
			return this.invitationCode.trim().length < 6
		},
		hasError() {
			return this.loginMessage.length > 0
		}
	},
	methods: {
		...mapMutations(['login', 'wxLogin']),
		getUserProfile() {
			const _that = this
			// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
			return new Promise((resolve, reject) => {
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success(res) {
						// 更新用户信息
						_that.wxLogin(res.userInfo)
						uni.setStorageSync('profileFlag', true)
						resolve(res.userInfo)
					},
					fail() {
						_that.$util.msg('授权失败', 2000)
					}
				})
			})
		},
		// 登录
		async goLogin() {
			const _that = this
			let wechatUserInfo = uni.getStorageSync('wechatUserInfo')
			let profileFlag = uni.getStorageSync('profileFlag')
			console.log(profileFlag);
			if (!profileFlag) {
				wechatUserInfo = await this.getUserProfile()
			}
			// 验证邀请码
			console.log(this.isWxAuthorize)
			this.UserService.userInvitation({
				invitationCode: this.invitationCode,
				nickName: wechatUserInfo.nickName,
				openid: uni.getStorageSync('openid')
			})
				.then(response => {
					console.log(response)
					// 保存用户信息
					_that.login(response.data)
					_that.$store.commit('updateStatus', response.data)
					// 登录成功提示
					_that.$util.msg('登录成功', 1500, false, 'success')
					setTimeout(() => {
						_that.$api.navigateTo(`/pages/index/index`)
					}, 1500)
				})
				.catch(error => {
					_that.loginMessage = error.msg
					_that.isUserInfo = false
					setTimeout(() => {
						_that.loginMessage = ''
					}, 2000)
				})
		},
		GetMobileCodeFn(){//获取手机验证码
			if( this.params.mobile == ''){
				this.$util.msg('请输入手机号',2000);
				return
			}
			if(!this.$reg.isMobile(this.params.mobile)){
				this.$util.msg('请输入正确的手机号',2000);
				return
			}
			let params = {
					mobile:this.params.mobile,
					platformType:2,
					isCheckCaptcha:0,
			}
			this.isMobileDisabled = true;
			this.PublicService.GetBindMobileCode(params)
				.then(res =>{
					const TIME_COUNT = 60;
					this.$util.msg('验证短信已发送',2000)
			     	if (!this.codeTime) {
			       		this.count = TIME_COUNT;
						this.isMobileDisabled = true;
			       		this.codeTime = setInterval(() => {
			       			if (this.count > 1 && this.count <= TIME_COUNT) {
			         			this.count--
			         			this.mobileCodeText = this.count +'s重新发送'
			        		} else {
				         		this.isMobileDisabled = false;
				         		clearInterval(this.codeTime)
				         		this.codeTime = null
								this.mobileCodeText = '获取验证码'
			        		}
			       		},1000)
			      	}
				})
				.catch( error =>{
					this.$util.msg(error.msg,2000)
					this.isMobileDisabled = false;
				})
		},
		handBlurInput(e){
			console.log(e)
			if(e.detail.value){
				this.isMobileDisabled = false
			}else{
				this.isMobileDisabled = true
			}
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
.login {
	display: flex;
	align-items: center;
	flex-direction: column;
	.login-main,
	.login-title,
	.logo-message {
		width: 590rpx;
	}
	.login-main {
		display: flex;
		justify-content: center;
		margin: 180rpx 0 60rpx;
		.logo {
			width: 200rpx;
			height: 200rpx;
			display: block;
		}
	}
	.login-title {
		display: flex;
		justify-content: flex-start;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 6rpx;
		}
	}
	.login-btn {
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		background:$btn-confirm ;
		border-radius: 45rpx;
		color: #fff !important;
		margin-top: 40rpx;
	}
	.login-input {
		margin: 10rpx 0;
		width: 600rpx;
		height: 90rpx;
		box-sizing: border-box;
		padding: 25rpx 0;
		border-bottom: 1px solid #E1E1E1;
		.input{
			width: 100%;
			height: 40rpx;
			left: 40rpx;
			font-size: $font-size-28;
			color: #333333;
		}
		.input_code{
			width: 420rpx;
			height: 40rpx;
			left: 40rpx;
			font-size: $font-size-28;
			color: #333333;
			float: left;
		}
		.code-btn{
			width: 180rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: $font-size-28;
			color: #333333;
			float: right;
			text-align: center;
			.button{
				width: 180rpx;
				height: 40rpx;
				line-height: 40rpx;
				padding: 0;
				color: $color-system;
			}
			&.disabled{
				.button{
					color: #b2b2b2;
				}
			}
		}
	}
	.logo-message {
		font-size: 24rpx;
		line-height: 44rpx;
		color: #fc464c;
		text-align: left;
	}
}
</style>