JHAndroid/src/views/Reg/Reg.vue

<template>
  <div class="inner_box">
    <div id="udb_reg_phone_password">
      <div class="udb_phone_code_box">
        <div class="title">
          注册
          <Back />
        </div>
        <div class="reg_input_box">
          <!-- 账密输入 -->
          <div class="phone_code">
            <div class="phone_code_input">
              <!-- 账号名 -->
              <div class="phone_code_tel" @keyup.enter="checkPassport">
                <i class="red">*</i>
                <div
                  v-if="canPassport"
                  class="bind_send"
                  @click="checkPassport"
                >
                  验证账号
                </div>
                <div v-else class="bind_send gray">验证中</div>
                <input
                  class="phone_code_input_captcha"
                  placeholder="请输入账号名"
                  v-model="passport"
                  type="text"
                  compositionstart="compositionstartInput"
                  @input="passportKeyup"
                />
              </div>
              <!-- 手机号 -->
              <!-- <div class="phone_code_tel">
                <i class="red">*</i>
                <input
                  class="phone_code_input_username"
                  type="tel"
                  maxlength="11"
                  placeholder="请输入手机号"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  v-model="phoneNumber"
                />
              </div> -->
              <!-- 验证码 -->
              <!-- <div class="phone_code_captcha">
                <i class="red">*</i>
                <div
                  class="bind_send"
                  :class="{ gray: canVerif }"
                  @click="sendPhoneNumber"
                >
                  {{ verifText }}
                </div>
                <input
                  class="phone_code_input_captcha"
                  placeholder="请输入验证码"
                  v-model="captcha"
                  maxlength="4"
                />
              </div> -->
              <!-- 密码 -->
              <div class="reg_password">
                <i class="red">*</i>
                <input
                  class="reg_input_password"
                  type="password"
                  placeholder="请输入密码"
                  password="true"
                  maxlength="20"
                  oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
                  v-model="password"
                />
              </div>
              <!-- 确认密码 -->
              <div class="reg_password2">
                <i class="red">*</i>
                <input
                  class="reg_input_password2"
                  type="password"
                  placeholder="请再次输入密码"
                  password="true"
                  maxlength="20"
                  oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
                  v-model="passwordAgin"
                />
              </div>
            </div>
          </div>
          <!-- 阅读协议 -->
          <!-- <div class="reg_phone_protocol">
          <input
            class="reg_phone_protocol_checkbox"
            type="checkbox"
            id="is_phone_read"
            checked
            v-model="ischeckRegPhone"
          />
          <label
            for="is_phone_read"
            :class="{ red: !ischeckRegPhone }"
            class="reg_phone_protocol_text"
          >
            阅读并同意
          </label>
          <span @click="onAgreement" class="agreement">用户协议</span>
        </div> -->
          <div v-if="canReg" class="bind_phone_true" @click="bindTrue">
            注册
          </div>
          <div v-else class="bind_phone_true gray">注册中</div>
          <!-- 底部跳其他页面 -->
          <div class="other" @click="onLogin">返回登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Back from "@/components/Inner/Back"; // 返回按钮
