LoginPage.vue

<template>
  <div class="min-h-screen flex items-center justify-center relative">
    <!-- 背景层 -->
    <div class="absolute inset-0">
      <div class="absolute inset-0 bg-[#001529]" />
      <div class="absolute inset-0 opacity-50 overflow-hidden">
        <img
          alt=""
          class="absolute h-full left-0 max-w-none top-0 w-auto min-w-full object-cover"
          :src="loginBackground"
        />
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="relative z-10 w-full flex flex-col items-center justify-center gap-8 px-6">
      <!-- Logo和标题区 -->
      <div class="flex flex-col items-center gap-2 w-full max-w-[448px]">
        <div class="relative w-[88px] h-[88px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img
              alt="享零工云平台"
              class="absolute h-[85.72%] left-[-8.06%] max-w-none top-[7.7%] w-[329.57%]"
              :src="logoIcon"
            />
          </div>
        </div>
        <h1 class="text-white text-center text-[24px] font-bold">享零工云平台</h1>
        <p class="text-white/90 text-center">中国移动地市管理系统</p>
      </div>

      <!-- 登录卡片 -->
      <div
        class="relative w-full max-w-[448px] backdrop-blur-[10px] backdrop-filter rounded-[10px] pt-10 pb-10 px-8 border border-[rgba(255,255,255,0.6)] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]"
        :style="{
          background: 'linear-gradient(142deg, rgba(255, 255, 255, 0.32) 6%, rgba(255, 255, 255, 0.20) 90.9%)'
        }"
      >
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          @submit.prevent="handleSubmit"
          class="relative flex flex-col gap-7"
        >
          <!-- 手机号 -->
          <div class="flex flex-col gap-2.5">
            <label class="text-white">
              手机号
            </label>
            <el-form-item prop="phone" class="mb-0">
              <el-input
                v-model="loginForm.phone"
                type="tel"
                placeholder="请输入手机号"
                maxlength="11"
                class="login-input"
                :disabled="isLoading"
                size="large"
              />
            </el-form-item>
          </div>

          <!-- 图形验证码 -->
          <div class="flex flex-col gap-2.5">
            <label class="text-white">
              图形验证码
            </label>
            <el-form-item prop="captchaInput" class="mb-0">
              <div class="flex gap-2" style="width: 100%;">
                <el-input
                  v-model="loginForm.captchaInput"
                  type="text"
                  placeholder="请输入图形验证码"
                  maxlength="4"
                  class="login-input flex-1"
                  :disabled="isLoading"
                  size="large"
                />
                <div
                  class="relative h-12 w-[120px] bg-white rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
                  @click="generateCaptcha"
                  title="点击刷新验证码"
                >
                  <img
                    v-if="captchaImage"
                    :src="captchaImage"
                    alt="验证码"
                    class="w-full h-full object-cover"
                  />
                  <RefreshCw class="absolute top-1 right-1 w-3 h-3 text-gray-400" />
                </div>
              </div>
            </el-form-item>
          </div>

          <!-- 短信验证码 -->
          <div class="flex flex-col gap-2.5">
            <label class="text-white">
              短信验证码
            </label>
            <el-form-item prop="smsCode" class="mb-0">
              <div class="flex gap-2" style="width: 100%;">
                <el-input
                  v-model="loginForm.smsCode"
                  type="text"
                  placeholder="请输入短信验证码"
                  maxlength="6"
                  class="login-input flex-1"
                  :disabled="isLoading"
                  size="large"
                />
                <el-button
                  @click="handleSendSms"
                  :disabled="!canSendSms || isLoading"
                  class="sms-button-white"
                  size="large"
                >
                  {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
                </el-button>
              </div>
            </el-form-item>
          </div>

          <div class="mt-2">
            <el-button
              type="primary"
              @click="handleSubmit"
              class="login-submit-button"
              :loading="isLoading"
              size="large"
            >
              {{ isLoading ? '登录中...' : '登录' }}
            </el-button>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 品牌背书 -->
    <div class="absolute bottom-8 left-0 right-0 z-10 text-center">
      <p class="text-white/60 text-xs">
        Copyright 2016-2025. 京ICP备16058130号-2 . All Rights Reserved.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { RefreshCw } from 'lucide-vue-next'
import { getCurrentInstance } from 'vue'

// 扩展组件实例类型以包含全局属性
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: any
    $utils: any
  }
}

// 导入图片资源
import loginBackgroundImg from '@/assets/7f0599d246217c734650d105801453a4919de13c.png'
import logoIconImg from '@/assets/83c9823faecc66b9d1978deb8ed7085f80e226b3.png'

const loginBackground = ref(loginBackgroundImg)
const logoIcon = ref(logoIconImg)

// 接口定义
interface LoginForm {
  phone: string
  captchaInput: string
  smsCode: string
}

interface LoginProps {
  onLogin: (username: string, role: 'admin' | 'viewer') => void
}

// Props
const props = defineProps<LoginProps>()

// 获取全局API实例
const { $api } = getCurrentInstance()!.appContext.config.globalProperties

// 响应式数据
const loginFormRef = ref<FormInstance>()
const isLoading = ref(false)
const captchaToken = ref('')
const captchaImage = ref('')
const countdown = ref(0)
const canSendSms = ref(true)

// 表单数据
const loginForm = reactive<LoginForm>({
  phone: '13112345678',
  captchaInput: '',
  smsCode: ''
})

