前端 关于图形验证码和短信验证码

html部分

<template>
  <page-container
    titleBg="#ffffff"
    :title="
      defaultPage === 'by-mobile'
        ? '忘记密码'
        : step === 1
        ? '发送验证码'
        : '修改密码'
    "
    v-on="$listeners"
  >
    <div class="container">
      <wxc-cell-pro
        v-if="step === 1 && defaultPage !== 'by-mobile'"
        label="手机号码"
        :title="mobile"
        :hasArrow="false"
        :labelStyle="{ color: '#999999' }"
      ></wxc-cell-pro>
      <div
        class="form-input-container"
        v-if="step === 1 && defaultPage === 'by-mobile'"
      >
        <text ref="userName" class="form-input-placeholder">手机号码</text>
        <input
          v-model="mobile"
          class="form-input"
          type="text"
          placeholder="请输入手机号码"
          maxlength="42"
        />
      </div>
      <div class="qrcode-container" v-if="step === 1">
        <text class="qrcode-text">图形校验码</text>
        <div class="qr-container">
          <input
            v-model="captcha"
            placeholder="图形校验码"
            class="qrcode"
            type="text"
            @blur="blur"
            maxlength="42"
          />
          <image
            class="captcha-image"
            :src="captchaUrl"
            @click="getCaptcha"
          ></image>
        </div>
      </div>
      <!-- </div> -->
      <div class="qrcode-container" v-if="step === 1">
        <text class="qrcode-text">验证码</text>
        <div class="qr-container">
          <input
            v-model="vrCode"
            placeholder="验证码"
            class="qrcode"
            type="text"
            @blur="blur"
            maxlength="42"
          />
          <wxc-button
            :text="text"
            @wxcButtonClicked="smsClicked"
            type="white"
            size="small"
            :btnStyle="{ width: '188px', height: '64px', ...btnStyle }"
            :textStyle="textStyle"
          ></wxc-button>
        </div>
      </div>
    </div>
    <div class="form-input-container" v-if="step === 2">
      <text ref="userName" class="form-input-placeholder">设置新密码</text>
      <input
        v-model="newPassWord"
        class="form-input"
        type="password"
        placeholder="包含数字、字母的8-16位字符"
        maxlength="42"
      />
    </div>
    <div class="form-input-container" v-if="step === 2">
      <text ref="userName" class="form-input-placeholder">确认新密码</text>
      <input
        v-model="newPassWordConfirm"
        class="form-input"
        type="password"
        placeholder="再次输入新密码"
        maxlength="42"
      />
    </div>
    <div class="btn-container">
      <wxc-button
        :text="step === 1 ? '下一步' : '确定'"
        size="big"
        :textStyle="{ color: '#ffffff', fontSize: '34px' }"
        :btnStyle="{
          backgroundColor: bgColor,
          width: '686px',
          height: '84px',
          borderRadius: '4px'
        }"
        :disabled="submitBtnDisabled"
        @wxcButtonClicked="submit"
      ></wxc-button>
    </div>
    <!-- <div
      :class="['submit-btn', submitBtnDisabled && 'submit-btn-disabled']"
      @click="submit"
    >
      <text class="submit-text">{{ step === 1 ? '下一步' : '确定' }}</text>
    </div> -->
  </page-container>
</template>
<style scoped lang="scss" src="./style.scss"></style>
<script lang="ts" src="./script.ts"></script>

js部分

import PageContainer from '@/components/common/page-container/index.vue';
import { WxcCellPro } from '@/weex-common/components';
import { WxcButton } from 'weex-ui';
import getUserInfo from '../../components/util/getUserInfo';
import { request, navigator, toast } from 'utils';

