wxdaya/src/views/login.vue

<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/logo.png" style="width: 1.25rem;" alt="">
        </div>
        <div class="bandSection">
            <div class="school">
                {{ dataList.schoolName }}
            </div>
            <div class="phoneSection">
                <i class="man_icon"></i>
                <input type="number" v-model="dataList.phoneNumber" class="phone" pattern="[0-9]" placeholder="请输入手机号报名或查询进度">
            </div>
        </div>

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

        <van-popup class="popup" v-model="popupStatus">
            <div class="pContainer">
                <i class="message_icon"></i>
                <div class="content">
                    <p class="status">{{ statusList(popupText) }}</p>
                    <p class="dec" v-if="popupText == 0">请您耐心等待</p> 
                </div>
            </div>
            <div class="pGroup">
                <van-button class="button" @click="popupStatus = false">取消</van-button>
                <van-button class="button" @click="popupStatus = false">确定</van-button>
            </div>
        </van-popup>

        <van-popup class="popup-code" v-model="popupCodeStatus" :close-on-click-overlay="false">
            <div class="code_section">
                <h2 class="code_title">输入短信验证码</h2>
                <div class="input-group">
                    <input type="number" @keyup="checkCode()" v-model="dataList.code" class="phone" pattern="[0-9]" placeholder="请输入验证码">
                    <span class="code_btn" :class="[codeStatus?'':'disable']" @click="sendCode">{{ smsText }}</span>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
