先保存一下

src/views/portal/course/Index.vue

@@ -7,10 +7,10 @@
       <div class="xcontent2">
         <div class="xcontent2-main content-div">
           <div class="search-div" style="margin-right:36px">
-            <div class="searchbar" v-if="searchTags.length > 0">
+            <div class="searchbar" v-if="stagList.length > 0">
               <div style="line-height: 30px;">
                 <span class="item-title"> 搜索条件</span>
-                <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
+                <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t'+tagIdx" @close="stagClose(tag,tagIdx)">{{ tag.name }}</el-tag>
               </div>
             </div>
             <div class="search-item">
@@ -20,59 +20,61 @@
                   </div>
                   <!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
                   <div>
-                  <el-radio-group v-model="category" size="mini" @change="searchData">
-                    <el-radio-button :label="null">全部</el-radio-button>
-                    <el-radio-button :label="20">录播课</el-radio-button>
-                    <el-radio-button :label="30">线下课 </el-radio-button>
-                    <el-radio-button class="couderbox"> <div class="coures-border"></div> </el-radio-button>
-                    <el-radio-button :label="40">学习项目</el-radio-button>
-                  </el-radio-group>
+                    <a @click="handleTypeAllClick(1)" class="option-item" :class="{'option-active':ctypeTagAll}">全部</a>
+                    <a @click="handleTypeClick(ctypeList[0])"  class="option-item" :class="{'option-active':ctypeList[0].checked}">录播课</a>
+                    <a @click="handleTypeClick(ctypeList[1])" class="option-item" :class="{'option-active':ctypeList[1].checked}">线下课</a>
+                    <a class="option-border"> </a>
+                    <a @click="handleTypeClick(ctypeList[2])" class="option-item" :class="{'option-active':ctypeList[2].checked}">学习项目</a>
                   </div>
                 </div>
             </div>
-            <div :class="queryExpand ? 'search-div-expand' : 'search-div-collapse'">
-              <el-row class="search-item">
-                <el-col :span="24">
-                  <div style="margin-top:10px;display: flex;">
-                    <div style="line-height: 25px;padding-right: 10px;">
+            <div class="search-item">
+                <div style="line-height: 25px;margin-top:10px; display: flex;">
+                  <div class="search-item-type">
                     <span class="item-title" style="padding-right: 5px;">一级分类:</span>
                   </div>
-                    <el-radio-group  v-model="types.sysTypes" size="mini" @change="changeType">
-                      <el-radio-button :label="null">全部</el-radio-button>
-                      <el-radio-button v-for="item in optionsList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                    <el-radio-button class="couderbox"> <div class="coures-border"></div> </el-radio-button>
-                    </el-radio-group>
+                  <div>
+                    <a @click="handleTypeAllClick(11)" class="option-item" :class="{'option-active':oneTagAll}">全部</a>
+                    <a v-for="one in oneList" @click="handleOptionClick(one)"  class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
+                    <a class="option-border"> </a>
+                    <a class="option-item">
                       <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
                           <span class="uxicon">
                             <svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
                           </span>
                       </span>
-                      <!-- <span @click="jumOpen()" class="Uxtext" style="margin-left: 30px;" :style="{'color': course.openCourse==1? '#387DF7':''}"> 公开课
-                      </span> -->
-                  </div>
-                  <div class="search-item-sub" v-if="types.oneSubList.length != 0">
-                    <span class="item-title" style="min-width: 74px;">二级分类:</span>
-                    <div style="margin-top:10px">
-                      <el-radio-group v-model="types.subOne" size="mini"  @change="changeTypeSub">
-                        <el-radio-button label="0">全部</el-radio-button>
-                        <el-radio-button v-for="item in types.oneSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                      </el-radio-group>
+                    </a>
+                  </div>
+                </div>
+            </div>
+            <div class="search-item" v-if="twoList.length>0">
+                <div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
+                  <div class="search-item-type">
+                    <span class="item-title" style="padding-right: 5px;">二级分类:</span>
+                  </div>
+                  <div style="white-space: nowrap;">
+                    <a @click="handleTypeAllClick(12)" class="option-item" :class="{'option-active':twoTagAll}">全部</a>
+                  </div>
+                  <div>
+                    <a v-for="two in twoList" @click="handleOptionClick(two)"  class="option-item" :class="{'option-active':two.checked}">{{two.name}}</a>
+                  </div>
+                </div>
+            </div>
+            <div class="search-item" v-if="threeList.length>0">
+                <div style="line-height: 25px;margin-top:10px; display: flex;justify-content: flex-start;">
+                  <div class="search-item-type">
+                    <span class="item-title" style="padding-right: 5px;">三级分类:</span>
+                  </div>
+                  <div style="white-space: nowrap;">
+                    <a @click="handleTypeAllClick(13)" class="option-item" :class="{'option-active':threeTagAll}">全部</a>
+                  </div>
+                  <div>
+                    <a v-for="three in threeList" :key="three.id" @click="handleOptionClick(three)"  class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
                   </div>
                 </div>
