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.verificationCode" 
				   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"
				:class="[isLoginStatus  ? 'disabled' : '']"
				type="primary" 
				open-type="getUserInfo" 
				size="small" 
				@click="SubMitLogins" 
				lang="zh_CN">
				登录
		</button>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/services/wxLogin.js'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			invitationCode: '', //获取用户登录的邀请码
			loginMessage: '未注册的手机号验证后自动创建呵呵商城账户' ,//登录信息反馈
			StaticUrl:this.$Static,
			disabled:false,
			params:{
				mobile:'',
				headImgUrl:'',		//微信头像
				nickName:'',	    //微信昵称
				openId:'',		   //微信openId
				verificationCode:''//短信验证码
			},
			count: '',		//倒计时
			isMobileDisabled:true, //获取手机短信按钮
			mobileCodeText: '获取验证码',
			codeTime: null,
			isLoginStatus:false
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['isWxAuthorize', 'isLoginType', 'isLoginProductId', 'isLoginOrderId']),
	},
	methods: {
		...mapMutations(['login', 'wxLogin']),
		// 登录
		SubMitLogins() {		
			// const WechatInfo = uni.getStorageSync('wechatUserInfo')
			if(this.isLoginStatus){return}
			if(!this.params.mobile){
				this.$util.msg('请输入手机号',2000);
				return
			}
			if(!this.$reg.isMobile(this.params.mobile)){
				this.$util.msg('请输入正确的手机号',2000);
				return
			}
			if( this.params.verificationCode == ''){
				this.$util.msg('请输入短信验证码',2000);
				return
			}
			this.params.openId = uni.getStorageSync('openId');
			this.GetUserProfile();
			
		},
		GetUserProfile(){
			const self = this
			// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
			wx.getUserProfile({
				desc: '呵呵商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success(res) {
					console.log('新API',res)	
					self.wxLogin(res.userInfo)	
					self.params.nickName = res.userInfo.nickName
					self.params.headImgUrl = res.userInfo.avatarUrl
					self.isLoginStatus = true
					self.LoginGetUser()
				},
				fail() {
					self.$util.msg('授权失败', 2000)
				}
			})
		},
		LoginGetUser(){
			this.UserService.UserMobileLogin(this.params)
			.then(response => {
				// 保存用户信息
				const _data = JSON.parse(response.data);
				this.login(_data)
				this.$store.commit('updateStatus',_data)
				// 登录成功提示
				this.$util.msg('登录成功', 1500, false, 'success')
				this.isLoginStatus = false
				setTimeout(() => {
					this.$api.switchTabTo(`/pages/tabBar/index/index`)
				}, 1500)
			})
			.catch(error => {
				this.$util.msg(error.msg,2000)
				this.isLoginStatus = false
			})
		},
		GetMobileCodeFn(){//获取手机验证码
			if( this.params.mobile == ''){
				this.$util.msg('请输入手机号',2000);
				return
			}
			if(!this.$reg.isMobile(this.params.mobile)){
				this.$util.msg('请输入正确的手机号',2000);
				return
			}
			this.isMobileDisabled = true;
			this.PublicService.GetheHeSend(
				{
					mobile:this.params.mobile,
				}
			)
			.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() {
		wxLogin.wxLoginAuthorize()
	}
}
</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;
		&.disabled{
			background: #E1E1E1;
			color: #999999;
		}
	}
	.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>