案例三级添加

src/views/portal/case/Index.vue

@@ -4,6 +4,7 @@
       <portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
     </div>
     <div class="xcontent2">
+      <TypeNav :treeList="treeList" @handleOptionClick="handleOptionClick"></TypeNav>
       <div class="xcontent2-main" style="margin-right: 30px;">
         <div class="left-div">
           <div class="search-div">
@@ -211,7 +212,7 @@
         </div>
 
       </div>
-      <div class="xcontent2-minor">
+      <!-- <div class="xcontent2-minor">
         <div id="fixd-box">
           <div class="portal-ranking ranking-bg">
             <p class="ranking-title">好评榜</p>
@@ -265,12 +266,8 @@
               </li>
             </ul>
           </div>
-          <!-- <div class="course-resources pointer"> -->
-          <!-- 资源位 -->
-          <!-- <img  @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
-          <!-- </div> -->
         </div>
-      </div>
+      </div> -->
       <div style="height: 50px;"></div>
       <el-dialog class="protocol" :close-on-click-modal="false" :visible.sync="protocolDialogVisible" width="30%"
         :show-close="false">
@@ -349,6 +346,7 @@ import apiDict from "@/api/modules/dict.js";
 import apiType from "@/api/modules/type.js";
 import { cutFullName } from "@/utils/tools.js";
 import apiPlace from "@/api/phase2/place.js"
+import TypeNav from "../../../components/TypeNav.vue";
 export default {
   name: "index",
   components: {
@@ -357,10 +355,12 @@ export default {
     portalFloatTools,
     interactBar,
     timeShow,
-    author
+    author,
+    TypeNav
   },
   data() {
     return {
+      treeList:[],
       caseType:process.env.VUE_APP_CASE_TYPE,//类型
       caseYears:[],
       refId: '',//消息跳转案例的id
@@ -626,10 +626,11 @@ export default {
     if (this.refId) {
       this.queryCondition.type = 'recommend'
     }
+    this.loadTypeData();//加载分类
     this.getAnkingData();
-    this.getPopularity();
     this.searchterm();
-    this.getPositive();
+    // this.getPopularity();
+    // this.getPositive();
     this.couresreso();
     // window.addEventListener("scroll", this.handleScroll);
     // 获取年
@@ -642,6 +643,39 @@ export default {
 
   },
   methods: {
+    handleOptionClick(treeItem){
+      console.log(treeItem);
+      this.treeList.forEach(one => {
+        one.checked = false;
+        if (one.id == treeItem.id) {
+          one.checked = true;
+        }
+        one.children && one.children.forEach(two => {
+          two.checked = false;
+          if (two.id == treeItem.id) {
+            two.checked = true
+          }
+          two.children && two.children.forEach(three => {
+            three.checked = false;
+            if (three.id == treeItem.id) {
+              three.checked = true
+            }
+          })
+        })
+      })
+    },
+        // 加载分类
+    async loadTypeData() {
+      try {
+        const { result, status } = await apiType.tree(1);
+        if (status === 200) {
+          console.log(result,'三级');
+          this.treeList = result
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
     getYears() {
       apiCase.caseYears().then(res => {
         if (res.status == 200) {