wxdaya/src/views/loginActive.vue

<template>
    <div class="login" :style="{ minHeight: bodyHeight + 'px' }">
        <div class="section">
            <h2>手机号</h2>
            <van-cell-group class="form-container top">
                <van-field v-model="form.phone"
                    center
                    clearable
                    placeholder="请输入手机号" >
                </van-field>
            </van-cell-group>
            <h2>验证码</h2>
            <van-cell-group class="form-container">
                <van-field v-model="form.code" center
                    clearable
                    placeholder="请输入短信验证码" >
                    <van-button slot="button" @click="sendCode" size="small" type="primary">{{ smsText }}</van-button>
                </van-field>
            </van-cell-group>

            <div class="btn-group">
                <van-button size="large" @click="onSubmit" class="btn">登录</van-button>
            </div>
        </div>
        
        

    </div>
</template>

<script>
/* eslint-disable */
import qs from 'qs'
export default {
    name: 'login',
    data() {
        return {
            bodyHeight: 0,
            popupStatus: false,
            popupCodeStatus: false, // 发送验证码弹窗
            smsText: '发送验证码',
            popupText: '',
            codeStatus: true, // 是否可以发送验证码
            btnStatus: true, 
            form: {
                phone: null,
                code: null
            }
        }
    },
    created() {
        this.bodyHeight = document.documentElement.clientHeight
    },
    mounted() {
        
    },
    methods: {
        codeBlur() {
            setTimeout(() => {
                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        },
        onSubmit() {
            let form = this.form
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(form.phone))){ 
                this.$toast('手机号输入有误')
                return false; 
            }

            this.$axios.get(`/user/getMecUser?phone=${form.phone}&smsCode=${form.code}`).then((response) => {
                let result = response.data
                console.log(result)
                if(result.code == 200) {
                    this.$router.push({
                        path: '/activePay/' + new Date().getTime(),
                        query: {
                            userId: result.data.userId,
                            branchId: result.data.branchId
                        }
                    })
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        checkCode() {
            let params = this.$route.query
            let code = this.form.code
            if(code.length >= 6) {
                this.$axios.post('/user/verifySmsCode', qs.stringify({
                    smsCode: code,
                    mobile: this.form.phone
                })).then(res => {
                    let result = res.data
                    if(result.status) {
                         this.$router.push({
                            path: 'register',
                            query: {
                                phone: this.form.phone,
                                cityId: params.cityId,
                                classId: this.dataList.classId,
                                schoolId: params.schoolId,
                                status: this.dataList.status, // 当前乐团状态
                                schoolName: this.dataList.schoolName,
                                branchId: this.dataList.branchId
                            }
                        })
                    } else {
                        this.$toast('验证码输入有误')
                        this.form.code = ''
                    }
                })
            }
        },
        sendCode() {
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.phone))){ 
                this.$toast('手机号输入有误')
                return false; 
            }
            // 发送短信验证码
            if(!this.codeStatus) {
                return false
            }
            this.$axios.get('/user/sendSmsCode?mobile=' + this.form.phone).then(res => {
                let result = res.data
                this.codeStatus = false
                this.CountDown()
            })
        },
        CountDown() {
            let s = 120
            this.smsText = s + '秒'
            let timer = setInterval(() => {
                if(s <= 0) {
                    this.codeStatus = true
                    this.smsText = '发送验证码'
                    clearInterval(timer)
                } else {
                    s--
                    this.smsText = s + '秒'
                }
            }, 1000)
        },
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: url('../assets/bg1.png') no-repeat left top;
    background-size: cover;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section {
    padding: 0 .25rem;
    transform: translateY(.7rem);
    h2 {
        font-size: .16rem;
        color: #FFFFFF;
    }
}
.form-container {
    background: transparent;
    &.top {
        margin-bottom: .3rem;
    }
    .van-cell {
        background: transparent;
        padding-left: 0;
        border-bottom: 1px solid #fff;
        /deep/.van-field__control {
            font-size: .16rem;
            color: #fff;
        }
    }
    
}
/deep/.van-hairline--top-bottom::after, /deep/.van-hairline-unset--top-bottom::after {
    border-width: 0;
}
/deep/.van-button--primary {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 30px;
}

.btn {
    margin-top: .3rem;
    margin-bottom: .2rem;
    border-radius: 1rem;
    background:linear-gradient(270deg,rgba(242,209,163,1) 0%,rgba(188,130,76,1) 100%);
    border: 0;
    color: #fff;
    font-size: .18rem;
}

input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}
</style>