bandhuBuy-uniapp/src/pages/login/login.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script lang="ts" setup>
import { t } from '@/locale'
import { useUserStore } from '@/store/user'
import { goBack, toPage } from '@/utils/page'
import { toast } from '@/utils/toast'

defineOptions({
  name: 'Login', // 登录
})

// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets

// 用户状态管理
const userStore = useUserStore()

const redirectUrl = ref<string | null>(null)

// 表单数据
const formData = ref({
  username: '',
  password: '',
})

// 表单验证
function validateForm() {
  return new Promise((resolve) => {
    // 验证用户名
    if (!formData.value.username.trim()) {
      toast.error(t('auth.login.error.emptyUsername'))
      resolve(false)
      return
    }

    // 验证密码
    if (!formData.value.password.trim()) {
      toast.error(t('auth.login.error.emptyPassword'))
      resolve(false)
      return
    }

    // 验证密码长度
    if (formData.value.password.length < 6 || formData.value.password.length > 20) {
      toast.error(t('auth.login.error.passwordLength'))
      resolve(false)
      return
    }

    resolve(true)
  })
}

// 登录处理
async function handleLogin() {
  try {
    // 表单验证
    const isValid = await validateForm()
    if (!isValid)
      return

    // 准备登录数据
    const loginData = {
      account: formData.value.username,
      pwd: formData.value.password,
    }

    // 调用 userStore 中的登录方法，传入跳转地址
    await userStore.login(loginData, redirectUrl.value)
  }
  catch (error) {
    // 错误处理已在 userStore.login 中处理
    console.error('Login error:', error)
  }
}
const isReLaunch = ref<any>(null)
onLoad((options) => {
  isReLaunch.value = options.isReLaunch
  redirectUrl.value = options.redirect || null
})
</script>

<template>
  <view class="login-page min-h-screen bg-white">
    <!-- 背景图片区域 -->
    <view class="auth-bg-section relative">
      <!-- 自定义导航栏 -->
      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
        <view class="h-88rpx flex items-center px-24rpx">
          <wd-icon v-if="!isReLaunch" name="thin-arrow-left" size="32rpx" @click="() => goBack()" />
        </view>
      </view>

      <!-- Logo和标语 -->
      <view class="pb-40rpx pt-134rpx text-center">
        <view class="mb-20rpx flex flex-col items-center justify-center">
          <image src="/static/login-logo.png" class="mb-18rpx h-56rpx w-350.48rpx" />
          <view>{{ $t('login.slogan') }}</view>
        </view>
      </view>
    </view>

    <!-- 表单内容区域 -->
    <view class="flex flex-col px-20rpx">
      <view class="mb-40rpx" />

      <!-- 登录表单 -->
      <wd-form ref="form" :model="formData">
        <view class="mb-40rpx space-y-32rpx">
          <wd-input
            v-model="formData.username"
            prop="username"
            :placeholder="t('auth.login.username.placeholder')"
            no-border
            custom-class="bandhu-auth-input-field"
          />
          <wd-input
            v-model="formData.password"
            prop="password"
            :placeholder="t('auth.login.password.placeholder')"
            no-border show-password
            custom-class="bandhu-auth-input-field"
          />
        </view>

        <!-- 登录按钮 -->
        <wd-button
          size="large"
          block
          custom-class="mb-40rpx"
          @click="handleLogin"
        >
          {{ $t('auth.login.button') }}
        </wd-button>
      </wd-form>

      <!-- 注册提示 -->
      <view class="mb-200rpx text-center">
        <text class="text-28rpx text-#5C5C5C">
          {{ $t('auth.login.noAccount') }}
        </text>
        <view class="mt-40rpx">
          <wd-button
            plain
            @click="toPage({ url: '/pages/register/register' })"
          >
            {{ $t('auth.login.register') }}
          </wd-button>
        </view>
      </view>

      <!-- 忘记密码 -->
      <view class="fixed bottom-20rpx left-0 w-full text-center" :style="{ paddingBottom: `${safeAreaInsets?.bottom + 40}px` }">
        <text class="text-28rpx text-#5C5C5C" @click="toPage({ url: '/pages/forgotPassword/forgotPassword' })">
          {{ $t('auth.login.forgotPassword') }}
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 登录页面特有样式（如果有的话）
</style>