mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 04:46:44 +08:00
1198 lines
38 KiB
Vue
1198 lines
38 KiB
Vue
<template>
|
|
<div>
|
|
<portal-header current="index" ></portal-header>
|
|
<div class="portal-content xcontent" >
|
|
<!-- 推荐课程 -->
|
|
<div class="modules">
|
|
<!--内容块-->
|
|
<div class="modules-title">
|
|
<!-- <img :src="`${webBaseUrl}/images/recommend_course.png`" class="recommend" /> -->
|
|
<span class="modules-text">推荐课程</span>
|
|
<span class="quyer-tag">
|
|
<a :class="courseList.orderType == 2 ? 'current' : ''" @click="orderTypeFilter(2)">最热</a>
|
|
<a :class="courseList.orderType == 1 ? 'current' : ''" @click="orderTypeFilter(1)">最新</a>
|
|
<span @click="jumUX()" class="Uxtext" style=""> U选小课堂
|
|
<span class="uxicon">
|
|
<svg-icon icon-class="hot" style="font-size:22px"></svg-icon>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span class="more">
|
|
<!-- <span style="margin-right: 20px;cursor: pointer;" @click="nextPage()">换一换</span> -->
|
|
<router-link to="/course">更多 ></router-link>
|
|
</span>
|
|
</div>
|
|
<div class="modules-list xrow" style="height: 485px;overflow: hidden;">
|
|
<!--一个固定内容-->
|
|
<div class="xrow-course index-course">
|
|
<el-card class="course-card" :body-style="{ padding: '0px' }">
|
|
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
|
|
<div class="course-image-box">
|
|
<el-image class="course-image" style="height: 130px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
|
<span class="course-type">录播课</span>
|
|
</div>
|
|
<el-tooltip class="item" content="高效谈判系列课" placement="bottom" effect="light">
|
|
<div class="course-title one-line-ellipsis">高效谈判系列课</div>
|
|
</el-tooltip>
|
|
<div class="course-author">
|
|
<div class="course-author-left" > </div>
|
|
<div style="flex:1; text-align: center; ">
|
|
<span class="study-num">2324人学习</span>
|
|
</div>
|
|
<div style="padding-left:15px">
|
|
<div >
|
|
<span class="course-score-value">5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</el-card>
|
|
</div>
|
|
|
|
<!--内容列表内容-->
|
|
<div v-for="course in courseList.list" :key="course.id" class="xrow-course index-course">
|
|
<el-card class="course-card" :body-style="{ padding: '0px' }">
|
|
<a :href="toCourseDetail(course)">
|
|
<div class="course-image-box">
|
|
<course-image height="130px" :course="course"></course-image>
|
|
<!-- <el-image class="course-image" :src="fileBaseUrl+course.coverImg" fit="fit"></el-image> -->
|
|
<!-- <span v-if="course.type==10" class="course-type"></span>
|
|
<span v-if="course.type==20" class="course-type"></span> -->
|
|
<!-- <span v-if="course.type==10" class="course-type-title">微课</span> -->
|
|
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
|
</div>
|
|
|
|
<el-tooltip class="item" :content="course.name" placement="bottom" effect="light">
|
|
<div class="course-title one-line-ellipsis" >{{ course.name }}</div>
|
|
</el-tooltip>
|
|
|
|
<div class="course-author">
|
|
<!-- <div class="course-author-left"><authorInfo :avatar="course.authorInfo.avatar" :name="course.authorInfo.name"></authorInfo></div> -->
|
|
<div class="course-author-left" >
|
|
{{ course.authorInfo.name }}
|
|
</div>
|
|
<div style="flex:1; text-align: center; ">
|
|
<span class="study-num">{{ course.studys }}人学习</span>
|
|
</div>
|
|
<div style="padding-left:15px">
|
|
<div v-if="course.score">
|
|
<!-- <span><el-rate style="display: inline-block;" disabled v-model="course.score"></el-rate></span> -->
|
|
<span class="course-score-value">{{ toScore(course.score) }}</span>
|
|
</div>
|
|
<div v-else class="course-score-no">未评分</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="course-score">
|
|
|
|
|
|
|
|
</div> -->
|
|
</a>
|
|
<!-- 收藏位置 -->
|
|
<div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>
|
|
|
|
<!-- <a :href="toCourseDetail(course)">
|
|
<div class="cor-icon"><i class="el-icon-caret-right"></i></div>
|
|
</a> -->
|
|
<!-- <div class="cardmark">
|
|
<div class="cardmark-name" v-if="course.forUsers">目标学员</div>
|
|
<div class="cardmark-info">{{course.forUsers}}</div>
|
|
<div class="cardmark-name" v-if="course.value">课程价值</div>
|
|
<div class="cardmark-info">{{course.value}}</div>
|
|
<div class="cardmark-name" v-if="course.summary">课程介绍</div>
|
|
<div class="cardmark-info">{{course.summary}}</div>
|
|
</div> -->
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 推荐案例2版 -->
|
|
<div class="modules" v-if="caseShow">
|
|
<div class="modules-title">
|
|
|
|
<span class="modules-text">推荐案例</span>
|
|
<span class="quyer-tag">
|
|
<a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
|
|
<a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
|
|
</span>
|
|
<span class="more"><router-link to="/case">更多 ></router-link></span>
|
|
</div>
|
|
<div class="modules-list xrow" style="height: 235px;overflow: hidden;">
|
|
<div class="index-course xrow-course" v-for="ca in caseList.list" :key="ca.id">
|
|
<div class="casetwo" :body-style="{ padding: '0px' }">
|
|
<!-- <div class="case-top"></div> -->
|
|
<div class="case-conent">
|
|
<!-- <div class="case-time">
|
|
{{ca.sysCreateTime.substring(0,10)}}
|
|
</div> -->
|
|
<a :href="'case/detail?id='+ca.id" >
|
|
<span class="case-title one-line-ellipsis">
|
|
{{ca.title}}
|
|
</span>
|
|
<div class="case-text three-line-ellipsis">
|
|
{{ca.summary}}
|
|
</div>
|
|
</a>
|
|
<div class="case-inter">
|
|
<interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
|
|
</div>
|
|
<div style="height:40px;margin-top:10px">
|
|
<authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 推荐案例 -->
|
|
<!-- <div class="modules">
|
|
|
|
<div class="modules-title">
|
|
|
|
<span class="modules-text">推荐案例</span>
|
|
<span class="quyer-tag">
|
|
<a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
|
|
<a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
|
|
</span>
|
|
<span class="more"><router-link to="/case">更多 ></router-link></span>
|
|
</div>
|
|
<el-row :gutter="15" class="modules-list">
|
|
|
|
<el-col :span="12" v-for="ca in caseList.list" :key="ca.id">
|
|
<el-card class="case-card" :body-style="{ padding: '16px' }">
|
|
<div class="case-info-image-box" v-if="ca.coverUrl && ca.coverUrl.length > 0">
|
|
<div class="case-info">
|
|
<div class="case-info-title">
|
|
<a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
|
|
<span class="case-info-time">{{ca.sysCreateTime.substring(0,10)}}</span>
|
|
</div>
|
|
<div class="case-info-summary">
|
|
{{ca.content}}
|
|
</div>
|
|
</div>
|
|
<img width="100%" :src="fileBaseUrl + ca.coverUrl"/>
|
|
</div>
|
|
<div class="case-info-box" v-else>
|
|
<div class="case-info">
|
|
<div class="case-info-title">
|
|
<a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
|
|
<span class="case-info-time">{{ca.sysCreateTime.substring(0,10)}}</span>
|
|
</div>
|
|
<div class="case-info-summary">
|
|
{{ca.content}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="case-other-info">
|
|
<div><authorInfo :avatar="ca.authorInfo.avatar" :name="ca.authorInfo.name" :info="ca.authorInfo.orgInfo" :sex="ca.authorInfo.sex"></authorInfo></div>
|
|
<div><interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar> </div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div> -->
|
|
|
|
<!-- 推荐文章 -->
|
|
<div class="modules">
|
|
<!--内容块-->
|
|
<div class="modules-title">
|
|
<!-- <img :src="`${webBaseUrl}/images/recommend_article.png`" class="recommend" /> -->
|
|
<span class="modules-text">推荐文章</span>
|
|
<span class="quyer-tag">
|
|
<a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
|
|
<a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
|
|
|
|
</span>
|
|
<span class="more"><router-link to="/article">更多 ></router-link></span>
|
|
</div>
|
|
<el-card class="modules-list" :body-style="{ padding: '16px' }">
|
|
<div class="article-card" style="display: flex;">
|
|
<!-- 首张 -->
|
|
<div style="width: 430px;" class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
|
|
<div class="article-card-box">
|
|
<a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
|
|
<div class="article-info-image-box">
|
|
<article-image height="329px" width="440px" :article="articleList.first"></article-image>
|
|
<!-- <img style="width:100%;" :src="fileBaseUrl+articleList.first.coverurl" /> -->
|
|
<div class="article-info">
|
|
<div class="article-info-title " style="display:flex ;margin-top:7px">
|
|
<div class="one-line-ellipsis" style="flex:1;">
|
|
<span style="font-weight: 700;font-size: 20px;word-break:break-all;">{{ articleList.first.title }}</span>
|
|
</div>
|
|
<div style="flex:1;">
|
|
<span class="article-info-time ">{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
|
|
</div>
|
|
<!-- <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" target="_blank" style="font-weight: 700;font-size: 20px;">{{articleList.first.title}} </a> -->
|
|
</div>
|
|
<div class="article-info-summary two-line-ellipsis" style="margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="article-other-info" style="margin-top:17px">
|
|
<div><authorInfo :avatar="articleList.first.authorInfo.avatar" :name="articleList.first.authorInfo.name" :sex="articleList.first.authorInfo.sex"></authorInfo></div>
|
|
<div><interactBar :type="2" :readonly="true" :data="articleList.first" :views="false"></interactBar></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--内容列表内容-->
|
|
<div class="article-card-right" style="flex: 1;">
|
|
<div class="article-card-box" v-for="article in articleList.list" :key="article.id">
|
|
<div class="article-info-box">
|
|
<div class="article-info">
|
|
<div class="article-body" style="display:flex;">
|
|
<div style="flex: 1;">
|
|
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
|
|
<div class="article-info-title" style="display:flex">
|
|
<div class="two-line-ellipsis" style="flex:1;">
|
|
<span style="font-weight: 700;font-size: 20px;">{{ article.title }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span>
|
|
</div>
|
|
<!-- <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" target="_blank" style="font-weight: 700;font-size: 20px;"> {{article.title}} </a> -->
|
|
</div>
|
|
<div style="display:flex;justify-content: space-between;">
|
|
<div class="article-info-summary two-line-ellipsis">{{ article.summary }}</div>
|
|
</div>
|
|
</a>
|
|
<div class="article-other-info">
|
|
<div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
|
|
<div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<!-- 推荐问答 -->
|
|
<div class="modules">
|
|
<!--内容块-->
|
|
<div class="modules-title">
|
|
<!-- <img :src="`${webBaseUrl}/images/recommend_qa.png`" class="recommend" /> -->
|
|
<span class="modules-text">推荐问答</span>
|
|
<span class="quyer-tag">
|
|
<a :class="qaList.orderType == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</a>
|
|
<a :class="qaList.orderType == '' ? 'current' : ''" @click="changeQaOrder('')">最新</a>
|
|
|
|
</span>
|
|
<span class="more"><router-link to="/qa">更多 ></router-link></span>
|
|
</div>
|
|
<el-row :gutter="15" class="modules-list">
|
|
<!--内容列表内容-->
|
|
<el-col :span="12" v-for="qa in qaList.list" :key="qa.id">
|
|
<el-card class="qa-card" :body-style="{ padding: '16px' }">
|
|
<div @click="jumpRouter(qa)" class="qa-info-box">
|
|
<div class="qa-info">
|
|
<div class="qa-info-title">
|
|
<span class="one-line-ellipsis qa-info-shrink" style="font-weight: 700;font-size: 20px;">
|
|
<!-- <span class="qa-dai" >【待解决】</span> -->
|
|
<!-- <span v-if="qa.isResolve ==true" class="text-status1">【已解决】</span> -->
|
|
<span class="text-status3">【待解决】</span>
|
|
{{ qa.title }}
|
|
</span>
|
|
<span class="qa-info-time">{{ qa.sysCreateTime.substring(0, 10) }}</span>
|
|
</div>
|
|
<div class="qa-info-summary two-line-ellipsis">{{ qa.content }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="qa-other-info">
|
|
<div><authorInfo :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></authorInfo></div>
|
|
<div><interactBar :type="4" :readonly="true" :praises="true" :data="qa" :comments="false" :answers="true" :shares="true" :views="false"></interactBar></div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course"> </a></div>
|
|
<portal-footer></portal-footer>
|
|
<portalFloatTools></portalFloatTools>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } 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 apiCourse from '@/api/modules/coursePortal.js';
|
|
import apiCase from '@/api/modules/cases.js';
|
|
import apiArticle from '@/api/modules/article.js';
|
|
import apiQa from '@/api/modules/qa.js';
|
|
import apiUser from '@/api/system/user.js';
|
|
import apiCoursePortal from '@/api/modules/coursePortal.js';
|
|
import interactBar from '@/components/Portal/interactBar.vue';
|
|
import ad from '@/components/Portal/adFloat.vue';
|
|
import interactRowBar from '@/components/Portal/interactRowBar.vue';
|
|
import courseImage from '@/components/Course/courseImage.vue';
|
|
import articleImage from '@/components/Article/articleImage.vue';
|
|
import { toScore,cutFullName} from '@/utils/tools.js';
|
|
export default {
|
|
name: 'index',
|
|
components: { portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
|
|
computed: {
|
|
...mapGetters(['userInfo','caseShow'])
|
|
},
|
|
data() {
|
|
return {
|
|
couname:'',
|
|
isNext: true,
|
|
pageIndex: 1,
|
|
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
|
toScore,
|
|
courseList: {
|
|
num: 12,
|
|
orderType: 2,
|
|
list: []
|
|
},
|
|
caseList: {
|
|
num: 6,
|
|
orderType: 2,
|
|
list: []
|
|
},
|
|
articleList: {
|
|
num: 4,
|
|
orderType: 2,
|
|
first: { id: '', authorInfo: {} },
|
|
list: []
|
|
},
|
|
qaList: {
|
|
num: 4,
|
|
orderType: 'praises',
|
|
list: []
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getCourseData(1);
|
|
this.getCaseData();
|
|
this.getArticleData();
|
|
this.getQaData();
|
|
},
|
|
methods: {
|
|
jumUX(){
|
|
window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
|
|
},
|
|
toCourseDetail(item) {
|
|
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 '';
|
|
},
|
|
orderTypeFilter(val) {
|
|
this.courseList.orderType = val;
|
|
this.pageIndex = 1;
|
|
this.getCourseData();
|
|
},
|
|
nextPage() {
|
|
this.pageIndex += 1;
|
|
if (this.isNext) {
|
|
this.getCourseData(this.pageIndex);
|
|
}
|
|
},
|
|
getCourseData(pageIndex) {
|
|
this.isNext = false;
|
|
let { orderType, num } = this.courseList;
|
|
let course = {
|
|
pageSize: num,
|
|
device:1,
|
|
orderField: orderType == 1 ? '' : 'studys',
|
|
orderAsc: false,
|
|
topOrder:true,
|
|
pageIndex: pageIndex
|
|
};
|
|
|
|
apiCoursePortal.pageList(course).then(res => {
|
|
if (res.status == 200 && res.result.list.length > 0) {
|
|
let courseIds = [];
|
|
res.result.list.forEach(item => {
|
|
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null};
|
|
courseIds.push(item.id);
|
|
});
|
|
this.loadCouserTeacher(res.result.list, courseIds);
|
|
this.courseList.list=res.result.list;
|
|
this.couname = res.result.list.name;
|
|
if(res.result.count - pageIndex * num < 8) {
|
|
this.pageIndex = 0;
|
|
}
|
|
this.isNext = true;
|
|
// }
|
|
} else {
|
|
console.log('加载课程信息失败:' + res.error);
|
|
}
|
|
|
|
});
|
|
|
|
|
|
// apiCourse.list({orderType,num,device:1}).then(res => {
|
|
// if(res.status==200){
|
|
// if(res.result.length>0){
|
|
// let courseIds=[];
|
|
// res.result.forEach(item=>{
|
|
// item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
|
|
// courseIds.push(item.id);
|
|
// })
|
|
// this.loadCouserTeacher(res.result,courseIds);
|
|
// this.courseList.list=res.result;
|
|
// }
|
|
// }else{
|
|
// console.log('加载课程信息失败:'+res.error);
|
|
// }
|
|
// })
|
|
},
|
|
changeCaseOrder(val) {
|
|
this.caseList.orderType = val;
|
|
this.getCaseData();
|
|
},
|
|
getCaseData() {
|
|
let params = {
|
|
pageSize: this.caseList.num,
|
|
orderAsc: false,
|
|
orderField: 'id'
|
|
};
|
|
if (this.caseList.orderType == 2) {
|
|
params.orderField = 'comments';
|
|
}
|
|
apiCase.indexList(params).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.result.length > 0) {
|
|
let userIds = [];
|
|
res.result.forEach(item => {
|
|
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
|
|
|
|
if (item.authorId && item.authorId != '') {
|
|
userIds.push(item.authorId);
|
|
}
|
|
});
|
|
this.caseList.list = res.result;
|
|
this.loadCaseAuthorInfo(res.result, userIds);
|
|
}
|
|
// this.caseList.list = res.result;
|
|
} else {
|
|
console.log('加载案例错误：' + res.error);
|
|
}
|
|
});
|
|
},
|
|
loadCaseAuthorInfo(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.authorId) {
|
|
author.orgInfo=cutFullName(author.orgInfo,1);
|
|
item.authorInfo = author;
|
|
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
console.log('加载用户信息失败:' + res.error);
|
|
//this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
getArticleData() {
|
|
let $this = this;
|
|
this.articleList.list = [];
|
|
apiArticle.portalList(this.articleList.num, this.articleList.orderType).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.result.length > 0) {
|
|
let userIds = [];
|
|
res.result.forEach((item, idx) => {
|
|
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '' ,sex:null,};
|
|
userIds.push(item.sysCreateAid);
|
|
if (idx == 0) {
|
|
$this.articleList.first = item;
|
|
} else {
|
|
$this.articleList.list.push(item);
|
|
}
|
|
});
|
|
|
|
this.loadAuthorInfo(res.result, userIds);
|
|
}
|
|
} else {
|
|
console.log('加载文章错误：' + res.error);
|
|
}
|
|
});
|
|
},
|
|
changeArticleOrder(val) {
|
|
this.articleList.orderType = val;
|
|
this.getArticleData();
|
|
},
|
|
getQaData() {
|
|
let params = {
|
|
pageSize: this.qaList.num,
|
|
orderAsc: false,
|
|
orderField: this.qaList.orderType
|
|
};
|
|
// if (this.qaList.orderType == 2) {
|
|
// params.orderField = 'praises';
|
|
// }
|
|
apiQa.indexList(params).then(res => {
|
|
if (res.status == 200) {
|
|
if (res.result.length > 0) {
|
|
let userIds = [];
|
|
res.result.forEach(item => {
|
|
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null, };
|
|
userIds.push(item.sysCreateAid);
|
|
});
|
|
this.qaList.list = res.result;
|
|
this.loadAuthorInfo(res.result, userIds);
|
|
}
|
|
} else {
|
|
console.log('加载问答错误：' + res.error);
|
|
}
|
|
//console.log(res)
|
|
});
|
|
},
|
|
changeQaOrder(val) {
|
|
this.qaList.orderType = val;
|
|
this.getQaData();
|
|
},
|
|
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);
|
|
}
|
|
});
|
|
},
|
|
loadAuthorInfo(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.sysCreateAid) {
|
|
item.authorInfo = author;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
console.log('加载用户信息失败:' + res.error);
|
|
//this.$message.error(res.message);
|
|
}
|
|
});
|
|
},
|
|
jumpRouter(item) {
|
|
// window.open(`${this.webBaseUrl}/qa/answer?id=${item.id}`)
|
|
this.$router.push({ path: '/qa/answer', query: { id: item.id } });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.three-line-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
box-sizing: border-box;
|
|
-webkit-line-clamp: 3;
|
|
word-break: break-all;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.casetwo{
|
|
border: 1px solid #F0F0F0;
|
|
width: 100%;
|
|
height: 220px;
|
|
margin-bottom:15px;
|
|
position: relative;
|
|
background-color: #fff;
|
|
.case-top{
|
|
height: 70px;
|
|
background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
|
|
}
|
|
.case-conent{
|
|
width: 100%;
|
|
height: 100%;
|
|
// box-shadow: 1px 1px 15px #ccc;
|
|
// position: absolute;
|
|
// top: 5%;
|
|
background-color: #fff;
|
|
// left: 4%;
|
|
padding: 16px;
|
|
.case-time{
|
|
font-size: 12px;
|
|
color: #999999;
|
|
text-align: right;
|
|
}
|
|
.case-title{
|
|
margin-top: 10px;
|
|
font-size: 20px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom:10px;
|
|
}
|
|
.case-text{
|
|
height: 55px;
|
|
font-size: 14px;
|
|
color: #888888;
|
|
line-height: 18px;
|
|
margin-bottom:12px;
|
|
}
|
|
::v-deep .case-inter{
|
|
width: 100%;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
.interact-bar-btns{
|
|
justify-content: space-between !important;
|
|
.interact-bar-btn{
|
|
margin: 0 0 0 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
// .qa-dai{
|
|
// color: #5da1ff;
|
|
// }
|
|
.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%;
|
|
}
|
|
.text-status1 {
|
|
// padding:3px;
|
|
color: #1ea0fa;
|
|
}
|
|
.text-status2 {
|
|
// padding: 3px;
|
|
color: #00aa00;
|
|
}
|
|
.text-status3 {
|
|
// padding: 3px;
|
|
color: #588afc;
|
|
margin-left: -10px;
|
|
}
|
|
.qa-yi {
|
|
color: blue;
|
|
}
|
|
.el-card {
|
|
border: 1px solid #f0f0f0;
|
|
}
|
|
.portal-content {
|
|
font-family: 'Noto Sans SC';
|
|
}
|
|
// .one-line-ellipsis {
|
|
// width: 100%;
|
|
// white-space: nowrap;
|
|
// word-break: break-all;
|
|
// text-overflow: ellipsis;
|
|
// display: -webkit-box;
|
|
// -webkit-box-orient: vertical;
|
|
// -webkit-line-clamp: 1; /* 这里是超出几行省略 */
|
|
|
|
// }
|
|
.two-line-ellipsis {
|
|
display: -webkit-box;
|
|
// white-space:pre-wrap;
|
|
overflow: hidden;
|
|
// text-overflow:ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
.course-card {
|
|
// width: 290px;
|
|
margin-bottom: 15px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
::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, 0.37);
|
|
|
|
.el-icon-caret-right {
|
|
font-size: 36px;
|
|
color: #588afc;
|
|
}
|
|
}
|
|
.course-image-box {
|
|
position: relative;
|
|
// width: 362px;
|
|
// height: 165px;
|
|
width: 100%;
|
|
.course-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
// width: 288px;
|
|
// height: 165px;
|
|
}
|
|
.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 {
|
|
padding: 10px 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;
|
|
|
|
// flex: 1;
|
|
}
|
|
}
|
|
|
|
.study-num {
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
color: #8590a6;
|
|
}
|
|
.course-score {
|
|
padding: 10px 15px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
// border-top: 1px solid #ccc;
|
|
.course-score-star {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
.course-score-no {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #ffb30f;
|
|
line-height: 30px;
|
|
}
|
|
.course-score-value {
|
|
font-size: 14px;
|
|
// margin-top: 5px;
|
|
margin-left: 32px;
|
|
line-height: 30px;
|
|
color: #ffb30f;
|
|
font-family: 'Arial';
|
|
// font-size: 30px;
|
|
}
|
|
.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;
|
|
}
|
|
.modules {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
.modules-title {
|
|
.modules-text {
|
|
height: 28px;
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
}
|
|
.recommend {
|
|
vertical-align: text-bottom;
|
|
height: 26px;
|
|
}
|
|
.quyer-tag {
|
|
margin-left: 15px;
|
|
a {
|
|
color: #343434;
|
|
font-size: 14px;
|
|
margin: 0 15px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
.current {
|
|
color: #5da1ff;
|
|
}
|
|
.current::after {
|
|
content: '';
|
|
width: 18px;
|
|
height: 2px;
|
|
background-color: #5da1ff;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
}
|
|
.more {
|
|
float: right;
|
|
margin-top: 7px;
|
|
color: #666666;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.modules-list {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
.case-card {
|
|
// width: 593px;
|
|
margin-bottom: 15px;
|
|
.case-info-image-box {
|
|
position: relative;
|
|
.case-info {
|
|
width: 385px;
|
|
.case-info-title {
|
|
font-size: 18px;
|
|
color: #343434;
|
|
margin-bottom: 5px;
|
|
.case-info-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: right;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.case-info-summary {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
height: 82px;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
img {
|
|
width: 160px;
|
|
height: 105px;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 0;
|
|
}
|
|
}
|
|
.case-info-box {
|
|
.case-info {
|
|
.case-info-title {
|
|
font-size: 18px;
|
|
color: #343434;
|
|
margin-bottom: 5px;
|
|
.case-info-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: right;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.case-info-summary {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
height: 82px;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
.case-other-info {
|
|
height: 40px;
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.article-card {
|
|
// height: 483px;
|
|
// height: 425px;
|
|
.article-card-left {
|
|
float: left;
|
|
width: 30%;
|
|
.article-card-box {
|
|
.article-info-image-box {
|
|
.article-info {
|
|
.article-info-title {
|
|
font-size: 20px;
|
|
color: #343434;
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
|
|
.article-info-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: right;
|
|
margin-top: 8px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.article-info-summary {
|
|
// padding-top: 30px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
// height: 28px;
|
|
line-height: 18px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
img {
|
|
width: 470px;
|
|
height: 330px;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-card-right {
|
|
// float: right;
|
|
// width: 68%;
|
|
flex: 1;
|
|
margin-left: 20px;
|
|
.article-card-box {
|
|
// height: 160px;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
.article-info-box {
|
|
.article-info {
|
|
display: flex;
|
|
.article-image {
|
|
// width: 150px;
|
|
// height: 150px;
|
|
// margin-right: 10px;
|
|
width: 140px;
|
|
height: 105px;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
.article-body {
|
|
flex: 1;
|
|
.article-info-title {
|
|
font-size: 18px;
|
|
color: #343434;
|
|
margin-bottom: 5px;
|
|
.article-info-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: right;
|
|
margin-top: 8px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.article-info-summary {
|
|
padding-top: 9px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
height: 43px;
|
|
line-height: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-card-box:not(:last-child) {
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
}
|
|
|
|
.article-other-info {
|
|
// height: 40px;
|
|
// margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.qa-card {
|
|
// width: 593px;
|
|
margin-bottom: 15px;
|
|
.qa-info-box {
|
|
cursor: pointer;
|
|
.qa-info {
|
|
.qa-info-title {
|
|
font-size: 18px;
|
|
color: #343434;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.qa-info-shrink {
|
|
flex-shrink: 10000;
|
|
}
|
|
.qa-info-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
float: right;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.qa-info-summary {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
height: 37px;
|
|
overflow: hidden;
|
|
line-height: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
.qa-other-info {
|
|
height: 40px;
|
|
// margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|