Browse Source

修改加载中样式 及header 树的加载中

秦鹏 3 years ago
parent
commit
6255f1b3bd

+ 1 - 0
src/components/inputModules/common/Header.vue

@@ -442,6 +442,7 @@ export default {
         border-radius: 8px;
         bottom: -100px;
         color: black;
+        z-index: 9999;
         img {
           width: 24px;
           height: 24px;

+ 9 - 2
src/components/inputModules/common/TreeView.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="he_tree_content he_tree_view" style="font-size: 14px">
+  <div
+    class="he_tree_content he_tree_view"
+    style="font-size: 14px"
+    v-loading="loading"
+  >
     <Tree :draggable="draggable" :value="treeData" ref="tree">
       <div
         :style="{
@@ -109,7 +113,8 @@ export default {
       activeIndex: "", // 高亮节点
       nodeLevel: "", // 高亮节点的level
       nodeName: "",
-      pidList:[],
+      pidList: [],
+      loading: false,
     };
   },
   watch: {
@@ -156,6 +161,7 @@ export default {
 
     getList() {
       let _this = this;
+      this.loading = true;
       let MethodName = "book-book_manager-GetBookChapterStruct";
       let data = {
         book_id: this.bookId,
@@ -167,6 +173,7 @@ export default {
         _this.$nextTick(() => {
           _this.foldAll();
         });
+        this.loading = false;
       });
     },
     // 递归

+ 14 - 8
src/views/BookView2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bookView2" v-loading="loading">
+  <div class="bookView2">
     <!-- <div>
       <el-button @click="goperview('book1')">新实用汉语课本1</el-button>
     </div>
@@ -44,7 +44,7 @@ export default {
         name: "新实用汉语",
         id: "003-20210908-10-1ZWNGSASZL",
       },
-      loading: false,
+      loading: null,
     };
   },
   //计算属性 类似于data概念
@@ -89,21 +89,25 @@ export default {
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {
-    this.loading = true;
+    this.loading = this.$loading({
+      lock: true,
+      text: "跳转中",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)",
+    });
+
     let codeName = "login_control-CreateTempAccessCode";
     let access_code = null;
-    let id = this.$route.query.bookId
+    let id = this.$route.query.bookId;
     getStaticContent(codeName, {}).then((res) => {
       access_code = res.access_code;
       let Mname = "login_control-GetLoginInfoByAccessCode";
       getStaticContent(Mname, {
         access_code: access_code,
       }).then((res) => {
-        this.loading = false;
+        this.loading.close();
         setToken(res);
-        this.$router.push(
-          `/courseview?bookId=${id}&type=preview`
-        );
+        this.$router.push(`/courseview?bookId=${id}&type=preview`);
       });
     });
   },
@@ -128,6 +132,8 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .bookView2 {
+  width: 100%;
+  height: 100vh;
   padding-left: 30px;
   div {
     margin-top: 15px;