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>
		<cm-loading text="登录中..." :visible="isLogin"></cm-loading>
	</view>
</template>

<script>
import authorize from '@/common/authorize.js'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import { mapGetters, mapActions } from 'vuex'
import { switchTabTo } from '@/common/utilsTools.js'
export default {
    components: {
        CmLoading
    },
    data() {
        return {
            invitationCode: '', //获取用户登录的邀请码
            loginMessage: '未注册的手机号验证后自动创建呵呵商城账户', //登录信息反馈
            StaticUrl: this.$Static,
            disabled: false,
            params: {
                mobile: '',
                headImgUrl: '', //微信头像
                nickName: '', //微信昵称
                openId: '', //微信openId
                verificationCode: '' //短信验证码
            },
            count: '', //倒计时
            isMobileDisabled: true, //获取手机短信按钮
            mobileCodeText: '获取验证码',
            codeTime: null,
            isLogin: false,
            hasProfile: false,
        }
    },
    onLoad() {
        if (this.hasLogin) return this.$api.switchTabTo('/pages/tabBar/index/index')
    },
    created() {
        this.loginInit()
    },
    computed: {
        ...mapGetters(['hasLogin'])
    },
    methods: {
        ...mapActions('user', ['customLogin']),
        // 初始化登录状态
        loginInit() {
            const userInfo = uni.getStorageSync('userInfo')
            if (userInfo) {
                this.hasProfile = true
                this.params.nickName = userInfo.nickName
                this.params.headImgUrl = userInfo.avatarUrl
            } else {
                this.hasProfile = false
            }
        },
        // 登录
        SubMitLogins() {
            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.hasProfile ? this.LoginGetUser() : this.ProfileAndLogin()
            // this.ProfileAndLogin()
        },
        // 获取用户信息
        GetUserProfile() {
            return new Promise((resolve, reject) => {
                wx.getUserProfile({
                    desc: '呵呵商城小程序获取您的信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: res => {
                        this.params.nickName = res.userInfo.nickName
                        this.params.headImgUrl = res.userInfo.avatarUrl
                        this.hasProfile = true
                        // 缓存用户信息
                        uni.setStorageSync('userInfo', res.userInfo)
                        resolve()
                    },
                    fail: () => {
                        this.$util.msg('授权失败', 2000)
                        this.hasProfile = false
                        reject()
                    }
                })
            })
        },
        // 授权并且登录
        ProfileAndLogin() {
            this.GetUserProfile().then(() => {
                this.LoginGetUser()
            })
        },
        // 登录
        async LoginGetUser() {
			this.isLogin = true
            try {
                await this.customLogin(this.params)
                this.hasProfile = false
            } finally {
				this.isLogin = 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
            }
        }
    }
}
</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>