倒计时 获取验证码

1. 找字符串里面的最长的单词 

 思路：将字符串转换成数组，分别比较数组各个元素的长度，将长度最大的元素赋给temp，最终返回temp，则可得到字符串中最长的

<template>
  <div class="page">
    <Navigation :active=1></Navigation>
    <div class="container">
      <div class="bg"></div>
      <div class="content mx-auto">
        <div class="title">{{ $config.APP_NAME }}</div>
        <div class="box">
          <div class="inbox">
            <div class="title">
              用户注册
            </div>
            <div :class="{err:phoneError}" class="input-box first mx-auto">
              <input v-model="phone" maxlength="11" placeholder="请输入您的手机号码"/>
            </div>
            <div class="input-box mx-auto">
              <input v-model="verify" :class="{err:verifyError}" maxlength="6" placeholder="请输入您收到的验证码" type="text"/>
              <button class="btn" @click="showTencentCaptcha">{{ smsCd ? `剩余 ${smsCd}秒` : '获取验证码' }}</button>
            </div>
            <div class="input-box mx-auto">
              <input v-model="password" :class="{err:passwordError}" maxlength="32" placeholder="请输入您要设置的密码" type="password"/>
            </div>
            <div class="user-agreement mx-auto">
              <input v-model="agreement" type="checkbox"/>
              <span>请阅读并同意 <a href="/terms-of-service" target="_blank">《用户服务协议》</a></span>
            </div>
            <div class="err-text mx mx-auto">
              {{ errText }}
            </div>
            <div class="btn login mx-auto" @click="register">
              注册
            </div>
            <div class="tips mx-auto">
              有账号？
              <nuxt-link class="link" to="/login">立即登录</nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  layout: "navigation",
  head: {
    title: '账号注册 - StormProxies'
  },
  data() {
    return {
      errText: "",
      phoneError: false,
      passwordError: false,
      phone: "",
      password: "",
      verifyError: false,
      verify: "",
      agreement: false,
      smsCd: 0,
      tyObj: {
        show() {
          alert("验证码初始化失败");
        },
      },
      cd: null,
    };
  },
  mounted() {
    this.tyObj = new TencentCaptcha(this.$config.TENCENT_CAPTCHA_ID.toString(), this.tyCallback, {
      type: "popup",
    });
  },
  beforeDestroy() {
    clearInterval(this.cd);
  },
  methods: {
    register() {
      this.errText = "";
      this.phoneError = false;
      this.passwordError = false;

      if (this.phone.length !== 11) {
        this.phoneError = true;
        this.errText = "手机号码不正确";
        return;
      }
      if (this.password.length <= 0) {
        this.passwordError = true;
        this.errText = "密码不正确";
        return;
      }
      if (this.verify.length !== 6) {
        this.verifyError = true;
        this.errText = "验证码格式错误";
        return;
      }
      if (!this.agreement) {
        this.errText = "请阅读并同意协议";
        return;
      }

      const loading = this.$loading({
        text: "上载资料中",
      });

      this.$axios
        .post("/web_v1/user/register", {
          phone: this.phone,
          verify_code: this.verify,
          password: this.password,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$store.commit("AUTHENTICATED");
            this.$store.commit("user/SET_USER_INFO", res.data.data);
            this.$router.push({
              path: '/user',
            })
          } else {
            this.errText = res.data.msg;
          }
        })
        .finally(() => {
          loading.hide();
        });
    },
    showTencentCaptcha() {
      if (this.smsCd) {
        return;
      }
      this.errText = "";
      if (this.phone.length !== 11) {
        this.phoneError = true;
        this.errText = "手机号码不正确";
        return;
      }
      this.tyObj.show();
    },
    tyCallback({randstr, ticket}) {
      const loading = this.$loading({
        text: "正在发送验证码",
      });
      this.$axios
        .post("/web_v1/sms/send-verify", {
          ty_rand_str: randstr,
          ty_ticket: ticket,
          phone: this.phone,
          type: 0,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message.success('短信验证码发送成功')
            this.smsCd = 59;
            this.cd = setInterval(() => {
              this.smsCd--;
              if (this.smsCd <= 0) {
                this.smsCd = 0;
                clearInterval(this.cd);
              }
            }, 1000);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .finally(() => {
          loading.hide();
        });
    },
  },
};
</script>