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

Merge remote-tracking branch '121/test1024' into test1024

Browse Source
This commit is contained in:
joshen
2025-11-11 15:00:07 +08:00
parent c2cff99f67 b8cfe01ed9
commit 1471a4d01a
6 changed files with 797 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/modules/course.js
View File

@@ -440,6 +440,12 @@ const queryCrowd=function(query){
const ids=function (data){
return ajax.postJson('/xboe/m/course/manage/ids',data);
}
const saveTip = function() {
return ajax.postJson('/xboe/m/course/manage/saveTip');
}
export default {
saveBase,
submitCourse,
@@ -482,6 +488,7 @@ export default {
exportCourseAudit,
exportCourse,
queryCrowd,
ids
ids,
saveTip
}

267
src/components/Course/courseForm.vue
View File

@@ -41,6 +41,41 @@
<el-button @click="toInputCourse()" type="primary">确定</el-button>
</span> -->
</el-dialog>
<!-- 蒙层引导组件 -->
<div v-if="showGuidance" class="guidance-overlay" @click="closeGuidance">
<div class="guidance-content">
<div class="guidance-title">操作引导</div>
<div class="guidance-steps">
<div class="guidance-step" :class="{ active: currentStep === 1 }">
<div class="step-number">1</div>
<div class="step-content">
<div class="step-title">设置内容分类</div>
<div class="step-desc">当选择内容分类后，其关联标签将在下拉列表中优先显示。</div>
</div>
</div>
<div class="guidance-step" :class="{ active: currentStep === 2 }">
<div class="step-number">2</div>
<div class="step-content">
<div class="step-title">添加课程标签</div>
<div class="step-desc">为课程添加相关标签,最多5个，便于搜索和分类,可回车创建新标签</div>
</div>
</div>
</div>
<!-- <div class="guidance-actions">
<el-button @click="previousStep1" v-if="currentStep > 1">上一步</el-button>
<el-button type="primary" @click="nextStep">
{{ currentStep === 2 ? '完成' : '下一步' }}
</el-button>
<el-button @click="closeGuidance">跳过引导</el-button>
</div>-->
</div>
</div>
<!-- 高亮指引元素 -->
<div v-if="showGuidance" class="highlight-element" :style="highlightStyle"></div>
<!--微课-->
<el-dialog v-if="weike.dlgShow" width="980px" :title="curCourseId == '' ? '新建课程' : '编辑课程'" :visible.sync="weike.dlgShow" :close-on-click-modal="false" custom-class="g-dialog" top="8vh">
<el-form label-width="100px" size="small" class="wei-from" style="min-height: 600px;">
@@ -64,18 +99,26 @@
</span>
</div>
</el-form-item>
<el-form-item label="内容分类" required>
<el-form-item label="内容分类" required class="guidance-highlight" data-step="1">
<el-cascader
placeholder="选择内容分类"
style="width: 100%;"
clearable
v-model="sysTypeList"
:props="{ value: 'id', label: 'name' }"
:options="sysTypeListMap"></el-cascader>
:options="sysTypeListMap"
@focus="onContentTypeFocus"
@change="onContentTypeChange">
</el-cascader>
</el-form-item>
<el-form-item label="标签" required>
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
<el-form-item label="标签" required class="guidance-highlight" data-step="2">
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
:initialTags="courseTags" @change="handleTagsChange"
@focus="onTagFocus">
</courseTag>
</el-form-item>
<el-form-item label="资源归属" required>
<el-input placeholder="请选择" v-model="orgName" >
<el-button v-if="identity==3 || identity==5" @click="showChooseOrg()" slot="append" icon="el-icon-search">选择</el-button>
@@ -221,14 +264,16 @@
</div>
</el-col>
<el-col :span="12">
<el-form-item label="内容分类" required>
<el-form-item label="内容分类" required class="guidance-highlight" data-step="1">
<el-cascader
placeholder="选择内容分类"
style="width: 100%;"
clearable
v-model="sysTypeList"
:props="{ value: 'id', label: 'name' }"
:options="sysTypeListMap">
:options="sysTypeListMap"
@focus="onContentTypeFocus"
@change="onContentTypeChange">
</el-cascader>
</el-form-item>
@@ -256,9 +301,13 @@
</el-select> -->
<choice :teacherValue="teacherValues" @getTeacherList="getTeacherList"></choice>
</el-form-item>
<el-form-item label="标签" required>
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
<el-form-item label="标签" required class="guidance-highlight" data-step="2">
<courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList"
:initialTags="courseTags" @change="handleTagsChange"
@focus="onTagFocus">
</courseTag>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model.trim="keywords" maxlength="100" @keyup.enter.native="changeKeywords" placeholder="请输入关键字"></el-input>
<el-tag v-for="(tag,index) in tips" size="small" :key="index" closable type="info" @close="closeKeywordsTag(tag,index)">
@@ -536,7 +585,13 @@ export default {
dlgShow: false
},
rightTypeId: {},
catalogSortDialogShow: false
catalogSortDialogShow: false,
// 蒙层引导相关数据
showGuidance: false,
currentStep: 1,
highlightStyle: {},
guidanceElements: [],
isFirstCreate: false, // 标记是否为首次创建
};
},
created() {
@@ -849,7 +904,7 @@ export default {
},
resetCurCourseContent() {
this.curContent = { id: '', contentType: 0, contentName: '', content: '', csectionId: '', contentName: '', contentRefId: '', courseId: this.courseInfo.id };
this.curContent = { id: '', contentType: 0, contentName: '', content: '', csectionId: '', contentRefId: '', courseId: this.courseInfo.id };
},
// chooseCourseType(item, idx, open) {
// this.courseChooseId = item.id;
@@ -897,6 +952,12 @@ export default {
this.courseInfo = rs.result;
this.curCourseId = this.courseInfo.id
console.log('保存课程成功',this.curCourseId)
console.log('isTip ',this.courseInfo.isTip)
if(this.courseInfo.isTip){
// 检查是否为首次创建，显示引导
this.checkAndShowGuidance();
}
if (this.courseChooseId == 1) {
this.weike.dlgShow = true;
} else {
@@ -904,12 +965,102 @@ export default {
}
this.$nextTick(() => {
this.initTagComponent();
// 如果显示引导，初始化高亮元素
if (this.showGuidance) {
this.$nextTick(() => {
this.initGuidanceElements();
this.highlightCurrentStep();
});
}
});
} else {
this.$message.error(rs.message);
}
});
},
// 检查并显示引导
checkAndShowGuidance() {
// 检查本地存储，判断是否为首次创建
const hasShownGuidance = localStorage.getItem('course_creation_guidance_shown');
if (!hasShownGuidance) {
this.showGuidance = true;
this.currentStep = 1;
this.isFirstCreate = true;
// 标记引导已显示
localStorage.setItem('course_creation_guidance_shown', 'true');
apiCourse.saveTip();
}
},
// 初始化引导元素
initGuidanceElements() {
this.guidanceElements = Array.from(document.querySelectorAll('.guidance-highlight'));
},
// 高亮当前步骤对应的元素
highlightCurrentStep() {
if (this.guidanceElements.length === 0) return;
const currentElement = this.guidanceElements[this.currentStep - 1];
if (currentElement) {
const rect = currentElement.getBoundingClientRect();
this.highlightStyle = {
top: `${rect.top}px`,
left: `${rect.left}px`,
width: `${rect.width}px`,
height: `${rect.height}px`,
};
// 滚动到可见区域
currentElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
},
// 下一步
nextStep() {
if (this.currentStep < 2) {
this.currentStep++;
this.highlightCurrentStep();
} else {
this.closeGuidance();
}
},
// 上一步
previousStep1() {
if (this.currentStep > 1) {
this.currentStep--;
this.highlightCurrentStep();
}
},
// 关闭引导
closeGuidance() {
this.showGuidance = false;
this.currentStep = 1;
this.highlightStyle = {};
},
// 内容分类获得焦点时的处理
onContentTypeFocus() {
if (this.showGuidance && this.currentStep === 1) {
this.currentStep = 2;
this.highlightCurrentStep();
}
},
// 内容分类改变时的处理
onContentTypeChange() {
if (this.showGuidance && this.currentStep === 1) {
this.currentStep = 2;
this.highlightCurrentStep();
}
},
// 标签获得焦点时的处理
onTagFocus() {
if (this.showGuidance && this.currentStep === 2) {
this.closeGuidance();
}
},
// 新增初始化标签方法
initTagComponent() {
if (this.$refs.courseTag) {
@@ -1816,4 +1967,100 @@ export default {
}
}
}
/* 蒙层样式 */
.guidance-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.guidance-content {
background: white;
border-radius: 8px;
padding: 24px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 10000;
}
.guidance-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.guidance-steps {
margin-bottom: 20px;
}
.guidance-step {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
opacity: 0.5;
transition: opacity 0.3s;
}
.guidance-step.active {
opacity: 1;
}
.step-number {
width: 24px;
height: 24px;
background: #409EFF;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 14px;
}
.step-content {
flex: 1;
}
.step-title {
font-weight: bold;
margin-bottom: 4px;
}
.step-desc {
color: #666;
font-size: 14px;
}
.guidance-actions {
display: flex;
justify-content: center;
gap: 12px;
}
/* 高亮元素样式 */
.highlight-element {
position: fixed;
border: 2px solid #409EFF;
border-radius: 4px;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4), 0 0 15px rgba(64, 158, 255, 0.5);
z-index: 9998;
pointer-events: none;
transition: all 0.3s ease;
}
/* 被高亮元素的样式 */
.guidance-highlight {
position: relative;
z-index: 10001;
}
</style>

