邓洁 ：init

src/views/home/index.vue

@@ -5,9 +5,6 @@
 </template>
 
 <script setup>
-// import { useCacheStore } from '@/store/cache.js'
-// const cacheStore = useCacheStore()
-// cacheStore.setCacheKey(['normal_disable','show_hide'])
 </script>
 
 <style lang="scss" scoped>

src/views/login/index.vue

@@ -6,59 +6,82 @@
         :rules="rules"
         label-width="65px"
     >
-      <h3>Rib-Account-ADMIN</h3>
+      <h3>FateVerse</h3>
       <el-form-item prop="username" label="账号">
-        <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
+        <el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
       </el-form-item>
       <el-form-item prop="password" label="密码">
-        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock"></el-input>
+        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
+      </el-form-item>
+      <el-form-item prop="code" label="验证码" >
+        <div class="code">
+          <el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
+          <img :src="codeImg" alt="" @click="getCode">
+        </div>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
+        <el-button @click="handleLogin(formInstance)"  type="primary">登录</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import {onBeforeUnmount, reactive,} from 'vue'
-// import {useAuthStore} from '@/store/userstore'
-import {ElLoading} from 'element-plus'
-import {User, Lock, Key} from '@element-plus/icons-vue'
-
+import { useRouter } from 'vue-router';
+import { getCodeImg } from '../../api/login';
+import { useAuthStore } from '@/store/userstore'
+import { ElLoading } from 'element-plus'
+import { User,Lock, Key } from '@element-plus/icons-vue'
 const router = useRouter()
-// const authStore = useAuthStore()
+const authStore = useAuthStore()
 const loginForm = reactive({
   username: 'admin',
   password: '123456',
+  code: '',
   uuid: ''
 })
+const codeImg = ref('')
 const formInstance = ref()
-const rules = reactive({
+const rules =  reactive({
   username: [
-    {required: true, message: '请输入账户名', trigger: 'blur'},
+    { required: true, message: '请输入账户名', trigger: 'blur' },
   ],
   password: [
-    {required: true, message: '请输入密码', trigger: 'blur'},
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+  code: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
   ]
 })
 
-const handleLogin = (instance) => {
-  if (!instance) return
-  instance.validate(async (valid) => {
-    if (!valid) return
-    // 发送请求
-    // await authStore.userLogin(loginForm).then(res=>{
-    //   if(res) {
-    ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true})
-    await router.push('/')
-    // }
-    // })
+//获取二维码
+const getCode = () => {
+  getCodeImg().then(res=>{
+    loginForm.uuid = res.data.uuid
+    codeImg.value = 'data:image/gif;base64,' + res.data.img
   })
 }
 
+const handleLogin = (instance) => {
+  if(!instance) return
+  instance.validate( async (valid, fields)=>{
+    if (!valid) return
+    // 发送请求
+    await authStore.userLogin(loginForm).then(res=>{
+      if(res) {
+        ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true})
+        router.push('/')
+      }else {
+        getCode()
+      }
+    })
+  })
+}
+
+getCode()
+
 onBeforeUnmount(() => {
-  ElLoading.service({text: '正在加载系统资源', background: '#409eff', lock: true}).close()
+  ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true}).close()
 })
 </script>
 
@@ -88,5 +111,18 @@ onBeforeUnmount(() => {
     }
   }
 }
-
+.code {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  .el-input {
+    // width: ;
+    flex: 2;
+  }
+  img {
+    height: 32px;
+    flex: 1;
+  }
+}
 </style>