fix: 登录、锁屏加验证码

src/services/index.js

@@ -76,3 +76,6 @@ export function updateSystemConfigs(params) {
 export function testLinkApi(category) {
   return request.get('/sms/v1/configs/test', { params: { category } })
 }
+export function getVertifyCode(params) {
+  return request.post('/sms/v1/users/code', wrapperParams(params))
+}

src/views/login/lockme.vue

@@ -5,23 +5,29 @@
       <p class="account">{{ userData.name }}</p>
       <a-form :model="loginForm" ref="loginFormRef" @keyup.enter.prevent="handleLogin" @submit.prevent>
         <a-form-item name="password" :rules="[{ ...required, message: '请输入密码' }]">
-          <a-input-password v-model:value="loginForm.password" placeholder="请输入密码">
+          <a-input-password v-model:value="loginForm.password" placeholder="请输入密码"></a-input-password>
-            <template #addonAfter>
+        </a-form-item>
-              <a-button class="text-white login-btn" @click="handleLogin()" :loading="loading">
+        <a-form-item name="verify" :rules="[{ ...required, message: '请输入验证码' }]">
-                <template #icon>
+          <a-input v-model:value="loginForm.verify" placeholder="请输入验证码" style="width: 65%; vertical-align: middle"></a-input>
-                  <ArrowRightOutlined />
+          <a-button style="height: 32px; width: 33%; margin-left: 2%" @click="getVertify" :loading="verifyLoading" :disabled="isCountingDown">
-                </template>
+            {{ isCountingDown ? `${countdown}s后重新获取` : '获取验证码' }}
-              </a-button>
+          </a-button>
-            </template>
-          </a-input-password>
         </a-form-item>
       </a-form>
-      <a-button class="switch-button" type="text" @click="switchUser()">
+      <div class="button-group">
-        <template #icon>
+        <a-button class="switch-button" type="text" @click="switchUser()">
-          <LeftOutlined />
+          <template #icon>
-        </template>
+            <LeftOutlined />
-        切换账户
+          </template>
-      </a-button>
+          切换账户
+        </a-button>
+        <a-button class="login-btn" type="primary" @click="handleLogin()" :loading="loading">
+          <template #icon>
+            <ArrowRightOutlined />
+          </template>
+          登录
+        </a-button>
+      </div>
     </div>
     <div class="date-time">
       <div class="time">{{ currentTime.time }}</div>
@@ -36,6 +42,7 @@ import { encrypt } from 'utils/crypto'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { login } from 'services'
+import { getVertifyCode } from '@/services'
 import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
 import setLoginData from './tools'
 import { required } from '@/validate'
@@ -47,23 +54,52 @@ export default defineComponent({
     const state = reactive({
       loginForm: {
         password: '',
+        verify: ''
       },
       loading: false,
+      verifyLoading: false,
+      countdown: 0,
+      isCountingDown: false
     })
     let timer: any = 0
+    let countdownTimer: any = null
     const store = useStore()
     const userData = computed(() => store.getters.userData || {})
+
+    // 开始倒计时
+    const startCountdown = () => {
+      state.countdown = 60
+      state.isCountingDown = true
+      countdownTimer = setInterval(() => {
+        state.countdown--
+        if (state.countdown <= 0) {
+          clearInterval(countdownTimer)
+          state.isCountingDown = false
+          state.countdown = 0
+        }
+      }, 1000)
+    }
+
+    // 重置倒计时
+    const resetCountdown = () => {
+      if (countdownTimer) {
+        clearInterval(countdownTimer)
+        countdownTimer = null
+      }
+      state.isCountingDown = false
+      state.countdown = 0
+    }
     // 当前时间设置
     const currentTime = ref({
       time: '',
-      date: '',
+      date: ''
     })
     function setTimer() {
       const getTime = () => {
         const time = dayjs()
         currentTime.value = {
           time: time.format('HH:mm:ss'),
-          date: `${time.format('MM月DD日')}, ${time.format('dddd')}`,
+          date: `${time.format('MM月DD日')}, ${time.format('dddd')}`
         }
       }
       getTime()
@@ -73,7 +109,7 @@ export default defineComponent({
     }
     let lockData = {
       isLock: false,
-      path: '',
+      path: ''
     }
     onMounted(() => {
       const lockDataItem = localStorage.getItem('lockData')
@@ -83,7 +119,7 @@ export default defineComponent({
         'lockData',
         JSON.stringify({
           ...lockData,
-          isLock: true,
+          isLock: true
         })
       )
       setTimer()
@@ -94,6 +130,26 @@ export default defineComponent({
     function switchUser() {
       store.dispatch('permission/ResetRoutes')
     }
+
+    // 获取验证码
+    const getVertify = () => {
+      if (state.isCountingDown) return // 如果正在倒计时，不允许重复点击
+      if (!userData.value.account) {
+        return // 如果没有用户账号，直接返回
+      }
+
+      state.verifyLoading = true
+      getVertifyCode({ account: userData.value.account })
+        .then((res) => {
+          if (res.success) {
+            state.verifyLoading = false
+            startCountdown() // 开始倒计时
+          }
+        })
+        .finally(() => {
+          state.verifyLoading = false
+        })
+    }
     const loginFormRef = ref()
     const router = useRouter()
     async function handleLogin() {
@@ -104,6 +160,7 @@ export default defineComponent({
           account: userData.value.account,
           password: encrypt(values.password),
           isManager: true,
+          code: values.verify
         })
         if (res.success) {
           setLoginData(res.data)
@@ -113,7 +170,7 @@ export default defineComponent({
             'lockData',
             JSON.stringify({
               ...lockData,
-              isLock: false,
+              isLock: false
             })
           )
         }
@@ -130,8 +187,11 @@ export default defineComponent({
       required,
       switchUser,
       handleLogin,
+      getVertify,
+      startCountdown,
+      resetCountdown
     }
-  },
+  }
 })
 </script>
 
@@ -149,7 +209,7 @@ export default defineComponent({
     text-align: center;
     top: 40%;
     left: 50%;
-    width: 300px;
+    width: 350px;
     margin: -150px 0 0 -150px;
     .logo {
       display: inline-block;
@@ -165,15 +225,55 @@ export default defineComponent({
       color: #fff;
       margin: 15px 0 25px 0;
     }
+    .button-group {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 20px;
+    }
     .login-btn {
-      background: #6b7485;
+      background: #1890ff;
       border: none;
-      width: 48px;
+      padding: 0 20px;
+    }
+    .login-btn:hover {
+      background: #40a9ff;
     }
     ::v-deep(.ant-input-group-addon) {
       border: none;
       padding: 0;
     }
+    ::v-deep(.ant-input) {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+    ::v-deep(.ant-input-password) {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+    ::v-deep(.ant-input::placeholder) {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    ::v-deep(.ant-input-password .ant-input) {
+      background: transparent;
+      border: none;
+      color: #fff;
+    }
+    ::v-deep(.ant-input-password .ant-input::placeholder) {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    ::v-deep(.ant-btn) {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #fff;
+    }
+    ::v-deep(.ant-btn:disabled) {
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.2);
+      color: rgba(255, 255, 255, 0.4);
+    }
   }
   .date-time {
     position: absolute;

src/views/login/login.vue

@@ -26,6 +26,17 @@
             </a-input-password>
           </a-form-item>
         </a-tooltip>
+        <a-form-item class="login-form-item" name="verify" :rules="[{ ...required, message: '请输入验证码' }]">
+          <a-input placeholder="请输入验证码" autocomplete="off" v-model:value="loginForm.verify" style="width: 67%; vertical-align: middle">
+            <template #prefix>
+              <LockOutlined />
+            </template>
+          </a-input>
+          <div class="login-code" v-if="identifyCode"></div>
+          <a-button v-else style="height: 60px; width: 31%; margin-left: 2%" @click="getVertify" :loading="verifyLoading" :disabled="isCountingDown || !loginForm.account.trim()">
+            {{ isCountingDown ? `${countdown}s后重新获取` : '获取验证码' }}
+          </a-button>
+        </a-form-item>
         <a-form-item class="login-form-item">
           <div class="operate-region">
             <span class="remember">
@@ -51,6 +62,7 @@ import { useStore } from 'vuex'
 import { useRouter, useRoute } from 'vue-router'
 import setLoginData from './tools'
 import { required } from '@/validate'
+import { getVertifyCode } from '@/services'
 
 export default {
   components: { UserOutlined, LockOutlined },
@@ -59,14 +71,43 @@ export default {
       remember: false,
       loginForm: {
         account: '',
-        password: '',
+        password: ''
       },
       loading: false,
       capsTooltip: false,
+      verifyLoading: false,
+      countdown: 0,
+      isCountingDown: false
     })
+
     const store = useStore()
     const configs = computed(() => store.getters.pageConfig)
     const loginFormRef = ref(null)
+    let countdownTimer = null
+
+    // 开始倒计时
+    const startCountdown = () => {
+      state.countdown = 60
+      state.isCountingDown = true
+      countdownTimer = setInterval(() => {
+        state.countdown--
+        if (state.countdown <= 0) {
+          clearInterval(countdownTimer)
+          state.isCountingDown = false
+          state.countdown = 0
+        }
+      }, 1000)
+    }
+
+    // 重置倒计时
+    const resetCountdown = () => {
+      if (countdownTimer) {
+        clearInterval(countdownTimer)
+        countdownTimer = null
+      }
+      state.isCountingDown = false
+      state.countdown = 0
+    }
     const init = () => {
       const local = localStorage.getItem('cmcLoginData')
       if (local) {
@@ -79,12 +120,33 @@ export default {
     init()
     const router = useRouter()
     const route = useRoute()
+    const getVertify = () => {
+      if (state.isCountingDown) return // 如果正在倒计时，不允许重复点击
+      if (!state.loginForm.account.trim()) {
+        // 可以在这里添加提示信息，比如使用 message 组件
+        return // 如果没有输入用户名，直接返回
+      }
+
+      state.verifyLoading = true
+      getVertifyCode({ account: state.loginForm.account })
+        .then((res) => {
+          if (res.success) {
+            state.verifyLoading = false
+            state.hasVertify = res.data
+            state.identifyCode = res.data
+            startCountdown() // 开始倒计时
+          }
+        })
+        .finally(() => {
+          state.verifyLoading = false
+        })
+    }
     function goLogin(data) {
       setLoginData(data)
       if (state.remember) {
         const obj = {
           account: state.loginForm.account,
-          password: encrypt(state.loginForm.password),
+          password: encrypt(state.loginForm.password)
         }
         localStorage.setItem('cmcLoginData', JSON.stringify(obj))
       } else {
@@ -100,16 +162,19 @@ export default {
       try {
         state.loading = true
         const values = await loginFormRef.value.validate()
-        const { account, password } = values
+        const { account, password, verify } = values
         const res = await login({
           account,
           password: encrypt(password),
           isManager: true,
+          code: verify
         })
         if (res.success) {
           goLogin(res.data)
         }
-      } catch (error) {}
+      } catch (error) {
+        console.error('登录失败:', error)
+      }
       state.loading = false
     }
 
@@ -132,8 +197,11 @@ export default {
       loginFormRef,
       handleLogin,
       checkCapslock,
+      getVertify,
+      startCountdown,
+      resetCountdown
     }
-  },
+  }
 }
 </script>
 
@@ -225,6 +293,14 @@ export default {
           }
         }
       }
+
+      // 倒计时按钮样式
+      .ant-btn:disabled {
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+        color: #999;
+        cursor: not-allowed;
+      }
     }
   }
   .copyright-info {

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 }
 
 const httpType = 'https://'
-const proxyUrl = '10.10.33.172:60006' // EFC 3.0 代理地址设置
+const proxyUrl = '10.10.33.173:60006' // 中车代理地址
 
 // https://vitejs.dev/config/
 export default defineConfig({