登录页验证码

src/views/login.vue

@@ -34,7 +34,24 @@ function getMachineId() {
   }
 }
 
-const form = ref({account: null, password: '', token: '', machineId: machineId1.value})
+const form = ref({account: null, password: '', token: '', machineId: machineId1.value, code: '', uuid: ''})
+const captchaUrl = ref('')
+
+// 获取验证码
+const getCaptcha = async () => {
+  try {
+    const res = await request({
+      url: '/admin/captchaImage',
+      method: 'get'
+    })
+    if (res.code === 200) {
+      captchaUrl.value = "data:image/gif;base64," + res.img
+      form.value.uuid = res.uuid
+    }
+  } catch (error) {
+    console.error('获取验证码失败', error)
+  }
+}
 
 const adminRoleId = ref(null)
 
@@ -97,13 +114,16 @@ const login = async function () {
     } else {
       form.value.password = ''
       form.value.account = ''
+      form.value.code = ''
       ElMessage.error(result.msg)
       loading.value = false //登录失败时重置loading状态
+      getCaptcha()
     }
   } catch (error) {
     console.log('请求失败', error)
     ElMessage.error('登录失败，请检查账号密码')
     loading.value = false // 发生异常时重置loading状态
+    getCaptcha()
   }
 }
 //获取菜单树
@@ -161,13 +181,15 @@ const selectMarket = async function () {
 
 onMounted(() => {
   getMachineId()
-
+  getCaptcha()
 })
 
 </script>
 <template>
   <el-row class="login-page">
-    <img :span="12" src="../assets/background.jpg" alt="logo" class="bg" fit="fit"/>
+    <el-col :span="12" class="bg-container">
+      <img  src="../assets/background.jpg" alt="logo" class="bg" fit="fit"/>
+    </el-col>
     <el-col :span="6" :offset="3" class="form">
       <!-- 登录表单 -->
       <el-form :model="form" size="large" autocomplete="off">
@@ -185,7 +207,20 @@ onMounted(() => {
               required
           />
         </el-form-item>
-        <el-form-item class="flex"></el-form-item>
+        <el-form-item prop="code" required>
+          <el-row :gutter="20" style="width: 100%">
+            <el-col :span="16">
+              <el-input v-model="form.code" placeholder="请输入验证码" @keyup.enter="login"></el-input>
+            </el-col>
+            <el-col :span="8" style="display: flex; align-items: center; justify-content: center;">
+              <img v-if="captchaUrl" :src="captchaUrl" @click="getCaptcha" style="width: 100%; height: 40px; cursor: pointer; border-radius: 4px;" alt="验证码" title="点击刷新验证码" />
+              <div v-else  class="failed">
+                <img src="@/assets/images/loadingFaild.png" @click="getCaptcha">
+                <text>点击刷新二维码</text>
+              </div>
+            </el-col>
+          </el-row>
+        </el-form-item>
         <!-- 登录按钮 -->
         <el-form-item>
           <button type="button" class="button" @click="login()">
@@ -205,7 +240,7 @@ onMounted(() => {
 .bg {
   border-radius: 0 20px 20px 0;
   height: 110vh;
-  width: 50%;
+  width: 100%;
   object-fit: cover;
 }
 
@@ -228,15 +263,27 @@ onMounted(() => {
 
   .button {
     width: 100%;
+    margin-top: 20px;
   }
-
-  .flex {
-    width: 100%;
+.failed{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img{
+    height: 20px;
+  }
+  text{
+    color: #666666;
+    font-size: 10px;
+    white-space: nowrap;
+    height: 20px;
     display: flex;
-    justify-content: space-between;
+    align-items: center;
   }
 }
  
+}
+
 /* From Uiverse.io by kamehame-ha */
 .button {
   height: 50px;