classroom-instruments/src/views/login/components/sendSms.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './sendSms.module.less';
import smsTop from '../images/sms-top.png';
import closeAble from '../images/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} />
              </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>
    );
  }
});