pages/login/index.vue

<template>
  <view class="page-container">
    <!-- 顶部标题区 -->
    <view class="top-title">
      <text class="welcome-text">你好，欢迎光临</text>
      <text class="platform-name">全域智能运营管理平台</text>
    </view>
    <!-- 登录表单区域 -->
    <view class="login-form">
      <!-- uview-plus的Tabs组件 -->
      <up-tabs
          :list="tabList"
          line-width="55"
          line-height="2"
          @change="handleTabChange"
          :activeStyle="{
            color: '#3c9cff',
            fontWeight:'500',
            fontSize: '14'
        }"
          :inactiveStyle="{
           color: '#606060',
            fontSize: '14'
        }"
      ></up-tabs>
      <!-- 表单校验容器 -->
      <up-form
          label-position="left"
          :model="form"
          ref="loginFormRef"
          labelWidth="0"
      >
        <!-- 手机号输入框 -->
        <up-form-item v-if="loginType === '手机号登录'" prop="mobile">
          <up-input
              v-model="form.mobile"
              border="surround"
              clearable
              maxlength="11"
              input-align="left"
              fontSize="14px"
              :disabled="isLoading"
              shape="circle"
              placeholder="请输入手机号"
              selectionStart="10"
              selectionEnd="10"
              @blur="() => loginFormRef.validateField('mobile')"
          />
        </up-form-item>
        <!-- 账号输入框 -->
        <up-form-item v-else prop="account">
          <up-input
              v-model="form.account"
              border="surround"
              clearable
              maxlength="30"
              input-align="left"
              fontSize="14px"
              :disabled="isLoading"
              shape="circle"
              placeholder="请输入账户"
              @blur="() => loginFormRef.validateField('account')"
          />
        </up-form-item>
        <!-- 密码输入框 -->
        <up-form-item
            prop="password"
            class="password-item"
        >
          <up-input
              v-model="form.password"
              placeholder="请输入密码"
              maxlength="20"
              border="surround"
              clearable
              input-align="left"
              type="password"
              :disabled="isLoading"
              shape="circle"
              @blur="() => loginFormRef.validateField('password')"
          />
        </up-form-item>
        <!-- 记住密码单独一行，居右显示 -->
        <view class="remember-wrap">
          <up-checkbox
              :customStyle="{marginBottom: '8px'}"
              label="记住密码"
              name="agree"
              size="14"
              iconSize="14"
              labelSize="14"
              labelColor="'#3F3F3F'"
              usedAlone
              v-model:checked="rememberPwd"
          >
          </up-checkbox>
        </view>
      </up-form>
      <!-- 登录按钮 -->
      <up-button
          class="login-btn"
          type="primary"
          size="large"
          :loading="isLoading"
          @click="handleLogin"
          shape="circle"
      >
        登录
      </up-button>
    </view>
    <!-- 版权信息 -->
    <view class="copyright">蓟城山水集团版权所有</view>
  </view>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useUserStore } from '@/pinia/user';
import globalConfig from '@/common/config/global';
import CryptoJS from 'crypto-js';
// ========== 加密工具函数（建议抽离到 @/utils/encrypt.js） ==========
// 密钥配置：生产环境建议从后端接口获取，不要硬编码
const CRYPTO_CONFIG = {
  key: CryptoJS.enc.Utf8.parse('jcsscrypto123abc'), // 16位key（AES-128）
  iv: CryptoJS.enc.Utf8.parse('abc123jcsscrypto'),  // 16位iv
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7
};
/**
 * AES加密
 * @param {string} text 待加密文本
 * @returns {string} 加密后的字符串
 */
const aesEncrypt = (text) => {
  if (!text) return '';
  try {
    return CryptoJS.AES.encrypt(text, CRYPTO_CONFIG.key, {
      iv: CRYPTO_CONFIG.iv,
      mode: CRYPTO_CONFIG.mode,
      padding: CRYPTO_CONFIG.padding
    }).toString();
  } catch (err) {
    console.error('AES加密失败:', err);
    return '';
  }
};
/**
 * AES解密
 * @param {string} encryptedText 加密后的字符串
 * @returns {string} 解密后的原始文本
 */
