卡顿问题解决

src/components/Adult/Preview.vue

@@ -550,6 +550,12 @@ export default {
         _this.refresh = false;
         if (val) {
           _this.initContextData();
+          if (_this.FatherTreeData) {
+            _this.idArr = [];
+            _this.FatherTreeData.forEach((item, itemIndex) => {
+              this.seekCurrentTree(item);
+            });
+          }
           _this.handleTitleData();
           _this.$nextTick(() => {
             // 重新渲染组件
@@ -562,8 +568,7 @@ export default {
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     const _this = this;
@@ -571,6 +576,12 @@ export default {
       _this.initContextData();
       _this.handleTitleData();
     }
+    if (_this.FatherTreeData) {
+      _this.idArr = [];
+      _this.FatherTreeData.forEach((item, itemIndex) => {
+        this.seekCurrentTree(item);
+      });
+    }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
   beforeMount() {}, // 生命周期 - 挂载之前
@@ -587,16 +598,16 @@ export default {
       let curQue = JSON.parse(JSON.stringify(this.cur));
       curQue.detailList.forEach((dItem, dIndex) => {
         let paraArr = [];
-        if(dItem.detail){
-            dItem.detail.wordsList.forEach((sItem, sIndex) => {
+        if (dItem.detail) {
+          dItem.detail.wordsList.forEach((sItem, sIndex) => {
             let obj = {
-                pinyin: sItem.pinyin,
-                chs: sItem.chs,
-                isShow: true,
+              pinyin: sItem.pinyin,
+              chs: sItem.chs,
+              isShow: true,
             };
-                paraArr.push(obj);
-            });
-            this.$set(_this.cur.detailList[dIndex].detail, "resArr", paraArr);
+            paraArr.push(obj);
+          });
+          this.$set(_this.cur.detailList[dIndex].detail, "resArr", paraArr);
         }
       });
     },
@@ -653,9 +664,6 @@ export default {
     handleNNPEprev() {
       let _this = this;
       if (_this.queIndex == 0) {
-        _this.FatherTreeData.forEach((item, itemIndex) => {
-          this.seekCurrentTree(item);
-        });
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == 0) {
@@ -694,9 +702,6 @@ export default {
     handleNNPEnext() {
       const _this = this;
       if (_this.queIndex == _this.queTotal - 1) {
-        _this.FatherTreeData.forEach((item, itemIndex) => {
-          this.seekCurrentTree(item);
-        });
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == this.idArr.length - 1) {

src/components/Adult/preview/Voicefullscreen.vue

@@ -696,6 +696,8 @@ export default {
         item: JSON.stringify(this.item),
         bg: this.bg,
         ed: this.ed,
+        mp3: this.mp3,
+        pyPosition: this.curQue.pyPosition,
       };
       let data = {
         goods_id: this.currentTreeID,

src/components/TreeView.vue

@@ -117,6 +117,7 @@ export default {
     async currentTreeID(newval, oldval) {
       if (newval) {
         this.activeIndex = newval;
+        this.pidList = [];
         await this.unfoldData(this.activeIndex, this.treeData);
         await this.unfoldFather(this.treeData);
       }
@@ -125,28 +126,31 @@ export default {
   methods: {
     // 递归找到当前节点的所有父节点
     unfoldData(activeIndex, data, index, child) {
-      data.forEach((item, i) => {
-        if (item.id == activeIndex) {
-          this.pidList.push(item.pid);
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].id == activeIndex) {
+          this.pidList.push(data[i].pid);
           if (Object.prototype.toString.call(index).indexOf("Number") != -1) {
             this.pidList.push(child.pid);
           }
-        } else if (item.children) {
-          this.unfoldData(activeIndex, item.children, i, item);
+          // return false
+        } else if (data[i].children) {
+          this.unfoldData(activeIndex, data[i].children, i, data[i]);
         }
-      });
+      }
     },
     // 展示父节点
     unfoldFather(data) {
-      data.forEach((item, i) => {
-        this.pidList.forEach((p) => {
-          if (item.id == p) {
-            item.$folded = false;
-          } else if (item.children) {
-            this.unfoldFather(item.children);
+      for (let i = 0; i < data.length; i++) {
+        if (this.pidList.indexOf(data[i].id) > -1) {
+          data[i].$folded = false;
+          if (data[i].children) {
+            this.unfoldFather(data[i].children);
           }
-        });
-      });
+          // return false
+        } else if (data[i].children) {
+          this.unfoldFather(data[i].children);
+        }
+      }
     },
     foldAll() {
       if (this.$refs.tree !== undefined) {
@@ -234,13 +238,13 @@ export default {
     }
   }
   .tree_box_item_light,
-  .tree_box_leaf:hover  {
+  .tree_box_leaf:hover {
     color: #ff9900;
     > i {
       color: #ff9900;
     }
   }
-  .tree_box_item_active{
+  .tree_box_item_active {
     color: #fff !important;
     background: #ff9900 !important;
     > i {

src/views/courseView.vue

@@ -11,7 +11,7 @@
           :currentTreeID="chapterId"
         />
       </div>
-      <div id="data-screen" class="inner">
+      <div id="data-screen" class="inner" v-loading="loading">
         <!-- 显示答案按钮 -->
         <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
@@ -79,6 +79,7 @@ export default {
       category: "",
       FatherTreeData: null,
       themeColor: "",
+      loading: false,
     };
   },
   created() {
@@ -91,6 +92,7 @@ export default {
     },
     changeId(id, name) {
       const _this = this;
+
       _this.chapterId = id;
       _this.chapterName = name;
       _this.isAnswerShow = false;
@@ -108,32 +110,38 @@ export default {
     // 获取预览数据
     onGetData() {
       const _this = this;
+      _this.loading = true;
       _this.context = null;
       const MethodName = "book-courseware_manager-GetCoursewareContent_View";
       const data = {
         id: _this.chapterId,
       };
-      getContent(MethodName, data).then((res) => {
-        this.category = res.category;
-        this.themeColor = res.book_theme_color;
-        if (res.content) {
-          const _this = this;
-          if (!this.category || this.category == "oc") {
-            _this.context = {
-              id: _this.chapterId,
-              ui_type: JSON.parse(res.content).question
-                ? JSON.parse(res.content).question.ui_type
-                : "",
-              sort_number: 1,
-              content: JSON.parse(res.content),
-            };
-          } else if (this.category == "NPC") {
-            _this.context = JSON.parse(res.content);
+      getContent(MethodName, data)
+        .then((res) => {
+          _this.loading = false;
+          this.category = res.category;
+          this.themeColor = res.book_theme_color;
+          if (res.content) {
+            const _this = this;
+            if (!this.category || this.category == "oc") {
+              _this.context = {
+                id: _this.chapterId,
+                ui_type: JSON.parse(res.content).question
+                  ? JSON.parse(res.content).question.ui_type
+                  : "",
+                sort_number: 1,
+                content: JSON.parse(res.content),
+              };
+            } else if (this.category == "NPC") {
+              _this.context = JSON.parse(res.content);
+            }
+          } else {
+            _this.context = null;
           }
-        } else {
-          _this.context = null;
-        }
-      });
+        })
+        .catch(() => {
+          _this.loading = false;
+        });
     },
     // 跳转编辑页面
     handleEdit() {
@@ -160,6 +168,7 @@ export default {
 <style lang="scss" scoped>
 .container {
   width: 100%;
+  min-height: 100vh;
   height: auto;
   .content {
     width: 100%;

vue.config.js

@@ -43,8 +43,8 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        //target: `http://gcls.utschool.cn/`,
-        target: `http://gcls.helxsoft.cn/`,
+        target: `http://gcls.utschool.cn/`,
+        //target: `http://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''