JCSS / jcss-miniprogram

  <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: '14px' // 补充单位，避免样式异常

          }"
            :inactiveStyle="{
             color: '#606060',

              fontSize: '14px' // 补充单位，避免样式异常

          }"

        ></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="请输入手机号"

                @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';
  

  // ========== 加密工具函数 ==========

  const CRYPTO_CONFIG = {

    key: CryptoJS.enc.Utf8.parse('jcsscrypto123abc'), // 16位key

    iv: CryptoJS.enc.Utf8.parse('abc123jcsscrypto'),  // 16位iv
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  };

  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 '';
    }
  };
  

  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;

    console.log('切换到:', name);

    loginType.value = name;

    // 只清空校验状态，不清除输入框内容

    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 {

          console.log('123+'+loginType.value)

          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;

          form.mobile = ''; // 清空手机号输入框
          // loginType.value = '账号登录';

        } else if (savedMobile) {
          form.mobile = savedMobile;

          form.account = ''; // 清空账号输入框
          // 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>