验证码登录

刘淇
1 parent 83673de2
Showing 6 changed files with 344 additions and 146 deletions
api/user.js
manifest.json
pages/index/index.vue
pages/login/index.vue
pages/workbench/index.vue
pinia/user.js
@@ -11,6 +11,14 @@ export const login = (params) =&gt; {
 };
  
 /**
+ * 手机号验证码登录
+ * @returns {Promise}
+ */
+export const smsLogin = (data) => {
+  return post('/admin-api/system/auth/sms-login',data)
+}
+
+/**
  * 获取用户信息
  * @returns {Promise}
  */
@@ -68,6 +76,15 @@ export const getUnreadCount = () =&gt; {
 }
  
  
+/**
+ * 获取验证码
+ * @returns {Promise}
+ */
+export const getSmsCode = (data) => {
+  return post('/admin-api/system/auth/send-sms-code',data)
+}
+
+
  
  
  
@@ -54,7 +54,7 @@
     },
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxcb4cd34066b97d82",
+        "appid" : "wx64368a9b9e799172",
         "setting" : {
             "urlCheck" : false
         },
@@ -4,8 +4,8 @@
     <view class="user-info-bar">
       <view class="user-info">
         <view class="user-text">
-          <view class="username">你好{{ userName }}，欢迎登录</view>
-          <view class="login-desc">蓟城山水智慧园林养护平台</view>
+          <view class="username">你好{{ userName }}</view>
+          <view class="login-desc">蓟城山水全域智能运营管理平台</view>
         </view>
       </view>
       <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">
@@ -2,29 +2,20 @@
   <view class="page-container">
     <!-- 顶部标题区 -->
     <view class="top-title">
-      <text class="welcome-text">你好，欢迎光临</text>
-<!--      <text class="platform-name">全域智能运营管理平台</text>-->
-      <text class="platform-name">蓟城山水智慧园林养护平台</text>
-
+      <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' // 补充单位，避免样式异常
-        }"
+          :activeStyle="{ color: '#3c9cff', fontWeight:'500', fontSize: '14px' }"
+          :inactiveStyle="{ color: '#606060', fontSize: '14px' }"
       ></up-tabs>
  
       <!-- 表单校验容器 -->
@@ -34,71 +25,100 @@
           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 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>
  
@@ -121,10 +141,12 @@
 </template>
  
 <script setup>
-import { ref, reactive, onMounted, nextTick } from 'vue';
+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 = {
@@ -163,26 +185,101 @@ const aesDecrypt = (encryptedText) =&gt; {
   }
 };
  
-// ========== 业务逻辑 ==========
+// ========== 核心业务逻辑 ==========
 const userStore = useUserStore();
 const loginFormRef = ref(null);
 const isLoading = ref(false);
+const isCodeLoading = ref(false); // 验证码按钮独立loading状态
  
-// Tabs配置
-const tabList = ref([
-  { name: '手机号登录' },
-  { name: '账号登录' }
-]);
+// 登录方式切换
+const tabList = ref([{ name: '手机号登录' }, { name: '账号登录' }]);
 const loginType = ref('手机号登录');
  
-// 记住密码
+// 记住密码（仅账号登录生效）
 const rememberPwd = ref(true);
  
 // 表单数据
 const form = reactive({
   account: '',  // 账号
   mobile: '',   // 手机号
-  password: ''  // 密码
+  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;
 });
  
 // 表单校验规则
@@ -198,20 +295,81 @@ const loginFormRules = reactive({
   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'] }
   ]
 });
  
-// Tabs切换事件：移除清空输入框的逻辑
+// 切换登录方式
 const handleTabChange = ({ name }) => {
   if (isLoading.value) return;
-  console.log('切换到:', name);
+
   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 {
@@ -226,45 +384,56 @@ const checkLoginStatus = () =&gt; {
   }
 };
  
-// 登录方法
+// 登录处理
 const handleLogin = async () => {
   try {
-    await loginFormRef.value.validate();
+    // 根据登录类型校验对应字段
+    const validateFields = loginType.value === '手机号登录'
+        ? ['mobile', 'code']
+        : ['account', 'password'];
+
+    // 执行表单校验
+    const validateRes = await loginFormRef.value.validate(validateFields);
+    if (!validateRes) {
+      return;
+    }
+
     isLoading.value = true;
  
     // 组装登录参数
-    const loginParams = { password: form.password };
+    const loginParams = {};
     if (loginType.value === '手机号登录') {
-      loginParams.username = form.mobile;
+      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);
  
-    // 保存数据：账号/密码 均用AES加密
-    if (rememberPwd.value) {
+    // 保存登录信息（仅账号登录且勾选记住密码）
+    if (loginType.value === '账号登录' && 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_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(() => {
@@ -274,58 +443,50 @@ const handleLogin = async () =&gt; {
       });
     }, 1000);
   } catch (err) {
-    if (!Array.isArray(err)) {
-      console.error('登录失败:', err);
-      uni.showToast({
-        title: err.msg || '账号或密码错误，请重试',
-        icon: 'none',
-        duration: 1000
-      });
-    }
+    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();
   });
-  // 读取缓存并解密填充：修复逻辑漏洞，确保只填充当前登录类型的输入框
-  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">
-.page-container{
-  height:100vh;
+.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%;
@@ -361,9 +522,11 @@ onMounted(() =&gt; {
  
 :deep(.u-tabs) {
   margin-bottom: 15px;
+
   .u-tabs__content {
     height: auto !important;
   }
+
   .u-tab-item {
     padding: 0 10px;
   }
@@ -415,4 +578,15 @@ onMounted(() =&gt; {
   position: fixed;
   bottom: 60px;
 }
+
+// 验证码按钮样式优化
+:deep(.u-input__suffix) {
+  padding-right: 10rpx;
+}
+
+:deep(.u-button--mini) {
+  height: 60rpx;
+  line-height: 60rpx;
+  padding: 0 15rpx;
+}
 </style>
 \ No newline at end of file
@@ -10,8 +10,8 @@
  
     <!-- 蓝色装饰块 -->
     <view class="blue-decor-block" v-show="!loading">
-      <text class="welcome-text u-line-1">你好{{ userInfo?.user?.nickname || '' }}，欢迎登录</text>
-      <text class="platform-name">蓟城山水智慧园林养护平台</text>
+      <text class="welcome-text u-line-1">你好{{ userInfo?.user?.nickname || '' }}</text>
+      <text class="platform-name">蓟城山水全域智能运营管理平台</text>
     </view>
  
     <!-- 内容容器 -->
@@ -2,7 +2,7 @@ import { defineStore } from &#39;pinia&#39;;
 import cache from '@/common/utils/cache';
 import globalConfig from '@/common/config/global';
 // 新增：导入 refreshToken 接口
-import { login, getUserInfo, logout, moduleList, getSimpleDictDataList, refreshToken } from '@/api/user';
+import { login,smsLogin, getUserInfo, logout, moduleList, getSimpleDictDataList, refreshToken } from '@/api/user';
  
 // 新增：定义刷新Token的定时器标识（避免重复创建定时器）
 let refreshTokenTimer = null;
@@ -41,7 +41,14 @@ export const useUserStore = defineStore(&#39;user&#39;, {
   actions: {
     async login(params) {
       try {
-        const res = await login(params);
+        // smsLogin
+        let res
+        if(params.type=='sms'){
+          res = await smsLogin(params);
+        }else{
+          res = await login(params);
+        }
+
         // 新增：从登录接口返回值中获取 refreshToken（若接口返回字段名不一致，可调整，如 res.refresh_token）
         const { accessToken, expiresTime, userId, refreshToken } = res;