--fix bug

src/components/NavTop.vue

@@ -2,19 +2,19 @@
   <div class="navTop">
     <div class="navTopMain">
       <img
-        style="width: 205px; height: 29px; margin-left: 37px; margin-top: 22px"
-        src="../assets/images/navtop/logo.png"
+          style="width: 205px; height: 29px; margin-left: 37px; margin-top: 22px"
+          src="../assets/images/navtop/logo.png"
       />
       <div class="navTopRight">
         <div class="role">
-          <div>{{ selectRole }}</div>
+          <div>{{ state.selectRole }}</div>
           <div class="roleArrow"></div>
           <div class="roleItems">
             <div
-              v-for="(value, index) in roleList"
-              :key="index"
-              class="roleItem"
-              @click="changeRole(value)"
+                v-for="(value, index) in state.roleList"
+                :key="index"
+                class="roleItem"
+                @click="changeRole(value)"
             >
               {{ value.name }}
             </div>
@@ -22,143 +22,66 @@
         </div>
         <div class="user">
           <img
-            style="
+              style="
               width: 40px;
               height: 40px;
               margin-left: 8px;
               border-radius: 15px;
               margin-right: 10px;
             "
-            :src="avatar"
+              :src="userInfo?.avatar"
           />
-          <div style="margin-right: 20px">{{ username }}</div>
+          <div style="margin-right: 20px">{{ userInfo?.realName }}</div>
         </div>
-        <!-- 2022-12-2注释 后面放开 增加username的margin-right:20 -->
-        <!-- <div
-          class="signOutMain"
-          style="margin: 0px 33px 0px 35px"
-          @click="showDrawer"
-        >
-          <img
-            style="width: 22px; height: 22px"
-            src="../assets/images/navtop/download.png"
-          />
-          <span class="signOut">下载</span>
-        </div> -->
         <div class="signOutMain" @click="logOut">
           <img
-            style="width: 27px; height: 27px"
-            src="../assets/images/navtop/signout.png"
+              style="width: 27px; height: 27px"
+              src="../assets/images/navtop/signout.png"
           />
           <span class="signOut">登出</span>
         </div>
       </div>
     </div>
   </div>
-  <down-load v-model:downloadVisible="visible" />
 </template>
-<script>
-import { reactive, toRefs } from "vue";
-import DownLoad from "../components/drawers/DownLoad";
-import * as api from "../api/index1";
-import { studentUrl } from "../api/method";
+<script setup>
+import {computed, reactive} from "vue";
+import {studentUrl} from "@/api/method";
 import router from "@/router";
-import { useStore, createStore } from "vuex";
+import {useStore, createStore} from "vuex";
 
-export default {
-  name: "NavTop",
-  components: {
-    DownLoad,
-  },
-  setup() {
-    const store = useStore();
+const store = useStore();
 
-    const state = reactive({
-      selectRole: "管理员",
-      username: "",
-      avatar: require("../assets/images/avatar.png"),
-      roleList: [
-        {
-          id: 1,
-          name: "管理员",
-          go: "/manage/learningpath",
-        },
-        {
-          id: 2,
-          name: "学员",
-          go: studentUrl,
-        },
-      ],
+const userInfo = computed(()=>store.state.userInfo)
 
-      visible: false,
-    });
-    const changeRole = (value) => {
-      state.roleList.map((item) => {
-        if (value.name === item.name) {
-          state.selectRole = item.name;
-          window.open(item.go, "_self");
-        }
-      });
-    };
-    const showDrawer = () => {
-      state.visible = true;
-      console.log("点击下载", state.visible);
-    };
-    const getUser = () => {
-      api
-        .getUser()
-        .then((res) => {
-          console.log("获取登录信息成功", res);
-          if (res.data.code === 200) {
-            state.username = res.data.data.realName;
-            // state.avatar = res.data.data.avatar
-            //   ? res.data.data.avatar
-            //   : require("../assets/images/avatar.png");
-            state.avatar = require("../assets/images/avatar.png");
-          }
-        })
-        .catch((err) => {
-          console.log("获取登录信息失败", err);
-        });
-    };
-    getUser();
-
-    const logOut = () => {
-      
-      store.replaceState(createStore({state: {openpages:null}}).state);
-
-      localStorage.removeItem("faceclassPic");
-      localStorage.removeItem("faceclassClass");
-      localStorage.removeItem("faceclassScene");
-      localStorage.removeItem("projectLevel");
-      localStorage.removeItem("projectSys");
-      localStorage.removeItem("pathmapPic");
-      localStorage.removeItem("projectClass");
-      localStorage.removeItem("projectPic");
-
-      localStorage.removeItem("routerId");
-      localStorage.removeItem("selectedKeys");
-      localStorage.removeItem("openKeys");
-      localStorage.removeItem("stageId");
-      localStorage.removeItem("openpages");
-      localStorage.removeItem("memberInitInfo");
-      localStorage.removeItem("projectId");
-      localStorage.removeItem("projectTemplateId");
-      localStorage.removeItem("orgtreeList");
-      process.env.NODE_ENV === 'development' ?  router.push({path: '/learningpath'}) : (window.location.href = process.env.VUE_APP_LOGIN_URL)
-      if(process.env.NODE_ENV === 'development'){
-        setTimeout(() => {
-          window.location.reload();
-        }, 3000);
-      }
-    };
-    return {
-      ...toRefs(state),
-      changeRole,
-      showDrawer,
-      logOut,
-    };
-  },
+const state = reactive({
+  selectRole: "管理员",
+  roleList: [
+    {
+      id: 1,
+      name: "管理员",
+      go: "/manage/learningpath",
+    },
+    {
+      id: 2,
+      name: "学员",
+      go: studentUrl,
+    },
+  ],
+  visible: false,
+});
+const changeRole = (value) => {
+  state.roleList.map((item) => {
+    if (value.name === item.name) {
+      state.selectRole = item.name;
+      window.open(item.go, "_self");
+    }
+  });
+};
+const logOut = () => {
+  store.replaceState(createStore({state: {openpages: []}}).state);
+  localStorage.clear();
+  (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'alpine') ? router.push({path: '/login'}) : (window.location.href = process.env.VUE_APP_LOGIN_URL)
 };
 </script>
 <style scoped lang="scss">