courseView

src/views/bookView.vue

@@ -59,10 +59,9 @@
             v-if="chapterId && context"
             ref="previewAnswer"
             :context="context"
-            :currentTreeID="currentTreeID"
+            :currentTreeID="chapterId"
             :FatherTreeData="FatherTreeData"
             :change-id="changeId"
-            :changeCurrentTreeID="changeCurrentTreeID"
           />
         </template>
       </div>
@@ -104,7 +103,6 @@ export default {
       TaskModel: "",
       fullTree: false, // 全屏模式下树是否显示
       category: "",
-      currentTreeID: null,
       FatherTreeData: null,
     };
   },
@@ -113,13 +111,9 @@ export default {
     // _this.bookId = this.$route.query.bookId
   },
   methods: {
-    changeCurrentTreeID(val) {
-      this.currentTreeID = val;
-    },
     changeTreeData(val) {
       this.FatherTreeData = JSON.parse(JSON.stringify(val));
     },
-
     changeId(id, name, free) {
       // if (
       //   this.bookIsBuy == "true" ||
@@ -129,7 +123,6 @@ export default {
       _this.chapterId = id;
       _this.chapterName = name;
       _this.isAnswerShow = false;
-      _this.currentTreeID = id;
       _this.onGetData();
       if (!_this.treeFlag) {
         _this.fullTree = false;

src/views/courseView.vue

@@ -15,7 +15,7 @@
             v-if="!treeFlag"
             src="../assets/common/icon-treelist.png"
             @click="treeShow"
-          >
+          />
           <h2 class="title">{{ chapterName }}</h2>
           <el-switch
             v-if="!treeFlag"
@@ -25,125 +25,140 @@
             inactive-text="生词模式"
           />
         </div>
-        <Preview
-          v-if="chapterId && context"
-          ref="previewAnswer"
-          :context="context"
-          :bookAnswerContent="bookAnswerContent"
-          bookclientwidth="900"
-          :TaskModel="TaskModel"
-          @handleBookUserAnswer="handleBookUserAnswer"
-        />
+
+        <template v-if="category == 'oc' || !category">
+          <Preview
+            v-if="chapterId && context"
+            ref="previewAnswer"
+            :context="context"
+            :bookAnswerContent="bookAnswerContent"
+            bookclientwidth="900"
+            :TaskModel="TaskModel"
+            @handleBookUserAnswer="handleBookUserAnswer"
+          />
+        </template>
+        <template v-if="category == 'NPC'">
+          <Booknpc
+            v-if="chapterId && context"
+            ref="previewAnswer"
+            :context="context"
+            :currentTreeID="chapterId"
+            :FatherTreeData="FatherTreeData"
+            :change-id="changeId"
+          />
+        </template>
       </div>
     </div>
     <!-- <Preview :context="context" :queIndex="queIndex" /> -->
 
-    <a
-      v-if="chapterId && treeFlag"
-      class="screen-full"
-      @click="fullScreen()"
-    />
+    <a v-if="chapterId && treeFlag" class="screen-full" @click="fullScreen()" />
   </div>
 </template>
 
 <script>
-import Header from '@/components/inputModules/common/Header'
-import Nav from '@/components/inputModules/common/Nav'
-import TreeView from '@/components/inputModules/common/TreeView'
-import { getContent } from '@/api/ajax'
-import Cookies from 'js-cookie'
+import Header from "@/components/inputModules/common/Header";
+import Nav from "@/components/inputModules/common/Nav";
+import TreeView from "@/components/inputModules/common/TreeView";
+import { getContent } from "@/api/ajax";
+import Cookies from "js-cookie";
 // import Preview from '@/componentsAnswer/PreviewAnswer.vue'
-import Preview from '@/components/Preview'
+import Preview from "@/components/Preview";
 export default {
-  name: 'CourseView',
+  name: "CourseView",
   components: {
     Header,
     Nav,
     TreeView,
-    Preview
+    Preview,
   },
   data() {
     return {
-      bookId: '',
-      chapterId: '',
-      chapterName: '',
+      bookId: "",
+      chapterId: "",
+      chapterName: "",
       fullscreen: false, // 控制全屏
       context: null,
       question: null, // 选择的模板题型
-      queIndex: '',
+      queIndex: "",
       treeFlag: true, // tree是否显示
       switchvalue: true, // 生词模式
       isAnswerShow: false, // 是否显示答案
-      bookAnswerContent: '[[6],[],[9]]',
-      TaskModel: 'Task'
-    }
+      bookAnswerContent: "[[6],[],[9]]",
+      TaskModel: "Task",
+      category:''
+    };
   },
   created() {
-    const _this = this
-    _this.bookId = this.$route.query.bookId
+    const _this = this;
+    _this.bookId = this.$route.query.bookId;
   },
   methods: {
     changeId(id, name) {
-      const _this = this
-      _this.chapterId = id
-      _this.chapterName = name
-      _this.isAnswerShow = false
-      _this.onGetData()
+      const _this = this;
+      _this.chapterId = id;
+      _this.chapterName = name;
+      _this.isAnswerShow = false;
+      _this.onGetData();
     },
     // 点击全屏展示 隐藏tree
     fullScreen() {
-      this.treeFlag = false
-      document.getElementById('content-tree').style.display = 'none'
+      this.treeFlag = false;
+      document.getElementById("content-tree").style.display = "none";
     },
     treeShow() {
-      this.treeFlag = true
-      document.getElementById('content-tree').style.display = 'block'
+      this.treeFlag = true;
+      document.getElementById("content-tree").style.display = "block";
     },
     // 获取预览数据
     onGetData() {
-      const _this = this
-      const MethodName = 'book-courseware_manager-GetCoursewareContent_View'
+      const _this = this;
+      const MethodName = "book-courseware_manager-GetCoursewareContent_View";
       const data = {
-        id: _this.chapterId
-      }
-      getContent(MethodName, data).then(
-        (res) => {
-          if (res.content) {
-            const _this = this
+        id: _this.chapterId,
+      };
+      getContent(MethodName, data).then((res) => {
+        this.category = res.category;
+        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 : '',
+              ui_type: JSON.parse(res.content).question
+                ? JSON.parse(res.content).question.ui_type
+                : "",
               sort_number: 1,
-              content: JSON.parse(res.content)
-            }
-          } else {
-            const _this = this
-            _this.context = null
+              content: JSON.parse(res.content),
+            };
+          } else if (this.category == "NPC") {
+            _this.context = JSON.parse(res.content);
           }
+        } else {
+          const _this = this;
+          _this.context = null;
         }
-      )
+      });
     },
     // 跳转编辑页面
     handleEdit() {
-      const index = this.$refs.treeView.handleParentIndex().split('###')
+      const index = this.$refs.treeView.handleParentIndex().split("###");
       if (index.length > 1) {
-        Cookies.set('bookIndex', index[0])
-        Cookies.set('bookLevel', index[1])
-        Cookies.set('bookNodename', index[2])
+        Cookies.set("bookIndex", index[0]);
+        Cookies.set("bookLevel", index[1]);
+        Cookies.set("bookNodename", index[2]);
       }
-      this.$router.push('/input?bookId=' + this.bookId)
+      this.$router.push("/input?bookId=" + this.bookId);
     },
     // 显示或隐藏答案
     handleAnswerShow() {
-      this.isAnswerShow = !this.isAnswerShow
-      this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow)
+      this.isAnswerShow = !this.isAnswerShow;
+      this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow);
     },
     // 得到用户答题答案
