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() {
            try {
                this.isLogin = true
                await this.customLogin(this.params)
                this.isLogin = false
                this.hasProfile = false
            } catch (e) {
                this.isLogin = false
                this.hasProfile = 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>