-                   <div class="search-item-sub" v-if="types.towSubList.length != 0">
-                    <span class="item-title" style="padding-right:13px">三级分类:</span>
-                    <div style="margin-top:10px">
-                      <el-radio-group v-model="types.subTow" size="mini" @change="searchData" >
-                        <el-radio-button label="0">全部</el-radio-button>
-                        <el-radio-button v-for="item in types.towSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
-                      </el-radio-group>
             </div>
 
           </div>
-                </el-col>
-              </el-row>
-            </div>
-          </div>
           <div class="order-div">
             <span class="quyer-tag">
                  <el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
@@ -321,10 +323,75 @@ export default {
     interactBar
   },
   computed: {
-    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"])
+    ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]),
+    stagList(){ //计算出选择的内容
+       let list=[];
+       if(this.keyword){
+         list.push({
+           type:0,
+           id:'keyword',
+           name:this.keyword,
+           checked:true
+         })
+       }
+       this.ctypeList.forEach(item=>{
+         if(item.checked){
+           list.push(item);
+         }
+       });
+       this.oneList.forEach(item=>{
+         if(item.checked){
+           list.push(item);
+         }
+       });
+       this.twoList.forEach(item=>{
+         if(item.checked){
+           list.push(item);
+         }
+       });
+       this.threeList.forEach(item=>{
+         if(item.checked){
+           list.push(item);
+         }
+       });
+       //console.log(list,'list');
+       return list;
+    },
+    ctypeTagAll(){
+      let flag=this.ctypeList.some(item=>{
+        return item.checked;
+      });
+      return !flag;
+    },
+    oneTagAll(){
+      let flag=this.oneList.some(item=>{
+        return item.checked;
+      });
+      return !flag;
+    },
+    twoTagAll(){
+      let flag=this.twoList.some(item=>{
+        return item.checked;
+      });
+      return !flag;
+    },
+    threeTagAll(){
+      let flag=this.threeList.some(item=>{
+        return item.checked;
+      });
+      return !flag;
+    }
   },
   data() {
     return {
+      ctypeList:[
+        {type:1,id:20,name:'录播课',checked:false},
+        {type:1,id:30,name:'线下课',checked:false},
+        {type:1,id:40,name:'学习项目',checked:false},
+      ],
+      oneList:[], //一级分类{type:11}
+      twoList:[], //二级分类{type:12}
+      threeList:[],//三级分类{type:13}
 
       resonimg:{},
       formatDate,
@@ -354,10 +421,8 @@ export default {
         pageSize: 9 ,//每页多少条
         openCourse:0,//增加的公开课查询
       },
-
-      optionsList: [], //分类数据
       sceneList: [], //场景
-      keyword: "",
+      keyword: "",//查询的关键字
       anking: "",
       isFind: false,
       searchbar: {
@@ -407,11 +472,11 @@ export default {
     this.getAnkingData();
     window.addEventListener("scroll",this.handleScroll);
     if (this.$route.query !== {}) {
-      this.course.keyword = this.$route.query.keyword;
+      this.keyword = this.$route.query.keyword;
     }
-    this.getSceneData();
-    this.getTypeData();
-    if (this.course.keyword != undefined) {
+    this.loadTypeData();//加载分类
+    //this.getSceneData(); //已经没有场景了
+    if (this.keyword) {
       this.totalPages = 4;
     }
 
@@ -451,6 +516,116 @@ export default {
     window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    stagClose(tag,tagIndex){
+      tag.checked=false;
+      if(tag.type==0){
+         this.keyword='';
+      }
+    },
+    handleTypeAllClick(t){
+      if(t==1){
+        this.ctypeList.forEach(ct=>{
+          ct.checked=false;
+        })
+      }else if(t==11){
+        this.oneList.forEach(ct=>{
+          ct.checked=false;
+        });
+        this.twoList.forEach(ct=>{
+          ct.checked=false;
+        });
+        this.threeList.forEach(ct=>{
+          ct.checked=false;
+        });
+        this.twoList=[];
+        this.threeList=[];
+      }else if(t==12){
+        this.twoList.forEach(ct=>{
+          ct.checked=false;
+        });
+        this.threeList.forEach(ct=>{
+          ct.checked=false;
+        });
+        this.threeList=[];
+      }else if(t==13){
+        this.threeList.forEach(ct=>{
+          ct.checked=false;
+        })
+      }
+      this.searchData();
+    },
+    handleTypeClick(item){
+      item.checked=!item.checked;
+      this.searchData();
+    },
+    handleOptionClick(item){
+      item.checked=!item.checked;
+      this.handleChangeTypes();
+      this.searchData();
+    },
+    handleChangeTypes(){
+      //重新计算
+      this.twoList=[];
+      this.threeList=[];
+      let $this=this;
+      this.oneList.forEach(one=>{
+        if(one.checked){
+           one.children.forEach(two=>{
+             $this.twoList.push(two);
+             if(two.checked){
+                two.children.forEach(three=>{
+                  $this.threeList.push(three);
+                })
+             }
+           });
+        }
+      })
+    },
+    async loadTypeData() {
+      let $this=this;
+      try {
+        const { result, status } = await apiType.tree(1);
+        if (status === 200) {
+          result.forEach(item=>{
+             let newItem={
+               type:11,
+               id:item.id,
+               name:item.name,
+               children:[],
+               checked:false
+             }
+             if(item.children){
+                item.children.forEach(subItem=>{
+                  let newSubItem={
+                    type:12,
+                    id:subItem.id,
+                    name:subItem.name,
+                    children:[],
+                    checked:false
+                  }
+
+                  if(subItem.children){
+                    subItem.children.forEach(sub=>{
+                      let newSub={
+                        type:13,
+                        id:sub.id,
+                        name:sub.name,
+                        children:[],
+                        checked:false
+                      }
+                      newSubItem.children.push(newSub);
+                    })
+                  }
+                  newItem.children.push(newSubItem);
+                })
+             }
+             $this.oneList.push(newItem);
+          });
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
     banJump() {
       if(this.resonimg.JumpUrl) {
         window.open(this.resonimg.JumpUrl);
@@ -474,7 +649,8 @@ export default {
        this.searchData();
     },
     emitInput(val) {
-      this.course.keyword = val;
+      this.keyword = val;
+      //this.stagList;
       this.searchData();
     },
     handleScroll() {
@@ -532,10 +708,6 @@ export default {
       }
       return this.sysTypeMap.get(code);
     },
-    useHotword(item) {
-      this.$set(this.course, "keyword", item.keyword);
-      this.searchData();
-    },
     searchterm() {
       apiSearchterm.list(5, 1).then(res => {
         if (res.status == 200) {
@@ -633,36 +805,6 @@ export default {
       }
       this.searchData();
     },
-
-    // 分类
-    changeType(num) {
-      this.types.oneSubList = [];
-      this.types.subOne = "0";
-      this.types.towSubList = [];
-      let list = {};
-      if (num !== 0) {
-        list = this.optionsList.find(item => {
-          return item.id === num;
-        });
-      }
-      if (list && list.children) {
-        this.types.oneSubList = list.children;
-      }
-      this.searchData();
-    },
-    // 子级分类
-    changeTypeSub(num) {
-      this.types.subTow = "0";
-      let list = {};
-      if (num !== 0) {
-        apiType.list(1, num).then(res => {
-          if (res.status === 200) {
-            this.types.towSubList = res.result;
-          }
-        });
-      }
-      this.searchData();
-    },
     //获取场景，保留
     async getSceneData() {
       try {
@@ -674,17 +816,6 @@ export default {
         console.log(error);
       }
     },
-    //获取分类，此处获取提内容分类
-    async getTypeData() {
-      try {
-        const { result, status } = await apiType.tree(1);
-        if (status === 200) {
-          this.optionsList = result;
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
     loadMore() {
       this.course.pageIndex += 1;
       this.search();
@@ -700,7 +831,7 @@ export default {
     },
     async search() {
       let that = this;
-      if (this.course.keyword) {
+      if (this.keyword) {
         apiSearchterm.save({ keyword: this.course.keyword, type: 1 });
       }
 
@@ -1307,6 +1438,27 @@ export default {
 //     margin: 10px 0;
 //     color: #999999;
 //   }
-// }
-
+// }]
+.search-item-type{
+  line-height: 25px;
+  padding-right: 10px;width:85px;
+  white-space: nowrap;
+}
+.option-item{
+  font-family:"Menlo", "苹方-简" !important;
+  color:#3d3d3d;
+  display: inline-block;
+  font-size: 14px;
+  margin: 0px 15px;
+}
+.option-border{
+  width: 2px;
+  display: inline-block;
+  height: 15px;
+  margin: 0px 20px -2px 20px;
+  background: #666;
+}
+.option-active{
+  color:#387DF7;
+}
 </style>