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">
      <!-- 登录方式切换 -->
      <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"
      >
        <!-- ========== 手机号登录区域 ========== -->
        <view v-if="loginType === '手机号登录'">
          <!-- 手机号输入框 -->
          <up-form-item prop="mobile">
            <up-input
                v-model="form.mobile"
                border="surround"
                maxlength="11"
                input-align="left"
                fontSize="14px"
                :disabled="isLoading"
                shape="circle"
                placeholder="请输入手机号"
                @blur="() => loginFormRef.validateField('mobile')"
            />
          </up-form-item>

          <!-- 验证码输入框 + 自定义倒计时按钮 -->
          <up-form-item prop="code">
            <up-input
                v-model="form.code"
                border="surround"
                maxlength="4"
                type="number"
                input-align="left"
                fontSize="14px"
                :disabled="isLoading"
                shape="circle"
                placeholder="请输入验证码"
                @blur="() => loginFormRef.validateField('code')"
            >
              <template #suffix>
                <up-button
                    size="mini"
                    type="primary"
                    :disabled="isCodeBtnDisabled"
                    :loading="isCodeLoading"
                    @tap="getVerificationCode"
                    shape="circle"
                >
                  {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
                </up-button>
              </template>
            </up-input>
          </up-form-item>
        </view>

        <!-- ========== 账号登录区域 ========== -->
        <view v-else>
          <!-- 账号输入框 -->
          <up-form-item prop="account">
            <up-input
                v-model="form.account"
                border="surround"
                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"
                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>
        </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, computed, onUnmounted} from 'vue';
import {onShow} from '@dcloudio/uni-app'
import { useUserStore } from '@/pinia/user';
import globalConfig from '@/common/config/global';
import CryptoJS from 'crypto-js';
import { getSmsCode } from "@/api/user";

// ========== 加密工具函数 ==========
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);
const isCodeLoading = ref(false); // 验证码按钮独立loading状态

// 登录方式切换
const tabList = ref([{ name: '手机号登录' }, { name: '账号登录' }]);
const loginType = ref('手机号登录');

// 记住密码（仅账号登录生效）
const rememberPwd = ref(true);

// 表单数据
const form = reactive({
  account: '',  // 账号
  mobile: '',   // 手机号
  password: '', // 密码
  code: ''      // 验证码
});

// 验证码倒计时相关
const countdown = ref(0);
let countdownTimer = null; // 倒计时定时器

// 临时缓存KEY
const TEMP_FORM_KEY = 'login_temp_form_data';

// ========== 方案二核心：保存/恢复表单数据 ==========
// 保存表单数据到本地缓存
const saveFormData = () => {
  try {
    const tempData = {
      form: { ...form },
      loginType: loginType.value,
      countdown: countdown.value,
      rememberPwd: rememberPwd.value
    };
    // 加密存储，提升安全性
    const encryptData = aesEncrypt(JSON.stringify(tempData));
    uni.setStorageSync(TEMP_FORM_KEY, encryptData);
  } catch (err) {
    console.warn('保存表单数据失败:', err);
  }
};

// 从本地缓存恢复表单数据
const restoreFormData = () => {
  try {
    const encryptData = uni.getStorageSync(TEMP_FORM_KEY);
    if (!encryptData) return;

    const tempData = JSON.parse(aesDecrypt(encryptData));
    // 恢复表单数据
    if (tempData.form) {
      Object.assign(form, tempData.form);
    }
    // 恢复登录类型
    // if (tempData.loginType) {
    //   loginType.value = tempData.loginType;
    // }
    // 恢复记住密码状态
    if (tempData.rememberPwd !== undefined) {
      rememberPwd.value = tempData.rememberPwd;
    }
    // 恢复倒计时
    if (tempData.countdown && tempData.countdown > 0) {
      countdown.value = tempData.countdown;
      // 重启倒计时定时器
      startCountdown(countdown.value);
    }

    // 恢复记住密码的缓存数据（原有逻辑）
    if (rememberPwd.value && loginType.value === '账号登录') {
      const savedAccount = aesDecrypt(uni.getStorageSync('login_account') || '');
      const savedPwd = aesDecrypt(uni.getStorageSync('login_password') || '');
      if (savedAccount) {
        form.account = savedAccount;
        form.password = savedPwd;
      }
    }
  } catch (err) {
    console.warn('恢复表单数据失败:', err);
  }
};

// 校验手机号格式
const isMobileValid = computed(() => {
  const mobileReg = /^1[3-9]\d{9}$/;
  return mobileReg.test(form.mobile);
});

// 统一计算验证码按钮禁用状态
const isCodeBtnDisabled = computed(() => {
  return countdown.value > 0 || isLoading.value || isCodeLoading.value || !isMobileValid.value;
});

