nuxt 登录注册加重置密码

<!-- 登录弹框 -->
    <div class="mask" v-show="flag">
      <div class="mask_content" v-show="type_d == 'sign'">
        <p class="mask_gb" @click="cloces">
          <img src="../static/img/home/gw_icon.png" alt="" />
        </p>
        <div class="mas_title">
          <h3 class="mas_title_nav">登录</h3>
          <img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
        </div>
        <div class="mask-title">
          <h3 @click="typ = 0" :class="{ mk_a: typ === 0 }">手机快速登录</h3>
          <h3 @click="typ = 1" :class="{ mk_a: typ === 1 }">账号密码登录</h3>
        </div>
        <!-- 手机快速登录 -->
        <div class="mask-meuns font14" v-show="typ == 0">
          <p class="ks_tels fe_tel">
            <img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
            <input
              class="inp_tel"
              v-model="phone"
              @input="form_mobile(phone)"
              type="text"
              maxlength="11"
              placeholder="+86 手机号"
            />
          </p>
          <p class="p_inp">
            <input
              class="inp_getS"
              v-model="yzm"
              type="text"
              placeholder="手机验证码"
            /><span
              class="yz"
              @click="send(1)"
              :class="color ?'actives_color': ''"
              >{{ sms_interval }}</span
            >
          </p>
          <button class="font16 sign" @click="phone_login">登录</button>
        </div>
        <!-- 账号密码登录 -->
        <div class="mask-meuns" v-show="typ == 1">
          <p class="ks_tels">
            <img
              class="tel_icon icon"
              src="../static/img/home/pep.png"
              alt=""
            />
            <input
              class="inp_tel"
              v-model="username"
              type="text"
              maxlength="11"
              placeholder="请输入账号"
            />
          </p>
          <p class="ks_tels">
            <img class="tel_icon icon" src="../static/img/home/mn.png" alt="" />
            <input
              v-model="passwords"
              class="inp_tel inp_pass"
              type="password"
              maxlength="12"
              placeholder="请输入密码"
            />
          </p>
          <div
            class="wj_ma"
            @click="type_d = 'chongzhi'"
          >
            忘记密码
          </div>
          <button class="font16 sign" @click="pwd_login">登录</button>
        </div>
        <p class="font14 goreg" @click="goto_regist">
          还没有账号？<span class="mf_reg">免费注册</span>
        </p>
      </div>
      <!-- 注册账号 -->
      <div class="mask_content" v-show="type_d == 'register'">
        <p class="mask_gb" @click="cloces">
          <img src="../static/img/home/gw_icon.png" alt="" />
        </p>
        <div class="mas_title">
          <h3 class="mas_title_nav">注册</h3>
          <img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
        </div>
        <div class="reg_title">
          <h3 class="font20 ks_title">快速注册</h3>
          <div class="mask-top-link"></div>
        </div>
        <form class="mask-meuns reg_ma font14">
          <p class="ks_tels">
            <img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
            <input
              v-model="mobile"
              @input="form_mobile(mobile)"
              maxlength="11"
              class="inp_tel"
              type="text"
              placeholder="+86 手机号"
            />
          </p>
          <p class="p_inp">
            <input
              class="inp_getS"
              v-model="sms"
              type="text"
              placeholder="手机验证码"
            />
            <span
              class="yz reg_yz"
              @click="send(2)"
              :class="color ?'actives_color': ''"
              >{{ sms_interval }}</span
            >
          </p>
          <p class="ks_tels">
            <img
              class="tel_icon icon"
              src="../static/img/home/mn.png"
              alt=""
            /><input
              v-model="password"
              class="inp_tel inp_pass"
              type="password"
              maxlength="12"
              placeholder="设置密码"
            />
          </p>
          <form class="font14 regulations">
            <input
              class="inp_check"
              type="checkbox"
              v-model="checked_zc"
            /><span
              >我已阅读并接受<b class="clause" @click="is_kxy = true"
                >《XXX注册条款》</b
              ></span
            >
            <p class="font16 sign reg_zc" @click="register">注册</p>
          </form>
        </form>
        <p class="font14 reg_sign" @click="goto_sign">
          已有账号？<span class="mf_reg">立即登录</span>
        </p>
      </div>

      <!-- 重置密码 -->
      <div class="mask_content" v-show="type_d == 'chongzhi'">
        <p class="mask_gb" @click="cloces">
          <img src="../static/img/home/gw_icon.png" alt="" />
        </p>
        <div class="mas_title">
          <h3 class="mas_title_nav">重置</h3>
          <img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
        </div>
        <div class="reg_title">
          <h3 class="new_reg_h3 font20">
            <span @click="go_back">←</span>重置密码
          </h3>
          <div class="mask-top-link"></div>
        </div>
        <form class="mask-meuns reg_ma font14">
          <p class="ks_tels">
            <img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
            <input
              v-model="new_mobile"
              @input="form_mobile(new_mobile)"
              maxlength="11"
              class="inp_tel"
              type="text"
              placeholder="+86 手机号"
            />
          </p>
          <p class="p_inp">
            <input
              class="inp_getS"
              v-model="captcha_sms"
              type="text"
              placeholder="手机验证码"
            />
            <span
              class="yz reg_yz"
              @click="send(3)"
              :class="color ?'actives_color': ''"
              >{{ sms_interval }}</span
            >
          </p>
          <p class="ks_tels">
            <img
              class="tel_icon icon"
              src="../static/img/home/mn.png"
              alt=""
            /><input
              v-model="new_password"
              class="inp_tel inp_pass"
              type="password"
              maxlength="12"
              placeholder="设置新密码"
            />
          </p>
          <form class="font14 regulations">
            <p class="font16 sign reg_zc" @click="new_register">确定</p>
          </form>
        </form>
      </div>
    </div>

 <!-- 隐私协议 -->

    <div class="xiey" v-show="is_kxy">

      <div class="xiey_cont" @click="is_kxy = false">

        <p class="xiey_top">

          <span class="mask_gb"

            ><img src="../static/img/home/gw_icon.png" alt=""

          /></span>

        </p>

        <!-- <p class="mask_gb"></p> -->

        <div class="xieyi_content" v-html="xiey.content">

          {{ xiey.content }}

          

        </div>

      </div>

    </div>

 

 

 

