xlx_teacher_app/src/pages/auth/index.vue

<script setup lang="ts">
import type { LoginRequest } from '@/service/types'
import { ref } from 'vue'
import AuthForm from '@/components/auth/AuthForm.vue'
import { sysUsersResetPasswordUsingPost } from '@/service/xitongyonghu'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 当前模式：登录或重置密码
const currentMode = ref<'login' | 'reset'>('login')
const loading = ref(false)

// 处理登录
async function handleLogin(data: LoginRequest) {
  try {
    loading.value = true
    await userStore.login(data)

    uni.showToast({
      title: '登录成功',
      icon: 'success',
    })

    // 登录成功，跳转到首页
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/index/index',
      })
    }, 1500)
  }
  catch (error) {
    console.error('登录失败:', error)
  }
  finally {
    loading.value = false
  }
}

// 处理重置密码
async function handleReset(data: { phone: string, code: string, password: string }) {
  try {
    loading.value = true

    // 调用重置密码API
    await sysUsersResetPasswordUsingPost({
      body: {
        phone: data.phone,
        verify_code: data.code,
        new_password: data.password,
        confirm_password: data.password,
        username: data.phone, // 使用手机号作为用户名
      },
    })

    uni.showToast({
      title: '密码重置成功',
      icon: 'success',
    })

    // 延迟切换到登录模式
    setTimeout(() => {
      currentMode.value = 'login'
    }, 1500)
  }
  catch (error) {
    console.error('重置密码失败:', error)
    uni.showToast({
      title: '重置失败，请重试',
      icon: 'none',
    })
  }
  finally {
    loading.value = false
  }
}

// 切换模式
function handleSwitchMode(mode: 'login' | 'reset') {
  currentMode.value = mode
}
</script>

<template>
  <view class="relative h-screen w-full overflow-hidden from-blue-500 via-purple-500 to-blue-600 bg-gradient-to-br">
    <!-- 背景图片 -->
    <image
      class="absolute inset-0 z-0 h-full w-full opacity-80"
      src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80"
      mode="aspectFill"
    />

    <!-- 渐变蒙版 -->
    <view class="absolute inset-0 z-1 from-blue-500/90 via-purple-500/80 to-blue-600/90 bg-gradient-to-br" />

    <!-- 主要内容 -->
    <view class="relative z-2 h-full flex flex-col">
      <!-- Logo 区域 -->
      <view class="flex flex-1 flex-col items-center justify-center px-8">
        <view class="relative mb-4">
          <view class="h-12 w-12 flex items-center justify-center rounded-3xl from-red-500 to-red-600 bg-gradient-to-br shadow-xl">
            <text class="text-3xl text-white font-bold">享</text>
          </view>
        </view>

        <view class="text-center">
          <text class="mb-2 block text-4xl text-white font-bold drop-shadow-lg">象乐学</text>
          <text class="mb-4 block text-base text-white/90 drop-shadow">【教师版】</text>
          <text class="block text-sm text-white/80 drop-shadow">乐学未来，向学而行</text>
        </view>
      </view>

      <!-- 认证表单区域 - 全宽底部 -->
      <view class="w-full rounded-t-2xl bg-white shadow-2xl">
        <auth-form
          :mode="currentMode"
          @login="handleLogin"
          @reset="handleReset"
          @switch-mode="handleSwitchMode"
        />
      </view>
    </view>

    <!-- 装饰元素 -->
    <view class="pointer-events-none absolute inset-0 z-1">
      <view class="absolute left-1/10 top-1/5 h-20 w-20 animate-pulse rounded-full bg-white/10" />
      <view class="animation-delay-2s absolute right-1/6 top-3/5 h-12 w-12 animate-pulse rounded-full bg-white/10" />
      <view class="animation-delay-4s absolute left-1/12 top-3/4 h-28 w-28 animate-pulse rounded-full bg-white/10" />
    </view>
  </view>
</template>

<route lang="json5">
{
    "name": "auth",
    "style": {
        "navigationStyle": "custom",
    }
}
</route>