// 表单校验规则
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'] }
  ],
  code: [
    { type: 'string', required: true, message: '请输入验证码', trigger: ['change', 'blur'] },
    { type: 'string', len: 4, message: '验证码长度4位', trigger: ['change', 'blur'] }
  ]
});

// 切换登录方式
const handleTabChange = ({ name }) => {
  if (isLoading.value) return;

  loginType.value = name;
  // 清空校验状态和无关输入框
  nextTick(() => {
    loginFormRef.value?.clearValidate();
  });
};

// 开始验证码倒计时
const startCountdown = (seconds = 60) => {
  countdown.value = seconds;

  // 清除已有定时器，避免重复
  if (countdownTimer) clearInterval(countdownTimer);

  countdownTimer = setInterval(() => {
    if (countdown.value <= 0) {
      clearCountdown();
      return;
    }
    countdown.value--;
  }, 1000);
};

// 清除倒计时
const clearCountdown = () => {
  countdown.value = 0;
  if (countdownTimer) {
    clearInterval(countdownTimer);
    countdownTimer = null;
  }
};

// 获取验证码
const getVerificationCode = async () => {
  // 双重校验：按钮禁用状态
  if (isCodeBtnDisabled.value) {
    console.warn('验证码按钮已禁用，不执行请求');
    return;
  }

  try {
    isCodeLoading.value = true; // 按钮进入loading
    uni.showLoading({ title: '发送验证码中...', mask: true }); // 遮罩防止重复点击

    const postData = {
      mobile: form.mobile,
      scene: 21
    };
    // 调用验证码接口
    const res = await getSmsCode(postData);

    uni.hideLoading();
    uni.$u.toast('验证码已发送，请注意查收');
    startCountdown(); // 仅接口成功时开始倒计时
  } catch (err) {
    // 捕获接口异常
    uni.hideLoading();
    console.error('获取验证码失败:', err);
    uni.$u.toast(err.msg || '发送验证码失败，请重试');
  } finally {
    isCodeLoading.value = false; // 结束loading状态
  }
};

// 检查登录状态
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 {
    // 根据登录类型校验对应字段
    const validateFields = loginType.value === '手机号登录'
        ? ['mobile', 'code']
        : ['account', 'password'];

    // 执行表单校验
    const validateRes = await loginFormRef.value.validate(validateFields);
    if (!validateRes) {
      return;
    }

    isLoading.value = true;

    // 组装登录参数
    const loginParams = {};
    if (loginType.value === '手机号登录') {
      loginParams.mobile = form.mobile;
      loginParams.code = form.code;
      loginParams.type = 'sms';
    } else {
      loginParams.username = form.account;
      loginParams.password = form.password;
      loginParams.type = 'password';
    }

    // 执行登录
    await userStore.login(loginParams);

    // 保存登录信息（仅账号登录且勾选记住密码）
    if (loginType.value === '账号登录' && rememberPwd.value) {
      try {
        uni.setStorageSync('login_account', aesEncrypt(form.account));
        uni.setStorageSync('login_password', aesEncrypt(form.password));
        uni.removeStorageSync('login_mobile');
      } catch (err) {
        console.warn('保存登录信息失败:', err);
      }
    } else {
      // 清除缓存
      uni.removeStorageSync('login_account');
      uni.removeStorageSync('login_mobile');
      uni.removeStorageSync('login_password');
    }

    // 登录成功后清除临时表单缓存
    uni.removeStorageSync(TEMP_FORM_KEY);

    // 登录成功跳转
    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) {
    console.error('登录失败:', err);
    uni.showToast({
      title: err.msg || (loginType.value === '手机号登录' ? '验证码错误' : '账号或密码错误'),
      icon: 'none',
      duration: 1000
    });
  } finally {
    isLoading.value = false;
  }
};

// ========== 小程序生命周期适配（方案二核心） ==========
// 页面显示时（切回页面）恢复数据
onShow(() => {
  restoreFormData();
});

// 页面卸载时保存数据
onUnmounted(() => {
  clearCountdown();
  saveFormData();
});

// 页面挂载时初始化
onMounted(() => {
  checkLoginStatus();

  // 初始化表单规则
  nextTick(() => {
    loginFormRef.value?.setRules(loginFormRules);
    // 首次挂载也恢复一次数据
    restoreFormData();
  });
});
</script>

<style scoped lang="scss">
.page-container {
  height: 100vh;
  background: url("https://img.jichengshanshui.com.cn:28207/appimg/loginbg.jpg") no-repeat;
  background-position: bottom center;
  background-size: 100% 240px;
}

.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: 60px;
}

// 验证码按钮样式优化
:deep(.u-input__suffix) {
  padding-right: 10rpx;
}

:deep(.u-button--mini) {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 15rpx;
}
</style>