修复学员前端标签点击样式错误的问题

src/views/portal/course/Index.vue

@@ -333,7 +333,7 @@
           <div v-if="stagList.length > 0 && !newData" class="search-div" style="padding: 0;margin-bottom: 20px;">
             <div class="searchbar" style="background-color:#f6f7fb;display: flex;justify-content: space-between;">
               <div style="line-height: 30px;">
-                <span class="item-title"> 搜索条件</span>
+                <span class="item-title"> 搜索条件:</span>
                 <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)">{{
                   tag.tagName }}</el-tag>
               </div>
@@ -570,26 +570,43 @@ export default {
     },
     stagList() { //计算出选择的内容
       let list = [];
+      
+      // 关键词
       if (this.keyword) {
         list.push({
           type: 0,
           id: 'keyword',
           name: this.keyword,
+          tagName: this.keyword,
           checked: true
-        })
+        });
       }
+      
+      // 课程类型
       this.ctypeList.forEach(item => {
         if (item.checked) {
-          list.push(item);
+          list.push({
+            ...item,
+            tagName: item.name
+          });
         }
       });
+      
+      // 热点标签 - 这是关键修复
       this.hotTagsList.forEach(item => {
         if (item.checked) {
-          list.push(item);
+          list.push({
+            ...item,
+            name: item.tagName || item.name,
+            tagName: item.tagName || item.name,
+            type: 14
+          });
         }
       });
+      
+      // 三级分类
       this.oneList.forEach(one => {
-        var twoChildChecked = false;//是否有下级
+        var twoChildChecked = false;
         one.children.forEach(two => {
           if (two.checked) {
             twoChildChecked = true;
@@ -597,34 +614,28 @@ export default {
           var threeChildChecked = false;
           two.children.forEach(three => {
             if (three.checked) {
-              list.push(three);
+              list.push({
+                ...three,
+                tagName: three.name
+              });
               threeChildChecked = true;
             }
           });
           if (two.checked && !threeChildChecked) {
-            list.push(two);
+            list.push({
+              ...two,
+              tagName: two.name
+            });
           }
         });
         if (one.checked && !twoChildChecked) {
-          list.push(one);
+          list.push({
+            ...one,
+            tagName: one.name
+          });
         }
-      })
+      });
-      // 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() {
@@ -733,7 +744,10 @@ export default {
     //初始化:获取最新前10个热点标签
       apiCourseTag.getHotTagList(null).then(rs => {
       if (rs.status == 200) {
-        this.hotTagsList = rs.result;
+        this.hotTagsList = rs.result.map(tag => ({
+          ...tag,
+          checked: false
+        }));
       } else {
         console.log(rs.message);
       }
@@ -921,10 +935,54 @@ export default {
     //搜索条件
     stagClose(tag, tagIndex) {
       tag.checked = false;
+      
+      // 根据标签类型处理不同的清除逻辑
       if (tag.type == 0) {
+        // 关键词类型
         this.keyword = '';
+      } else if (tag.type == 1) {
+        // 课程类型（录播课、线下课、学习项目）
+        this.ctypeList.forEach(item => {
+          if (item.id == tag.id) {
+            item.checked = false;
+          }
+        });
+      } else if (tag.type == 14) {
+        // 热点标签类型
+        this.hotTagsList.forEach(item => {
+          if (item.id == tag.id) {
+            item.checked = false;
+          }
+        });
+        
+        // 更新course.tags，移除被删除的热点标签
+        const checkedHotTags = this.hotTagsList.filter(tag => tag.checked);
+        let tagIds = checkedHotTags.map(tag => tag.id).join(',');
+        this.course.tags = tagIds;
+        
+      } else if (tag.type == 11 || tag.type == 12 || tag.type == 13) {
+        // 三级分类标签
+        this.oneList.forEach(one => {
+          if (one.id == tag.id) {
+            one.checked = false;
+          }
+          one.children.forEach(two => {
+            if (two.id == tag.id) {
+              two.checked = false;
+            }
+            two.children.forEach(three => {
+              if (three.id == tag.id) {
+                three.checked = false;
+              }
+            });
+          });
+        });
       }
-      this.navTitle = []
+      
+      // 重置导航标题
+      this.navTitle = [];
+      
+      // 触发搜索更新
       this.searchData();
     },
 
@@ -962,31 +1020,18 @@ export default {
       this.searchData();
     },
     // 清除
-    handleClearTags() {
+handleClearTags() {
-      //清空所有的条件
+  //清空所有的条件
-      this.keyword = '';
+  this.keyword = '';
-      this.ctypeList.forEach(item => {
+  this.ctypeList.forEach(item => {
-        item.checked = false;
+    item.checked = false;
-      });
+  });
-      this.hotTagsList.forEach(item => {
+  this.hotTagsList.forEach(item => {
-        item.checked = false;
+    item.checked = false;
-      });
+  });
-      this.oneList.forEach(one => {
+  this.course.tags = ''; // 清空标签ID
-        one.checked = false;
+  this.searchData();
-        one.children.forEach(two => {
+},
-          two.checked = false;
-          two.children.forEach(three => {
-            three.checked = false;
-          })
-        })
-      });
-      this.twoList = [];
-      this.threeList = [];
-      this.navTitle = [];
-      this.newData = false;
-      sessionStorage.removeItem(this.localSessionKey)
-      this.searchData();
-    },
     // 导航切换(录播课，线下课，学习项目)
     handleTypeClick(item, list) {
       item.checked = !item.checked;
@@ -1001,27 +1046,16 @@ export default {
     //点击标签
     handleTagClick(item, list) {
       item.checked = !item.checked;
-      // 收集所有选中的标签，只保留需要传递的字段（如id、tagName等）
-      const checkedTags = list.filter(item => item.checked).map(item => ({
-        id: item.id,
-        tagName: item.tagName,
-        // 其他需要传递的字段
-      }));
-      // 正确的实现方式：
-      let tagIds = '';
-      checkedTags.forEach(tag => {
-        tagIds += tag.id + ',';
-      });
-      // // 移除末尾可能的逗号
-      // if (tagIds.length > 0) {
-      //   tagIds = tagIds.slice(0, -1);
-      // }
-      this.course.tags = tagIds
-      // 打印当前选中的标签ID数组，用于调试
-      console.log("当前选中的标签ID:", this.course.tags);
       
-      // 调用搜索方法
+      // 更新course.tags
-      this.searchData();
+      const checkedTags = this.hotTagsList.filter(tag => tag.checked);
+      let tagIds = checkedTags.map(tag => tag.id).join(',');
+      this.course.tags = tagIds;
+      
+      // 强制触发stagList重新计算
+      this.$nextTick(() => {
+        this.searchData();
+      });
     },
     //三级分类
     handleOptionClick(item, level, list) {