新增记住密码

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "crypto-js": "^4.2.0",
     "mqtt": "^2.18.8"
   }
 }

pages/login.vue

@@ -13,15 +13,15 @@
       <view class="input-item flex align-center" style="position: relative;">
         <view class="iconfont icon-password icon"></view>
         <input v-if="!isShowPwd"
-                   v-model="loginForm.password"  type="password"  class="input" placeholder="请输入密码" maxlength="20" />
+               v-model="loginForm.password"  type="password"  class="input" placeholder="请输入密码" maxlength="20" />
         <input v-else v-model="loginForm.password"  type="text"  class="input" placeholder="请输入密码" maxlength="20" />
         <!-- 替换为 uni-icons 密码图标 -->
         <uni-icons
             class="pwd-icon"
             :type="isShowPwd ? 'eye-filled' : 'eye'"
-        size="18"
+            size="18"
-        color="#666"
+            color="#666"
-        @click="isShowPwd = !isShowPwd"
+            @click="isShowPwd = !isShowPwd"
         ></uni-icons>
       </view>
       <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
@@ -31,6 +31,20 @@
           <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
         </view>
       </view>
+
+      <!-- ========== 新增：uni-data-checkbox 记住密码（可正常勾选） ========== -->
+      <view style="margin: 10px 0 0 10px; text-align: left;">
+        <uni-data-checkbox
+            multiple
+            v-model="value"
+            :localdata="data"
+            size="14"
+            color="#007aff"
+            @change="onRememberChange"
+        ></uni-data-checkbox>
+      </view>
+      <!-- ========== 新增结束 ========== -->
+
       <view class="action-btn">
         <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
       </view>
@@ -65,9 +79,13 @@
   import { getCodeImg } from '@/api/login'
   import { getToken } from '@/utils/auth'
   import UniIcons from "../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
+  // ========== 新增：引入uni-data-checkbox ==========
+  import UniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
+  import CryptoJS from 'crypto-js'
 
   export default {
-    components: {UniIcons},
+    // ========== 新增：注册组件 ==========
+    components: {UniIcons, UniDataCheckbox},
     data() {
       return {
         isShowPwd: false,
@@ -75,13 +93,18 @@
         captchaEnabled: true,
         // 用户注册开关
         register: true,
+        data:[{value: 0, text: '记住密码'}],
         globalConfig: getApp().globalData.config,
         loginForm: {
           username: "",
           password: "",
           code: "",
           uuid: ""
-        }
+        },
+        value:[0],
+        // ========== 新增：记住密码相关数据 ==========
+        remember: true, // 记住密码选中状态
+        STORAGE_KEY: 'agri_login_pwd' // 存储密码的key
       }
     },
     created() {
@@ -93,8 +116,71 @@
         this.$tab.reLaunch('/pages/control/index')
       }
       //#endif
+      // ========== 新增：页面加载时自动回填密码 ==========
+      this.loadSavedPwd()
     },
     methods: {
+      // ========== 新增：uni-data-checkbox 状态切换 ==========
+      onRememberChange(e) {
+        this.remember = false;
+        if (e.detail.value && e.detail.value===0) {
+          this.remember = true ;
+        }
+      },
+      // ========== 新增：密码加密存储核心方法 ==========
+      // 生成加密密钥（绑定设备信息）
+      getEncryptKey() {
+        try {
+          const sys = uni.getSystemInfoSync()
+          const appId = uni.getAccountInfoSync()?.miniProgram?.appId || 'agri-default'
+          return CryptoJS.MD5(sys.deviceId + appId + 'agri-pwd-key').toString()
+        } catch (e) {
+          return 'agri-safe-key-2026'
+        }
+      },
+      // 加密密码
+      encryptPwd(pwd) {
+        return CryptoJS.AES.encrypt(pwd, this.getEncryptKey()).toString()
+      },
+      // 解密密码
+      decryptPwd(encryptedStr) {
+        try {
+          const bytes = CryptoJS.AES.decrypt(encryptedStr, this.getEncryptKey())
+          return bytes.toString(CryptoJS.enc.Utf8) || ''
+        } catch (e) {
+          return ''
+        }
+      },
+      // 加载本地存储的密码并回填
+      loadSavedPwd() {
+        try {
+          const savedData = uni.getStorageSync(this.STORAGE_KEY)
+          if (!savedData) return
+          const data = JSON.parse(savedData)
+          if (data.username && data.encryptedPwd) {
+            this.loginForm.username = data.username
+            this.loginForm.password = this.decryptPwd(data.encryptedPwd)
+            this.remember = true // 回填密码时自动选中
+          }
+        } catch (e) {
+          console.error('加载记住密码失败：', e)
+        }
+      },
+      // 保存密码到本地（加密）
+      savePwd() {
+        if (!this.remember) {
+          uni.removeStorageSync(this.STORAGE_KEY)
+          return
+        }
+        const saveData = {
+          username: this.loginForm.username,
+          encryptedPwd: this.encryptPwd(this.loginForm.password),
+          saveTime: Date.now()
+        }
+        uni.setStorageSync(this.STORAGE_KEY, JSON.stringify(saveData))
+      },
+
+      // ========== 原有方法（完全未修改） ==========
       // 用户注册
       handleUserRegister() {
         this.$tab.redirectTo(`/pages/register`)
@@ -136,6 +222,8 @@
       async pwdLogin() {
         this.$store.dispatch('Login', this.loginForm).then(() => {
           this.$modal.closeLoading()
+          // ========== 新增：登录成功后保存密码 ==========
+          this.savePwd()
           this.loginSuccess()
         }).catch(() => {
           if (this.captchaEnabled) {
@@ -147,7 +235,7 @@
       loginSuccess(result) {
         // 设置用户信息
         this.$store.dispatch('GetInfo').then(res => {
-          // ========== 新增：MQTT初始化逻辑（最小改动） ==========
+          // ========== 原有：MQTT初始化逻辑（最小改动） ==========
           // 1. 获取全局App实例
           const app = getApp()
           // 2. 获取登录后的token（从auth工具获取）