-    handleBookUserAnswer(data){
-        console.log(data)
-    }
-  }
-}
+    handleBookUserAnswer(data) {
+      console.log(data);
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .container {
@@ -286,27 +301,29 @@ export default {
       background-size: 32px;
     }
   }
-  .answerShow{
-      position: absolute;
-      right: 20px;
-      top: 20px;
-      width: 112px;
-        height: 40px;
-        background: #FFFFFF url('../assets/common/icon-eye-close.png') 16px center no-repeat;
-        background-size: 16px;
-        border: 1px solid rgba(44, 44, 44, 0.15);
-        box-sizing: border-box;
-        border-radius: 4px;
-        font-size: 14px;
-        line-height: 150%;
-        color: #000000;
-        padding:9px 16px 9px 36px;
-        cursor: pointer;
-        z-index: 2;
-        &.answerShowTrue{
-            background: #F5F5F5 url('../assets/common/icon-eye-open.png') 16px center no-repeat;
-        background-size: 16px;
-        }
+  .answerShow {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 112px;
+    height: 40px;
+    background: #ffffff url("../assets/common/icon-eye-close.png") 16px center
+      no-repeat;
+    background-size: 16px;
+    border: 1px solid rgba(44, 44, 44, 0.15);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 150%;
+    color: #000000;
+    padding: 9px 16px 9px 36px;
+    cursor: pointer;
+    z-index: 2;
+    &.answerShowTrue {
+      background: #f5f5f5 url("../assets/common/icon-eye-open.png") 16px center
+        no-repeat;
+      background-size: 16px;
+    }
   }
 }
 </style>