HAOVP/frontend/video-frontend-web/src/views/login/register.vue

<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-header">
        <h1 class="logo">HAOVP</h1>
        <p class="slogan">创建账号，保存你的观看与创作记录</p>
      </div>

      <van-form @submit="handleRegister">
        <van-cell-group inset>
          <van-field
            v-model="form.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          />
          <van-field
            v-model="form.email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请输入邮箱' }]"
          />
          <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
          />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }, { pattern: /^.{6,}$/, message: '密码至少6位' }]"
          />
          <van-field
            v-model="form.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请确认密码' }, { validator: validatePassword, message: '两次密码不一致' }]"
          />
          <van-field
            v-model="form.captcha"
            name="captcha"
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <template #button>
              <van-image :src="captchaImage" fit="contain" class="captcha-btn" @click="refreshCaptcha" />
            </template>
          </van-field>
        </van-cell-group>

        <div class="register-actions">
          <van-button round block type="primary" native-type="submit" :loading="loading" color="#00a1d6">
            注册
          </van-button>
        </div>
      </van-form>

      <div class="register-footer">
        <router-link to="/login" class="link">已有账号？去登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { authApi, type CaptchaResult } from '@/api/auth.ts'

const router = useRouter()
const loading = ref(false)
const captchaKey = ref('')
const captchaImage = ref('')

const form = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  captcha: ''
})

const validatePassword = () => {
  return form.password === form.confirmPassword
}

const refreshCaptcha = async () => {
  try {
    const res: CaptchaResult = await authApi.getCaptcha()
    captchaKey.value = res.captchaKey
    captchaImage.value = res.captchaImage
  } catch (error) {
    showToast('获取验证码失败')
  }
}

const handleRegister = async () => {
  if (!validatePassword()) {
    showToast('两次密码不一致')
    return
  }

  loading.value = true
  try {
    await authApi.register({
      username: form.username,
      email: form.email,
      phone: form.phone,
      password: form.password,
      confirmPassword: form.confirmPassword,
      captcha: form.captcha,
      captchaKey: captchaKey.value
    })
    showSuccessToast('注册成功')
    router.push('/login')
  } catch (error: any) {
    showToast(error.message || '注册失败')
    refreshCaptcha()
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  refreshCaptcha()
})
</script>

<style scoped lang="scss">
.register-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.22), transparent 28%),
    radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.24), transparent 26%),
    linear-gradient(135deg, #0b1323 0%, #1d3557 55%, #0f766e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.register-container {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  padding: 34px 28px 28px;
  box-shadow: 0 24px 80px rgba(4, 16, 33, 0.34);
}

.register-header {
  text-align: center;
  margin-bottom: 24px;

  .logo {
    font-size: 32px;
    font-weight: bold;
    color: #00a1d6;
    margin: 0;
  }

  .slogan {
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
  }
}

.register-actions {
  margin-top: 20px;
}

.register-footer {
  text-align: center;
  margin-top: 20px;

  .link {
    color: #00a1d6;
    font-size: 14px;
    text-decoration: none;
  }
}

.captcha-btn {
  height: 32px;
  cursor: pointer;
}
</style>