vue-pure-admin/src/views/register.vue

<template>
  <div class="register">
    <info
      :ruleForm="contextInfo"
      @on-behavior="onRegist"
      @refreshVerify="refreshVerify"
    />
  </div>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  onMounted,
  onBeforeMount,
  getCurrentInstance,
} from "vue";
import info, { ContextProps } from "../components/info/index.vue";
import { getRegist, getVerify } from "../api/user";
import { useRouter } from "vue-router";
import { warnMessage, successMessage } from "../utils/message";
export default {
  name: "register",
  components: {
    info,
  },
  setup() {
    const router = useRouter();

    // 刷新验证码
    const refreshGetVerify = async () => {
      let { svg } = await getVerify();
      contextInfo.svg = svg;
    };

    const contextInfo: ContextProps = reactive({
      userName: "",
      passWord: "",
      verify: null,
      svg: null,
    });

    // 注册
    const onRegist = async () => {
      let { userName, passWord, verify } = contextInfo;
      let { code, info } = await getRegist({
        username: userName,
        password: passWord,
        verify: verify,
      });
      code === 0
        ? successMessage(info) && router.push("/login")
        : warnMessage(info);
    };

    const refreshVerify = (): void => {
      refreshGetVerify();
    };

    onBeforeMount(() => {
      refreshGetVerify();
    });

    return {
      contextInfo,
      onRegist,
      router,
      refreshVerify,
    };
  },
};
</script>