const aesDecrypt = (encryptedText) => {
  if (!encryptedText) return '';
  try {
    const decryptObj = CryptoJS.AES.decrypt(encryptedText, CRYPTO_CONFIG.key, {
      iv: CRYPTO_CONFIG.iv,
      mode: CRYPTO_CONFIG.mode,
      padding: CRYPTO_CONFIG.padding
    });
    return decryptObj.toString(CryptoJS.enc.Utf8);
  } catch (err) {
    console.error('AES解密失败:', err);
    return '';
  }
};
// ========== 业务逻辑 ==========
const userStore = useUserStore();
const loginFormRef = ref(null);
const isLoading = ref(false);
// Tabs配置
const tabList = ref([
  { name: '手机号登录' },
  { name: '账号登录' }
]);
const loginType = ref('手机号登录');
// 记住密码
const rememberPwd = ref(true);
// 表单数据
const form = reactive({
  account: '',
  mobile: '',
  password: ''
});
// 表单校验规则
const loginFormRules = reactive({
  account: [
    { type: 'string', required: true, message: '请输入登录账号', trigger: ['change', 'blur'] },
    { type: 'string', min: 2, max: 30, message: '账号长度为2-30个字符', trigger: ['change', 'blur'] }
  ],
  mobile: [
    { type: 'string', required: true, message: '请输入手机号', trigger: ['change', 'blur'] },
    { type: 'string', pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: ['change', 'blur'] }
  ],
  password: [
    { type: 'string', required: true, message: '请输入登录密码', trigger: ['change', 'blur'] },
    { type: 'string', min: 3, max: 20, message: '密码长度为3-20个字符', trigger: ['change', 'blur'] }
  ]
});
// Tabs切换事件
const handleTabChange = ({ name }) => {
  if (isLoading.value) return;
  loginType.value = name;
  if (name === '手机号登录') {
    form.account = '';
  } else {
    form.mobile = '';
  }
  nextTick(() => {
    loginFormRef.value?.clearValidate();
  });
};
// 检查登录状态
const checkLoginStatus = () => {
  try {
    if (userStore.isLogin) {
      uni.switchTab({
        url: '/pages/workbench/index',
        fail: () => uni.reLaunch({ url: '/pages/workbench/index' })
      });
    }
  } catch (err) {
    console.warn('检查登录状态失败:', err);
  }
};
// 登录方法
const handleLogin = async () => {
  try {
    await loginFormRef.value.validate();
    isLoading.value = true;
    // 组装登录参数
    const loginParams = { password: form.password };
    if (loginType.value === '手机号登录') {
      loginParams.username = form.mobile;
    } else {
      loginParams.username = form.account;
    }
    // 执行登录
    await userStore.login(loginParams);
    // 保存数据：账号/密码 均用AES加密
    if (rememberPwd.value) {
      try {
        if (loginType.value === '手机号登录') {
          uni.setStorageSync('login_mobile', aesEncrypt(form.mobile));
          uni.removeStorageSync('login_account');
        } else {
          uni.setStorageSync('login_account', aesEncrypt(form.account));
          uni.removeStorageSync('login_mobile');
        }
        // 密码加密存储（可解密还原）
        uni.setStorageSync('login_password', aesEncrypt(form.password));
      } catch (err) {
        console.warn('保存登录信息失败:', err);
      }
    } else {
      // 清除缓存
      uni.removeStorageSync('login_account');
      uni.removeStorageSync('login_mobile');
      uni.removeStorageSync('login_password');
    }
    // 登录成功跳转
    uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 });
    setTimeout(() => {
      uni.switchTab({
        url: globalConfig.router.tabBarList[1].path,
        fail: () => uni.reLaunch({ url: '/pages/workbench/index' })
      });
    }, 1000);
  } catch (err) {
    if (!Array.isArray(err)) {
      console.error('登录失败:', err);
      uni.showToast({
        title: err.msg || '账号或密码错误，请重试',
        icon: 'none',
        duration: 1000
      });
    }
  } finally {
    isLoading.value = false;
  }
};
// 生命周期
onMounted(() => {
  checkLoginStatus();
  // 初始化表单规则
  nextTick(() => {
    loginFormRef.value?.setRules(loginFormRules);
  });
  // 读取缓存并解密填充
  if (rememberPwd.value) {
    try {
      const savedAccount = aesDecrypt(uni.getStorageSync('login_account') || '');
      const savedMobile = aesDecrypt(uni.getStorageSync('login_mobile') || '');
      const savedPwd = aesDecrypt(uni.getStorageSync('login_password') || '');
      if (savedAccount) {
        form.account = savedAccount;
        loginType.value = '账号登录';
      } else if (savedMobile) {
        form.mobile = savedMobile;
        loginType.value = '手机号登录';
      }
      // 密码解密后填充到输入框（可展示）
      form.password = savedPwd;
    } catch (err) {
      console.warn('读取缓存失败:', err);
    }
  }
});
</script>
<style scoped lang="scss">
.top-title {
  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 200rpx 0 200rpx 40rpx;
  text-align: left;
  position: relative;
  z-index: 1;
  .welcome-text {
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
  }
  .platform-name {
    margin-bottom: 10px;
    font-size: 20px;
    display: block;
  }
}
.login-form {
  background-color: #fff;
  padding: 20px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin: -90px 20px 0;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
:deep(.u-tabs) {
  margin-bottom: 15px;
  .u-tabs__content {
    height: auto !important;
  }
  .u-tab-item {
    padding: 0 10px;
  }
}
:deep(.u-form-item) {
  margin-bottom: 10px;
  position: relative;
}
.password-item {
  position: relative;
  margin-bottom: 5px !important;
}
.remember-wrap {
  padding: 0;
  margin: 10px 0 20px;
  :deep(.u-checkbox) {
    font-size: 12px;
    color: #666;
    justify-content: flex-end;
    margin-left: 0 !important;
    .u-checkbox__label {
      margin-left: 5px;
    }
  }
}
.login-btn {
  margin-top: 10px;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  font-size: 18px;
  background: #0A86F4;
  box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5);
  border-radius: 23px;
}
.copyright {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #999;
  position: fixed;
  bottom: 100px;
}
</style>