xpyy-scm/src/pages/register/index.vue

<script setup lang='ts'>
import logo from '@assets/images/logo.webp';
import {useToggle} from '@vueuse/core';
import {useI18n} from 'vue-i18n';
import RegisterContent from './content/index.vue';
import {useFormState} from './hooks';
import Success from './success/index.vue';

defineOptions({name: 'Register'});

const [isSuccess] = useToggle();
const {t} = useI18n();

const [{values}, {onSubmit, handleReset}] = useFormState(isSuccess);

</script>

<template>
  <main>
    <div class="container">
      <section class="logo">
        <img :src="logo" />
        <h1 v-t="'login.title'" />
      </section>

      <section class="tab">
        <span class="tab-item-active">{{t('register.tabs[0]')}}</span>
        <span :class="{'tab-item-active': isSuccess}">
          {{t('register.tabs[1]')}}
        </span>
      </section>

      <section class="content">
        <form v-show="!isSuccess" @submit="onSubmit" @reset="handleReset">
          <RegisterContent />
        </form>

        <Success v-show="isSuccess" :email="values.email" />
      </section>
    </div>
  </main>
</template>

<style scoped lang='css'>
@import './index.css';
</style>