interface IBorderColor {
  borderColor: String;
}
interface IColor {
  color: String;
}
export default Vue.extend({
  name: 'page-login_forget_password',
  data() {
    return {
      vrCode: '',
      disabled: true,
      sended: false,
      second: 60,
      text: '获取验证码',
      captchaUrl: '',
      captchaToken: '',
      captcha: '',
      mobile: '',
      newPassWord: '',
      newPassWordConfirm: '',
      step: 1
    };
  },
  props: {
    defaultPage: {
      type: String,
      default: ''
    }
  },
  components: {
    PageContainer,
    WxcCellPro,
    WxcButton
  },
  computed: {
    // bgColor(): String {
    //   return this.disabled ? 'rgba(227,61,48,0.5)' : '#e23f2d';
    // },
    bgColor(): string {
      return !this.submitBtnDisabled ? '#e23f2d' : 'rgba(227,61,48,0.5)';
    },
    btnStyle(): IBorderColor {
      return this.sended
        ? { borderColor: '#F19E97' }
        : { borderColor: '#E33D30' };
    },
    textStyle(): IColor {
      return this.sended ? { color: '#F19E97' } : { color: '#E33D30' };
    },
    submitBtnDisabled() {
      if (this.step === 1) {
        return !this.vrCode;
      }
      return !this.newPassWord || !this.newPassWordConfirm;
    }
  },
  mounted() {
    this.getUserInfo();
    this.getCaptcha();
  },
  methods: {
    blur() {},
    async getUserInfo() {
      const [telephone] = await getUserInfo();
      if (this.defaultPage !== 'by-mobile') {
        this.mobile = telephone;
      }
    },
    async getCaptcha() {  //获取图形验证码  返回的图形验证码是base64
      const {
        result: { token, imageUrl }
      } = await request.get('/api/user/admin/get-captcha', '', {
        checkCookie: false
      });
      this.captchaToken = token;
      this.captchaUrl = imageUrl;
    },
    submit() {
      if (this.submitBtnDisabled) return;
      if (this.step === 1) {
        this.step += 1;
        return;
      }
      this.changePassword();
    },
    reduceStep() {
      if (this.step === 1) return navigator.pop();
      this.step -= 1;
    },
    async smsClicked() {
      if (!this.mobile) {
        toast('请输入手机号码');
        return;
      }
      // if (!this.captcha) {
      //   toast('请输入图形验证码');
      //   return;
      // }
      this.sended = true;
      const { success, error } = await this.sendSms();
      if (!success) {
        toast(error);
        // this.getCaptcha();
        return;
      }
      this.text = `${this.second}s重新获取`;
      this.btnText();
    },
    async sendSms() {  //发送请求获取验证码
      return request.post('/api/user/admin/password/send-sms',      {
        mobile: this.mobile,
        captcha: this.captcha,
        token: this.captchaToken
      });
    },
    async changePassword() {
      const newExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (
        !newExp.test(this.newPassWord) ||
        !newExp.test(this.newPassWordConfirm)
      ) {
        toast('请输入8～16位任意英文加数字的密码！');
        return;
      }
      if (!this.newPassWord) {
        toast('请输入新密码');
        return;
      }
      if (!this.newPassWordConfirm) {
        toast('请确认新密码');
        return;
      }
      if (this.newPassWord !== this.newPassWordConfirm) {
        toast('两次输入的密码不一致');
        return;
      }
      const { success, error } = await request.post(
        '/api/user/admin/password/reset-by-sms',
        {
          mobile: this.mobile,
          smsCode: this.vrCode,
          password: this.newPassWord,
          confirm: this.newPassWordConfirm
        }
      );
      if (!success) {
        toast(error);
        return;
      }
      toast('密码修改成功');
      navigator.pop();
    },
    btnText() { //获取验证码中的定时器
      const time = setTimeout(() => {
        if (this.second === 0) {
          this.second = 60;
          this.sended = false;
          clearTimeout(time);
          this.text = '获取验证码';
        } else {
          this.btnText();
          this.second -= 1;
          this.text = `${this.second}s重新获取`;
        }
      }, 1000);
    }
  }
});