resource-admin/src/layout/components/smsLogin/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import smsTop from './sms-top.png'
import closeAble from './closeAble.png'
import { NButton, NForm, NFormItem, NGi, NGrid, NImage, NInput, NSpace } from 'naive-ui'
import { sendImgCode, sendSmsVerify } from './api'

export default defineComponent({
  name: 'sendSms',
  props: {
    phone: {
      type: String,
      default: ''
    },
    clientId: {
      type: String,
      default: 'cooleshow-teacher'
    },
    type: {
      type: String,
      default: 'LOGIN'
    }
  },
  emits: ['close', 'sendCode'],
  setup(props, { emit }) {
    const state = reactive({
      identifyingCode: null as any,
      code: null as any
    })
    const formRef = ref()

    const getSendImgCode = async () => {
      const { data } = await sendImgCode({ phone: props.phone })
      state.identifyingCode = data
    }

    const onSubmit = async () => {
      formRef.value.validate(async (errors: any) => {
        if (errors) return

        try {
          await sendSmsVerify({
            code: state.code,
            clientId: props.clientId,
            type: props.type,
            mobile: props.phone
          })

          emit('close')
          emit('sendCode')
        } catch {
          state.code = ''
          setTimeout(() => {
            getSendImgCode()
          }, 500)
        }
      })
    }

    onMounted(() => {
      getSendImgCode()
    })
    return () => (
      <div class={styles.downMove}>
        <img src={smsTop} class={styles.downMoveBg} alt="" />
        <img
          src={closeAble}
          class={styles.closeAble}
          onClick={() => {
            emit('close')
          }}
          alt=""
        />
        <h2>请输入图形验证码</h2>

        <NForm class={styles.smsForm} ref={formRef} model={state}>
          <NGrid xGap={12}>
            <NGi span={15}>
              <NFormItem
                showLabel={false}
                path="code"
                rule={[
                  {
                    required: true,
                    message: '请输入图形验证码',
                    trigger: ['blur', 'input']
                  }
                ]}
              >
                <NInput placeholder="图形验证码" v-model:value={state.code} size="large" />
              </NFormItem>
            </NGi>
            <NGi span={9}>
              <div onClick={getSendImgCode}>
                <NImage class={styles.smsImg} lazy previewDisabled src={state.identifyingCode} />
              </div>

              <span class={styles.imgChange} onClick={getSendImgCode}>
                看不清？换一换
              </span>
            </NGi>
          </NGrid>
        </NForm>

        <NSpace class={styles.btnGroup} justify="center">
          <NButton
            class={[styles.btn, styles.cancelBtn]}
            round
            type="default"
            onClick={() => {
              emit('close')
            }}
          >
            取消
          </NButton>
          <NButton class={[styles.btn, styles.submitBtn]} onClick={onSubmit} round type="primary">
            确定
          </NButton>
        </NSpace>
      </div>
    )
  }
})