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

标签管理

Browse Source
This commit is contained in:
王卓煜
2025-09-12 15:47:26 +08:00
parent 0b0789feda
commit df3b1d7162
6 changed files with 913 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,7 +43,7 @@
:disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
:visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
<div class="course-two-content" slot="reference">{{
twoList.name }}</div>
twoList.name }}</div>-
<!-- 内容 -->
<div class="course-three-box">
<div class="course-three-box-title">
@@ -284,32 +284,40 @@
<!-- 内容导航 -->
<div class="topNav" v-if="!newData">
<div class="search-div nav" style="height: 100px;flex: 1;">
<div @click="handleTypeAllClick(1)" class="option-item" :class="{ 'option-active': ctypeTagAll }">
<div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[0].checked }">
<a>录播课</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[1].checked }">
<a>线下课</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item" style="font-weight: bold"
:class="{ 'option-active': ctypeList[2].checked }">
<a>学习项目</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div>
<a class="option-item">
<span @click="uClassClick" class="Uxtext" style=""> U选小课堂
<span @click="uClassClick" class="Uxtext" style="font-weight: bold"> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
<!-- 热点标签 add by zhengsongbo on 2025-08-01 -->
<div style="margin-top:10px;flex: 1;">
<div class="option-item" style="padding-top: 2px"
v-for="tag in hotTagsList" :key="tag.id"
@click="handleTagClick(tag, hotTagsList)">
<a class="custom" :class="tag.checked ? 'custom2' : ''">{{tag.tagName}}</a>
</div>
</div>
</div>
<div id="fixd-box" class="upload" style="margin-left: 26px;">
<div v-if="identity == 2 || identity == 3 || identity == 5">
@@ -325,9 +333,9 @@
<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.name }}</el-tag>
tag.tagName }}</el-tag>
</div>
<div>
<el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
@@ -507,12 +515,14 @@ import apiTeacher from "@/api/modules/teacher.js";
import apiUser from "@/api/system/user.js";
import scene from "@/api/modules/scene.js";
import apiUserbasic from "@/api/boe/userbasic.js";
import apiManage from '@/api/manage/manage.js';
import interactBar from "@/components/Portal/interactBar.vue";
import courseImage from "@/components/Course/courseImage.vue";
import { courseType, getType, toScore, formatDate, formatUserNumber, formatDateByFmt } from "@/utils/tools.js";
import { deepClone, param } from "../../../utils";
import apiSearchterm from "@/api/modules/searchterm.js";
import apiPlace from "@/api/phase2/place.js"
import apiCourseTag from '@/api/modules/courseTag.js'
export default {
name: "index",
components: {
@@ -534,21 +544,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,
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;
@@ -556,34 +588,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() {
@@ -613,12 +639,14 @@ export default {
},
data() {
return {
hotTagsList: [],
newData: false,//线上品牌系列隐藏
navTitle: [],
// 设置高亮
twoId: '',
count: 0,//分页总条条数
showUClass: false,
projectDialogVisible: false,
ctypeList: [
{ type: 1, id: 20, name: '录播课', checked: false },
{ type: 1, id: 30, name: '线下课', checked: false },
@@ -629,7 +657,7 @@ export default {
twoList: [], //二级分类{type:12}
threeList: [],//三级分类{type:13}
searching: false,//是否正在搜索中
studentInfo: {},
resonimg: {},
formatDate,
formatNum: formatUserNumber,
@@ -687,6 +715,17 @@ export default {
console.log(rs.message);
}
})
//初始化:获取最新前10个热点标签
apiCourseTag.getHotTagList(null).then(rs => {
if (rs.status == 200) {
this.hotTagsList = rs.result.map(tag => ({
...tag,
checked: false
}));
} else {
console.log(rs.message);
}
})
},
mounted() {
let screenWidth = window.screen.availWidth;
@@ -852,10 +891,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();
},
@@ -893,28 +976,33 @@ export default {
this.searchData();
},
// 清除
handleClearTags() {
//清空所有的条件
this.keyword = '';
this.ctypeList.forEach(item => {
item.checked = false;
handleClearTags() {
//清空所有的条件
this.keyword = '';
this.ctypeList.forEach(item => {
item.checked = false;
});
this.hotTagsList.forEach(item => {
item.checked = false;
});
this.course.tags = ''; // 清空标签ID
// 添加清除三级分类的逻辑
this.oneList.forEach(one => {
one.checked = false;
one.children.forEach(two => {
two.checked = false;
two.children.forEach(three => {
three.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();
},
});
});
// 清空导航标题
this.navTitle = [];
this.searchData();
},
// 导航切换(录播课，线下课，学习项目)
handleTypeClick(item, list) {
item.checked = !item.checked;
@@ -926,11 +1014,24 @@ export default {
this.searchData();
},
//点击标签
handleTagClick(item, list) {
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;
// 强制触发stagList重新计算
this.$nextTick(() => {
this.searchData();
});
},
//三级分类
handleOptionClick(item, level, list) {
// 线上品牌展示效果
this.newData = item.newData;
console.log(this.newData);
// 单选，排除法
this.oneList.forEach(one => {
one.checked = false;
@@ -1307,12 +1408,18 @@ export default {
},
getAllChecked() { //获取全部选中的标签
let list = [];
//获取选中的课程类型
this.ctypeList.forEach(item => {
if (item.checked) {
list.push(item);
}
});
//获取选中的热点标签
this.hotTagsList.forEach(item => {
if (item.checked) {
list.push(item);
}
});
this.oneList.forEach(one => {
one.children.forEach(two => {
two.children.forEach(three => {
@@ -1375,7 +1482,18 @@ export default {
that.course.sysType3 += item.id;
}
});
apiCourseTag.getHotTagList(that.course).then(rs => {
if (rs.status == 200) {
// 保留已选中标签的状态
const currentCheckedTags = this.hotTagsList.filter(tag => tag.checked);
this.hotTagsList = rs.result.map(tag => ({
...tag,
checked: currentCheckedTags.some(checkedTag => checkedTag.id === tag.id)
}));
} else {
console.log(rs.message);
}
}),
this.isFind = true;
this.course.device = 1;
if (this.course.pageIndex == 1) {
@@ -1417,7 +1535,7 @@ export default {
item.name = item.name;
}
});
console.log(res.result.list,'data')
console.log(res.result.list,'data')
this.courseList = res?.result?.list ?? []
console.log(this.courseList);
if (this.newData) {
@@ -2421,4 +2539,73 @@ console.log(res.result.list,'data')
.option-active {
color: #387DF7;
}</style>
}
/* 项目简介 方法一：外部 CSS 类 */
::v-deep.el-dialog {
border-radius: 3% 3% 1% 1%;
padding: 0;
}
::v-deep.custom-class .el-dialog__header {
height: 100px;
margin: 0 !important;
padding: 0 !important;
background-image: url('../../../assets/images/project/title-bg.png');
background-size: 100% 100%; /* 完全填充 */
display: block; /* 避免行内元素空隙 */
}
::v-deep.custom-class .el-dialog__header .el-dialog__title {
padding: 0 !important;
font-size: 35px;
font-weight: bold;
color: white;
margin: 60px;
line-height: 100px;
}
::v-deep.custom-class .el-dialog__body {
margin: 0 !important;
padding: 0 !important;
}
/* ---end--- */
/* ---标签管理 added by zhengsongbo on 2025-08-01--- */
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
.option-item {
margin: 0px 5px;
}
/* 热点标签：自定义按钮样式 */
a.custom {
/* 基础样式 */
display: inline-block; /* 使内边距生效 */
padding: 1px; /* 按钮内边距 */
margin: 1px 5px;
background-color: #F2F2F2; /* 淡灰色背景 */
color: #333; /* 文字颜色 */
text-decoration: none; /* 去除下划线 */
border-radius: 3px; /* 圆角设计 */
font-family: Arial, sans-serif; /* 字体 */
font-size: 14px; /* 文字大小 */
height: 24px;
line-height: 20px;
/* 过渡效果，使颜色变化更平滑 */
transition: background-color 0.2s ease;
}
/* 鼠标悬停效果 */
a.custom:hover {
background-color: #DDEDFF; /* 浅蓝色背景 */
}
/* 可选：点击时效果 */
a.custom:active {
background-color: #757575; /* 点击时更深的灰色 */
}
/* 鼠标悬停效果 */
a.custom2 {
background-color: #DDEDFF; /* 浅蓝色背景 */
}
/* ---end--- */
</style>