快速登录

src/views/Login/Login.vue

@@ -1,55 +1,92 @@
 <template>
   <div class="content flex space-x-4">
     <div class="flex-1 basis-1/2 flex items-center justify-center">
-
       <div
-        class="w-[50%] h-[50%] min-w-[450px] min-h-[450px] pl-120px  font-size-34px  border-rd-[12px]">
-        <img alt="" class="w-[400px] h-50px" src="@/assets/system/logo.png"/>
+        class="w-[50%] h-[50%] min-w-[450px] min-h-[450px] pl-120px font-size-34px border-rd-[12px]"
+      >
+        <img alt="" class="w-[400px] h-50px" src="@/assets/system/logo.png" />
       </div>
     </div>
     <div class="flex-1 basis-1/2 flex items-center justify-center">
-      <div
-        class="w-[50%]  min-w-[450px]  pl-40px pr-40px font-size-34px bg-[#fff] border-rd-[12px]">
+      <div class="w-[50%] min-w-[450px] pl-40px pr-40px font-size-34px bg-[#fff] border-rd-[12px]">
         <div
-          class="w-full lh-130px h-[25%] "
-          style="font-family: 'SourceHanSansCN-Medium', '思源黑体' ,'黑体',serif">
+          class="w-full lh-130px h-[25%]"
+          style="font-family: 'SourceHanSansCN-Medium', '思源黑体', '黑体', serif"
+        >
           欢迎登录
         </div>
         <el-form>
           <el-row>
-            <el-col :span="24" class="mb-30px">
+            <el-col :span="24" class="mb-30px" v-if="isQuick">
+              <el-form-item class="mb-0" label="">
+                <el-select
+                  v-model="selectValue"
+                  filterable
+                  placeholder="请选择登录账号"
+                  class="h-50px"
+                  @change="handlerChange"
+                  @visible-change="handlerVisibleChange"
+                >
+                  <template #prefix>
+                    <Icon icon="ep:user-filled" />
+                  </template>
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" class="mb-30px" v-if="!isQuick">
               <el-form-item class="mb-0" label="">
                 <el-input
-                  v-model="loginData.loginForm.username" class="h-50px"
-                  placeholder="请输入登录账号">
+                  v-model="loginData.loginForm.username"
+                  class="h-50px"
+                  placeholder="请输入登录账号"
+                >
                   <template #prefix>
-
-                    <Icon icon="ep:user-filled"/>
+                    <Icon icon="ep:user-filled" />
                   </template>
                 </el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="24" class="0px">
+            <el-col :span="24" class="0px" v-if="!isQuick">
               <el-form-item class="mb-0" label="">
                 <el-input
                   v-model="loginData.loginForm.password"
                   class="h-50px"
-                  placeholder="请输入登录密码" show-password
-                  type="password">
+                  placeholder="请输入登录密码"
+                  show-password
+                  type="password"
+                >
                   <template #prefix>
-                    <Icon icon="ep:lock"/>
+                    <Icon icon="ep:lock" />
                   </template>
                 </el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24" class="mt-10px">
               <div class="float-left font-size-16px color-[#6B6E73]">忘记密码?</div>
-              <div class="float-right font-size-16px color-[#295FBA]">注册</div>
+              <!-- <div class="float-right font-size-16px color-[#295FBA]">注册</div> -->
+              <div
+                class="float-right font-size-16px color-[#295FBA]"
+                @click="handClick"
+                v-if="!isQuick"
+              >
+                快速登录
+              </div>
+              <div class="float-right font-size-16px color-[#295FBA]" @click="handBack" v-else>
+                取消快速登录
+              </div>
             </el-col>
             <el-col :span="24" class="mt-45px">
               <el-button
-                class="w-full h-50px! font-size-22px! font-700 " type="primary"
-                @click="getCode">
+                class="w-full h-50px! font-size-22px! font-700"
+                type="primary"
+                @click="getCode"
+              >
                 登 录
               </el-button>
             </el-col>
@@ -71,22 +108,21 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {ElLoading} from 'element-plus'
-import type {RouteLocationNormalizedLoaded} from 'vue-router'
-import {useIcon} from '@/hooks/web/useIcon'
+import { ElLoading } from 'element-plus'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useIcon } from '@/hooks/web/useIcon'
 import * as authUtil from '@/utils/auth'
-import {usePermissionStore} from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
-import {LoginStateEnum, useLoginState} from './components/useLogin'
-
+import { LoginStateEnum, useLoginState } from './components/useLogin'
 
-defineOptions({name: 'LoginForm'})
+defineOptions({ name: 'LoginForm' })
 
-const {t} = useI18n()
+const { t } = useI18n()
 const message = useMessage()
-const iconHouse = useIcon({icon: 'ep:house'})
-const {getLoginState} = useLoginState()
-const {currentRoute, push} = useRouter()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const { getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
@@ -110,6 +146,25 @@ const loginData = reactive({
     rememberMe: true // 默认记录我。如果不需要，可手动修改
   }
 })
+
+const options = ref([
+  {
+    value: 'admin123',
+    label: 'admin'
+  },
+  {
+    value: '111111',
+    label: 'test111'
+  },
+  {
+    value: '222222',
+    label: 'test222'
+  }
+])
+const isQuick = ref(false)
+const selectValue = ref('')
+const selectLabel = ref('')
+
 // 获取验证码
 const getCode = async () => {
   // 情况一，未开启：则直接登录
@@ -149,7 +204,7 @@ const loading = ref() // ElLoading.service 返回的实例
 const handleLogin = async (params: any) => {
   loginLoading.value = true
   try {
-    const loginDataLoginForm = {...loginData.loginForm}
+    const loginDataLoginForm = { ...loginData.loginForm }
     loginDataLoginForm.captchaVerification = params.captchaVerification
     const res = await LoginApi.login(loginDataLoginForm)
     console.log(1113)
@@ -173,18 +228,39 @@ const handleLogin = async (params: any) => {
       redirect.value = '/'
     }
 
-
     // 判断是否为SSO登录
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-      await push({path: redirect.value || permissionStore.addRouters[0].path})
+      await push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
   } finally {
     loginLoading.value = false
     loading.value.close()
   }
 }
+// 快速登录
+const handClick = () => {
+  isQuick.value = true
+}
+// 取消快速登录
+const handBack = () => {
+  isQuick.value = false
+}
+// 选择登录账号
+const handlerChange = (data: any) => {
+  selectLabel.value = options.value.filter((item) => item.value == data)[0].label
+  loginData.loginForm.username = selectLabel.value
+  loginData.loginForm.password = selectValue.value
+  isQuick.value = false
+}
+// 取消选择
+const handlerVisibleChange = (data: any) => {
+  console.log(data, 'handlerVisibleChange-===')
+  if (!data) {
+    isQuick.value = false
+  }
+}
 
 watch(
   () => currentRoute.value,
@@ -205,12 +281,18 @@ onMounted(() => {
 .content {
   width: 100vw;
   height: 100vh;
-  background: url("@/assets/system/login-bg.jpg") no-repeat;
+  background: url('@/assets/system/login-bg.jpg') no-repeat;
   background-size: 100% 100%;
 }
 
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
+.float-right {
+  cursor: pointer;
+}
+:deep(.el-select__selection) {
+  height: 42px;
+}
 </style>