h5-colexiu-website/src/components/m-img-code/index.tsx

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

export default defineComponent({
  name: 'o-img-code',
  props: {
    value: Boolean,
    phone: [String, Number],
    type: {
      type: String,
      default: ''
    },
    clientId: {
      type: String,
      default: 'cooleshow-student'
    }
  },
  emits: ['close', 'sendCode'],
  data() {
    // const origin = window.location.origin;
    return {
      isSuffix: '/api-website',
      showStatus: false,
      identifyingCode: '/api-website/code/getImageCode?phone=' + this.phone,
      code: ''
    };
  },
  mounted() {
    this.showStatus = this.value;
    // this.sendImgCode();
  },
  watch: {
    value(val) {
      this.showStatus = val;
    },
    code(val) {
      if (val.length >= 4) {
        this.checkVerifyLoginImage();
      }
    }
  },
  methods: {
    // async sendImgCode() {
    //   const { data } = await request.get(this.isSuffix + '/open/sendImgCode', {
    //     requestType: 'form',
    //     hideLoading: true,
    //     params: {
    //       phone: this.phone
    //     }
    //   });
    //   this.identifyingCode = data;
    // },
    async updateIdentifyingCode() {
      // 刷新token
      const origin = window.location.origin;
      this.identifyingCode = `${origin}${
        this.isSuffix
      }/code/getImageCode?phone=${this.phone}&token=${Math.random()}`;
    },
    async checkVerifyLoginImage() {
      try {
        if (this.code.length < 4) {
          return;
        }
        await request.post(this.isSuffix + `/code/verifyImageCode`, {
          requestType: 'form',
          hideLoading: true,
          data: {
            phone: this.phone,
            code: this.code
          }
        });
        await request.post(`/api-website/code/sendSmsCode`, {
          requestType: 'form',
          hideLoading: true,
          data: {
            mobile: this.phone,
            type: this.type
          }
        });
        setTimeout(() => {
          showToast('验证码已发送');
        }, 100);
        this.$emit('close');
        this.$emit('sendCode');
      } catch {
        this.code = '';
        setTimeout(() => {
          this.updateIdentifyingCode();
        }, 500);
      }
    }
  },
  render() {
    return (
      <Popup
        show={this.showStatus}
        class={styles.imgCodePopup}
        closeOnClickOverlay={false}
        onClose={() => {
          this.$emit('close');
        }}
        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}
                autocomplete="off"
              />
            </Col>
            <Col span="10" class={styles.img}>
              <VanImage
                src={this.identifyingCode}
                onClick={() => this.updateIdentifyingCode()}>
                {{ loading: () => <Loading type="spinner" size="20" /> }}
              </VanImage>
            </Col>
          </Row>
          <Row style={{ display: 'flex', justifyContent: 'end' }}>
            <Col span="10">
              <span
                class={styles.imgChange}
                onClick={() => this.updateIdentifyingCode()}>
                看不清？换一换
              </span>
            </Col>
          </Row>
        </div>
      </Popup>
    );
  }
});