/* eslint-disable */
import { Button, Popup, Toast, Dialog } from 'vant'
import qs from 'qs'
export default {
    name: 'login',
    components: { Button, Popup, Toast, Dialog },
    data() {
        return {
            popupStatus: false,
            popupCodeStatus: false, // 发送验证码弹窗
            smsText: '发送验证码',
            popupText: '',
            codeStatus: true, // 是否可以发送验证码
            dataList: {
                status: null,
                schoolName: '', // 乐团名称
                phoneNumber: '', // 手机号
                branchId: '', // 分部编号
                classId: '', // 乐团编号
                code: '',  // 验证码
            }
        }
    },
    mounted() {
        let route = this.$route.query
        let params = {
            schoolId: route.schoolId
        }
        axios.post(`/user/getClassDetail`,qs.stringify(params)).then((response) => {
            let result = response.data
            if(result.data) {
                this.dataList = {
                    status: result.data.status,
                    schoolName: result.data.name,
                    phoneNumber: '',
                    code: '',
                    branchId: result.data.branchId,
                    classId: result.data.id
                }
            } else {
                Dialog.alert({
                    title: '提示',
                    message: '乐团建设中，请稍等',
                    confirmButtonColor: '#269a93'
                })
            }
            
        })
    },
    methods: {
        onSubmit() {
            let dataStatus = this.dataList.status

            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.dataList.phoneNumber))){ 
                Toast('手机号输入有误')
                return false; 
            }
            let params = this.$route.query
            axios.get(`/user/getUserDetailByPhone?clazzId=${this.dataList.classId}&phone=${this.dataList.phoneNumber}&cityId=${params.cityId}`).then((res) => {
                let result = res.data
                // 判断是否有数据
                if(result.status) {
                    if(result.data) {
                        if(parseInt(result.data.pushStatus) == 1) {
                            Dialog.alert({
                                title: '提示',
                                message: '恭喜您，报名成功',
                                confirmButtonColor: '#269a93'
                            })
                        } else if(parseInt(result.data.pushStatus) == 2 && parseInt(result.data.status)  == 0) {
                            this.$router.push({
                                path: 'home',
                                query: {
                                    branchId: result.data.branchId,
                                    stuId: result.data.id,
                                    classId: result.data.classId
                                }
                            })
                        } else if(parseInt(result.data.status) == 1) {
                            Dialog.alert({
                                title: '注册完成',
                                message: '您已完成注册，欢迎加入管乐团开启您的器乐学习之旅，请等待开课通知！',
                                confirmButtonColor: '#269a93'
                            })
                        }
                    } else {
                        this.sendCode() // 发送短信
                    }
                } else {
                    Dialog.alert({
                        title: '提示',
                        message: result.msg,
                        confirmButtonColor: '#269a93'
                    })
                }
            })
        },
        checkCode() {
            let params = this.$route.query
            let code = this.dataList.code
            if(code.length >= 6) {
                axios.post('/user/verifySmsCode', qs.stringify({
                    smsCode: code,
                    mobile: this.dataList.phoneNumber
                })).then(res => {
                    let result = res.data
                    if(result.status) {
                         this.$router.push({
                            path: 'register',
                            query: {
                                phone: this.dataList.phoneNumber,
                                cityId: params.cityId,
                                classId: this.dataList.classId,
                                schoolId: params.schoolId,
                                status: this.dataList.status, // 当前乐团状态
                                schoolName: this.dataList.schoolName,
                                branchId: this.dataList.branchId
                            }
                        })
                    } else {
                        Toast('验证码输入有误')
                        this.dataList.code = ''
                    }
                })
            }
        },
        sendCode() {
            // 发送短信验证码
            if(!this.codeStatus) {
                return false
            }
            axios.get('/user/sendSmsCode?mobile=' + this.dataList.phoneNumber).then(res => {
                this.popupCodeStatus = true // 开启弹窗
                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);
        },
        statusList(index) {
            let statusText
            switch(index) {
                case 0: 
                    statusText = '报名中'
                break;
                case 1: 
                    statusText = '缴费中'
                break;
            }
            return statusText
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: #14928A;
}
.logo {
    padding-top: .6rem;
    text-align: center
}

// 弹窗验证码
.code_section {
    width: 90vw; 
    border-radius: .08rem;
    padding-bottom: .15rem;
    .code_title {
        font-size: .16rem;
        text-align: center;
        padding: .1rem 0;
        color: #444;
    }
    .input-group {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .phone {
        padding-left: .08rem;
        height: .48rem;
        line-height: .48rem;
        background:rgba(244,244,244,1);
        border: 1px solid #ccc;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
    }

    .code_btn {
        color: #fff;
        font-size: .12rem;
        height: .48rem;
        line-height: .48rem;
        background: #14928A;
        // padding: .05rem .12rem;
        text-align: center;
        width: .84rem;
        border-top-right-radius:5px;
        border-bottom-right-radius:5px;
        &.disable {
            color: #fff;
            background: #aaa;
        }
    }

}

.bandSection {
    padding: .5rem .28rem 0;
    .school {
        color: #fff;
        font-size: .16rem;
        font-weight: bold;
        border-bottom: 2px solid #fff;
        padding-bottom: .08rem;
        margin-bottom: .2rem;
    }

    .phoneSection {
        background:rgba(0,0,0,0.25);
        border-radius:5px;
        display: flex;
        align-items: center;
        height: .45rem;
    }
    .man_icon {
        background: url('../assets/man_icon.png') no-repeat center;
        background-size: contain;
        width: .15rem;
        height: .21rem;
        margin-left: .15rem;
    }

    .phone {
        flex: 1;
        border: 0;
        background-color: transparent;
        color: #fff;
        padding-left: .12rem;
        font-size: .14rem;
        &::placeholder{
            color: #FFFFFF;
        }
    }
}
.btn-group {
    padding: .3rem .35rem 0;
}
.btn {
    border-radius: 1rem;
    background-color: #fff;
    color: #269a93;
    font-size: .16rem;
    margin-bottom: .2rem;
}
.popup {
    width: 75%;
    padding: .2rem .2rem .1rem;
    border-radius: .05rem;
}
.pContainer {
    display: flex;
    .message_icon {
        display: inline-block;
        background: url('../assets/message_icon.png') no-repeat center;
        background-size: contain;
        width: .32rem;
        height: .32rem;
        margin-top: .05rem;
    }
    .content {
        display: flex;
        color: #444;
        flex-direction: column;
        padding-left: .16rem;
        .status {
            font-size: .2rem;
            padding-bottom: .05rem;
        }
        .dec {
            font-size: .16rem;
        }
    }
}
.pGroup {
    display: flex;
    justify-content: space-between;
    padding-top: .15rem;
    .button {
        border: 0;
        color: #009688;
        font-size: .14rem;
        &:active::before {
            opacity: 0;
        }
    }
}
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>