vue-ptc/src/pages/register/index.vue

<template>
  <div class="p-register">
    <router-link class="nav-home" to="/">
      <i class="icon"></i><span class="text">HOME</span>
    </router-link>
    <div class="logo"></div>
    <div class="container">
      <div class="ptc-form">
        <div class="title">Welcome to PTC Care Plus</div>
        <div class="ptc-form-item">
          <input
            v-model="values.email"
            class="ptc-input"
            placeholder="email address"
          />
        </div>
        <div class="ptc-form-item">
          <input
            v-model="values.password"
            class="ptc-input"
            type="password"
            placeholder="password"
          />
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button" @click="handleSubmit(onSubmit)">
            CONTINUE
          </button>
        </div>
        <div class="ptc-form-item">
          <p class="tip">
            Already have an accout ？
            <router-link class="primary" to="/login">Sign in</router-link>
          </p>
        </div>
      </div>
      <div class="policy">
        By clicking “Continue” you agree to PTC’s
        <span class="primary">terms of use</span> and confirm that you’ve read
        and acknowledged PTC’s <span class="primary">privacy policy</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { string } from 'yup'
import { useRouter } from 'vue-router'
import useForm from '@/hooks/useForm'
import { register } from '@/service/user'
import Toast from '@/components/toast'

const router = useRouter()

const { values, handleSubmit, reset } = useForm<ApiUser.Register.Request>({
  schema: {
    email: string().email().required(),
    password: string().required(),
  },
})

async function onSubmit() {
  values.name = values.email
  values.password_confirmation = values.password
  await register(values as any)
  Toast('register success')
  setTimeout(() => router.push('/login'), 500)
}
</script>