路由和请求均可唤起登录弹窗

gerson

2024-07-04 806020211c46dbea8a2ef321e78d54fb001057a0

 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;

//是否显示退出登录弹窗cpolar.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 {