登录账号密码加密存储

刘淇
1 parent 53012a16
Showing 10 changed files with 141 additions and 106 deletions
package-lock.json
package.json
pages-sub/daily/maintain-manage/road-detail-list.vue
pages-sub/data/tree-archive/addTree.vue
pages-sub/data/tree-archive/logDetail.vue
pages-sub/data/tree-archive/treeRecord.vue
pages/index/index.vue
pages/login/index.vue
pages/mine/index.vue
pages/workbench/index.vue
@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "clipboard": "^2.0.11",
+        "crypto-js": "^4.2.0",
         "dayjs": "^1.11.19",
         "pinia-plugin-persistedstate": "^4.7.1"
       },
@@ -85,6 +86,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
 {
   "dependencies": {
     "clipboard": "^2.0.11",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.19",
     "pinia-plugin-persistedstate": "^4.7.1"
   },
@@ -54,7 +54,7 @@
           <!-- 自定义标题区域 -->
           <template #head>
               <view class="card-header">
-                <view class="common-card-title common-name">{{ item.planName || '无计划名称' }}{{ item.planName || '无计划名称' }}</view>
+                <view class="common-card-title common-name">{{ item.planName || '无计划名称' }}</view>
                 <!-- 已失效标识 -->
                 <view v-show="item.finishState == 3 "  class="common-invalid-tag">已失效</view>
                 <view v-show="item.finishState == 2 "  class="common-finish-tag">已完成</view>
 <template>
-  <view class="container">
+  <view class="page-container">
     <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
       <up-form-item label="名称" prop="treetype" required>
         <up-input v-model.trim="formData.treetype" placeholder="请输入名称" maxlength="30" border="none"/>
@@ -452,7 +452,7 @@ const submit = async () =&gt; {
 </script>
 <style scoped lang="scss">
-.container {
+.page-container {
   padding: 15px;
   box-sizing: border-box;
   background: #fff;
 <template>
-  <view class="container">
+  <view class="page-container">
     <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
       <up-form-item label="名称" prop="treetype" required>
         <up-input v-model="formData.treetype" placeholder="请输入名称" maxlength="30" border="none" readonly/>
@@ -205,7 +205,7 @@ onReady(() =&gt; {});
 </script>
 <style scoped lang="scss">
-.container {
+.page-container {
   padding: 25rpx;
   box-sizing: border-box;
   background: #fff;
 <template>
   <view class="container">
+
+    <!-- 内容区域 - 集成z-paging分页 -->
+    <z-paging
+        ref="pagingRef"
+        v-model="rows"
+        @query="fetchData"
+        :auto-show-system-loading="true"
+    >
+      <!-- 空数据提示 -->
+      <template #empty>
+        <empty-view/>
+      </template>
     <!-- 空数据组件 -->
-    <up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>
+<!--    <up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>-->
     <!-- 树木列表：up-card重构 + 保留原始背景图写法 核心满足你的要求 -->
-    <view class="record-wrap" v-else>
+    <view class="record-wrap" >
       <up-card
           v-for="i in rows"
-          :key="i.id"
+          :key="i.treenumber"
           :border="false"
           :show-head="false"
           class="tree-card"
@@ -16,7 +28,6 @@
       >
         <template #body>
           <view class="card-body-inner">
-            <!-- ✅ 保留你的 原生背景图写法 完全没动 核心要求满足 -->
             <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view>
             <view class="record-list-right">
@@ -36,15 +47,9 @@
             树木编号：{{ i.treenumber }}
           </view>
         </template>
-
-<!--        <template #foot>-->
-<!--          <view class="treenumber-no">-->
-<!--            树木编号：{{ i.treenumber }}-->
-<!--          </view>-->
-<!--        </template>-->
       </up-card>
     </view>
-
+    </z-paging>
     <!-- 底部新增按钮 -->
     <view class="fixed-bottom-btn-wrap">
       <up-button
@@ -82,7 +87,8 @@ onLoad((options) =&gt; {
 })
 onShow(() => {
-  treeRoadQuery()
+  // 初始化分页数据
+  pagingRef.value?.reload()
 })
@@ -99,10 +105,12 @@ const toAddTreePage = () =&gt; {
   })
 }
-const treeRoadQuery = async () => {
-  const res = await treeRoadReq( {road: roadId.value})
+const pagingRef = ref(null) // z-paging实例
+const fetchData = async (pageNo, pageSize) => {
+  const res = await treeRoadReq( {road: roadId.value,pageNo, pageSize})
   console.log(res)
-  rows.value = res.list
+  // rows.value = res.list
+  pagingRef.value?.complete(res?.list || [], res?.total)
 }
 </script>
@@ -88,7 +88,7 @@
               <view class="task-item__footer u-flex common-item-center common-justify-between"
                     style="font-size: 13px; margin-top: 5px;">
                 <view class="urgency-tag" >
-                  紧急程度： {{ item.pressingType }}
+                  紧急程度： {{ item.pressingType||'--' }}
                 </view>
                 <view style="font-size: 13px;color: #333">{{
                     timeFormat(item.busiDateTime, 'yyyy-mm-dd hh:MM:ss')
@@ -371,7 +371,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量
 .user-info-bar {
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
-  padding: 90px $spacing-lg 135px;
+  padding: 80px $spacing-lg 135px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 <template>
-  <view class="login-page">
+  <view class="page-container">
     <!-- 顶部标题区 -->
     <view class="top-title">
       <text class="welcome-text">你好，欢迎光临</text>
@@ -112,27 +112,76 @@
 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配置（name直接存储显示文本）
+// Tabs配置
 const tabList = ref([
   { name: '手机号登录' },
   { name: '账号登录' }
 ]);
-const loginType = ref('手机号登录'); // 登录类型标识
+const loginType = ref('手机号登录');
-// 记住密码（默认选中）
+// 记住密码
 const rememberPwd = ref(true);
 // 表单数据
 const form = reactive({
-  account: '',    // 账号
-  mobile: '',     // 手机号
-  password: ''    // 密码
+  account: '',
+  mobile: '',
+  password: ''
 });
 // 表单校验规则
@@ -152,56 +201,19 @@ const loginFormRules = reactive({
 });
 // Tabs切换事件
-const handleTabChange = ({name}) => {
-  console.log(name)
+const handleTabChange = ({ name }) => {
   if (isLoading.value) return;
   loginType.value = name;
-
-  // 切换时清空另一类输入框
   if (name === '手机号登录') {
     form.account = '';
   } else {
     form.mobile = '';
   }
-
-  // 清空校验状态
   nextTick(() => {
     loginFormRef.value?.clearValidate();
   });
 };
-// 生命周期
-onMounted(() => {
-  // 检查登录态
-  checkLoginStatus();
-
-  // 初始化表单校验规则
-  nextTick(() => {
-    loginFormRef.value?.setRules(loginFormRules);
-  });
-
-  // 读取缓存的账号/密码
-  if (rememberPwd.value) {
-    try {
-      const savedAccount = uni.getStorageSync('login_account') || '';
-      const savedMobile = uni.getStorageSync('login_mobile') || '';
-      const savedPwd = 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);
-    }
-  }
-});
-
 // 检查登录状态
 const checkLoginStatus = () => {
   try {
@@ -212,21 +224,19 @@ const checkLoginStatus = () =&gt; {
       });
     }
   } catch (err) {
-    console.warn('检查登录状态失败：', err);
+    console.warn('检查登录状态失败:', err);
   }
 };
 // 登录方法
 const handleLogin = async () => {
   try {
-    // 表单校验
     await loginFormRef.value.validate();
     isLoading.value = true;
     // 组装登录参数
     const loginParams = { password: form.password };
     if (loginType.value === '手机号登录') {
-      // loginParams.mobile = form.mobile;
       loginParams.username = form.mobile;
     } else {
       loginParams.username = form.account;
@@ -235,19 +245,20 @@ const handleLogin = async () =&gt; {
     // 执行登录
     await userStore.login(loginParams);
-    // 保存记住密码
+    // 保存数据：账号/密码 均用AES加密
     if (rememberPwd.value) {
       try {
         if (loginType.value === '手机号登录') {
-          uni.setStorageSync('login_mobile', form.mobile);
+          uni.setStorageSync('login_mobile', aesEncrypt(form.mobile));
           uni.removeStorageSync('login_account');
         } else {
-          uni.setStorageSync('login_account', form.account);
+          uni.setStorageSync('login_account', aesEncrypt(form.account));
           uni.removeStorageSync('login_mobile');
         }
-        uni.setStorageSync('login_password', form.password);
+        // 密码加密存储（可解密还原）
+        uni.setStorageSync('login_password', aesEncrypt(form.password));
       } catch (err) {
-        console.warn('保存密码失败：', err);
+        console.warn('保存登录信息失败:', err);
       }
     } else {
       // 清除缓存
@@ -256,7 +267,7 @@ const handleLogin = async () =&gt; {
       uni.removeStorageSync('login_password');
     }
-    // 登录成功提示+跳转
+    // 登录成功跳转
     uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 });
     setTimeout(() => {
       uni.switchTab({
@@ -265,9 +276,8 @@ const handleLogin = async () =&gt; {
       });
     }, 1000);
   } catch (err) {
-    // 错误处理
     if (!Array.isArray(err)) {
-      console.error('登录失败：', err);
+      console.error('登录失败:', err);
       uni.showToast({
         title: err.msg || '账号或密码错误，请重试',
         icon: 'none',
@@ -278,20 +288,39 @@ const handleLogin = async () =&gt; {
     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">
-// 核心布局
-.login-page {
-  min-height: 100vh;
-  padding: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
-  background: #f5f7fa;
-}
-// 顶部样式
 .top-title {
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
@@ -327,7 +356,6 @@ const handleLogin = async () =&gt; {
   box-sizing: border-box;
 }
-// Tabs样式适配
 :deep(.u-tabs) {
   margin-bottom: 15px;
   .u-tabs__content {
@@ -338,29 +366,24 @@ const handleLogin = async () =&gt; {
   }
 }
-// 表单间距
 :deep(.u-form-item) {
   margin-bottom: 10px;
   position: relative;
 }
-// 密码项样式
 .password-item {
   position: relative;
   margin-bottom: 5px !important;
 }
-// ✅ 核心优化：记住密码完全居右对齐
 .remember-wrap {
-  //text-align: right;
-  padding: 0; // 移除多余内边距
+  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 {
@@ -369,7 +392,6 @@ const handleLogin = async () =&gt; {
   }
 }
-// 登录按钮
 .login-btn {
   margin-top: 10px;
   width: 100%;
@@ -382,7 +404,6 @@ const handleLogin = async () =&gt; {
   border-radius: 23px;
 }
-// 版权信息
 .copyright {
   width: 100%;
   text-align: center;
@@ -13,7 +13,7 @@
       <view class="user-info-content">
         <view class="user-name">{{ userStore.isLogin ? userInfo.username : '未登录' }}</view>
 <!--        <view class="user-phone">{{ userStore.isLogin ? userInfo.nickname : '&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;' }}</view>-->
-        <view class="user-phone">上次登录时间{{ timeFormat(userInfo.loginDate)}}</view>
+        <view class="user-phone">上次登录时间   {{ timeFormat(userInfo.loginDate)}}</view>
       </view>
@@ -123,7 +123,7 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
-  height: 230px;
+  height: 220px;
   //height: 120px;
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
@@ -160,17 +160,15 @@ export default {
 }
 // 退出登录按钮
 .logout-btn-wrap {
-  margin: 100px 10px 10px;
+  margin: 80px 15px 0;
 }
 // 登录按钮
 .login-btn {
-  margin-top: 20px;
   width: 100%;
   height: 44px;
   line-height: 44px;
   border-radius: 4px;
   font-size: 16px;
-
   background: #0A86F4;
   box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5);
   border-radius: 23px;
@@ -166,7 +166,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   top: 0;
   left: 0;
   width: 100%;
-  padding: 80px 15px 125px;
+  padding: 80px 15px 115px;
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
   z-index: 1;
@@ -176,7 +176,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   .welcome-text {
     font-size: 16px;
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: 4px;
     font-weight: 500;
   }
@@ -191,7 +191,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 .content-wrap {
   position: relative;
   z-index: 2;
-  padding: 135px 0 0;
+  padding: 125px 0 0;
   display: flex;
   flex-direction: column;
   gap: 10px;