mteacher/src/views/app/AppRegister.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" placeholder="请输入手机号" class="input" v-model="phoneNumber" pattern="[0-9]">
            </div>
            <div class="input-group" style="margin-bottom: .05rem;">
                <input type="text" 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>
            <div class="agreeProtocol">
                <van-checkbox v-model="agreeStatus"></van-checkbox>
                <i style="font-style: normal;" @click="agreeStatus = !agreeStatus">阅读并同意</i> <span @click="onToProtocol">《用户协议》</span>
            </div>
            <van-button round size="large" @click="onCodeLogin" >注册并登录</van-button>
            <span class="login-change" @click="onUrlLogin">登录</span>
        </div>
    </div>
</template>
<script>
import {sendSms, smsLogin, queryUserByPhone } from '@/api/app'
export default {
    name: 'login',
    data() {
        let query = localStorage.getItem('getRegister')
        query = query ? JSON.parse(query) : {}
        localStorage.removeItem('getRegister')
        return {
            groupId: this.$route.query.groupId,
            // codeDisable: true, // 验证码登录按钮状态
            countDownStatus: true, // 到计时状态
            phoneNumber: query.phoneNumber ? query.phoneNumber : null,
            isRegister: 0, // 默认没有注册
            code: query.code ? query.code : null,
            codeText: '获取验证码',
            countDownTime: 1000 * 120, // 倒计时时间
            isClick: false,
            agreeStatus: query.agreeStatus ? query.agreeStatus : false
        }
    },
    mounted() {
        // 登录时删除无用的token
        localStorage.removeItem('userInfo')
        localStorage.removeItem('Authorization')
    },
    methods: {
        codeBlur() {
            setTimeout(() => {
                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        },
        onToProtocol() {
            localStorage.setItem('getRegister', JSON.stringify({
                phoneNumber: this.phoneNumber,
                code: this.code,
                agreeStatus: this.agreeStatus
            }))
            this.$router.push({
                path: '/userProtocol',
                query: {
                    groupId: this.groupId,
                }
            })
        },
        onUrlLogin() {
            this.$router.push({
                path: '/appLogin',
                query: {
                    groupId: this.groupId
                }
            })
        },
        onSendCode() { // 发送验证码
            if(!this.checkPhone(this.phoneNumber)) {
                return
            }

            queryUserByPhone({ mobile: this.phoneNumber }).then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.isRegister = result.data
                    if(result.data == 1) {
                        this.$toast('用户已存在')
                        return
                    } else {
                        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.phoneNumber) {
                this.$toast('请输入手机号')
                return
            } else if(!this.checkPhone(this.phoneNumber)) {
                return
            }

            if(!this.code) {
                this.$toast('请输入验证码')
                return
            }

            if(!this.agreeStatus) {
                this.$toast('请先阅读并同意用户协议')
                return
            }

            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
                    if(result.data == 1) {
                        this.$toast('用户已存在')
                        this.isClick = false
                        return
                    } else {
                        this.onLogin()
                    }
                }
                
            })
        },
        onLogin() {
            let params = {
                clientId: 'student',
                clientSecret: 'student',
                phone: this.phoneNumber,
                smsCode: this.code,
                channel: 'H5',
                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)
                    
                    if(s.password) {
                        this.$router.push({
                            path: '/classDetail',
                            query: {
                                groupId: this.groupId
                            }
                        })
                    } else {
                        this.$router.push({
                            path: '/appSetInfo',
                            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;
}
.agreeProtocol {
    font-size: .14rem;
    display: flex;
    align-items: center;
    // color: #333333;
    color: #fff;
    padding: .05rem .06rem .15rem;
    .van-checkbox {
        padding-right: .08rem;
        
    }
    /deep/.van-checkbox__icon .van-icon {
        // border-color: #14928A;
        background: #fff;
    }
    /deep/.van-checkbox__icon--checked .van-icon {
        color: #14928A;
        background-color: #fff;
        border-color: #fff;
    }
    span {
        // color: #14928A;
        color: #fff;
    }
}
.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>