From 806020211c46dbea8a2ef321e78d54fb001057a0 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期四, 04 七月 2024 00:22:48 +0800
Subject: [PATCH] 路由和请求均可唤起登录弹窗
---
src/layout/component/sidebar/waterLeftAside/asideTitle.vue | 109 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 77 insertions(+), 32 deletions(-)
diff --git a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
index e2ee3e1..a4dd752 100644
--- a/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
+++ b/src/layout/component/sidebar/waterLeftAside/asideTitle.vue
@@ -12,32 +12,29 @@
<span class="font-medium text-sm text-white tracking-wide">{{ item.title }}</span>
</div>
</div>
- <div class="user_text">
+ <div class="user_text" v-if="isLoginStatus">
<div class="user_head">
<span
><span
- ><span class="user-head">T</span><span class="identifying"><!----></span></span
- ><span class="user_name"> tc </span></span
- ><span
- ><span><i class="ywicon icon-fold text-white" @click="showExitLogin"></i></span
+ ><span class="user-head">{{ firstUserCharacter }}</span><span class="identifying"><!----></span></span
+ ><span class="user_name"> {{ userName }} </span></span
+ ><span ref="toggleExitLoginBtnRef"
+ ><span
+ class="ywicon text-white"
+ :class="{ 'icon-fold': !state.isShowExitLogin, 'icon-unfold': state.isShowExitLogin }"
+ @click="toggleShowExitLogin"
+ ></span
></span>
</div>
- <!-- <div class="pop_up actived" v-show="state.isShowExitLogin">
- <div class="exit" @click="handleExitClose"><i class="ywicon icon-tuichu"></i> 閫�鍑虹櫥褰�</div>
- </div> -->
- </div>
- <!-- <div class="user_login">
- <p class="text-white font-medium text-sm text-center">鎮ㄦ洿濂界殑AI鍔╂墜锛�</p>
- <div class="set-login" @click="login">
- <span class="text-stone-100 font-medium text-sm text-center">{{ state.isShowLogin ? '鐧诲綍 / 娉ㄥ唽' : '浼氬憳鐧诲綍' }}</span>
+ <div class="pop_up actived" v-show="state.isShowExitLogin">
+ <div class="exit" @click="logoutClick"><i class="ywicon icon-tuichu"></i> 閫�鍑虹櫥褰�</div>
</div>
</div>
- <div class="offices">
- <div class="officeText">
- <img :src="'/static/images/wave/Waveform.png'" alt="" class="pl-2.5 pr-2.5 w-4 h-4" style="box-sizing: content-box" />
- <span class="font-medium text-sm text-white tracking-wide">Office 鏅鸿兘鍔╂墜</span>
+ <div v-else class="user_login">
+ <div class="set-login" @click="openLoginDlg">
+ <span class="text-stone-100 font-medium text-sm text-center">鐧诲綍 / 娉ㄥ唽</span>
</div>
- </div> -->
+ </div>
</div>
<div class="pc-login" v-show="state.isShowLogin">
<div class="login_box">
@@ -52,7 +49,6 @@
<el-input v-model="state.loginForm.pwd" type="password" autocomplete="off" clearable />
</el-form-item>
</el-form>
- <div class="set-pwd">蹇樿瀵嗙爜 ?</div>
<div class="mt-[115px]">
<el-button type="primary" @click="onSubmit" class="set-login_btn">鐧诲綍</el-button>
</div>
@@ -62,9 +58,24 @@
</template>
<script setup lang="ts">
-import { reactive } from 'vue';
+import type { FormInstance } from 'element-plus';
+import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
+import { PostLogin } from '/@/api/ai/user';
import router from '/@/router';
+import { accessSessionKey, userNameKey } from '/@/utils/request';
import { gotoRoute } from '/@/utils/route';
+import { Local } from '/@/utils/storage';
+import emitter from '/@/utils/mitt';
+
+const loginFormRef = ref<FormInstance>(null);
+const isLoginStatus = ref(!!Local.get(accessSessionKey));
+
+const userName = ref('');
+const firstUserCharacter =computed(()=>userName.value?.[0]?.toUpperCase());
+watchEffect(()=>{
+ if(!isLoginStatus.value)return;
+ userName.value = Local.get(userNameKey)
+})
let state = reactive({
asideTitleList: [
{
@@ -99,31 +110,65 @@
},
});
const loginRules = reactive({
- account: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
- pwd: [{ required: true, message: '蹇呭～椤�', trigger: 'blur' }],
+ account: [{ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur' }],
+ pwd: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }],
});
const handleClick = (item) => {
gotoRoute({ name: item.routerName });
};
//鐧诲綍
-const login = () => {
+const openLoginDlg = async () => {
state.isShowLogin = true;
};
const handleClose = () => {
state.isShowLogin = false;
};
//鐧诲綍
-const onSubmit = () => {};
-const currentRoute = router.currentRoute;
-//鏄惁鏄剧ず閫�鍑虹櫥褰曞脊绐�
-const showExitLogin = () => {
- state.isShowExitLogin = true;
-};
-//鍏抽棴閫�鍑虹櫥褰曞脊绐�
-const handleExitClose = () => {
- state.isShowExitLogin = false;
+const onSubmit = async () => {
+ const isValid = await loginFormRef.value.validate().catch(() => {});
+ if (!isValid) return;
+ const res = await PostLogin({
+ user: state.loginForm.account,
+ pass: state.loginForm.pwd,
+ });
+ Local.set(accessSessionKey, res.hswatersession);
+ Local.set(userNameKey,state.loginForm.account);
state.isShowLogin = false;
+ isLoginStatus.value = true;
+ window.location.reload();
};
+
+const currentRoute = router.currentRoute;
+
+//鏄惁鏄剧ず閫�鍑虹櫥褰曞脊绐梒polar.top/login
+const toggleShowExitLogin = () => {
+ state.isShowExitLogin = !state.isShowExitLogin;
+};
+//閫�鍑虹櫥褰�
+const logoutClick = () => {
+ state.isShowExitLogin = false;
+ isLoginStatus.value = false;
+ Local.remove(accessSessionKey);
+
+};
+const toggleExitLoginBtnRef = ref<HTMLDivElement>(null);
+
+const listenClickOtherExit = (e) => {
+ if (toggleExitLoginBtnRef.value !== e.target && !toggleExitLoginBtnRef.value?.contains(e.target)) {
+ state.isShowExitLogin = false;
+ }
+};
+
+onMounted(() => {
+ emitter.on('openLoginDlg', () => {
+ if(state.isShowLogin || isLoginStatus.value)return;
+ openLoginDlg();
+ });
+
+ emitter.on('logout', () => {});
+
+ document.addEventListener('click', listenClickOtherExit);
+});
</script>
<style scoped lang="scss">
.aisde-title {
--
Gitblit v1.9.3