mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 04:16:45 +08:00
1331 lines
40 KiB
Vue
1331 lines
40 KiB
Vue
<template>
|
||
<div id="couser-list-content" class="couser-list-content">
|
||
<portal-header current="course" @emitInput="emitInput"></portal-header>
|
||
<!-- <div class="course-input">
|
||
<el-input class="course-value" v-model.trim="course.keyword" maxlength="20" @input="inputOn($event)" clearable placeholder="请输入关键词搜索"><el-button slot="append" icon="el-icon-search" @click="searchData()" class="course-btn"></el-button></el-input>
|
||
</div> -->
|
||
<div class="xcontent portal-content">
|
||
<div class="xrow" style="display: flex;justify-content: space-between;">
|
||
<div style="flex: 1;" class="xcol content-div">
|
||
<el-row class="search-div">
|
||
<div class="searchbar" v-if="searchTags.length > 0">
|
||
<div style="line-height: 30px;">
|
||
<span class="item-title"> 搜索条件</span>
|
||
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<el-row class="search-item">
|
||
<el-col :span="24">
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;">
|
||
<span class="item-title" style="padding-right: 5px;">授课方式</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<!-- // 10微课，21在线课(直播)；20:在线课( 录播)；30:面授课；40:学习项目,90:混合式， -->
|
||
<div>
|
||
<el-radio-group v-model="category" size="mini" @change="searchData">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<el-radio-button :label="20">录播课</el-radio-button>
|
||
<el-radio-button :label="30">线下课</el-radio-button>
|
||
<el-radio-button :label="40">学习项目</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div :class="queryExpand ? 'search-div-expand' : 'search-div-collapse'">
|
||
<el-row class="search-item">
|
||
<el-col :span="24">
|
||
<div style="margin-top:10px;display: flex;">
|
||
<div style="line-height: 25px;">
|
||
<span class="item-title" style="padding-right: 5px;">内容分类</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<el-radio-group v-model="types.sysTypes" size="mini" @change="changeType">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<el-radio-button v-for="item in optionsList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
|
||
</el-radio-group>
|
||
<span @click="jumUX()" class="Uxtext" style=""> U选小课堂
|
||
<span class="uxicon">
|
||
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="search-item-sub" v-if="types.oneSubList.length != 0">
|
||
<el-radio-group v-model="types.subOne" size="mini" @change="changeTypeSub">
|
||
<el-radio-button label="0">全部</el-radio-button>
|
||
<el-radio-button v-for="item in types.oneSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="search-item-sub" v-if="types.towSubList.length != 0">
|
||
<el-radio-group v-model="types.subTow" size="mini" @change="searchData">
|
||
<el-radio-button label="0">全部</el-radio-button>
|
||
<el-radio-button v-for="item in types.towSubList" :key="item.id" :label="item.id">{{item.name}}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-row>
|
||
<el-row class="order-div" v-if="listType == 1">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="orderChange('studys')" :class="{ actice: course.orderField == 'studys' }">最热</el-button>
|
||
<el-button type="text" class="order-class" @click="orderChange('publishTime')" :class="{ actice: course.orderField == 'publishTime' }">最新</el-button>
|
||
</span>
|
||
</el-row>
|
||
<div class="xrow data-content" v-if="listType == 1">
|
||
<div class="xrow-course course-index" v-for="(cinfo,cidx) in courseList" :key="cinfo.id" v-if="(courseList.length<=course.pageSize) || (cidx<parseInt(courseList.length/columns)*columns)">
|
||
<el-card class="course-card" :body-style="{padding:'0px'}">
|
||
<a :href="toCourseDetail(cinfo)">
|
||
<div class="course-image-box">
|
||
<course-image height="146px" :course="cinfo"></course-image>
|
||
<span v-if="cinfo.type==20" class="course-type-title course-type">录播课</span>
|
||
<span v-if="cinfo.type==10" class="course-type-title course-type">录播课</span>
|
||
<span v-if="cinfo.type=='online-course'" class="course-type-title course-type">录播课</span>
|
||
<span v-if="cinfo.type=='face-course'" class="course-type-title course-type">线下课</span>
|
||
<span v-if="cinfo.type=='project'" class="course-type-title course-type">学习项目</span>
|
||
</div>
|
||
<el-tooltip class="item" :content="cinfo.couretitle" placement="bottom-start" effect="light" :visible-arrow="false" popper-class="text-tooltip" >
|
||
<div class="course-title title-line-ellipsis" v-html="$keywordActiveShow(cinfo.name,keyword)">
|
||
</div>
|
||
</el-tooltip>
|
||
<div class="course-author">
|
||
<div class="course-author-left" v-if="cinfo.authorInfo">
|
||
{{cinfo.authorInfo.name}}
|
||
</div>
|
||
<div style="flex:1;text-align: center;">
|
||
<span class="study-num">{{cinfo.studys}}人学习</span>
|
||
</div>
|
||
<div style="padding-left:15px">
|
||
<div v-if="cinfo.score">
|
||
<span class="course-score-value">{{toScore(cinfo.score)}}</span>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="cor-praises" v-if="cinfo.type == 10 || cinfo.type == 20"><interactBar :type="1" :data="cinfo" :comments="false" :praises="false" :shares="false" :views="false"></interactBar> </div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<!-- 分页 -->
|
||
<div class="pagination-div">
|
||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1 && courseList.length>=course.pageSize">加载更多</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 3">没有更多数据了</span>
|
||
</div>
|
||
</div>
|
||
<div style="width: 245px;margin-left: 5px;">
|
||
<div>
|
||
<div id="fixd-box">
|
||
<div v-if="identity == 2 || identity == 3 || identity == 5">
|
||
<el-button style="width: 100%;margin-bottom:15px;height: 37px;border-radius: 0;" type="primary" @click="toNeedCourse">做课程</el-button>
|
||
</div>
|
||
<el-card class="ranking-card" >
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in scorelist" :key="index" >
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
|
||
</el-tooltip>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
<div style="height: 10px;"></div>
|
||
<el-card class="ranking-card">
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index">
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.name" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.name }}</el-col>
|
||
</el-tooltip>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
<div style="height: 10px;"></div>
|
||
<el-card class="ranking-card">
|
||
<div slot="header">
|
||
<span style="font-size: 14px;font-weight: 600;color: #333333;">热度榜</span>
|
||
</div>
|
||
<div style="padding-bottom:10px">
|
||
<el-row class="ranking-title">
|
||
</el-row>
|
||
<el-row class="ranking-title bacolor" v-for="(item, index) in hotList" :key="index">
|
||
<el-col :span="6" style="height:34px">
|
||
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
|
||
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
|
||
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
|
||
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
|
||
</el-col>
|
||
<el-tooltip :enterable="false" @click.native="jumpRouter2(item)" effect="light" :content="item.courseName" placement="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.courseName }}</el-col>
|
||
</el-tooltip>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools ref="floatTools"></portalFloatTools>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapGetters,mapActions } from 'vuex';
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import authorInfo from '@/components/Portal/authorInfo.vue';
|
||
import courseItem from "@/components/Portal/course/courseItem.vue";
|
||
import apiCoursePortal from "@/api/modules/coursePortal.js";
|
||
import courseForm from "@/components/Course/courseForm.vue";
|
||
import apiType from "@/api/modules/type.js";
|
||
import apiCourse from "@/api/modules/coursePortal.js";
|
||
import apiOldCourse from "@/api/boe/course.js";
|
||
import apiTeacher from '@/api/modules/teacher.js';
|
||
import apiUser from '@/api/system/user.js';
|
||
import scene from "@/api/modules/scene.js";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import courseImage from "@/components/Course/courseImage.vue"
|
||
import { courseType, getType,toScore } from "@/utils/tools.js";
|
||
import { deepClone, param } from "../../../utils";
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import { Promise } from 'q';
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
portalFloatTools,
|
||
courseItem,
|
||
courseForm,
|
||
authorInfo,
|
||
courseImage,
|
||
interactBar
|
||
},
|
||
computed: {
|
||
...mapGetters(['resOwnerMap','sysTypeMap','userInfo','identity']),
|
||
},
|
||
data() {
|
||
return {
|
||
couretitle:'',
|
||
toScore,
|
||
noPageList: true,//判断接口是否还有数据
|
||
noDataList: true,//判断接口是否还有数据
|
||
moreState:1,// 1 加载更多 2 加载中 3无数据
|
||
columns:3,//列的数量
|
||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||
// 查询信息
|
||
types: {
|
||
sysTypesSub: "",
|
||
subOne: "",
|
||
subTow: "",
|
||
sysTypes: null,
|
||
oneSubList: [],
|
||
towSubList: [],
|
||
},
|
||
course: {
|
||
orderField: "studys",
|
||
topOrder:true,
|
||
orderAsc: false,
|
||
pageIndex: 1, // 第几页
|
||
pageSize: 9 //每页多少条
|
||
},
|
||
optionsList: [], //分类数据
|
||
sceneList: [], //场景
|
||
keyword: "",
|
||
anking: "",
|
||
isFind: false,
|
||
searchbar: {
|
||
top: false
|
||
},
|
||
ankingList:[],
|
||
scorelist: [],
|
||
searchTags: [],
|
||
queryExpand: true, // true更多，false收起
|
||
category: null,
|
||
categorySub: 0,
|
||
type1: 0,
|
||
type2: [],
|
||
type3: 0,
|
||
type4: 0,
|
||
status: 1,
|
||
pager: {
|
||
total: 40
|
||
},
|
||
data: [{}, {}, {}, {}],
|
||
order: 1,
|
||
listType: 1,
|
||
courseList: [],
|
||
searchRecords: [],
|
||
hotList:[],
|
||
totalPages:1,
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
let screenWidth=window.screen.width;
|
||
if(screenWidth<1280){
|
||
this.course.pageSize=9;
|
||
this.columns=3;
|
||
}else if(screenWidth<1600){
|
||
this.course.pageSize=12;
|
||
this.columns=4;
|
||
}else if(screenWidth>=1600){
|
||
this.course.pageSize=15;
|
||
this.columns=5;
|
||
}
|
||
//var hasNum=12;
|
||
//console.log(parseInt(hasNum/this.columns)*this.columns,'this.columns');
|
||
|
||
let el_top = document.querySelector("#searchbar");
|
||
let el_search = document.querySelector("#searchbar");
|
||
let height = 200;
|
||
let flag = true;
|
||
let $this = this;
|
||
this.getAnkingData()
|
||
window.addEventListener(
|
||
"scroll",
|
||
|
||
this.handleScroll
|
||
);
|
||
if(this.$route.query !== {}) {
|
||
this.course.keyword = this.$route.query.keyword;
|
||
}
|
||
this.getSceneData();
|
||
this.getTypeData();
|
||
if(this.course.keyword != undefined) {
|
||
this.totalPages=4;
|
||
}
|
||
this.search();
|
||
this.searchterm();
|
||
this.loadSysTypes();
|
||
this.getScoreList();
|
||
this.getHotList();
|
||
//查询排行榜，页面打开只查询一次
|
||
},
|
||
beforeDestroy(){
|
||
window.removeEventListener("scroll",this.handleScroll);
|
||
},
|
||
methods: {
|
||
|
||
|
||
|
||
jumUX(){
|
||
window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
|
||
},
|
||
emitInput(val) {
|
||
this.course.keyword=val;
|
||
this.searchData()
|
||
},
|
||
handleScroll() {
|
||
let innerHeight = document.querySelector('#couser-list-content').clientHeight
|
||
let outerHeight = document.documentElement.clientHeight
|
||
let scrollTop = document.documentElement.scrollTop
|
||
if ((outerHeight + scrollTop + 350) >= innerHeight) {
|
||
if(this.moreState == 1 && this.course.pageIndex < 4) {
|
||
this.loadMore();
|
||
}
|
||
}
|
||
if(scrollTop > 630) {
|
||
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -550px;width:242.5px";
|
||
} else {
|
||
document.querySelector('#fixd-box').style.cssText = "position: static";
|
||
}
|
||
},
|
||
toNeedCourse(){
|
||
// 需要先切换标签
|
||
//this.$store.dispatch('SetCurIdentity',2);
|
||
//this.$router.push('/need/course?open=new');
|
||
this.$refs.floatTools.toNeedCourse();
|
||
},
|
||
searchData(){
|
||
this.course.pageIndex =1;
|
||
this.noPageList= true;//判断接口是否还有数据
|
||
this.noDataList= true;//判断接口是否还有数据
|
||
this.courseList = [];
|
||
this.totalPages = 4;
|
||
this.search();
|
||
},
|
||
inputOn() {
|
||
this.$forceUpdate();
|
||
},
|
||
...mapActions({
|
||
getResOwnerTree:'resOwner/getResOwnerTree',
|
||
loadResOwners:'resOwner/loadResOwners',
|
||
getSysTypeTree:'sysType/getSysTypeTree',
|
||
loadSysTypes:'sysType/loadSysTypes'
|
||
}),
|
||
sysTypeName(code){
|
||
if(code==''){return '';}
|
||
return this.sysTypeMap.get(code);
|
||
},
|
||
useHotword(item){
|
||
this.$set(this.course,'keyword',item.keyword)
|
||
this.searchData();
|
||
},
|
||
searchterm(){
|
||
apiSearchterm.list(5,1).then(res => {
|
||
if (res.status == 200) {
|
||
this.searchRecords = res.result;
|
||
}
|
||
});
|
||
},
|
||
toCourseDetail(item){
|
||
if(isNaN(item.type)){
|
||
return `${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`;
|
||
//此处使用window.open有问题
|
||
//window.open(`${this.webBaseUrl}/course/boeframe?id=${item.id}&type=${item.type}`);
|
||
} else {
|
||
if(item.type==10){
|
||
return this.webBaseUrl+'/course/micro?id='+item.id;
|
||
}else if(item.type==20){
|
||
return this.webBaseUrl+'/course/detail?id='+item.id;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
},
|
||
orderChange(id) {
|
||
this.course.orderField = id;
|
||
this.course.pageIndex =1;
|
||
this.noPageList= true;//判断接口是否还有数据
|
||
this.noDataList= true;//判断接口是否还有数据
|
||
this.courseList = [];
|
||
this.totalPages = 1;
|
||
this.search();
|
||
},
|
||
tagsClose(tag, index) {
|
||
for (let i in this.course) {
|
||
if (tag.id === this.course[i]) {
|
||
this.course[i] = "";
|
||
if (i === "sysType1") {
|
||
this.types.sysTypes = "";
|
||
}
|
||
if (i === "sysType2") {
|
||
this.types.subOne = "";
|
||
}
|
||
if (i === "sysType3") {
|
||
this.types.subTow = "";
|
||
}
|
||
if(i === 'type') {
|
||
this.category = "";
|
||
this.categorySub = "";
|
||
}
|
||
this.searchTags.splice(index, 1);
|
||
this.searchData();
|
||
}
|
||
}
|
||
},
|
||
|
||
// 分类
|
||
changeType(num) {
|
||
this.types.oneSubList = [];
|
||
this.types.subOne = '0';
|
||
this.types.towSubList = [];
|
||
let list = {};
|
||
if (num !== 0) {
|
||
list = this.optionsList.find(item => {
|
||
return item.id === num;
|
||
});
|
||
}
|
||
if (list && list.children) {
|
||
this.types.oneSubList = list.children;
|
||
}
|
||
this.searchData();
|
||
},
|
||
// 子级分类
|
||
changeTypeSub(num) {
|
||
this.types.subTow = '0';
|
||
let list = {};
|
||
if (num !== 0) {
|
||
apiType.list(1, num).then(res => {
|
||
if (res.status === 200) {
|
||
this.types.towSubList = res.result;
|
||
}
|
||
});
|
||
}
|
||
this.searchData();
|
||
},
|
||
//获取场景，保留
|
||
async getSceneData() {
|
||
try {
|
||
const { result, status } = await scene.list(1);
|
||
if (status === 200) {
|
||
this.sceneList = result;
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
//获取分类，此处获取提内容分类
|
||
async getTypeData() {
|
||
try {
|
||
const { result, status } = await apiType.tree(1);
|
||
if (status === 200){
|
||
this.optionsList = result;
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
loadMore() {
|
||
this.course.pageIndex += 1;
|
||
this.search();
|
||
},
|
||
async search() {
|
||
let that = this;
|
||
if(this.course.keyword){
|
||
apiSearchterm.save({keyword:this.course.keyword,type:1});
|
||
}
|
||
this.isFind = true;
|
||
if (this.category === 0) {
|
||
this.course.type = null;
|
||
} else if (this.category === 2) {
|
||
// if (this.categorySub === "") {
|
||
// this.course.type = "20";
|
||
// } else {
|
||
// this.course.type = this.categorySub;
|
||
// }
|
||
} else {
|
||
this.course.type = this.category;
|
||
}
|
||
if(this.types.sysTypes == 0 || this.types.sysTypes == null) {
|
||
this.course.sysType1 = '';
|
||
this.course.sysType2 = '';
|
||
this.course.sysType3 = '';
|
||
} else {
|
||
this.course.sysType1 = this.types.sysTypes;
|
||
}
|
||
this.course.sysType2 = this.types.subOne;
|
||
this.course.sysType3 = this.types.subTow;
|
||
if(this.course.sysType2 == 0) {
|
||
this.course.sysType2 = '';
|
||
}
|
||
if(this.course.sysType3 == 0) {
|
||
this.course.sysType3 = '';
|
||
}
|
||
this.course.device = 1;
|
||
this.getTags();
|
||
//从新课程库中取10条，从老库中取10条
|
||
let oldPageIndex = 0;
|
||
let oldCateName = '';
|
||
let oldParamsType = '';
|
||
if(this.course.sysType1){
|
||
//cateName
|
||
let courseSysType=this.course.sysType1;
|
||
let curName = this.optionsList.find(item => {
|
||
return item.id === courseSysType;
|
||
});
|
||
if(curName){
|
||
oldCateName=curName.name;
|
||
}
|
||
}
|
||
if(this.category==20){
|
||
oldParamsType='online-course';
|
||
}else if(this.category==30){
|
||
oldParamsType='face-course';
|
||
}else if(this.category==40){
|
||
oldParamsType='project';
|
||
}
|
||
if(oldParamsType == '' && oldCateName == '' && this.course.keyword == '') {
|
||
oldPageIndex = this.course.pageIndex-3;
|
||
} else {
|
||
oldPageIndex = this.course.pageIndex;
|
||
}
|
||
|
||
let oldParams={type:oldParamsType,page:oldPageIndex,size:this.course.pageSize,keyword:this.course.keyword,sort:'new',cateName:oldCateName}
|
||
if(this.course.orderField == 'id') {//最新
|
||
oldParams.sort = 'new';
|
||
}
|
||
if(this.course.orderField == 'studys') {//最热
|
||
oldParams.sort = 'hot';
|
||
}
|
||
let data = [];
|
||
let isTopList = [];
|
||
if(this.course.pageIndex > this.totalPages) {
|
||
this.noDataList = true;
|
||
oldParams.page=this.course.pageIndex-this.totalPages;
|
||
}else {
|
||
if(this.totalPages<3){
|
||
this.noDataList = false;
|
||
}
|
||
if(this.totalPages == 1 && this.course.pageIndex ==1){
|
||
this.noDataList = true;
|
||
}
|
||
}
|
||
if(this.course.type == 30 || this.course.type == 40) {
|
||
this.noPageList = false;
|
||
}
|
||
// 隐藏loadMore
|
||
this.moreState = 2;
|
||
this.noDataList && await apiOldCourse.courseList(oldParams).then(oldRs=>{
|
||
if(oldRs.status==200 && oldRs.result.dataList.length > 0) {
|
||
let list = that.filterConversion(oldRs.result.dataList);
|
||
list.name = list.name.replace(/<[^>]+>|&[^>]+;/g,"").trim();
|
||
data.push(...list);
|
||
that.moreState = 1;
|
||
}else{
|
||
that.noDataList = false;
|
||
}
|
||
}).catch(err=>{
|
||
that.noDataList = false;
|
||
})
|
||
|
||
this.noPageList && await apiCoursePortal
|
||
.pageList(this.course)
|
||
.then(res => {
|
||
|
||
if(res.status == 200 && res.result.list.length>0){
|
||
|
||
this.totalPages = res.result.totalPages;
|
||
let courseIds=[];
|
||
res.result.list.forEach(item=>{
|
||
item.name = this.$keywordActiveShow(item.name,this.course.keyword);
|
||
item.couretitle = this.$keywordActiveShow(item.name,this.course.keyword).replace(/<[^>]+>|&[^>]+;/g,"").trim();//去掉所有的html标签和 之类的特殊符合
|
||
item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
|
||
courseIds.push(item.id);
|
||
if(item.isTop) {
|
||
isTopList.push(item);
|
||
} else {
|
||
data.push(item);
|
||
}
|
||
})
|
||
that.loadCouserTeacher(res.result.list,courseIds);
|
||
// data.push(...res.result.list);
|
||
that.moreState = 1;
|
||
}else{
|
||
that.noPageList = false;
|
||
}
|
||
}).catch(err=>{
|
||
that.noPageList = false;
|
||
})
|
||
if(this.course.orderField == 'id') {//最新
|
||
data.sort(this.pcompare("publishTime",false))
|
||
}
|
||
if(this.course.orderField == 'studys') {//最热
|
||
data.sort(this.pcompare("studys",false))
|
||
}
|
||
this.courseList.push(...isTopList,...data);
|
||
if(this.noDataList == false && this.noPageList == false){
|
||
this.moreState = 3;
|
||
}
|
||
},
|
||
pcompare(prop,rev) {
|
||
if(rev === undefined) {
|
||
rev = 1;
|
||
}else {
|
||
rev = rev?1:-1;
|
||
}
|
||
return function(obj1,obj2) {
|
||
let val1 = obj1[prop],val2 = obj2[prop];
|
||
return val1 < val2 ? rev*(-1):rev*1;
|
||
}
|
||
},
|
||
filterConversion(data) {
|
||
let list = [];
|
||
data.forEach((item,index)=>{
|
||
list.push({
|
||
coverImg: item.cover[0].url,
|
||
name: item.title,
|
||
type: item.type,
|
||
id: item.id,
|
||
studys: Number(item.enrollSuccess),// Number(), //学习人数
|
||
score: item.score,
|
||
publishTime: item.releaseDate,
|
||
authorInfo:{
|
||
avatar: '',
|
||
name: ''
|
||
}
|
||
})
|
||
})
|
||
return list;
|
||
},
|
||
loadCouserTeacher(list,ids){
|
||
let that = this;
|
||
// 先查课程关联教师iD
|
||
apiCourse.getTeacherByCourseIDs(ids).then(cres => {
|
||
if(cres.status==200){
|
||
let userIds = [];
|
||
list.forEach((item,index)=>{
|
||
cres.result.some(courseTeahcer=>{
|
||
if(courseTeahcer.courseId==item.id){
|
||
if(courseTeahcer.teacherIds){
|
||
userIds.push(courseTeahcer.teacherIds[0]);
|
||
item.authorInfo.aid=courseTeahcer.teacherIds[0];
|
||
item.authorInfo.name=courseTeahcer.names[0];
|
||
}
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
//that.loadCourseAuthorInfo(list,userIds);
|
||
}
|
||
})
|
||
},
|
||
loadCourseAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
|
||
if(ids.length==0){
|
||
return;
|
||
}
|
||
const noReapetIds=[...new Set(ids)]
|
||
apiUser.getByIds(ids).then(res=>{
|
||
if(res.status==200){
|
||
list.forEach((item,index)=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.authorInfo.aid){
|
||
item.authorInfo=author;
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
}else{
|
||
console.log('加载课程信息失败:'+res.error);
|
||
//this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
getTags() {
|
||
this.searchTags = [];
|
||
let courseData = deepClone(this.course);
|
||
for (let i in courseData) {
|
||
if (
|
||
courseData[i] !== "" &&
|
||
i !== "pageIndex" &&
|
||
i !== "pageSize" &&
|
||
i !== "orderField" &&
|
||
i !== "orderAsc" &&
|
||
i !== "topOrder" &&
|
||
i !== "device" &&
|
||
courseData[i] !== null &&
|
||
courseData[i] !== undefined
|
||
) {
|
||
let id = courseData[i];
|
||
if (i == "type" && courseData[i] !== 0) {
|
||
courseData[i] = courseType(courseData[i]);
|
||
}
|
||
if (i == "sysType1" || i == "sysType2" || i == "sysType3") {
|
||
if(courseData[i] !== '0') {
|
||
courseData[i] = this.sysTypeName(courseData[i]);
|
||
}
|
||
}
|
||
if (i == "type" && courseData[i] === 0) {
|
||
courseData[i] = '在线课'
|
||
};
|
||
if(courseData[i] !== '0') {
|
||
this.searchTags.push({
|
||
id: id,
|
||
name: courseData[i]
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
},
|
||
// goTarget(href) {
|
||
// window.open(this.webBaseUrl+href, "_blank");
|
||
// },
|
||
showInApply() {
|
||
this.inapply.show = true;
|
||
},
|
||
findOrg() {
|
||
//
|
||
},
|
||
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){
|
||
this.ankingList=res.result
|
||
}
|
||
})
|
||
},
|
||
getScoreList() {
|
||
apiCourse.scorelist(5).then(res=>{
|
||
if(res.status==200){
|
||
this.scorelist=res.result
|
||
}
|
||
})
|
||
},
|
||
getHotList(){
|
||
apiCourse.studyCounts(5).then(res=>{
|
||
if(res.status==200){
|
||
this.hotList=res.result
|
||
}
|
||
})
|
||
},
|
||
jumpRouter(item){
|
||
console.log(item.type,'item.type');
|
||
// return console.log(id,type,"fihkj1")
|
||
if(item.type == 20) {//录播课
|
||
// window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
|
||
this.$router.push(`/course/detail?id=${item.id}`);
|
||
}
|
||
if(item.type == 10) {//微课
|
||
// window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
|
||
this.$router.push(`/course/micro?id=${item.id}`);
|
||
}
|
||
},
|
||
jumpRouter2(item){
|
||
// console.log(item,"土豪包括九年")
|
||
let type=item.courseType;
|
||
let id=item.courseId;
|
||
|
||
//console.log(item.type,type,'item.type');
|
||
// return console.log(id,type,"fihkj1")
|
||
if(type == 20) {//录播课
|
||
// window.open(`${this.webBaseUrl}/course/detail?id=${id}`)
|
||
this.$router.push(`/course/detail?id=${id}`);
|
||
}
|
||
if(type == 10) {//微课
|
||
// window.open(`${this.webBaseUrl}/course/micro?id=${id}`)
|
||
this.$router.push(`/course/micro?id=${id}`);
|
||
}
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .title-line-ellipsis{
|
||
// width: 100%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
word-break:break-all;
|
||
}
|
||
::v-deep .el-card__body{
|
||
padding: 0;
|
||
}
|
||
::v-deep .bacolor:nth-child(odd){
|
||
background-color: #fff;
|
||
padding: 0 5px;
|
||
}
|
||
::v-deep .bacolor:nth-child(even){
|
||
background-color: #f6f6f6;
|
||
padding: 0 5px;
|
||
|
||
}
|
||
.Uxtext{
|
||
font-weight: 450;
|
||
margin-top:5px;
|
||
margin-left:15px;
|
||
font-size:14px;
|
||
color:#3d3d3d;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
.uxicon{
|
||
font-size: 10px;
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 98%;
|
||
}
|
||
// .el-radio-button{
|
||
// margin-right: 10px;
|
||
// margin-bottom: 10px;
|
||
|
||
// .el-radio-button__inner{
|
||
// background: #fff;
|
||
// border: none;
|
||
// height: 20px;
|
||
// }
|
||
// }
|
||
::v-deep .el-radio-button__inner, .el-radio-group {
|
||
vertical-align: top;
|
||
}
|
||
::v-deep .el-radio-button__inner{
|
||
background: none;
|
||
}
|
||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||
border-left: none;
|
||
|
||
// border-radius: 4px 0 0 4px;
|
||
//box-shadow: none!important;
|
||
}
|
||
// .el-row{
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// }
|
||
.item-title{
|
||
// margin-top: 10px;
|
||
// margin-bottom: 5px;
|
||
// margin-right: 10px;
|
||
// margin: 10px;
|
||
margin: 10px 10px 10px 0;
|
||
//font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
// line-height: 20px;
|
||
}
|
||
.item-line{
|
||
padding-left: 2px;
|
||
height: 20px;
|
||
background: #ddd;
|
||
}
|
||
.course-card {
|
||
// width: 290px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
::v-deep .cor-praises {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
.interact-bar-btn{
|
||
.interact-bar-value{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.cor-icon{
|
||
position: absolute;
|
||
left: 100px;
|
||
top:54px;
|
||
border-radius: 50%;
|
||
background: rgba(88, 138, 252,.37);
|
||
|
||
.el-icon-caret-right{
|
||
font-size: 36px;
|
||
color: #588AFC;
|
||
}
|
||
}
|
||
.course-image-box {
|
||
position: relative;
|
||
height:148px;
|
||
width: 100%;
|
||
.course-image {
|
||
width: 100%;
|
||
height: 148px;
|
||
}
|
||
.course-type{
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0px;
|
||
width: 90px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
background-color: #292828;
|
||
opacity: 0.4;
|
||
border-top-left-radius: 15px;
|
||
border-bottom-left-radius: 15px;
|
||
color: #FFFFFF;
|
||
}
|
||
.course-type-title{
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0px;
|
||
width: 90px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
}
|
||
.course-flag {
|
||
height: 26px;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 0;
|
||
}
|
||
.course-tip {
|
||
width: 100%;
|
||
height: 26px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 0 10px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
.course-study-count {
|
||
float: left;
|
||
}
|
||
.course-time {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
.course-title{
|
||
// height: 70px;
|
||
margin: 10px 0;
|
||
padding: 0px 15px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #343434;
|
||
}
|
||
.course-author{
|
||
margin: 5px 15px;
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.course-author-left{
|
||
font-size: 12px;
|
||
line-height: 30px;
|
||
color: #666;
|
||
}
|
||
// .course-author-right{
|
||
// padding-top: 5px;
|
||
// }
|
||
}
|
||
.course-score{
|
||
padding: 5px 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
.course-score-star{
|
||
flex: 1;
|
||
}
|
||
.course-score-value{
|
||
color: #FFB30F;
|
||
font-family: "Arial";
|
||
// font-size: 30px;
|
||
}
|
||
.course-score-no{
|
||
font-size: 12px;
|
||
color: #FFB30F;
|
||
}
|
||
}
|
||
|
||
}
|
||
.course-score-no{
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: #FFB30F;
|
||
line-height: 30px;
|
||
}
|
||
.course-score-value{
|
||
font-size: 14px;
|
||
color: #FFB30F;
|
||
margin-left: 32px;
|
||
line-height: 30px;
|
||
font-family: "Arial";
|
||
// font-size: 30px;
|
||
}
|
||
.study-num{
|
||
line-height: 30px;
|
||
font-size: 12px;
|
||
|
||
color: #8590A6;
|
||
}
|
||
.btn-label {
|
||
}
|
||
.btn-label {
|
||
position: relative;
|
||
display: inline-block;
|
||
outline: 0;
|
||
span {
|
||
padding: 7px 15px;
|
||
font-size: 12px;
|
||
border-radius: 0;
|
||
white-space: nowrap;
|
||
background: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
font-weight: 500;
|
||
border-left: 0;
|
||
color: #606266;
|
||
-webkit-appearance: none;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
outline: 0;
|
||
margin: 0;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
}
|
||
}
|
||
.searchbar {
|
||
background-color: #ffffff;
|
||
// border: 1px solid #f3f3f3;
|
||
// width: 900px;
|
||
// padding: 5px 20px;
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #f0f0f0;
|
||
z-index: 999;
|
||
height: 50px;
|
||
}
|
||
.content-div {
|
||
.quyer-tag {
|
||
// margin-left: 10px;
|
||
.order-class {
|
||
color: #666666;
|
||
text-align: left;
|
||
border: 1px solid #dfdfdf;
|
||
padding: 10px 20px;
|
||
}
|
||
.actice {
|
||
background: #3e7fff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
/* 分页div */
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
margin: 10px;
|
||
.pag-text{
|
||
border: 1px solid #292828;
|
||
padding: 10px 20px;
|
||
border-radius: 20px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
}
|
||
.pag-text-msg{
|
||
padding: 10px 20px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
.search-div {
|
||
background: #fff;
|
||
padding: 10px 25px;
|
||
::v-deep .el-input{
|
||
width: 420px;
|
||
height: 38px;
|
||
margin-bottom: 13px;
|
||
.el-input__inner{
|
||
height: 38px;
|
||
border-radius: 0;
|
||
}
|
||
.el-input-group__append{
|
||
width: 44px;
|
||
height: 38px;
|
||
border: 0;
|
||
padding: 0;
|
||
background:#3E7FFF;
|
||
border-radius: 0;
|
||
.el-button{
|
||
margin: 0;
|
||
border: 0;
|
||
width: 100%;
|
||
height: 38px;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.el-icon-search{
|
||
color: #fff;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// .tip{
|
||
// color:#999999;
|
||
// font-size: 12px;
|
||
// >span{
|
||
// margin-right: 8px;
|
||
// cursor: pointer;
|
||
// }
|
||
// }
|
||
.search-item {
|
||
// padding: 10px 0;
|
||
}
|
||
.search-item:not(:last-child) {
|
||
// border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.search-item-sub {
|
||
// margin-top: 10px;
|
||
}
|
||
}
|
||
.search-div-collapse {
|
||
display: block;
|
||
}
|
||
.search-div-expand {
|
||
// display: none;
|
||
}
|
||
.search-div-more {
|
||
text-align: center;
|
||
}
|
||
|
||
.order-div {
|
||
padding: 10px 15px 0 0px;
|
||
}
|
||
.data-content {
|
||
padding: 5px 0px;
|
||
.course-card {
|
||
// width: 290px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
.course-image-box {
|
||
position: relative;
|
||
.course-image {
|
||
width: 288px;
|
||
height: 148px;
|
||
}
|
||
.course-flag {
|
||
height: 26px;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 0;
|
||
}
|
||
.course-tip {
|
||
width: 100%;
|
||
height: 26px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 0 10px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
.course-study-count {
|
||
float: left;
|
||
}
|
||
.course-time {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
.course-info-box {
|
||
padding: 15px;
|
||
.course-info-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #343434;
|
||
height: 48px;
|
||
}
|
||
.course-other-info {
|
||
height: 40px;
|
||
margin-top: 10px;
|
||
.course-author {
|
||
float: left;
|
||
height: 40px;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
line-height: 40px;
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
.course-score-info {
|
||
float: right;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
.course-score {
|
||
color: #f8a114;
|
||
font-family: "Arial";
|
||
font-size: 36px;
|
||
}
|
||
.course-score-title {
|
||
font-size: 14px;
|
||
color: #787878;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cardmark {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(101, 101, 101, 0.8);
|
||
pointer-events: none;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
opacity: 0;
|
||
-webkit-transition: all 1.5s;
|
||
-moz-transition: all 1.5s;
|
||
-ms-transition: all 1.5s;
|
||
-o-transition: all 1.5s;
|
||
transition: all 1.5s;
|
||
.cardmark-name {
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
.cardmark-info {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
.course-card:hover .cardmark {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.ranking-title {
|
||
line-height: 34px;
|
||
font-size: 15px;
|
||
color: #333333;
|
||
.center-titlt{
|
||
font-size: 15px;
|
||
color: #333333;
|
||
}
|
||
.center{
|
||
text-align: right;
|
||
}
|
||
img{
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
</style>
|