42
src/components/Course/courseTag.vue
View File

@@ -1,22 +1,22 @@
<template>
<div class="tag-container">
<div class="tag-container" @click="handleContainerClick">
<el-select style="width: 100%;"
v-model="selectedTags"
multiple
filterable
value-key="id"
remote
reserve-keyword
:remote-method="debouncedSearch"
:loading="loading"
:placeholder="'回车创建新标签'"
@remove-tag="handleTagRemove"
@change="handleSelectionChange"
@keyup.enter.native="handleEnterKey"
@keyup.delete.native="handleDeleteKey"
@focus="handleFocus"
ref="tagSelect"
v-model="selectedTags"
multiple
filterable
value-key="id"
remote
reserve-keyword
:remote-method="debouncedSearch"
:loading="loading"
:placeholder="'回车创建新标签'"
:no-data-text="'无此标签，按回车键创建'"
@remove-tag="handleTagRemove"
@change="handleSelectionChange"
@keyup.enter.native="handleEnterKey"
@keyup.delete.native="handleDeleteKey"
@focus="handleFocus"
ref="tagSelect"
>
<el-option
v-for="item in searchResults"
@@ -141,6 +141,11 @@ export default {
if (this.sysTypeList.length > 0) {
await this.doSearch('');
}
this.$emit('focus');
},
handleContainerClick() {
// 容器点击时也触发焦点事件
this.$emit('focus');
},
// 新增：重置标签状态的方法
resetTagState() {
@@ -313,7 +318,7 @@ export default {
this.searchResults = tags
// 当搜索结果为空时，提示用户可以按回车键创建标签
if (tags.length === 0) {
this.$message.info('无此标签，按回车键创建')
// this.$message.info('无此标签，按回车键创建')
}
} finally {
this.loading = false
@@ -361,6 +366,7 @@ export default {
}
::v-deep(.el-tag) {
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
box-sizing: border-box;
margin-right: 8px;

42
src/views/portal/course/Detail.vue
View File

@@ -30,8 +30,13 @@
<!-- <div class="course-title-right"> -->
<!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
<!-- </div> -->
<div class="label-div">
<!-- <div class="label-div">
<el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
</div>-->
<div class="label-div">
<div v-for="(item, tagIdx) in tagArray" :key="tagIdx" class="keyword-tag">
{{ item }}
</div>
</div>
<div>
<div class="study-count">{{courseInfo.studys}}人学习</div>
@@ -420,7 +425,7 @@ export default {
.course-title{
position: relative;
height: 60px;
height: auto;
display: flex;
justify-content: space-between;
.title {
@@ -458,13 +463,40 @@ export default {
color: #444444;
}
//.label-div {
// margin: 5px 0;
// min-height: 20px;
// .label-item {
// padding: 0px 8px;
// margin-top: 5px;
// float: left;
// line-height: 24px;
// font-size: 12px;
// border-radius: 2px;
// margin-right: 8px;
// color: #2C68FF;
// height: 24px;
// background: rgba(44, 104, 255, 0.06);
// border: none; // 或者使用 border-color: transparent;
// }
//}
.label-div {
margin: 5px 0;
min-height: 20px;
.label-item {
padding: 0 7px;
.keyword-tag {
padding: 0px 8px;
margin-top: 5px;
float: left;
line-height: 24px;
font-size: 12px;
border-radius: 2px;
margin-right: 8px;
margin-bottom: 0px;
color: #2974D6;
height: 24px;
background: rgba(41, 116, 214, 0.1);
font-weight: 450;
display: inline-block;
}
}
::v-deep .el-rate__icon {

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

@@ -62,279 +62,67 @@
</div>
</div>
<div id="fixd-box">
<!-- 好评榜 -->
<!-- <div class="portal-ranking-list ranking-bg">
<div class="ranking-title">好评榜</div>
<ul class="ranking-data">
<li class="list-info" v-for="(item, index) in scorelist" :key="index"
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<a style="display: inherit" @click="toCourseDetail(item)">
<span class="portal-right-text blue-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
</span>
<span class="portal-right-text blue-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
</span>
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
style="font-size: 14px;">{{ item.name }}</span>
<span class="portal-title-desc" v-else style="font-size: 14px;">
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
</span>
<div class="list-active">
<div class="list-content">
<div class="list-img">
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<span v-if="item.type == 30" class="course-type">线下课</span>
<span v-if="item.type == 40" class="course-type">学习项目</span>
</div>
<div class="list-text">
<h6 class="index-one-line-ellipsis">{{ item.name }}</h6>
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
</div>
</div>
<div class="list-bottom">
<couresinteract :type="1" :data="item"></couresinteract>
</div>
</div>
</a>
</li>
</ul>
</div> -->
<!-- 人气榜 -->
<!-- <div style="margin-top:26px" class="portal-ranking-list ranking-bg1">
<div class="ranking-title">人气榜</div>
<ul class="ranking-data">
<li class="list-info" v-for="(item, index) in ankingList" :key="index"
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<a style="display: inherit" @click="toCourseDetail(item)">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-title-desc title-line-ellipsis" v-if="item.images == ''"
style="font-size: 14px;">{{ item.name }}</span>
<span class="portal-title-desc" v-else style="font-size: 14px;">
<span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
</span>
<div class="list-active">
<div class="list-content">
<div class="list-img">
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<span v-if="item.type == 30" class="course-type">线下课</span>
<span v-if="item.type == 40" class="course-type">学习项目</span>
</div>
<div class="list-text">
<h6 class="index-one-line-ellipsis">{{ item.name }}</h6>
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
</div>
</div>
<div class="list-bottom">
<couresinteract :type="1" :data="item"></couresinteract>
</div>
</div>
</a>
</li>
</ul>
</div> -->
<!-- 热榜 -->
<!-- <div style="margin-top:26px" class="portal-ranking-list ranking-bg2">
<div class="ranking-title">热度榜</div>
<ul class="ranking-data">
<li class="list-info" v-for="(item, index) in hotList" :key="index"
style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
<a style="display: inherit" @click="toCourseDetail(item)">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/listred02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listred03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-title-desc title-line-ellipsis list-lidex" v-if="item.images == ''"
style="font-size: 14px;">{{ item.courseName }}</span>
<span class="portal-title-desc " v-else style="font-size: 14px;">
<span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
</span>
<div class="list-active">
<div class="list-content">
<div class="list-img">
<course-image :course="item" :text="false" width="108px" height="60px"></course-image>
<span v-if="item.type < 21" class="course-type">录播</span>
<span v-if="item.type == 30" class="course-type">线下课</span>
<span v-if="item.type == 40" class="course-type">学习项目</span>
</div>
<div class="list-text">
<h6 class="index-one-line-ellipsis">{{ item.courseName }}</h6>
<span class="index-one-line-ellipsis">{{ item.publishTime }}</span>
</div>
</div>
<div class="list-bottom">
<couresinteract :type="1" :data="item"></couresinteract>
</div>
</div>
</a>
</li>
</ul>
</div> -->
</div>
</div>
<!-- 右侧 -->
<div class="xcontent2-main content-div">
<!-- 之前的 -->
<!-- <div class="search-div" style="margin-right:36px">
<div class="searchbar" style="padding-right: 40px;" v-if="stagList.length > 0">
<span @click="handleClearTags" style="float: right;margin-top: 6px;margin-right: -20px;color: #858585;cursor: pointer;" title="清除查询条件"><i class="el-icon-close"></i> 清除</span>
<div style="line-height: 30px;">
<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>
</div>
</div>
<div class="search-item">
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;padding-right: 10px;">
<span class="item-title" style="padding-right: 5px;">授课方式:</span>
</div>
<div>
<a @click="handleTypeAllClick(1)" class="option-item" :class="{'option-active':ctypeTagAll}">全部</a>
<a @click="handleTypeClick(ctypeList[0],ctypeList)" class="option-item" :class="{'option-active':ctypeList[0].checked}">录播课</a>
<a @click="handleTypeClick(ctypeList[1],ctypeList)" class="option-item" :class="{'option-active':ctypeList[1].checked}">线下课</a>
<a class="option-border"> </a>
<a @click="handleTypeClick(ctypeList[2],ctypeList)" class="option-item" :class="{'option-active':ctypeList[2].checked}">学习项目</a>
</div>
</div>
</div>
<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>
<div>
<a @click="handleTypeAllClick(11)" class="option-item" :class="{'option-active':oneTagAll}">全部</a>
<a v-for="one in oneList" @click="handleOptionClick(one,oneList,1)" class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
<a class="option-border"> </a>
<a class="option-item">
<span @click="uClassClick" class="Uxtext" style=""> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</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,twoList,2)" 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,threeList,3)" class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
</div>
</div>
</div>
</div> -->
<!-- 内容导航 -->
<div class="topNav" v-if="!newData">
<div class="search-div nav" style="height: 100px;flex: 1;">
<div @click="handleTypeAllClick(1)" class="option-item" style="font-weight: bold;position: relative;margin-right: 20px;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
<div class="search-div nav" style="flex: 1;height: auto;background: #fff;">
<div class="nav-primary" style="gap: 15px;display: flex">
<div @click="handleTypeAllClick(1)" class="option-item" style="position: relative;" :class="{ 'option-active': ctypeTagAll }">
<a>全部</a>
<span :class="ctypeTagAll ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
: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"
: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"
: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" > U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
</div>
<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" 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" 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="font-weight: bold"> U选小课堂
<span class="uxicon">
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
</span>
</span>
</a>
<!-- 修改热点标签区域 -->
<div style="margin-top:10px;flex: 1;">
<!-- <div class="search-item-type" style="padding-top: 2px; float: left;">
<span class="item-title" style="padding-right: 5px;">热点标签:</span>
</div>-->
<!-- 修改热点标签容器，支持换行 -->
<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="hot-tags-wrapper">
<div
class="option-item" style=" 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
class="option-item" style=" 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>
@@ -351,11 +139,10 @@
</div>
<!-- 清除 -->
<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 class="searchbar" style="display: flex;justify-content: space-between;">
<div style="line-height: 30px;">
<span class="item-title"> 搜索条件:</span>
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)"
:style="{ color: tag.type === 0 ? '#ff0000' : '' }">
<el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t' + tagIdx" @close="stagClose(tag, tagIdx)" >
{{ tag.tagName }}
</el-tag>
</div>
@@ -397,10 +184,10 @@
v-for="(tag, tagIndex) in cinfo.tagsList"
:key="tagIndex"
size="mini"
type="info" style="margin: 2px 2px; border-radius: 2px;"
:style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
type="info"
style="margin: 2px 2px; border-radius: 2px;"
>
{{ tag }}
<span v-html="highlightTagKeyword(tag)"></span>
</el-tag>
</div>
<!-- 关键字 -->
@@ -847,6 +634,38 @@ export default {
// window.removeEventListener("scroll", this.handleScroll);
},
methods: {
highlightTagKeyword(tag) {
if (!this.stagList || this.stagList.length === 0) {
return tag; // 没有搜索条件时返回原标签
}
// 获取所有搜索关键字
const searchKeywords = this.stagList.map(searchTag =>
searchTag.tagName || searchTag.name
).filter(keyword => keyword && keyword.trim());
if (searchKeywords.length === 0) {
return tag; // 没有有效关键字时返回原标签
}
let highlightedTag = tag;
// 对每个搜索关键字进行高亮处理
searchKeywords.forEach(keyword => {
if (tag.includes(keyword)) {
// 使用正则表达式进行全局不区分大小写的匹配
const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
}
});
return highlightedTag;
},
// 辅助方法：转义正则表达式特殊字符
escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
isTagMatched(tag) {
// 检查stagList中是否有匹配的标签
@@ -1856,6 +1675,9 @@ export default {
.topNav {
display: flex;
margin-bottom: 20px;
height: auto;
min-height: 80px;
align-items: center;
.nav {
display: flex;
@@ -1863,6 +1685,7 @@ export default {
.option-item {
position: relative;
margin: 0 15px;
.nav-bottbor {
position: absolute;
@@ -2333,8 +2156,8 @@ export default {
margin-left: 15px;
font-size: 14px;
color: #3d3d3d;
cursor: pointer;
position: relative;
//cursor: pointer;
//position: relative;
}
.uxicon {
@@ -2408,7 +2231,7 @@ export default {
}
.searchbar {
background-color: #ffffff;
//background-color: #ffffff;
// border: 1px solid #f3f3f3;
// width: 900px;
// padding: 5px 20px;
@@ -2462,9 +2285,15 @@ export default {
}
.search-div {
background: #fff;
//background: #fff;
padding: 10px 25px;
border-radius: 8px;
height: auto;
min-height: 60px;
.nav {
background: #fff;
}
::v-deep .el-input {
width: 420px;
@@ -2588,7 +2417,8 @@ export default {
color: #3d3d3d;
display: inline-block;
font-size: 14px;
margin: 0px 15px;
//margin: 0px 15px;
font-weight: normal;
}
.option-border {
@@ -2628,12 +2458,23 @@ export default {
padding: 0 !important;
}
/* ---end--- */
/* ---标签管理 added by zhengsongbo on 2025-08-01--- */
// 2025-11-07 10:00 修改
.search-div.nav {
display: block;
width: 100%;
clear: both;
}
//.search-div.nav {
// display: flex;
// flex-direction: column;
// height: auto;
// min-height: 100px;
//}
//.hot-tags-area {
// width: 100%;
// margin-top: 15px;
//}
.option-item {
margin: 0px 5px;
}
@@ -2672,7 +2513,7 @@ a.custom2 {
.hot-tags-container {
display: inline-block;
white-space: nowrap;
//white-space: nowrap;
overflow-x: auto;
vertical-align: top;
}
@@ -2705,16 +2546,6 @@ a.custom2 {
color: #387DF7 !important; // 匹配时的蓝色
}
/* 添加热点标签容器样式，支持换行 */
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-top: 2px;
//margin-left: 90px; /* 为"热点标签:"文本留出空间 */
}
/* 调整option-item样式以适应换行布局 */
.option-item {
position: relative;
@@ -2745,5 +2576,58 @@ a.custom2 {
gap: 5px;
}
}
/* ---end--- */
// 2025-11-07 10:00 修改
.hot-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding-top: 2px;
}
//.hot-tags-wrapper {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
// gap: 15px 20px;
// align-items: center;
// justify-items: start;
// width: 100%;
// padding: 10px 0;
//}
//.hot-tags-wrapper .option-item {
// position: relative;
// cursor: pointer;
// white-space: nowrap;
// padding: 5px 10px;
// text-align: center;
//}
.course-tags {
margin: 5px 0;
min-height: 20px;
}
.course-tag-item {
color: #333333;
}
.course-tag-item[style*="color: #387DF7"] {
color: #387DF7 !important;
}
/* 添加关键字高亮样式 */
.keyword-highlight {
color: #387DF7 !important;
font-weight: bold;
}
/* 确保标签内的样式正确 */
.course-tags ::v-deep .el-tag {
color: #333333;
}
.course-tags ::v-deep .el-tag .keyword-highlight {
color: #387DF7 !important;
font-weight: bold;
}
</style>

640
src/views/portal/course/qualityCourse.vue
View File

@@ -2,48 +2,32 @@
<div id="couser-list-content" class="couser-list-content">
<div class="course-banner">
<portal-header current="course" textColor="#fff" :keywords="keyword" @emitInput="emitInput"
@showClass="showClass"></portal-header>
@showClass="showClass"></portal-header>
</div>
<div style="padding-top:30px">
<div class="xcontent2">
<!-- <div class="navTitle">
<a @click="handleClearTags">课程分类&nbsp;</a>
<span v-if="navTitle.length">></span>
<template v-if="navTitle.length">
<div class="oneTitle" v-for="(item, index) in navTitle" :key="item.id"
@click="handleOptionClick(item, index)">
<span class="titleName">&nbsp;{{ item.name }}&nbsp;</span>
<span v-if="index !== navTitle.length - 1">></span>
</div>
</template>
</div> -->
</div>
<div class="xcontent2">
<!-- 左侧三级 -->
<div class="xcontent2-minor" style="margin-right:36px;">
<!-- <router-link to="/courseRecommended" style="margin-bottom: 20px;" class="course-recommended-style">
<div class="imgTilte">
</div>
</router-link> -->
<div class="course-title-style">
<div class="imgTilte">
<div>精品课程</div>
<!-- <div>COURSE</div> -->
</div>
</div>
<div class="course-list">
<div class="course-one" v-for="one in oneList" :key="one.id" @click.stop="handleOptionClick(one, 1, oneList)">
<div class="course-one-content">{{ one.name }}</div>
<div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
@click.stop="handleOptionClick(twoList, 2, one.children)"
:class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
@mouseenter.stop="changeIndex(twoList.id)">
@click.stop="handleOptionClick(twoList, 2, one.children)"
:class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
@mouseenter.stop="changeIndex(twoList.id)">
<!-- 三级分类 -->
<el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
:disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover"
:visible-arrow="false" @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
: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">
@@ -51,8 +35,8 @@
</div>
<div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
<div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three">
:key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
class="course-three">
<span>{{ threeList.name }}</span>
</div>
</div>
@@ -70,38 +54,70 @@
<!-- 内容导航 -->
<div class="topNav" v-if="!newData" style="display: flex; flex-direction: row;background-color:#fff;">
<div>
<div class="search-div nav" style="height: 100px;flex: 1;">
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[0].checked }">
<a>全部</a>
<span :class="ctypeList[0].checked ? 'nav-bottbor' : ''"></span>
<!-- 修改后 -->
<div class="search-div nav" style="flex: 1;height: auto;">
<div class="nav-primary" style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex;">
<div @click="handleTypeClick(ctypeList[0], ctypeList)" class="option-item"
: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"
:class="{ 'option-active': ctypeList[1].checked }" style="padding-left: 15px;">
<a>内部专享</a>
<span :class="ctypeList[1].checked ? 'nav-bottbor' : ''"></span>
</div>
<div @click="handleTypeClick(ctypeList[2], ctypeList)" class="option-item"
:class="{ 'option-active': ctypeList[2].checked }" style="padding-left: 15px;">
<a>外部精选</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
</div>
</div>
<div @click="handleTypeClick(ctypeList[1], ctypeList)" class="option-item"
: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"
:class="{ 'option-active': ctypeList[2].checked }">
<a>外部精选</a>
<span :class="ctypeList[2].checked ? 'nav-bottbor' : ''"></span>
<div style="display: flex; align-items: center;">
<span style="margin-right: 10px;" class="option-item">请选择年份 </span>
<el-select v-model="yearChosen" multiple style="width: 150px;">
<el-option
v-for="year in years"
v-if="year"
:key="year"
:label="year"
:value="year">
</el-option>
</el-select>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between; align-items: center;">
<span style="margin-right: 10px;" class="option-item">请选择年份 </span>
<el-select v-model="yearChosen" multiple>
<el-option
v-for="year in years"
v-if="year"
:key="year"
:label="year"
:value="year">
</el-option>
</el-select>
<div style="margin-top:10px;flex: 1;">
<!-- 修改热点标签容器，支持换行 -->
<div class="hot-tags-wrapper" style="display: flex;">
<div class="hot-tags-wrapper" style="display: flex; align-items: center;">
<div
class="option-item"
style=" padding-top: 2px; margin-left: 15px;"
:class="{ 'option-active': isAllHotTagsSelected }"
@click="handleClearHotTags"
>
<span>全部</span>
<span :class="isAllHotTagsSelected ? 'nav-bottbor' : ''"></span>
</div>
<div
class="option-item"
style=" 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>
@@ -112,7 +128,7 @@
<div style="line-height: 30px;">
<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.name }}</el-tag>
</div>
<div>
<el-button type="primary" size="mini" @click="handleClearTags">清除</el-button>
@@ -125,13 +141,13 @@
<div class="order-div" v-if="!newData">
<span class="quyer-tag">
<el-button type="text" class="order-class" @click="orderChange('DEFAULT')"
:class="{ actice: course.orderField == 'DEFAULT' }">全部课程</el-button>
:class="{ actice: course.orderField == 'DEFAULT' }">全部课程</el-button>
<el-button type="text" class="order-class" @click="orderChange('HOT')"
:class="{ actice: course.orderField == 'HOT' }">最热</el-button>
:class="{ actice: course.orderField == 'HOT' }">最热</el-button>
<el-button type="text" class="order-class" @click="orderChange('NEW')"
:class="{ actice: course.orderField == 'NEW' }">最新</el-button>
:class="{ actice: course.orderField == 'NEW' }">最新</el-button>
<el-button type="text" class="order-class" @click="orderChange('GOOD')"
:class="{ actice: course.orderField == 'GOOD' }">好评率</el-button>
:class="{ actice: course.orderField == 'GOOD' }">好评率</el-button>
</span>
<span class="order-count">
共找到<span>{{ count }}</span>个结果
@@ -148,11 +164,23 @@
<span v-if="cinfo.type == 40" class="course-type-left">学习项目</span>
</div>
<div class="course-title two-line-ellipsis" :title="cinfo.title" v-html="cinfo.courseName"></div>
<!-- 添加标签显示区域 -->
<div class="course-tags" v-if="cinfo.tagsList && cinfo.tagsList.length > 0">
<el-tag
v-for="(tag, tagIndex) in cinfo.tagsList"
:key="tagIndex"
size="mini"
type="info" style="margin: 2px 2px; border-radius: 2px;"
:style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
>
{{ tag }}
</el-tag>
</div>
<!-- 关键字 -->
<div class="keywordInfo-every">
<div class="keywordInfo" v-for="(keyword, index) in cinfo.keywordsActive" :key="index">
<el-tooltip popper-class="keywordInfo-class" :visible-arrow="false"
:disabled="!keyword.showTitle">
:disabled="!keyword.showTitle">
<template #content>
<span v-html="keyword.title"></span>
</template>
@@ -160,7 +188,7 @@
</el-tooltip>
</div>
</div>
<!-- {{cinfo}}-->
<!-- {{cinfo}}-->
<div class="couresstartTime">
<span v-if="cinfo.type == 30 && cinfo.startTime">开课时间：{{ cinfo.startTime }}</span>
</div>
@@ -176,7 +204,7 @@
<div class="course-info-score">
<div style="display: flex;">
<interactBar :type="1" nodeWidth="20px" :data="cinfo" :courseExclusive="true" :comments="false"
:praises="false" :shares="false" :views="false"></interactBar>
:praises="false" :shares="false" :views="false"></interactBar>
<div v-if="cinfo.courseScore">
<span class="course-score-value">{{ toScore(cinfo.courseScore) }}分</span>
</div>
@@ -221,7 +249,7 @@
</span>
<div v-if="courseList.length > 0">
<pagination :size="course.pageSize" :total="Number(count)" :page="course.pageIndex"
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
</div>
</div>
</div>
@@ -258,17 +286,6 @@
<div class="text_msg">
创新力专区课程版权已到期！
</div>
<!-- <div class="cyl" @click="cylClick">
<div class="tyl_title">
<img src="../../../assets/images/cyl.png" alt="" class="tyl_title_img" />
<span class="tyl_title_msg">创新力专区</span>
</div>
<div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
<div class="tyl_msg">
内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙<br/>
创新力专区课程版权将于2024年4月16日到期，逾期将无法继续访问，请尽快完成学习
</div>
</div> -->
</div>
</div>
</div>
@@ -296,7 +313,7 @@ import {formatDate, formatUserNumber, toScore} from "@/utils/tools.js";
import apiSearchterm from "@/api/modules/searchterm.js";
import apiPlace from "@/api/phase2/place.js"
import {qualityCourseTimeMark, qualityPageList} from "@/api/phase2"
import apiCourseTag from '@/api/modules/courseTag.js'
export default {
name: "index",
components: {
@@ -317,7 +334,7 @@ export default {
},
// 取消搜索条件标签展示
stagList() { //计算出选择的内容
/*stagList() { //计算出选择的内容
let list = [];
if (this.keyword) {
list.push({
@@ -327,12 +344,6 @@ export default {
checked: true
})
}
// 取消 全部 内部专享 外部精选 三种的显示
// this.ctypeList.forEach(item => {
// if (item.checked) {
// list.push(item);
// }
// });
this.oneList.forEach(one => {
var twoChildChecked = false;//是否有下级
one.children.forEach(two => {
@@ -354,22 +365,77 @@ export default {
list.push(one);
}
})
// 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;
},*/
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,
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;
one.children.forEach(two => {
if (two.checked) {
twoChildChecked = true;
}
var threeChildChecked = false;
two.children.forEach(three => {
if (three.checked) {
list.push({
...three,
tagName: three.name
});
threeChildChecked = true;
}
});
if (two.checked && !threeChildChecked) {
list.push({
...two,
tagName: two.name
});
}
});
if (one.checked && !twoChildChecked) {
list.push({
...one,
tagName: one.name
});
}
});
return list;
},
ctypeTagAll() {
@@ -378,24 +444,6 @@ export default {
});
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 {
@@ -463,7 +511,9 @@ export default {
searchRecords: [],
hotList: [],
totalPages: 1,
localSessionKey: this.$xpage.constants.localCourseFiltersKey
localSessionKey: this.$xpage.constants.localCourseFiltersKey,
hotTagsList: [],
isAllHotTagsSelected: true,
};
},
// 受众需要每次刷新
@@ -483,17 +533,6 @@ export default {
qualityCourseTimeMark().then(response=>{
this.years = response.data.result
})
// let screenWidth = window.screen.availWidth;
// if (screenWidth < 1280) {
// this.course.pageSize = 9;
// this.columns = 3;
// } else if (screenWidth < 1600) {
// this.course.pageSize = 12;
// this.columns = 3;
// } else if (screenWidth >= 1600) {
// this.course.pageSize = 15;
// this.columns = 3;
// }
let el_top = document.querySelector("#searchbar");
let el_search = document.querySelector("#searchbar");
@@ -519,8 +558,6 @@ export default {
this.loadSysTypes();
this.getScoreList();
this.getHotList();
// this.toCourseDetail(item);
// this.orderChange(id);
//查询排行榜，页面打开只查询一次
let localKey = "user_" + this.userInfo.sysId + "_gids";
if (this.audiences.length == 0) {
@@ -539,30 +576,48 @@ export default {
}
this.search();
})
// Promise.all([apiOldCourse.audience(this.userInfo.sysId),apiUserGroup.userGroupIds()]).then(rs=>{
// //console.log(rs,'rs');
// let aids=[];
// if(rs[0].status==200){
// aids.push(rs[0].result);
// }
// if(rs[1].status==200){
// aids.push(rs[1].result);
// }
// this.audiences=aids;
// sessionStorage.setItem(localKey,this.audiences);
// this.search();
// })
}
}
//this.searchterm();//搜索词已经没有了
this.couresreso();//广告位
},
beforeDestroy() {
// window.removeEventListener("scroll", this.handleScroll);
},
methods: {
// isAllHotTagsSelected() {
// return !this.hotTagsList.some(tag => tag.checked);
// },
handleClearHotTags() {
// 清除所有热点标签的选中状态
this.hotTagsList.forEach(tag => {
tag.checked = false;
});
this.isAllHotTagsSelected = true;
// 清空course.tags
this.course.tags = '';
// 触发搜索
this.searchData();
},
handleTagClick(item, list,type) {
console.info('切换标签 item = ' + item)
this.isAllHotTagsSelected = false;
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
@@ -644,16 +699,61 @@ export default {
}
},
//搜索条件
// 搜索条件
stagClose(tag, tagIndex) {
this.courseChosen = void 0;
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.searchData();
},
isTagMatched(tag) {
// 检查stagList中是否有匹配的标签
return this.stagList.some(searchTag =>
searchTag.tagName === tag || searchTag.name === tag
);
},
// 导航全选
handleTypeAllClick(t) {
if (t == 1) {
@@ -691,10 +791,23 @@ export default {
handleClearTags() {
//清空所有的条件
this.keyword = '';
// 取消搜索条件标签展示
// this.ctypeList.forEach(item => {
// item.checked = false;
// });
// 清除课程类型
this.ctypeList.forEach(item => {
item.checked = false;
});
// 清除热点标签
this.hotTagsList.forEach(item => {
item.checked = false;
});
// 清空course.tags
this.course.tags = '';
// 清除年份选择
this.yearChosen = [];
// 清除三级分类
this.oneList.forEach(one => {
one.checked = false;
one.children.forEach(two => {
@@ -704,7 +817,8 @@ export default {
})
})
});
// 清除左侧被选中的内容
// 清除左侧被选中的内容
this.courseChosen = void 0;
this.twoList = [];
this.threeList = [];
@@ -713,6 +827,7 @@ export default {
sessionStorage.removeItem(this.localSessionKey)
this.searchData();
},
// 导航切换(录播课，线下课，学习项目)
handleTypeClick(item, list) {
// item.checked = !item.checked;
@@ -751,57 +866,6 @@ export default {
})
})
})
// item.checked = !item.checked;
//使用上面一行是可以多选，使用下面是单选
// list.forEach(row => {
// row.checked = false;
// })
// item.checked = true;
// //以下是新的规则的修改，
// if (!item.checked) {
// //清空它下面的所有的中的
// item.children.forEach(subItem => {
// subItem.checked = false;
// if (subItem.children) {
// subItem.children.forEach(sub => {
// sub.checked = false;
// })
// }
// });
// if (level == 1) {
// this.twoList = [];
// this.threeList = [];
// }
// if (level == 2) {
// this.threeList = [];
// }
// this.searchData();
// return;
// }
// let $this = this;
// if (level == 1) { //一级的情况
// this.twoList = [];
// this.threeList = [];
// let lastCheked = null;
// item.children.forEach(two => {
// $this.twoList.push(two);
// if (two.checked) {
// lastCheked = two;
// }
// });
// if (lastCheked != null) {
// $this.threeList = lastCheked.children;
// item.children.forEach(three => {
// });
// }
// } else if (level == 2) { //二级的情况
// this.threeList = item.children;
// } else if (level == 3) { //三级的情况
// }
//this.handleChangeTypes(item);
this.searchData();
},
// 无用
@@ -811,18 +875,6 @@ export default {
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);
// })
// }
// });
// }
// })
this.oneList.forEach(one => {
if (one.checked) {
one.children.forEach(two => {
@@ -853,15 +905,6 @@ export default {
checked: false
}
if (item.children) {
//增加死数据
// item.children.push({
// type: 12,
// id: item.id * (index + 200),
// name: '线上品牌系列课程',
// children: [],
// checked: false,
// newData: true
// })
item.children.forEach(subItem => {
let newSubItem = {
type: 12,
@@ -928,47 +971,16 @@ export default {
this.keyword = val;
this.searchData();
},
// 滚动
// handleScroll() {
// if (this.courseList.length > 6) {
// let innerHeight = document.querySelector("#couser-list-content").clientHeight;
// let outerHeight = document.documentElement.clientHeight;
// let scrollTop = document.documentElement.scrollTop;
// let outerWidth = document.querySelector(".xcontent2-minor").clientWidth;
// if (outerHeight + scrollTop + 350 >= innerHeight) {
// if (this.moreState == 1 && this.course.pageIndex < 4) {
// this.loadMore();
// }
// }
// //console.log(this.course.pageIndex,'this.course.pageIndex');
// //加此判断，是为了没有数据时的闪动问题
// //if(this.course.pageIndex >1){
// if (scrollTop > 1176) {
// document.querySelector("#fixd-box").style.cssText =
// "position: fixed;top: -882px;width:" + outerWidth + "px";
// } else {
// document.querySelector("#fixd-box").style.cssText = "position: static";
// }
// //}
// }
// },
toNeedCourse() {// 上传
// 需要先切换标签
//this.$store.dispatch('SetCurIdentity',2);
//this.$router.push('/need/course?open=new');
toNeedCourse() {
this.$refs.floatTools.toNeedCourse();
},
searchData() {
searchData(type) {
this.course.pageIndex = 1;
this.noPageList = true; //判断接口是否还有数据
this.noDataList = true; //判断接口是否还有数据
this.courseList = [];
this.totalPages = 4;
this.search();
this.search(type);
},
inputOn() {
this.$forceUpdate();
@@ -1128,17 +1140,12 @@ export default {
return list;
},
// 查询
async search () {
//
async search (type) {
if (this.searching) {
this.$message.warning("正在搜索中，请待搜索完成后再重新搜索");
return;
}
this.searching = true;
//测试时间格式化
// let s=1650973801;
// var d = new Date(1650973801*1000);
// console.log(formatDateByFmt(d,'yyyy-MM-dd hh:mm'),'data');
this.saveLocalFilters();
let that = this;
if (this.keyword) {
@@ -1149,7 +1156,6 @@ export default {
this.course.audiences = this.audiences.join(",");
}
//console.log(this.userInfo)
//this.course.companyId=this.userInfo.companyId;
this.course.type = "";//不使用单查询了
this.course.types = "";
this.course.sysType1 = "";
@@ -1172,6 +1178,20 @@ export default {
that.course.sysType3 += item.id;
}
});
if (!type && type !== 1){
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;
@@ -1191,6 +1211,9 @@ export default {
params.pageNum = pageIndex
params.orderByType = orderField
params.courseSource = this.ctypeList.findIndex(e => e.checked)
if (params.courseSource === -1) {
params.courseSource = 0
}
this.yearChosen.length && (params.years = this.yearChosen)
params.courseName = this.keyword
delete params.userId
@@ -1203,44 +1226,8 @@ export default {
console.log(res.status)
if (res.status === 200) {
this.totalPages = res.data.result.pages;
// res.result.list.forEach(item => {
// if (item.startTime != '') {
// item.startTime = formatDateByFmt(new Date(item.startTime * 1000), 'yyyy-MM-dd hh:mm')
// //let time = item.startTime.split('-');
// //item.startTime = `${time[0]}年${time[1]}月${time[2]}日`
// }
// //教师转化
// if (item.teacher) {
// item.teacher = item.teacher.split(',').filter(itemValue => itemValue !== 'BOE教师').join(',');
// // if (dotIdx > 0) {
// // item.teacher = item.teacher.substring(0, dotIdx);
// // }
// }
// if (item.teacher && item.teacher == 'BOE教师') {
// item.teacher = '';
// }
//
// //转化标红显示
// item.title = item.name;
// if (that.course.keyword) {
// item.name = that.brightenKeyword(item.name, that.course.keyword);
// item.keywordsActive = that.brightenKeywords(item.keywordsList, that.course.keyword)
// console.log(item.keywordsActive);
// } else {
// item.name = item.name;
// }
// });
const list = res.data.result.records ?? []
// list.forEach(course=>{
// const id = course.courseId
//
// apiCourse.getTeacherByCourseIDs([id]).then(res=>{
// console.log(res, "ids res")
// course.teacher = res.result[0].names[0]
// console.log(`course.teacher`, course.teacher)
// })
// })
this.courseList = list
if (this.newData) {
@@ -1301,18 +1288,7 @@ export default {
this.moreState = 2;
});
},
// showInApply() {
// this.inapply.show = true;
// },
// pushEnter(type) {
// this.type1.push(type);
// },
// deleteOut(type) {
// this.type1 = this.type.filter(item => item != type);
// },
// chooseShow(type) {
// return this.type1.some(item => item == type);
// },
getAnkingData() {
apiCourse.ranking().then(res => {
if (res.status == 200) {
@@ -1887,7 +1863,7 @@ export default {
right: 23.5%;
// bottom: 26%;
top: 0;
height: 20;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #FFFFFF;
@@ -2117,7 +2093,7 @@ export default {
border-radius: 8px;
::v-deep .el-input {
width: 420px;
//width: 420px;
height: 38px;
//margin-bottom: 13px;
@@ -2202,30 +2178,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;
@@ -2251,4 +2215,6 @@ export default {
.option-active {
color: #387DF7;
}</style>
}
</style>