orchestra-app/src/components/o-img-code/index.tsx

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

export default defineComponent({
  name: 'o-img-code',
  props: {
    value: Boolean,
    phone: [String, Number],
    onClose: {
      type: Function,
      // (...args: any[]) => any) | undefined
      default: () => ({})
    },
    onSendCode: {
      type: Function,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'LOGIN'
    },
    clientId: {
      type: String,
      default: ''
    }
  },
  data() {
    const origin = window.location.origin
    const suffix = state.platformApi
    return {
      isSuffix: suffix,
      showStatus: false,
      identifyingCode: null as any,
      code: null
    }
  },
  mounted() {
    this.showStatus = this.value
    this.sendImgCode()
  },
  watch: {
    value(val: any) {
      this.showStatus = val
    },
    code(val: any) {
      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() {
      this.sendImgCode()
      // 刷新token
      // const origin = window.location.origin
      // this.identifyingCode = `${origin}${this.isSuffix}/code/getImageCode?phone=${
      //   this.phone
      // }&token=${Math.random()}`
    },
    async checkVerifyLoginImage() {
      try {
        if ((this as any).code.length < 4) {
          return
        }
        // await request.post(`${this.isSuffix}/open/verifyImgCode`, {
        //   requestType: 'form',
        //   hideLoading: true,
        //   data: {
        //     phone: this.phone,
        //     code: this.code
        //   }
        // })
        // console.log(state.clientId, state.platformType)
        await request.post(`${this.isSuffix}/open/sendSmsVerify`, {
          requestType: 'form',
          hideLoading: true,
          data: {
            mobile: this.phone,
            type: this.type,
            code: this.code,
            clientId: this.clientId || state.clientId[state.platformType]
          }
        })
        setTimeout(() => {
          showToast('验证码已发送')
        }, 100)
        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}
                maxlength={4}
              />
            </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>
    )
  }
})