// 表单验证规则
const loginRules: FormRules<LoginForm> = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  captchaInput: [
    { required: true, message: '请输入图形验证码', trigger: 'blur' },
    { len: 4, message: '验证码长度为4位', trigger: 'blur' }
  ],
  smsCode: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' },
    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
  ]
}

// 从接口获取图形验证码
const generateCaptcha = async () => {
  try {
    const response = await $api.getImgCode({})
    if (response && response.c === 0) {
      captchaImage.value = 'data:image/png;base64,'+response.d.image
      // 保存验证码标识，用于后续验证
      captchaToken.value = response.d.imageId
    } else {
      ElMessage.error('获取图形验证码失败')
    }
  } catch (error) {
    ElMessage.error('获取图形验证码失败')
  }
}

// 倒计时逻辑
let countdownTimer: NodeJS.Timeout | null = null

const startCountdown = () => {
  countdown.value = 60
  canSendSms.value = false

  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      canSendSms.value = true
      if (countdownTimer) {
        clearInterval(countdownTimer)
        countdownTimer = null
      }
    }
  }, 1000)
}

// 发送短信验证码
const handleSendSms = async () => {
  // 验证手机号
  if (!loginForm.phone.trim()) {
    ElMessage.error('请输入手机号')
    return
  }

  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(loginForm.phone)) {
    ElMessage.error('请输入正确的手机号')
    return
  }

  // 验证图形验证码
  if (!loginForm.captchaInput.trim()) {
    ElMessage.error('请输入图形验证码')
    return
  }

  // 模拟验证图形验证码（实际应该调用接口验证）
  if (!captchaToken.value) {
    ElMessage.error('请先获取图形验证码')
    return
  }

  try {
    // 调用获取短信验证码接口
    const response = await $api.getTelCode({
      phone: loginForm.phone,
      code: loginForm.captchaInput,
      imageId: captchaToken.value
    })

    if (response && response.c === 0) {
      ElMessage.success('验证码已发送至您的手机，请注意查收')
      startCountdown()
      // 演示用：实际验证码为 123456
      console.log('演示验证码：123456')
    } else {
      ElMessage.error(response?.msg || '发送验证码失败')
      generateCaptcha()
      loginForm.captchaInput = ''
    }
  } catch (error) {
    console.error('发送短信验证码失败:', error)
    ElMessage.error('发送验证码失败')
    generateCaptcha()
    loginForm.captchaInput = ''
  }
}

// 登录提交
const handleSubmit = async () => {
  if (!loginFormRef.value) return

  // 表单校验
  const valid = await loginFormRef.value.validate()
  console.log('表单验证结果:', valid)

  if (!valid) {
    console.log('表单验证失败')
    ElMessage.error('请检查表单填写是否正确')
    return
  }

  // 验证图形验证码（实际应该调用接口验证）
  if (!captchaToken.value) {
    ElMessage.error('请先获取图形验证码')
    generateCaptcha()
    loginForm.captchaInput = ''
    return
  }

  isLoading.value = true

  try {
    // 调用手机登录接口
    const response = await $api.pohoneLogin({
      phone: loginForm.phone,
      code: loginForm.smsCode,
      // captcha: loginForm.captchaInput,
      // captchaToken: captchaToken.value
    })

    if (response && response.c === 0) {
      ElMessage.success('登录成功')
      // 保存登录信息
      if (response.d) {
        localStorage.setItem('pcUserInfo', JSON.stringify(response.d))
      }
      props.onLogin(loginForm.phone, 'admin')
    } else {
      ElMessage.error(response?.msg || '登录失败')
      generateCaptcha()
      loginForm.captchaInput = ''
      loginForm.smsCode = ''
    }
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败')
    generateCaptcha()
    loginForm.captchaInput = ''
    loginForm.smsCode = ''
  } finally {
    isLoading.value = false
  }
}

// 生命周期
onMounted(() => {
  generateCaptcha()
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped>
/* 自定义Element Plus样式以匹配React版本 */
:deep(.login-input .el-input__wrapper) {
  height: 48px;
  background-color: #f3f3f5;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}

:deep(.login-input .el-input__wrapper:hover) {
  border: none;
  box-shadow: none;
}

:deep(.login-input .el-input__wrapper.is-focus) {
  background-color: #f3f3f5;
  border: none;
  box-shadow: none;
}

:deep(.sms-button) {
  height: 48px;
  padding: 0 16px;
  background-color: white;
  color: #3b82f6;
  border: 1px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
}

:deep(.sms-button:hover) {
  background-color: #eff6ff;
  color: #3b82f6;
  border-color: transparent;
}

:deep(.sms-button.is-disabled) {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: transparent;
}

/* 白色边框按钮样式 */
:deep(.sms-button-white) {
  height: 48px;
  padding: 0 16px;
  background-color: white;
  color: #3b82f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  white-space: nowrap;
}

:deep(.sms-button-white:hover) {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #d1d5db;
}

:deep(.sms-button-white.is-disabled) {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
}

:deep(.login-submit-button) {
  width: 100%;
  height: 48px;
  background-color: #3b82f6;
  border-color: #3b82f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-top: 8px;
}

:deep(.login-submit-button:hover) {
  background-color: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 表单标签样式 */
label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* 重置 el-form-item 的默认边距 */
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>