OfficeSystem/pages/login/index.vue

<template>
  <view class="login-page">
    <view class="login-content">
      <view class="login-header">
        <view class="logo-wrapper">
          <image class="logo-image" :src="logoSrc" mode="aspectFit" />
        </view>
        <text class="system-title">项目管理系统</text>
      </view>

      <view class="login-card">
        <view class="form-item">
          <text class="form-label">账号</text>
          <input
            class="form-input"
            type="text"
            placeholder="请输入用户名"
            v-model.trim="form.username"
            confirm-type="next"
          />
        </view>

        <view class="form-item">
          <text class="form-label">密码</text>
          <input
            class="form-input"
            :password="!showPassword"
            placeholder="请输入密码"
            v-model="form.password"
            confirm-type="done"
          />

        </view>

        <view class="form-item" v-if="captcha.captchaEnabled">
          <text class="form-label">验证码</text>
          <view class="captcha-row">
            <input
              class="form-input code-input"
              type="text"
              placeholder="请输入验证码"
              v-model.trim="form.code"
              confirm-type="done"
            />
            <image
              class="captcha-image"
              :src="captchaImageSrc"
              mode="aspectFit"
              @click="refreshCaptcha"
            />
          </view>
        </view>

        <view class="form-extra">
          <label class="remember-label" @click="rememberPassword = !rememberPassword">
            <checkbox :checked="rememberPassword" color="#3b82f6" />
            <text class="remember-text">记住密码</text>
          </label>
          <text class="captcha-refresh" @click="refreshCaptcha">看不清？换一张</text>
        </view>

        <button
          class="login-button"
          :loading="loginLoading"
          :disabled="loginLoading"
          @click="handleSubmit"
        >
          登录
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { login, getCaptchaImage, getUserInfo } from '@/common/api/user';
import { useUserStore } from '@/store/user';

const userStore = useUserStore();
const logoSrc = '/static/logo.png';

const form = reactive({
  username: '',
  password: '',
  code: ''
});

const captcha = reactive({
  img: '',
  uuid: '',
  captchaEnabled: true
});

const rememberPassword = ref(true);
const loginLoading = ref(false);
const showPassword = ref(false);

const captchaImageSrc = computed(() => {
  if (!captcha.img) return '';
  if (captcha.img.startsWith('data:image')) {
    return captcha.img;
  }
  return `data:image/png;base64,${captcha.img}`;
});

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const loadRememberedForm = () => {
  try {
    const cache = uni.getStorageSync('loginFormCache');
    if (cache && typeof cache === 'object') {
      rememberPassword.value = !!cache.remember;
      if (cache.remember) {
        form.username = cache.username || '';
        form.password = cache.password || '';
      }
    }
  } catch (err) {
    console.warn('读取登录缓存失败', err);
  }
};

const saveRememberedForm = () => {
  if (rememberPassword.value) {
    uni.setStorageSync('loginFormCache', {
      remember: true,
      username: form.username,
      password: form.password
    });
  } else {
    uni.removeStorageSync('loginFormCache');
  }
};

const refreshCaptcha = async () => {
  try {
    const res = await getCaptchaImage();
    captcha.img = res?.img || '';
    captcha.uuid = res?.uuid || '';
    captcha.captchaEnabled = res?.captchaEnabled !== false;
  } catch (error) {
    console.error('获取验证码失败', error);
    captcha.img = '';
    captcha.uuid = '';
    captcha.captchaEnabled = false;
  }
};

const validateForm = () => {
  if (!form.username) {
    uni.showToast({ title: '请输入用户名', icon: 'none' });
    return false;
  }
  if (!form.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return false;
  }
  if (captcha.captchaEnabled && !form.code) {
    uni.showToast({ title: '请输入验证码', icon: 'none' });
    return false;
  }
  return true;
};

const handleSubmit = async () => {
  if (loginLoading.value) return;
  if (!validateForm()) return;

  loginLoading.value = true;
  try {
    const payload = {
      username: form.username,
      password: form.password,
      code: captcha.captchaEnabled ? form.code : undefined,
      uuid: captcha.captchaEnabled ? captcha.uuid : undefined
    };

    const res = await login(payload);

    let token = '';
    if (typeof res === 'string') {
      token = res;
    } else if (res?.token) {
      token = res.token;
    } else if (res?.data?.token) {
      token = res.data.token;
    } else if (res?.access_token) {
      token = res.access_token;
    }

    if (!token) {
      uni.showToast({
        title: '登录成功，但未获取到令牌',
        icon: 'none'
      });
    } else {
      userStore.login(token);
      try {
        const userInfo = await getUserInfo();
        if (userInfo) {
          userStore.setUserInfo(userInfo);
        }
      } catch (infoErr) {
        console.warn('获取用户信息失败', infoErr);
      }
      saveRememberedForm();
      uni.$uv.toast('登录成功');
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/index/index' });
      }, 300);
      return;
    }
  } catch (err) {
    console.error('登录失败', err);
    uni.showToast({
      title: err?.msg || err?.message || '登录失败，请重试',
      icon: 'none'
    });
    await refreshCaptcha();
  } finally {
    loginLoading.value = false;
  }
};

onLoad(() => {
  if (userStore.isLogin) {
    uni.reLaunch({ url: '/pages/index/index' });
    return;
  }
  loadRememberedForm();
  refreshCaptcha();
});

onMounted(() => {
  // 如果已经登录，保障直接跳转
  if (userStore.isLogin) {
    uni.reLaunch({ url: '/pages/index/index' });
  }
});
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
}

.login-content {
  width: 100%;
  max-width: 640rpx;
}

.login-header {
  text-align: center;
  color: #ffffff;
  margin-bottom: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
}

.logo-wrapper {
  width: 220rpx;
  height: 220rpx;
  border-radius: 48rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32rpx;
  box-sizing: border-box;
}

.logo-image {
  width: 100%;
  height: 100%;
}

.system-title {
  display: block;
  margin-top: 12rpx;
  font-size: 32rpx;
  letter-spacing: 4rpx;
}

.login-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 48rpx 40rpx;
  box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.form-item + .form-item {
  margin-top: 32rpx;
}

.form-label {
  font-size: 28rpx;
  color: #6b7280;
  margin-bottom: 16rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 88rpx;
  border-radius: 12rpx;
  background-color: #f3f4f6;
  padding: 0 28rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #111827;
}

.toggle-password {
  position: absolute;
  right: 40rpx;
  top: 50%;
  transform: translateY(-10rpx);
  font-size: 26rpx;
  color: #2563eb;
}

.form-item {
  position: relative;
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.code-input {
  flex: 1;
}

.captcha-image {
  width: 220rpx;
  height: 88rpx;
  border-radius: 12rpx;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.form-extra {
  margin-top: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #6b7280;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.remember-text {
  color: #4b5563;
}

.captcha-refresh {
  color: #2563eb;
}

.login-button {
  margin-top: 48rpx;
  height: 96rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}
</style>