开发

src/views/portal/course/qualityCourse.vue

@@ -89,6 +89,32 @@
                   <span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
                 </div>
               </div>
+              <div style="margin-top:10px;flex: 1;">
+                <!-- 修改热点标签容器，支持换行 -->
+                <div class="hot-tags-wrapper">
+                  <div class="hot-tags-wrapper">
+                    <div
+                      class="option-item"        style="font-weight: bold; padding-top: 2px;"
+                      :class="{ 'option-active': isAllHotTagsSelected }"
+                      @click="handleClearHotTags"
+                    >
+                      <span>全部</span>
+                      <span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
+                    </div>
+
+                    <div
+                      class="option-item"        style="font-weight: bold; padding-top: 2px;"
+                      v-for="tag in hotTagsList"
+                      :key="tag.id"
+                      @click="handleTagClick(tag, hotTagsList,1)"
+                      :class="{ 'option-active': tag.checked }"
+                    >
+                      <span>{{tag.tagName}}</span>
+                      <span :class="tag.checked ? 'nav-bottbor' : ''"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
 
               <div style="display: flex;justify-content: space-between; align-items: center;">
@@ -328,25 +354,45 @@ export default {
       let list = [];
 
     },
-    // 取消搜索条件标签展示
-    stagList() { //计算出选择的内容
+    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);
-      //   }
-      // });
+
+      // 课程类型
+      this.ctypeList.forEach(item => {
+        if (item.checked) {
+          list.push({
+            ...item,
+            tagName: item.name
+          });
+        }
+      });
+
+      // 热点标签 - 这是关键修复
+      this.hotTagsList.forEach(item => {
+        if (item.checked) {
+          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;
@@ -354,34 +400,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() {
@@ -575,6 +615,37 @@ export default {
     // window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    isAllHotTagsSelected() {
+      return !this.hotTagsList.some(tag => tag.checked);
+    },
+    handleClearHotTags() {
+      // 清除所有热点标签的选中状态
+      this.hotTagsList.forEach(tag => {
+        tag.checked = false;
+      });
+      // 清空course.tags
+      this.course.tags = '';
+
+      // 触发搜索
+      this.searchData();
+    },
+    handleTagClick(item, list,type) {
+      item.checked = !item.checked;
+
+      // 更新course.tags
+      const checkedTags = this.hotTagsList.filter(tag => tag.checked);
+      let tagIds = checkedTags.map(tag => tag.id).join(',');
+      this.course.tags = tagIds;
+      this.$forceUpdate();
+      this.searchData(type);
+
+      // 强制触发stagList重新计算
+      // this.$nextTick(() => {
+      //   this.searchData(type);
+      // });
+    },
+
+
     // 改变分页
     currentChange(val) {
       this.course.pageIndex = val
@@ -2219,30 +2290,18 @@ export default {
     }
   }
 }
-
-// .course-form {
-//   width: 100%;
-//   margin: 10px 0;
-//   ::v-deep.el-button {
-//     width: 100%;
-//     color: #fff;
-//   }
-// }
-
-// .right-box {
-//   .add-btn {
-//     width: 100%;
-//     padding: 15px 0;
-//   }
-//   .ranking-card {
-//     margin-top: 0px;
-//   }
-
-//   .ranking-data {
-//     margin: 10px 0;
-//     color: #999999;
-//   }
-// }]
+.hot-tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  padding-top: 2px;
+}
+.search-div.nav {
+  display: block;
+  width: 100%;
+  clear: both;
+}
 .search-item-type {
   line-height: 25px;
   padding-right: 10px;