h5-colexiu/src/components/imgCode/index.tsx

import { defineComponent } from "vue";
import { Col, Popup, Row, Image as VanImage, Loading, Field, Toast } from "vant";
import styles from './index.module.less'
import request from "@/helpers/request";

export default defineComponent({
  name: "imgCode",
  props: {
    value: Boolean,
    phone: [String, Number],
    onClose: {
      type: Function,
      default: () => {},
    },
    onSendCode: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    let origin = window.location.origin
    return {
      showStatus: false,
      identifyingCode: origin + '/api-student/code/getLoginImage?phone=' + this.phone,
      code: null,
    }
  },
  mounted() {
    this.showStatus = this.value;
  },
  watch: {
    value(val: any) {
      this.showStatus = val
    },
    code(val: any) {
      if(val.length >= 4) {
        this.checkVerifyLoginImage();
      }
    }
  },
  methods: {
    async updateIdentifyingCode() { // 刷新token
      let origin = window.location.origin
      this.identifyingCode = `${origin}/api-student/code/getLoginImage?phone=${this.phone}&token=${Math.random()}`
    },
    async checkVerifyLoginImage() {
      try {
          if((this as any).code.length < 4) {
              return
          }
          await request('/api-student/code/verifyLoginImage', {
            data: {
              phone: this.phone,
              code: this.code
            }
          })
          await request('/api-student/code/sendSms', {
            data: {
              mobile: this.phone
            }
          })
          Toast('验证码已发送')
          this.onClose();
          this.onSendCode();
      } catch {
          this.updateIdentifyingCode()
      }
    },
  },
  render() {
    return (
      <Popup show={this.showStatus} class={styles.imgCodePopup} closeOnClickOverlay={false} onClose={this.onClose} closeable closeIcon="close">
        <div class={styles.imgCode}>
          <p class={styles.codeTitle}>输入图形验证码</p>
          <Row>
            <Col span="14">
              <Field placeholder="请输入验证码" v-model={this.code} class={styles.field} />
            </Col>
            <Col span="10" class={styles.img}>
              <VanImage src={this.identifyingCode} onClick={() => this.updateIdentifyingCode()}
                // @ts-ignore
                vSlots={{
                  loading: () => <Loading type="spinner" size="20" />
                }} />
            </Col>
          </Row>
          <Row style={{ display: 'flex', justifyContent: 'end' }}>
            <Col span="10">
              <span class={styles.imgChange} onClick={() => this.updateIdentifyingCode()}>看不清？换一换</span>
            </Col>
          </Row>
        </div>
      </Popup>
    )
  }
})