data(){
    return {
    
          mobile: "",
          sms: "",
          password: "",
          sms_interval: "获取验证码",
          is_send: false,
          phone: "",
          passwords: "",
          username: "",
          yzm: "",
          login_method: "is_pwd",
          color: 0,
          checked_zc: false,
          xiey: "",

    }
}

methods:{
    //重置密码
    new_register() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(this.new_mobile){
        if(!isNaN(this.new_mobile)){
          if(myreg.test(this.new_mobile)){
            if(this.captcha_sms){
              if(this.new_password){
                if(6 <= this.new_password.length){
                  if(this.new_password.length <= 12){
                      //请求数据
                      this.chz_reg()
                  }else{
                    that.$message.error("密码设置范围为6-12");
                  }
                }else{
                  that.$message.error("密码设置范围为6-12");
                }
              }else{
                this.$message.error("请输入密码！");
              }
            }else{
              this.$message.error("请输入验证码！");
            }
          }else{
            this.$message.error("手机号输入不正确！");
          }
        }else{
          this.$message.error("手机号格式不正确！");
        }
      }else{
        this.$message.error("请输入手机号！");
      }
    },
    //重置密码的后台接口
    chz_reg() {
      return post("api/user/resetPwd", {
        mobile: this.new_mobile,
        captcha: this.captcha_sms,
        newpassword: this.new_password,
      }).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "重置成功",
            type: "success",
          });
          //关掉注册框
          this.type_d = "sign";
          this.typ = 1;
          (this.new_mobile = ""),
            (this.captcha_sms = ""),
            (this.new_password = "");
        } else {
          this.$message({
            message: "重置失败，请稍后再试",
            type: "error",
          });
        }
      });
    },
    //倒计时
     hqyzm_zc(){
      var that = this;
      var time = 60;
      that.sms_interval = '('+time+')秒后重新发送';
      that.color = false;
      that.is_send = true;
      var zc_time = setInterval(function () {
        time-=1;
        that.sms_interval = '('+time+')秒后重新发送';
        that.color = false;
        that.is_send = true;
        if(time==0){
          clearInterval(zc_time);
          that.sms_interval = '发送验证码';
          that.color = true;
          that.is_send = false;
        }
      },1000);
    },
    //手机号验证
    form_mobile(value){
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(value.length==11){
        if(myreg.test(value)){
          if(this.sms_interval=='发送验证码'){
            this.color = true;
          }else {
            this.color = false;
          }
        }else {
          this.color = false;
        }
      }else {
        this.color = false;
      }
    },
    mobile_phone(phone,type){
      var that = this;
      return post('/api/Sms/send', {mobile: phone,event:type})
        .then((res) => {
            if(res!=0){
              that.hqyzm_zc();
            }
          }
        );
    },
    //发送验证码请求
    send(key){
      if(!this.is_send){
        if(this.color){
          if(key==1){
            this.mobile_phone(this.phone,'mobilelogin');
          }else if(key==2){
            this.mobile_phone(this.mobile,'register');
          }else if(key==3){
            this.mobile_phone(this.new_mobile,'resetpwd');
          }
        }else {
          this.$message.error("手机号输入不正确");
        }
      }else {
        this.$message.error("验证码发送中...");
      }
    },
    //注册
    register() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(this.mobile){
        if(!isNaN(this.mobile)){
          if(myreg.test(this.mobile)){
            if(this.sms){
              if(this.password){
                if(6 <= this.password.length){
                  if(this.password.length <= 12){
                    if(this.checked_zc){
                      //请求数据
                      this.is_reg()
                    }else{
                      this.$message.error("请阅读并勾选隐私协议！");
                    }
                  }else{
                    this.$message.error("密码设置范围为6-12");
                  }
                }else{
                  this.$message.error("密码设置范围为6-12");
                }
              }else{
                this.$message.error("请输入密码！");
              }
            }else{
              this.$message.error("请输入验证码！");
            }
          }else{
            this.$message.error("手机号输入不正确！");
          }
        }else{
          this.$message.error("手机号格式不正确！");
        }
      }else{
        this.$message.error("请输入手机号！");
      }
    },
    //注册接口
    is_reg() {
      return post("api/User/register", {
        mobile: this.mobile,
        code: this.sms,
        password: this.password,
      }).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          //关掉注册框
          this.flag = false;
          this.xisign = 1;
          localStorage.setItem("token", res.data.userinfo.token);
          this.$router.push({
            name: "index",
          });
          (this.mobile = ""), (this.sms = ""), (this.password = "");
        } else {
          this.$message({
            message: "注册失败，请稍后再试",
            type: "error",
          });
        }
      });
    },
    //  密码 登录
    pwd_login() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(this.username){
        if(!isNaN(this.username)){
          if(myreg.test(this.username)){
              if(this.passwords){
                if(6 <= this.passwords.length){
                  if(this.passwords.length <= 12){
                      //请求数据
                      this.phone_pwd()
                  }else{
                    this.$message.error("密码设置范围为6-12");
                  }
                }else{
                  this.$message.error("密码设置范围为6-12");
                }
              }else{
                this.$message.error("请输入密码！");
              }
          }else{
            this.$message.error("手机号输入不正确！");
          }
        }else{
          this.$message.error("手机号格式不正确！");
        }
      }else{
        this.$message.error("请输入手机号！");
      }
    },
    //手机密码登录接口
    phone_pwd(){
      return post("api/User/login", {
          account: this.username,
          password: this.passwords,
        }).then((res) => {
          if (res.code == 1) {
            //登录成功
            this.$message({
              message: res.msg,
              type: "success",
            });
            localStorage.setItem("token", res.data.userinfo.token);
            //2 销毁框
            this.flag = false;
            this.xisign = 1;
            this.username = "";
            this.passwords = "";
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },

    //手机号 验证码登录
    phone_login() {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if(this.phone){
        if(!isNaN(this.phone)){
          if(myreg.test(this.phone)){
            if(this.yzm){
              this.phone_yzm()
            }else{
              this.$message.error("请输入验证码！");
            }
          }else{
            this.$message.error("手机号输入不正确！");
          }
        }else{
          this.$message.error("手机号格式不正确！");
        }
      }else{
        this.$message.error("请输入手机号！");
      }
     
    },
    //手机验证码登录接口
    phone_yzm(){
      return post("api/user/mobileLogin", {
          mobile: this.phone,
          captcha: this.yzm,
        }).then((res) => {
          if (res.code == 1) {
            //登录成功
            this.$message({
              message: res.msg,
              type: "success",
            });
            localStorage.setItem("token", res.data.userinfo.token);
            this.flag = false;
            this.xisign = 1;
            (this.phone = ""), (this.yzm = "");
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
    },
    //退出登录
    out_login() {
      return get("api/User/logout").then((res) => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push({
            name: "index",
          });
          localStorage.removeItem("token");
          this.xisign = 0;
        } else {
          if (res.code == 10401) {
            localStorage.removeItem("token");
            this.xisign = 0;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        }
      });
    },
    
    
    mo_flag() {
      var that = this;
      that.mo_isflag = !that.mo_isflag;
    },
    close_mo_isflag() {
      var that = this;
      that.mo_isflag = !that.mo_isflag;
    },
    //登录
    go_sign() {
      var that = this;
      that.flag = true;
      that.type_d = "sign";
    },
    go_register() {
      var that = this;
      that.flag = !that.flag;
      that.type_d = "register";
    },
    go_back() {
      this.type_d = "sign";
      this.typ = 1;
    },
    //关闭弹窗
    cloces() {
      var that = this;
      that.flag = false;
    },
    //去注册页面
    goto_regist() {
      var that = this;
      that.flag = true;
      that.type_d = "register";
    },
    //去登录页面
    goto_sign() {
      var that = this;
      that.flag = true;
      that.type_d = "sign";
    },

    flag_tel() {
      this.isShows = true;
    },
    no_flag_tel() {
      this.isShows = false;
    },
    flag_wechat() {
      this.isFlag = true;
    },
    no_flag_wechat() {
      this.isFlag = false;
    },


}

 

 

此登录注册要求：点击其中一个验证码按钮，所有带验证码的地方都会倒计时60s，重复点击会出现   验证码发送中...   的提示