登录登出

teaching_integration_platform_admin_template/src/layout/tabbar/setting/index.vue

@@ -11,18 +11,11 @@
   /> -->
   <el-button size="small" icon="refresh" circle @click="refresh" />
   <el-button size="small" icon="FullScreen" circle @click="fullScreen" />
-  <el-button v-if="userStore.userInfo.roleId[0] === '1'" size="small" icon="Setting" circle  @click="$router.push('/configurationPage')" />
+  <el-button v-if="userStore.userInfo.roleId[0] === '1'" size="small" icon="Setting" circle
-  <el-button
+    @click="$router.push('/configurationPage')" />
-    size="small"
+  <el-button size="small" icon="Link" circle @click="openWeb" />
-    icon="Link"
+  <img :src="userStore.data.icon || defImg" alt=""
-    circle
+    style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
-    @click="openWeb"
-  />
-  <img
-    :src="userStore.data.icon || defImg"
-    alt=""
-    style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%"
-  />
   <!-- <img
     src="@/assets/images/default.jpg
     alt=""
@@ -48,11 +41,11 @@
 // import { useDark, useToggle } from '@vueuse/core'
 import useLayoutSettingStoe from '@/store/modules/setting'
 import useUserStore from '@/store/modules/user'
-import { onMounted,ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 // import default from '@/assets/images/default.jpg'
 import defImg from '@/assets/images/default.png'
-import {getSysSettingApi} from '@/api/configuration'
+import { getSysSettingApi } from '@/api/configuration'
 
 // import { Moon, Sunny } from '@element-plus/icons-vue'
 const useStore = useLayoutSettingStoe()
@@ -75,10 +68,10 @@ const refresh = () => {
 }
 const setting = ref()
 const getSysSettingApiEvent = async () => {
-  const res =await getSysSettingApi()
+  const res = await getSysSettingApi()
   setting.value = res.data
   console.log(res);
-  
+
 }
 getSysSettingApiEvent()
 // 用户下拉框事件
@@ -99,10 +92,13 @@ onMounted(() => {
   userStore.getUserInfo()
   // console.log(userStore.data.icon, 'icon')
 })
-
+const channel = new BroadcastChannel('logout')
+channel.onmessage = () => location.reload()
 const logout = () => {
   // console.log($route)
+  channel.postMessage('')
   userStore.logout()
+
   $router.push({
     path: '/login',
     query: { redirect: $route.path },

teaching_integration_platform_admin_template/src/views/login/index.vue

@@ -22,23 +22,13 @@
       </el-col>
     </el-row>
     <el-row>
-      <el-col
+      <el-col :span="12" :xs="24" style="
-        :span="12"
-        :xs="24"
-        style="
           width: 100%;
           height: 100%;
           display: flex;
           justify-content: center;
-        "
+        ">
-      >
+        <el-form class="loin_form" :model="formModel" ref="form" :rules="rules" v-if="isRegister">
-        <el-form
-          class="loin_form"
-          :model="formModel"
-          ref="form"
-          :rules="rules"
-          v-if="isRegister"
-        >
           <h1>课图—开源智慧课程管理系统</h1>
           <div class="taggle">
             <h2 @click="isToggle = true">账号</h2>
@@ -47,31 +37,14 @@
           <!-- 账号登录 -->
           <div v-if="isToggle">
             <el-form-item prop="username">
-              <el-input
+              <el-input v-model="formModel.username" :prefix-icon="User" size="large" placeholder="请输入账号"></el-input>
-                v-model="formModel.username"
-                :prefix-icon="User"
-                size="large"
-                placeholder="请输入账号"
-              ></el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input
+              <el-input v-model="formModel.password" type="password" :prefix-icon="Lock" size="large"
-                v-model="formModel.password"
+                placeholder="请输入密码" show-password></el-input>
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                placeholder="请输入密码"
-                show-password
-              ></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button
+              <el-button :loading="isBtnLoading" size="large" class="login-btn" type="primary" @click="login">
-                :loading="isBtnLoading"
-                size="large"
-                class="login-btn"
-                type="primary"
-                @click="login"
-              >
                 登录
               </el-button>
             </el-form-item>
@@ -79,44 +52,21 @@
           <!-- 手机号登录 -->
           <div v-else>
             <el-form-item prop="phone" class="content">
-              <el-input
+              <el-input type="text" v-model="formModel.phone" :prefix-icon="Phone" placeholder="请输入手机号" size="large"
-                type="text"
+                style="flex: 1" />
-                v-model="formModel.phone"
-                :prefix-icon="Phone"
-                placeholder="请输入手机号"
-                size="large"
-                style="flex: 1"
-              />
             </el-form-item>
             <el-form-item prop="code" class="content">
-              <el-input
+              <el-input type="text" v-model="formModel.code" placeholder="请输入验证码" @click="userCodeLogin" size="large"
-                type="text"
+                style="flex: 1" />
-                v-model="formModel.code"
-                placeholder="请输入验证码"
-                @click="userCodeLogin"
-                size="large"
-                style="flex: 1"
-              />
               <div class="p" v-if="countdown > 0">
                 <p>{{ countdown }} 秒</p>
               </div>
-              <el-button
+              <el-button class="code" v-if="countdown <= 0" :disabled="countdown > 0" @click="codeSubmit">
-                class="code"
-                v-if="countdown <= 0"
-                :disabled="countdown > 0"
-                @click="codeSubmit"
-              >
                 发送验证码
               </el-button>
             </el-form-item>
             <el-form-item>
-              <el-button
+              <el-button :loading="isBtnLoading" size="large" class="login-btn" type="primary" @click="phoneLogin">
-                :loading="isBtnLoading"
-                size="large"
-                class="login-btn"
-                type="primary"
-                @click="phoneLogin"
-              >
                 登录
               </el-button>
             </el-form-item>
@@ -128,13 +78,7 @@
           </el-form-item>
         </el-form>
         <!-- 注册 -->
-        <el-form
+        <el-form class="loin_form" :model="formModel" ref="form" :rules="rules" v-else>
-          class="loin_form"
-          :model="formModel"
-          ref="form"
-          :rules="rules"
-          v-else
-        >
           <h1>Hello</h1>
           <div class="taggle">
             <h2 @click="isToggle = true">账号</h2>
@@ -143,51 +87,24 @@
           <!-- 账号注册 -->
           <div v-if="isToggle">
             <el-form-item prop="username">
-              <el-input
+              <el-input v-model="formModel.username" placeholder="请输入用户名" :prefix-icon="User" size="large"></el-input>
-                v-model="formModel.username"
-                placeholder="请输入用户名"
-                :prefix-icon="User"
-                size="large"
-              ></el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input
+              <el-input v-model="formModel.password" placeholder="请输入密码" type="password" :prefix-icon="Lock"
-                v-model="formModel.password"
+                size="large" show-password></el-input>
-                placeholder="请输入密码"
-                type="password"
-                :prefix-icon="Lock"
-                size="large"
-                show-password
-              ></el-input>
             </el-form-item>
             <el-form-item prop="repassword">
-              <el-input
+              <el-input v-model="formModel.repassword" placeholder="请再次输入密码" type="password" :prefix-icon="Check"
-                v-model="formModel.repassword"
+                size="large" show-repassword @change="checkPasswordMatch"></el-input>
-                placeholder="请再次输入密码"
-                type="password"
-                :prefix-icon="Check"
-                size="large"
-                show-repassword
-                @change="checkPasswordMatch"
-              ></el-input>
             </el-form-item>
 
             <el-form-item>
-              <el-button
+              <el-button size="large" class="login-btn" type="primary" @click="handleSubmit">
-                size="large"
-                class="login-btn"
-                type="primary"
-                @click="handleSubmit"
-              >
                 注册
               </el-button>
             </el-form-item>
             <el-form-item class="flex">
-              <el-link
+              <el-link type="info" :underline="false" @click="isRegister = true">
-                type="info"
-                :underline="false"
-                @click="isRegister = true"
-              >
                 登录
               </el-link>
             </el-form-item>
@@ -196,99 +113,58 @@
           <div v-else>
             <div v-if="isinfo">
               <el-form-item prop="phone">
-                <el-input
+                <el-input v-model="formModel.phone" :prefix-icon="Phone" size="large" placeholder="请输入手机号"></el-input>
-                  v-model="formModel.phone"
-                  :prefix-icon="Phone"
-                  size="large"
-                  placeholder="请输入手机号"
-                ></el-input>
               </el-form-item>
               <el-form-item prop="code" class="content">
-                <el-input
+                <el-input type="text" v-model="formModel.code" placeholder="请输入验证码" size="large" style="
-                  type="text"
-                  v-model="formModel.code"
-                  placeholder="请输入验证码"
-                  size="large"
-                  style="
                     flex: 1;
                     /* height: 40px;
                   line-height: 40px;
                   border: 1px solid #dcdfe6;
                   width: 50%;
                   color: #dcdfe6; */
-                  "
+                  " />
-                />
                 <div class="p" v-if="countdown > 0">
                   <p>{{ countdown }} 秒</p>
                 </div>
-                <el-button
+                <el-button class="code1" v-if="countdown <= 0" @click="codeSubmit" :disabled="countdown > 0">
-                  class="code1"
-                  v-if="countdown <= 0"
-                  @click="codeSubmit"
-                  :disabled="countdown > 0"
-                >
                   发送验证码
                 </el-button>
               </el-form-item>
               <el-form-item>
-                <el-button
+                <el-button size="large" class="login-btn" type="primary" @click="phoneChange">
-                  size="large"
-                  class="login-btn"
-                  type="primary"
-                  @click="phoneChange"
-                >
                   注册
                 </el-button>
               </el-form-item>
             </div>
             <div v-else>
               <el-form-item prop="password">
-                <el-input
+                <el-input v-model="formModel.password" type="password" :prefix-icon="Lock" size="large"
-                  v-model="formModel.password"
+                  placeholder="请输入密码" show-password></el-input>
-                  type="password"
-                  :prefix-icon="Lock"
-                  size="large"
-                  placeholder="请输入密码"
-                  show-password
-                ></el-input>
               </el-form-item>
               <el-form-item>
-                <div
+                <div style="display: flex; justify-content: space-between; flex: 1">
-                  style="display: flex; justify-content: space-between; flex: 1"
+                  <el-button class="code" @click="phoneReturn" style="
-                >
-                  <el-button
-                    class="code"
-                    @click="phoneReturn"
-                    style="
                       background-color: #5577ff;
                       color: #fff;
                       justify-content: center;
-                    "
+                    ">
-                  >
                     返回
                   </el-button>
                 </div>
                 <div style="display: flex; justify-content: end; flex: 1">
-                  <el-button
+                  <el-button class="code" @click="phoneSubmit" style="
-                    class="code"
-                    @click="phoneSubmit"
-                    style="
                       background-color: #5577ff;
                       color: #fff;
                       justify-content: center;
-                    "
+                    ">
-                  >
                     确认
                   </el-button>
                 </div>
               </el-form-item>
             </div>
             <el-form-item class="flex">
-              <el-link
+              <el-link type="info" :underline="false" @click="isRegister = true">
-                type="info"
-                :underline="false"
-                @click="isRegister = true"
-              >
                 登录
               </el-link>
             </el-form-item>
@@ -323,6 +199,7 @@ const goToPage = (event) => {
   // window.open('https:www.baidu.com', '_blank')
   window.location.href = 'https:www.baidu.com'
 }
+
 const fold = ref(false)
 const LayoutSettingStoe = useLayoutSettingStoe()
 // 引入登录仓库
@@ -330,6 +207,10 @@ let userStore = useUserStore()
 // 引入路由
 const $router = useRouter()
 const $route = useRoute()
+
+const channel = new BroadcastChannel('login')
+channel.onmessage = () => location.reload()
+
 const isBtnLoading = ref<boolean>(false)
 //账号手机号切换
 //注册model，需要从后台获取接口中的字段,用于提交的form对象
@@ -524,10 +405,13 @@ const login = async () => {
     await userStore.userLogin(formModel.value).then(() => {
       isBtnLoading.value = false
       $router.push('/curriculumCenter/basicCourseInformation')
+      channel.postMessage('')
       if ($route.query.redirect) {
         $router.push($route.query.redirect as string)
+        channel.postMessage('')
       } else {
         $router.push('/')
+        channel.postMessage('')
       }
     })
   } catch (error) {
@@ -548,10 +432,13 @@ const phoneLogin = async () => {
       .then(() => {
         isBtnLoading.value = false
         $router.push('/curriculumCenter/basicCourseInformation')
+        channel.postMessage('')
         if ($route.query.redirect) {
           $router.push($route.query.redirect as string)
+          channel.postMessage('')
         } else {
           $router.push('/')
+          channel.postMessage('')
         }
       })
       .catch((error) => {
@@ -597,15 +484,18 @@ onUnmounted(() => {
   height: 100vh;
   position: absolute;
   top: 0;
+
   .logo {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 5px 35px 0px 20px;
+
     .logo_main {
       display: flex;
       align-items: center;
     }
+
     .font {
       font-size: 20px;
       font-family: 'YourChosenArtisticFont', sans-serif;
@@ -615,6 +505,7 @@ onUnmounted(() => {
       margin-left: 5px;
     }
   }
+
   // background: url('../../assets/images/background.jpg') no-repeat;
   .loin_form {
     position: relative;
@@ -629,32 +520,39 @@ onUnmounted(() => {
     padding: 40px;
     border-radius: 10px;
     box-shadow: 7px 7px 42px rgba(0, 0, 0, 0.17);
+
     .taggle {
       display: flex;
       justify-content: space-between;
     }
+
     h1 {
       font-size: 40px;
       color: #5577ff;
     }
+
     h2 {
       font-size: 20px;
       color: #5577ff;
       margin: 20px 0;
     }
+
     .login-btn {
       width: 100%;
     }
+
     .p {
       height: 40px;
       text-align: center;
       line-height: 40px;
       width: 90px;
     }
+
     .codeVerify {
       display: flex;
       justify-content: end;
     }
+
     .code,
     .code1 {
       height: 40px;