student-client/src/features/Login/VerifyCode.vue

<template>
  <div style="display: flex; justify-content: space-between;">
    <img
      v-if="init || base64"
      style="display: inline-block; width: 100px; height: 40px;"
      :src="base64"
    />
    <span
      v-else
      style="display: inline-block; width: 100px; height: 40px; line-height: 40px"
      >等待获取图片</span
    >
    <span style="font-size: 20px; padding: 1px;">=</span>

    <input
      v-model="result"
      style="width: 40px; border: 1px solid #dcdee2; padding: 2px; text-align: center;"
      type="number"
      step="any"
      class="input-number"
      @input="notify"
      @focus="focused = true"
      @focusout="changeFocus"
    />
    <i-button
      class="qm-primary-button"
      style="height: 40px; width: 60px; padding: 0"
      :disabled="disabled"
      @click="getVerifyCode"
    >
      看不清
    </i-button>
  </div>
</template>

<script>
import { mapState as globalMapState } from "vuex";

export default {
  name: "VerifyCode",
  props: {
    init: { type: Boolean, default: false },
    // rootOrgId: { type: Number, default: 0 },
    accountValue: { type: String, default: "" },
  },
  data() {
    return {
      clicked: false,
      focused: false,
      base64: "",
      uuid: "",
      result: "",
    };
  },
  computed: {
    ...globalMapState(["QECSConfig"]),
    disabled() {
      if (this.focused) {
        return false; // 优先处理focus的情况
      }
      return !this.init || this.clicked;
    },
  },
  watch: {
    init(val) {
      if (val) {
        this.getVerifyCode();
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.clickedTimeout);
  },
  methods: {
    changeFocus() {
      window.setTimeout(() => (this.focused = false), 300);
    },
    async getVerifyCode() {
      // console.log(this.accountValue);
      this.result = "";
      if (!this.accountValue) {
        this.$Message.warning({
          content: "请先填写登录账号",
          duration: 5,
          closable: true,
        });
        return;
      }
      this.clicked = true;
      clearTimeout(this.clickedTimeout);
      this.clickedTimeout = setTimeout(() => {
        this.clicked = false;
      }, 3000);
      // const params = new URLSearchParams();
      // params.append("rootOrgId", this.QECSConfig.ROOT_ORG_ID);
      // params.append("accountValue", this.accountValue);
      // const res = await this.$http.get(
      //   "/api/ecs_core/verifyCode/generate?" + params
      // );
      const params = new URLSearchParams();
      params.append("rootOrgId", this.QECSConfig.ROOT_ORG_ID);
      params.append("accountValue", this.accountValue);
      const res = await this.$http.post(
        "/api/ecs_core/verifyCode/generate",
        params
      );
      // console.log(res);
      this.uuid = res.data.slice(0, 32);
      this.base64 = "data:image/jpeg;base64," + res.data.slice(32);
      this.$emit("calcVerify", {
        uuid: this.uuid,
        verifyCode: this.result,
      });
    },
    notify() {
      const p = window.parseInt(this.result);

      this.result = window.isNaN(p) ? "" : p;
      this.$emit("calcVerify", {
        uuid: this.uuid,
        verifyCode: this.result,
      });
    },
  },
};
</script>

<style>
.input-number::-webkit-inner-spin-button,
.input-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>