export default {
  name: "RegPhonePwd",
  components: {
    Back,
  },
  inject: ["checkCode", "routeLink"],
  data() {
    return {
      passport: "", // 账号名
      phoneNumber: "", // 手机号
      captcha: "", // 验证码
      password: "", // 密码
      passwordAgin: "", // 确认密码
      ischeckRegPhone: true, // 阅读并同意
      verifText: "获取验证码", // 获取验证码按钮文本
      canVerif: false, // 获取验证码按钮是否可以点击
      countDownTimer: null, // 验证码倒计时
      canSms: true, // 是否可以请求验证码接口
      canReg: true, // 是否可以注册
      canPassport: true, // 是否可以验证
      accountList: [], // 账密列表
      accountLocal: [], // 本地存储的账密
      checkPassportInput: false, // 是否校验过账号
    };
  },
  computed: {
    ...mapState(["query"]),
  },
  watch: {},
  created() {},
  mounted() {
    //  初始化操作
    this.init();
  },
  destroyed() {
    clearInterval(this.countDownTimer);
  },
  methods: {
    // ios中文输入
    compositionstartInput() {
      this.passport = "";
    },
    // 账号 输入
    passportKeyup() {
      this.passport = this.passport.replace(
        /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/gi,
        ""
      );
      this.checkPassportInput = false;
    },

    // 初始化操作
    init() {
      // 初始化账密列表内容
      this.initAccountList();
    },

    // 验证账号
    checkPassport() {
      const { passport } = this;
      const regpassport = /^[a-zA-Z][a-zA-Z0-9_]{3,31}$/.test(passport);
      if (!regpassport) {
        this.$toast.text("账号需用字母开头, 且长度大于4位");
        return;
      }
      if (passport == "admin" || passport == "root") {
        this.$toast.text("此账号已被注册");
        return;
      }
      this.passportExists();
    },

    // 验证账号
    passportExists() {
      if (!this.canPassport) {
        return;
      }
      this.canPassport = false;
      const { passport } = this;
      this.$api
        .passportExists({
          passport,
        })
        .then((res) => {
          this.checkCode(res);
          this.canPassport = true;
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
          if (data) {
            this.$toast.text("此账号已被注册");
            return;
          }
          this.checkPassportInput = true;
          this.$toast.text("此账号可用");
        });
    },

    // 获取验证码
    sendPhoneNumber() {
      if (!this.canSms) {
        return;
      }
      const { phoneNumber } = this;
      // 1. 验证手机号格式
      this.canVerif = this.$utils.checkVerification(phoneNumber);
      if (!this.canVerif) {
        this.$toast.text("手机号格式不正确");
        return;
      }

      // 3. 请求接口 发送验证码
      this.$api
        .sendSms({
          mobile: phoneNumber,
          reason: "regist",
        })
        .then((res) => {
          this.checkCode(res);
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            this.canVerif = false;
            return;
          }
          // 2. 验证码倒计时
          this.countDown();
        });
    },

    // 用户协议
    onAgreement() {},

    // 倒计时
    countDown() {
      this.canSms = false;
      let count = 60;
      this.verifText = count + "s";
      this.countDownTimer = setInterval(() => {
        count--;
        this.verifText = count + "s";
        // 倒计时结束
        if (count === 0) {
          this.canVerif = false;
          this.verifText = "获取验证码";
          this.canSms = true;
          clearInterval(this.countDownTimer);
        }
      }, 1000);
    },

    // 注册
    bindTrue() {
      const {
        phoneNumber,
        captcha,
        password,
        passwordAgin,
        ischeckRegPhone,
        passport,
        checkPassportInput,
      } = this;

      // 0. 校验账号是否为空
      if (!passport) {
        this.$toast.text("账号不能为空");
        return;
      }

      // 是否验证过账号
      if (!checkPassportInput) {
        this.$toast.text("请先验证账号是否可用");
        return;
      }

      // 1. 验证手机号格式
      //   const telCheck = this.$utils.checkVerification(phoneNumber);
      //   if (!telCheck) {
      //     this.$toast.text("手机号格式不准确");
      //     return;
      //   }
      // 2. 验证验证码是否为空
      //   if (!captcha) {
      //     this.$toast.text("验证码不能为空");
      //     return;
      //   }
      // 3. 验证密码
      if (!password) {
        this.$toast.text("密码不能为空");
        return;
      }
      if (password !== passwordAgin) {
        this.$toast.text("两次密码不一致");
        return;
      }
      // 4. 阅读协议
      if (!ischeckRegPhone) {
        this.$toast.text("请阅读与同意协议");
        return;
      }
      // 5. 校验账号
      const regpassport = /^[a-zA-Z][a-zA-Z0-9_]{3,31}$/.test(passport);
      if (!regpassport) {
        this.$toast.text("账号需用字母开头, 且长度大于4位");
        return;
      }
      if (passport == "admin" || passport == "root") {
        this.$toast.text("此账号已被注册");
        return;
      }

      // 是否验证过账号
      if (!checkPassportInput) {
        this.passportExists().then(() => {
          if (this.checkPassportInput) {
            this.onRegister();
          }
        });
        return;
      }

      // 6. 注册
      this.onRegister();
    },

    // 返回登录
    onLogin() {
      this.routeLink("Login");
    },

    // 注册接口
    onRegister() {
      if (!this.canReg) {
        return;
      }
      this.canReg = false;

      const { phoneNumber, captcha, password, passport } = this;
      const promoCode = this.$utils.getQueryString("promoCode");
      const { appid } = this.$CONFIG;
      const registObj = {
        passport,
        // mobile: phoneNumber,
        // smsCode: captcha,
        password,
        promoCode,
        appId: appid,
      };
      this.$api.regist(registObj).then((res) => {
        this.checkCode(res);
        this.canReg = true;
        const { code, msg } = res.data;

        // 错误
        if (code) {
          return;
        }

        this.$toast.text(msg);
        // 记住密码
        this.rememberFun(passport, password);
        // 成功 去登录
        this.onLogin();
      });
    },

    // 初始化账密列表
    initAccountList() {
      //   const accountLocal = JSON.parse(localStorage.getItem("jhremember"));
      let accountLocal = this.$utils.readStorage("", "jhremember");
      accountLocal = accountLocal && JSON.parse(accountLocal);
      accountLocal &&
        accountLocal.length &&
        accountLocal.map((ele) => {
          const _account = ele.split("&&")[0];
          const _pwd = ele.split("&&")[1];
          const account = this.$utils.decrypt(_account);
          const pwd = this.$utils.decrypt(_pwd);
          this.accountList.push({
            account,
            pwd,
          });
        });
    },

    // 记住密码
    rememberFun(account, password) {
      this.$utils.rememberFun(account, password);
    },
  },
};
</script>

