0
  • <template>

        <div class="regust-page">

            <div class="title">注册</div>

            <div class="regust-from-part">

                <el-form label-width="80px" size="small">

                    <el-form-item label="邮箱地址" :required="true">

                        <el-input v-model="userVo.email" @blur="checkMailCode"></el-input>

                        <el-button  Style="margin-left: 10px;" type="primary"

                                    @click="sendEmailCode" :disabled="mailCodeSendDisable">

                            {{mailCodeSendBtnWords}}

                        </el-button>

                    </el-form-item>

                    <el-form-item label="验证码" :required="true">

                        <el-input v-model="emailCode" @blur="checkMailCode"></el-input>

                    </el-form-item>

                    <el-form-item label="用户名" :required="true">

                        <el-input v-model="userVo.userName" :disabled="!isMailCodeCompleted"></el-input>

                    </el-form-item>


                    <el-dropdown>

                    <span class="el-dropdown-link">

                        用户类型<i class="el-icon-arrow-down el-icon--right"></i>

                    </span>

                    <el-dropdown-menu slot="dropdown">

                        <el-dropdown-item disabled>系统用户</el-dropdown-item>

                        <el-dropdown-item disabled>超级用户</el-dropdown-item>

                        <el-dropdown-item disabled>贵宾</el-dropdown-item>

                        <el-dropdown-item divided>平台管理员</el-dropdown-item>

                        <el-dropdown-item>赛事管理员</el-dropdown-item>

                        <el-dropdown-item>球队管理用户</el-dropdown-item>

                        <el-dropdown-item>游客/访客</el-dropdown-item>

                        <el-dropdown-item>会员用户</el-dropdown-item>

                        <el-dropdown-item>队伍管理员</el-dropdown-item>

                    </el-dropdown-menu>

                    </el-dropdown>


                    <el-form-item label="手机号">

                        <el-input v-model="userVo.phonenumber" :disabled="!isMailCodeCompleted"></el-input>

                    </el-form-item>

                    <el-form-item label="密码" :required="true">

                        <el-input v-model="userVo.password" type="password" :disabled="!isMailCodeCompleted"></el-input>

                    </el-form-item>

                    <el-form-item>

                        <el-button  @click="regust" type="primary" :disabled="!isMailCodeCompleted">注册</el-button>

                        <span style="margin-left: 20px; color: #7e8c8d">

                            已注册? 直接登录

                        </span>

                    </el-form-item>

                </el-form>

            </div>

            <div class="verification-part">

               

            </div>

        </div>

    </template>


    <script>

        //import e from 'express';

    import * as api from '../../network/api'

    import Verify from '../../components/verifition/Verify.vue'


        export default {

            data() {

                return {

                    userVo: {

                        email: '',

                        userName: '',

                        phonenumber:'',

                        password: '',

                    },

                    emailCode:'',

                    // 验证码没填写 后面的内容不允许写入

                    isMailCodeCompleted: false,

                    mailCodeSendDisable: false,

                    mailCodeSendBtnWords: '发送验证码'

                }

            },

            methods:{

                regust(){

                    // 检查数据

                    if(this.userVo.email === ''){

                        this.$message.error("请填写邮箱地址");

                        return;

                    }

                    if(this.userVo.emailCode === ''){

                        this.$message.error("请填写验证码");

                        return;

                    }

                    if(this.userVo.userName === ''){

                        this.$message.error("请填写用户名");

                        return;

                    }

                    if(this.userVo.phonenumber === ''){

                        this.$message.error("请填写手机号");

                        return;

                    }

                    if(this.userVo.password === ''){

                        this.$message.error("请设置密码");

                        return;

                    }

                    api.registerAccount(this.userVo).then(result => {

                       if(result.code === api.SUCCESS_CODE){

                        //注册成功,跳转到登录页面

                        this.$message.success(result.msg);

                        this.$router.push({

                            path:'/login'

                        })

                       }else{

                        //给出提示

                        this.$message.error("注册失败");

                       }

                    })

                },

                sendEmailCode(){

                    //发送之前检查邮箱地址  不可以为空

                    if(this.userVo.email === ''){

                        //给出提示

                        this.$message.error("请输入邮箱地址");

                        return;

                    }

                    //要符合邮箱的规则

                    // TODO

                       // 检查邮箱格式,判空

                    let reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/

                    if (!reg.test(this.userVo.email)) {

                        this.$message.error("邮箱地址格式不正确");

                        return

                    }

                    //console.log(this.userVo.email);

                    //发送邮箱验证码

                    api.sendMailCode(this.userVo.email).then(result => {

                        if(result.code === api.SUCCESS_CODE){

                            //如果成功以后给出提示

                            this.$message.success(result.data.data)

                            //禁止发送按钮

                            this.mailCodeSendDisable = true;

                            //开始倒计时60s

                            this.countDown();

                        }else{

                            //给出提示

                            this.$message.error(result.msg)

                        }

                    })            

                },

                countDown(){

                    let time = 60;

                    let that = this;

                    let sendTimer = setInterval(function () {

                        time--;

                        //修改文字和按钮状态 '重新发送(' + time + ')'

                        if(time < 0) {

                            clearInterval(sendTimer);

                            //修改文字和按钮状态 '获取验证码'

                            that.mailCodeSendBtnWords = '获取验证码';

                            that.mailCodeSendDisable = false;

                        }else{

                            //修改文字  '重新发送(' + time + ')'

                            that.mailCodeSendBtnWords = '重新发送(' + time + ')';

                        }

                    }, 1000)

                },

                checkMailCode (){

                    //检查邮箱和验证码是否有内容

                    if(this.userVo.email !== '' && this.emailCode !== ''){

                        this.isMailCodeCompleted = true

                    }

                }

            }

        }

       

    </script>



    <style>


        .regust-from-part .el-input {

            width: 250px;

        }


        .regust-from-part {

            margin-top: 20px;

        }


        .el-dropdown-link {

            cursor: pointer;

            color: #409EFF;

        }

        .el-icon-arrow-down {

            font-size: 12px;

        }


    </style>






    ==================================


    import http from './http';


    const base_url = "http://localhost:9001/hzh-user"


    export const  SUCCESS_CODE = 'AAAAAA';


    export const sendMailCode = (emailAddress) =>{

        return http.requestGet(base_url + "/email/register/emailCode?email=" + emailAddress)

    };


    export const registerAccount = (mailCode,userVo) =>{

        return http.requestPost(base_url + "/user/user/register?mailCode = " + mailCode,userVo);

    };




    1552670023326109697  评论     打赏       Hrose97
    • 这么神奇
      1438863588197507073  评论     打赏       包租公
      • Hrose97  回复 @包租公
        我也是第一次遇到
        Hrose97 2022-08-02 22:14   回复 1552670023326109697
    • 发下前端代码看看

      1419483998903615490  评论     打赏       再见二丁目
      • Hrose97  回复 @再见二丁目
        发了 截图截不全
        Hrose97 2022-08-02 21:43   回复 1552670023326109697
      • 再见二丁目  回复 @Hrose97
        api.registerAccount(this.mailCode, this.userVo).then(result => {
        再见二丁目 2022-08-03 14:07   回复 1419483998903615490
    相关问题
    黑羊一匹 · 后端
    2020-08-19 05:56 386 2
    黑羊一匹 · 后端求助
    2021-02-24 07:21 431 2
    whoami · 后端
    2021-02-26 01:54 321 5
    独一无二的名字. · 博客系统后端
    2021-04-29 05:27 260 2
    阿肥 · java / 后端
    2022-01-11 00:36 220 2
    Hewie · 后端
    2022-02-25 14:40 127 50
    我爱摸鱼君 · 摸鱼君
    2022-09-26 21:06 15 2