Home-Care/hss-home-service/website/pages/platform/login.vue

<script setup lang="ts">
import { ref } from 'vue'
import { usePlatformAuth } from '~/composables/usePlatformAuth'
const { setAuth } = usePlatformAuth()

const mode = ref<'login'|'register'>('login')
const phone = ref('')
const password = ref('')
const name = ref('')
const loading = ref(false)
const error = ref('')
const msg = ref('')

async function doSubmit() {
  error.value = ''; msg.value = ''; loading.value = true
  if (!phone.value || !password.value) { error.value = '请填写手机号和密码'; loading.value = false; return }
  if (mode.value === 'register' && !name.value) { error.value = '请填写姓名'; loading.value = false; return }

  const endpoint = mode.value === 'login' ? '/api/hss/auth/login' : '/api/hss/auth/register'
  const body: any = { phone: phone.value, password: password.value }
  if (mode.value === 'register') { body.name = name.value; body.role = 'STAFF' }

  try {
    const res = await $fetch<any>(endpoint, { method:'POST', body: JSON.stringify(body), headers:{'Content-Type':'application/json'} })
    if (res.code === 200 && res.data?.token) {
      setAuth({ token: res.data.token, userId: res.data.userId, name: res.data.name, role: res.data.role })
      msg.value = mode.value === 'register' ? '注册成功，正在跳转...' : '登录成功，正在跳转...'
      setTimeout(() => navigateTo('/platform'), 800)
    } else {
      error.value = res.message || '操作失败'
    }
  } catch(e: any) { error.value = e?.data?.message || e?.message || '网络错误' }
  finally { loading.value = false }
}
</script>

<template>
  <div class="min-h-screen bg-surface flex items-center justify-center p-4">
    <div class="w-full max-w-md">
      <div class="text-center mb-8">
        <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
          <span class="text-white font-bold text-2xl font-mono">H</span>
        </div>
        <h1 class="text-2xl font-bold">智慧医养居家上门服务平台</h1>
        <p class="text-text-secondary text-sm mt-2">{{ mode === 'login' ? '登录您的账号' : '注册新账号' }}</p>
      </div>

      <div class="bg-white rounded-2xl shadow-sm border p-6 space-y-4">
        <div class="flex border-b mb-2">
          <button @click="mode='login';error='';msg=''" :class="['flex-1 py-2 text-sm font-medium border-b-2 transition-colors', mode==='login'?'border-primary text-primary':'border-transparent text-text-secondary']">登录</button>
          <button @click="mode='register';error='';msg=''" :class="['flex-1 py-2 text-sm font-medium border-b-2 transition-colors', mode==='register'?'border-primary text-primary':'border-transparent text-text-secondary']">注册</button>
        </div>

        <div v-if="mode==='register'">
          <label class="block text-xs text-text-secondary mb-1">姓名</label>
          <input v-model="name" class="w-full px-4 py-3 border rounded-xl text-sm outline-none focus:border-primary" placeholder="您的姓名"/>
        </div>

        <div>
          <label class="block text-xs text-text-secondary mb-1">手机号</label>
          <input v-model="phone" type="tel" class="w-full px-4 py-3 border rounded-xl text-sm outline-none focus:border-primary" placeholder="11位手机号"/>
        </div>

        <div>
          <label class="block text-xs text-text-secondary mb-1">密码</label>
          <input v-model="password" type="password" class="w-full px-4 py-3 border rounded-xl text-sm outline-none focus:border-primary" placeholder="输入密码"/>
        </div>

        <p v-if="error" class="text-red-500 text-sm text-center">{{ error }}</p>
        <p v-if="msg" class="text-green-500 text-sm text-center">{{ msg }}</p>

        <button @click="doSubmit" :disabled="loading"
          class="w-full py-3 bg-primary text-white rounded-xl font-semibold hover:bg-primary-700 transition-colors disabled:opacity-50">
          {{ loading ? '请稍候...' : mode === 'login' ? '登录' : '注册' }}
        </button>
      </div>
    </div>
  </div>
</template>