hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-06 17:36:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
王卓煜
2025-09-03 10:29:09 +08:00
parent 6ed7201159
commit d8d858764d
1 changed files with 106 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/portal/course/Index.vue
View File

@@ -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() {
//清空所有的条件
this.keyword = '';
this.ctypeList.forEach(item => {
item.checked = false;
});
this.hotTagsList.forEach(item => {
item.checked = false;
});
this.oneList.forEach(one => {
one.checked = false;
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();
},
handleClearTags() {
//清空所有的条件
this.keyword = '';
this.ctypeList.forEach(item => {
item.checked = false;
});
this.hotTagsList.forEach(item => {
item.checked = false;
});
this.course.tags = ''; // 清空标签ID
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 + ',';
// 更新course.tags
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();
});
// // 移除末尾可能的逗号
// if (tagIds.length > 0) {
// tagIds = tagIds.slice(0, -1);
// }
this.course.tags = tagIds
// 打印当前选中的标签ID数组，用于调试
console.log("当前选中的标签ID:", this.course.tags);
// 调用搜索方法
this.searchData();
},
//三级分类
handleOptionClick(item, level, list) {