登录

src/api/modules/manage/user.ts

@@ -0,0 +1,15 @@
+import { handle } from '../../index'
+
+const suffix = 'api'
+
+// 验证码
+export const captcha = () => handle({
+  url: `/${suffix}/captcha`,
+  method: 'get',
+})
+// 验证码
+export const login = (params: any) => handle({
+  url: `/${suffix}/login`,
+  method: 'post',
+  params
+})

src/stores/app.ts

@@ -1,6 +1,6 @@
 import {defineStore} from "pinia";
 import {mockGetUserInfo} from "@/api/modules/mock/global";
-import {ElLoading} from "element-plus";
+import {ElMessage} from "element-plus";
 
 export const useAppStore = defineStore('app', {
   state: () => ({
@@ -16,6 +16,11 @@ export const useAppStore = defineStore('app', {
   getters: {
   },
   actions: {
+    setToken(token) {
+      ElMessage.success('登录成功！')
+      localStorage.setItem('ss_token', token)
+      location.replace('/')
+    },
     setTheme(config) {
       this.theme.init = true
       this.theme.title = config.title

src/views/global/login/index.vue

@@ -40,43 +40,55 @@
               <CusFormColumn
                 :span="24"
                 required
-                v-model:param="state.form.code"
+                v-model:param="state.form.captcha"
                 default-error-msg="请输入验证码"
               />
             </div>
-            <div class="form-code-right"></div>
+            <div class="form-code-right" v-loading="state.loadingCode">
+              <img v-if="state.codeBase64" class="__hover" :src="state.codeBase64" @click="getCode"/>
+            </div>
           </div>
 
         </CusForm>
-        <div class="button __hover" @click="onLogin">登录</div>
+        <div class="button __hover" @click="onLogin" v-loading="state.loadingLogin">登录</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, reactive, ref} from "vue";
+import {getCurrentInstance, onMounted, reactive, ref} from "vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {useRouter} from "vue-router";
-import {useThemeStore} from "@/stores";
+import {useAppStore, useThemeStore} from "@/stores";
+import {captcha, login} from "@/api/modules/manage/user";
 
 const ThemeStore = useThemeStore()
+const AppStore = useAppStore()
 const {proxy} = getCurrentInstance()
 const router = useRouter()
 const state: any = reactive({
   form: {
     username: '',
     password: '',
-    code: '',
-    uuid: ''
-  }
+    captcha: '',
+    userKey: ''
+  },
+  codeBase64: '',
+  loadingCode: false,
+  loadingLogin: false,
 })
 const ref_form = ref()
 const onLogin = () => {
   ref_form.value.submit().then(() => {
-    ElMessage.success('登录成功！')
-    localStorage.setItem('ss_token', 'tttoken')
-    location.replace('/')
+    state.loadingLogin = true
+    login(state.form).then(res => {
+      if (res.respCode === 200) {
+        AppStore.setToken(res.datas)
+      } else {
+        ElMessage.error(res.respMsg)
+      }
+    })
   }).catch((e) => {
     ElMessage({
       message: e[0].message,
@@ -85,6 +97,22 @@ const onLogin = () => {
     })
   })
 }
+const getCode = () =>{
+  state.loadingCode = true
+  captcha().then(res => {
+    if (res.code === 200) {
+      state.codeBase64 = res.data.captcherImg
+      state.form.userKey = res.data.userKey
+      state.loadingCode = false
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+onMounted(() => {
+  localStorage.clear();
+  getCode()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -174,10 +202,13 @@ const onLogin = () => {
           flex: 1;
         }
         .form-code-right {
-          background-color: red;
           width: 150px;
           height: 48px;
           border-radius: 4px;
+          >img {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
       :deep(.el-input) {