mteacher/src/views/app/AppLogin.vue

<template>
    <div class="login">
        <div class="logo">
            <img src="../../assets/images/logo.png" alt="">
        </div>

        <div class="container">
            <div class="input-group">
                <input type="number" @blur="codeBlur" placeholder="请输入手机号报名或查询进度" class="input" v-model="phoneNumber" pattern="[0-9]">
            </div>
            <div class="input-group">
                <input type="text" @blur="codeBlur" placeholder="请输入验证码" class="input" v-model="code" >
                <span class="code-text" v-show="countDownStatus" @click="onSendCode">{{ codeText }}</span>
                <span class="code-text" v-show="!countDownStatus">
                    <van-count-down 
                        ref="countdown"
                        :auto-start="false"
                        :time="countDownTime" 
                        @finish="onFinished"
                        format="ss秒" />
                </span>
            </div>

            <van-button round size="large" @click="onCodeLogin" :disabled="codeDisable">登录</van-button>
        </div>
    </div>
</template>
<script>
import {sendSms, smsLogin, queryUserByPhone } from '@/api/app'
export default {
    name: 'login',
    data() {
        return {
            groupId: this.$route.query.groupId,
            codeDisable: true, // 验证码登录按钮状态
            countDownStatus: true, // 到计时状态
            phoneNumber: null,
            isRegister: 0, // 默认没有注册
            code: null,
            codeText: '获取验证码',
            countDownTime: 1000 * 120, // 倒计时时间
            isClick: false
        }
    },
    mounted() {
        // 登录时删除无用的token
        localStorage.removeItem('userInfo')
        localStorage.removeItem('Authorization')
    },
    watch: {
        phoneNumber(newValue) {
            this.onKeyUp(newValue, this.code)
        },
        code(newValue) {
            this.onKeyUp(this.phoneNumber, newValue)
        }
    },
    methods: {
        codeBlur() {
            setTimeout(() => {
                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        },
        onKeyUp(phoneNumber, code) {
            if(!phoneNumber || !code) {
                this.codeDisable = true
            } else {
                this.codeDisable = false
            }
        },
        onSendCode() { // 发送验证码
            if(!this.checkPhone(this.phoneNumber)) {
                return
            }

            sendSms({
                mobile: this.phoneNumber
            }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.countDownStatus = false
                    this.$refs.countdown.start() // 倒计时开始
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onCodeLogin() { // 短信登录
            if(this.isClick) {
                return
            }
            this.isClick = true
            queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.isRegister = result.data
                }
                this.onLogin()
            })
            
        },
        onLogin() {
            let params = {
                clientId: 'student',
                clientSecret: 'student',
                phone: this.phoneNumber,
                smsCode: this.code,
                channel: 'H5'
            }
            if(this.isRegister == 0) {
                params.isLessee = 'true'
            }
            smsLogin(params).then(sms => {
                let s = sms.data
                this.isClick = false
                // 保存用户信息
                if(s.code == 200) {
                    let auth = s.data.authentication
                    localStorage.setItem('userInfo', auth.token_type + ' ' + auth.access_token)
                    
                    this.$router.push({
                        path: '/classDetail',
                        query: {
                            groupId: this.groupId
                        }
                    })
                } else {
                    this.$toast(s.msg)
                }
            })
        },
        onFinished() { // 倒计时结束
            this.countDownStatus = true
            this.$refs.countdown.reset()
        },
        checkPhone(phoneNumber) {
            let result = true
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneNumber))){ 
                this.$toast('手机号输入有误')
                result = false
            }
            return result
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");

.login {
    min-height: 100vh;
    background: linear-gradient(to bottom, #15938B, #6dbeba);
}
.container {
    padding: 0 .48rem;
}
.logo {
    padding-top: 1rem;
    padding-bottom: .9rem;
    width: 1.6rem;
    margin: 0 auto;
    img {
        width: inherit;
    }
}
.input-group {
    position: relative;
    height: .44rem;
    border-radius: .5rem;
    border: .02rem solid @whiteColor;
    margin-bottom: .2rem;
    padding-left: .3rem;
    padding-right: .3rem;
    display: flex;
    align-items: center;
    .input {
        flex: 1;
        font-size: .14rem;
        color: @whiteColor;
        
        background: transparent;
        border: none;
        &::placeholder {
            color: @whiteColor;
        }
    }
    .code-text {
        position: absolute;
        right: 0;
        flex: 1;
        display: block;
        width: .94rem;
        text-align: center;
        border-left: .02rem solid @whiteColor;
        font-size: .14rem;
        color: @whiteColor;
        line-height: .3rem;
        height: .3rem;
    }
}
/deep/.van-count-down {
    font-size: .14rem;
    color: @whiteColor;
    line-height: .3rem;
    height: .3rem;
}
/deep/.van-button--large {
    height: .44rem;
    line-height: .42rem;
    color: @mColor;
    border: 0;
}
/deep/.van-button:active::before {
    opacity: 0.05;
}
/deep/.van-button--disabled {
    opacity: 1;
    color: rgba(0, 0, 0, 0.25);
}
.login-change {
    padding-top: .08rem;
    font-size: .14rem;
    color: @whiteColor;
    float: right;
}
</style>