<style lang="less">
#udb_reg_phone_password {
  input {
    outline: none;
  }

  .udb_phone_code_box {
    width: 700 / @rem;
    height: 550 / @rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350 / @rem;
    margin-top: -275 / @rem;
    font-size: 32 / @rem;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;

    .title {
      height: 100 / @rem;
      line-height: 100 / @rem;
      background-color: #3faeed;
      color: #fff;
      font-size: 36 / @rem;
    }

    .reg_input_box {
      padding: 0 / @rem 30 / @rem;

      .other {
        margin-top: 20 / @rem;
        float: left;
        color: #3faeed;
        font-size: 28 / @rem;
      }
    }

    .reg_phone_protocol_text {
      display: inline-block;
    }
    .red {
      line-height: 70 / @rem;
      color: #e43633;
      float: left;
    }
    .agreement {
      color: #e65c1c;
      border-bottom: 1 / @rem solid #e65c1c;
      margin-left: -2 / @rem;
    }
    .reg_phone_protocol {
      font-size: 32 / @rem;
      margin-top: 20 / @rem;
    }
    .reg_phone_protocol_checkbox {
      vertical-align: middle;
      -webkit-appearance: checkbox;
    }
    .phone_code_input {
      width: 100%;
      margin-top: 25 / @rem;
    }
    .phone_code_tel,
    .phone_code_captcha {
      width: 100%;
      height: 70 / @rem;
      position: relative;
      margin-top: 20 / @rem;
    }
    .phone_code_tel {
      margin-top: 20 / @rem;
    }
    .icon-shouji1,
    .icon-mima {
      width: 50 / @rem;
      height: 70 / @rem;
      line-height: 70 / @rem;
      position: absolute;
      left: 0;
      z-index: 5;
    }
    .phone_code_input_username,
    .phone_code_input_captcha {
      width: 94.5%;
      height: 75 / @rem;
      padding-left: 20 / @rem;
      float: right;
      font-size: 32 / @rem;
      border: 1 / @rem solid #d6d6d6;
      box-sizing: border-box;
    }
    .phone_code_input_captcha {
      width: 60%;
      margin-right: 30 / @rem;
    }
    input::-webkit-input-placeholder {
      color: #888;
    }
    .phone_code_protocol {
      width: 100%;
      font-size: 32 / @rem;
      margin: auto;
      margin-top: 50 / @rem;
      height: 40 / @rem;
      line-height: 40 / @rem;
    }
    .phone_code_protocol_checkbox {
      position: relative;
      top: 2 / @rem;
    }
    .phone_code_protocol_text {
      display: inline-block;
    }
    .phone_code_check,
    .bind_captcha_check {
      font-size: 32 / @rem;
      color: #e43633;
      position: absolute;
    }
    .bind_send {
      width: 30%;
      height: 75 / @rem;
      line-height: 70 / @rem;
      float: right;
      color: #ffffff;
      font-size: 32 / @rem;
      border-radius: 10 / @rem;
      background-color: #3faeed;
    }
    .bind_phone_true {
      width: 80%;
      height: 90 / @rem;
      line-height: 90 / @rem;
      margin: 20 / @rem auto 0;
      border-radius: 15 / @rem;
      background-color: #3faeed;
      color: #ffffff;
      box-sizing: border-box;
      font-size: 32 / @rem;
    }
    .gray {
      background-color: #888;
    }
    .reg_password,
    .reg_password2 {
      width: 100%;
      height: 70 / @rem;
      margin-top: 20 / @rem;
      position: relative;
    }
    .reg_input_password {
      width: 94.5%;
      height: 70 / @rem;
      padding-left: 20 / @rem;
      float: right;
      font-size: 32 / @rem;
      box-sizing: border-box;
      border: 1 / @rem solid #d6d6d6;
    }
    .reg_input_password2 {
      width: 94.5%;
      height: 70 / @rem;
      padding-left: 20 / @rem;
      float: right;
      z-index: 4;
      font-size: 32 / @rem;
      box-sizing: border-box;
      border: 1 / @rem solid #d6d6d6;
      outline: none;
    }
    .icon-mima {
      position: absolute;
      left: 0;
      width: 50 / @rem;
      z-index: 5;
      height: 70 / @rem;
      line-height: 70 / @rem;
    }
    .login_password_check,
    .login_passwordAgin_check {
      font-size: 32 / @rem;
      color: #e43633;
      position: absolute;
    }
    .is_hide_password,
    .is_hide_pwd_agin {
      display: none;
    }
  }
}

// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #udb_reg_phone_password {
    .udb_phone_code_box {
      width: 350 / @rem;
      height: 300 / @rem;
      margin-left: -175 / @rem;
      margin-top: -150 / @rem;
      font-size: 16 / @rem;
      overflow-y: auto;

      .title {
        height: 50 / @rem;
        line-height: 50 / @rem;
        font-size: 18 / @rem;
      }

      .reg_input_box {
        padding: 0 / @rem 15 / @rem;

        .other {
          margin-top: 5 / @rem;
          font-size: 14 / @rem;
        }
      }
      .red {
        line-height: 35 / @rem;
      }
      .agreement {
        margin-left: -1 / @rem;
      }
      .reg_phone_protocol {
        font-size: 16 / @rem;
        margin-top: 5 / @rem;
      }
      .phone_code_input {
        margin-top: 15 / @rem;
      }
      .phone_code_tel,
      .phone_code_captcha {
        height: 40 / @rem;
        margin-top: 10 / @rem;
      }
      .phone_code_tel {
        margin-top: 5 / @rem;
      }
      .phone_code_input_username,
      .phone_code_input_captcha {
        height: 40 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .phone_code_input_captcha {
        width: 55.15%;
      }
      .phone_code_protocol {
        height: 20 / @rem;
        line-height: 20 / @rem;
        margin-top: 5 / @rem;
        font-size: 16 / @rem;
      }
      .phone_code_protocol_checkbox {
        top: 1 / @rem;
      }

      .phone_code_check,
      .bind_captcha_check {
        font-size: 16 / @rem;
      }
      .bind_send {
        height: 40 / @rem;
        line-height: 40 / @rem;
        font-size: 16 / @rem;
        border-radius: 5 / @rem;
      }
      .bind_phone_true {
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin: 15 / @rem auto 0;
        border-radius: 7 / @rem;
        font-size: 16 / @rem;
      }
      .reg_password,
      .reg_password2 {
        height: 40 / @rem;
        margin-top: 15 / @rem;
      }
      .reg_input_password {
        height: 40 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .reg_input_password2 {
        height: 40 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .login_password_check,
      .login_passwordAgin_check {
        font-size: 16 / @rem;
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #udb_reg_phone_password {
    .udb_phone_code_box {
      height: 300 / @rem;
    }
  }
}
</style>