mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-08 02:16:46 +08:00
1269 lines
34 KiB
Vue
1269 lines
34 KiB
Vue
<template>
|
||
<view>
|
||
<u-toast ref="messager"></u-toast>
|
||
<!--页面头部-->
|
||
<view class="top" style="padding-top: 6px;">
|
||
<view class="top-bar">
|
||
<view style="position: relative" @click="toMessage()" >
|
||
<view v-if="msgNum>0" style="position: absolute;top:12px;right: 16px;z-index: 999;">
|
||
<u-badge :isDot="true" :offset="[30,30]" type="error"></u-badge>
|
||
</view>
|
||
<u-icon class="top-bar-icon" :size="26" name="bell"></u-icon>
|
||
</view>
|
||
<view class="top-bar-center">
|
||
<u-search
|
||
placeholder="请输入关键字"
|
||
:clearabled="true"
|
||
:showAction="false"
|
||
shape="round"
|
||
@focus="toSearch()"
|
||
bgColor="#F7F7F7">
|
||
</u-search>
|
||
<!-- <view class="top-bar-tab" @click="clicktab(1)" :class="{'active':tabIndex==1}">最热</view>
|
||
<view class="top-bar-tab" @click="clicktab(0)" :class="{'active':tabIndex==0}">最新</view> -->
|
||
</view>
|
||
<!-- <view>
|
||
<u-icon @click="toSearch()" class="top-bar-icon" name="search" :size="26"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!--内容切换区-->
|
||
<view class="con-top">
|
||
<view class="con-tab">
|
||
<view class="con-tab-item" v-for="(item,index) in conTypeList" :key="index" @click="changeConType(item)"
|
||
:class="{'active':conType==item.type,}" >{{item.con}}
|
||
<view class="border-dw" v-show="conType==item.type">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
|
||
<data-filter v-if="conType!=2" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
|
||
</view>
|
||
</view>
|
||
|
||
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
|
||
<view v-if="conType == 1">
|
||
<view class="tags" v-if="dataFilter.courseTags.length>0">
|
||
<u-scroll-list :indicator="false">
|
||
<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
|
||
<view class="tag-item">{{tag.text}} </view>
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<!-- u 选小课堂 -->
|
||
<view class="uxclass" @click="toNewLink">
|
||
<view class="ux_tab">
|
||
<view class="ux-image">
|
||
<image src="../../static/images/utop-course.png" mode=""></image>
|
||
</view>
|
||
<view class="uxtext">
|
||
<view class="">
|
||
<text class="ux-tit">U选小课堂</text>
|
||
</view>
|
||
<view class="ux-cont">千门U选好课,涵盖：前沿趋势、商业财经、职场技能、专业提升，免费持续开放中！BOEer,快来学习吧！</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 课程列表 -->
|
||
<view v-for="(c,cidx) in courseList" :key="cidx" class="con_box">
|
||
<view class="course" @click="toCourseDetail(c)">
|
||
<view class="course-img">
|
||
<view class="course-left">
|
||
<text v-if="c.type==10" class="course-type">录播</text>
|
||
<text v-if="c.type==20" class="course-type">录播</text>
|
||
<text v-if="c.type=='online-course'" class="course-type">录播</text>
|
||
<text v-if="c.type=='face-course'" class="course-type">线下课</text>
|
||
<text v-if="c.type=='project'" class="course-type">学习项目</text>
|
||
<course-image :course="c" width="265upx" height="144upx"></course-image>
|
||
</view>
|
||
<view class="coures-conent">
|
||
<view class="conent-title" v-html="c.name">
|
||
<!-- <u-parse :content="c.name"></u-parse> -->
|
||
</view>
|
||
<view class="con-au">
|
||
<view v-if="c.type==10 || c.type==20" class="item-author" style="display: flex;">
|
||
<!-- <author v-if="c.authorInfo" :showInfo="true" :data="c.authorInfo"></author> -->
|
||
<text style="font-size: 28upx; color: #666666;">{{c.teachersName}}</text>
|
||
</view>
|
||
<view v-else style="font-size: 28upx; color: #666666;padding-top: 10upx;">
|
||
<!-- <text>发布时间：</text><text>{{c.sysCreateTime}}</text> -->
|
||
</view>
|
||
|
||
<!-- <view v-if="c.score==0" class="stu-f">未评分</view> -->
|
||
</view>
|
||
<view class="statuy-ren">
|
||
<view class="">
|
||
<text style="color: #FF8E00;">
|
||
|
||
{{c.studys}}
|
||
</text>
|
||
人学习
|
||
</view>
|
||
|
||
<view class="statuy-score">
|
||
<text >{{converToScore(c.score)}}分</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 文章 -->
|
||
<view>
|
||
<view v-if="conType == 2">
|
||
<view class="article" v-for="(item,irs) in articleList" :key="irs" @click="toArticleDetail(item)">
|
||
<div class="article-content">
|
||
<div class="article-info">
|
||
<view class="article-title">
|
||
{{ item.title }}
|
||
<!-- <text v-if="item.coverurl==''" style="font-size: 14px;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;padding-top: 0rpx;">
|
||
{{item.sysCreateTime.substring(0,10)}}
|
||
</text> -->
|
||
</view>
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view>
|
||
<view class="article-author" style="display: flex;">
|
||
<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
|
||
<text style="padding-top: 8rpx;padding-left: 9rpx;font-size: 26rpx;line-height: 40upx; color: #999999;font-weight: 400; float: right;">
|
||
{{item.sysCreateTime.substring(0,10)}}
|
||
</text>
|
||
</view>
|
||
<view style="margin-top: 7upx;">
|
||
<view class="article-summary" >{{ item.summary }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.coverurl!=''" class="article-img">
|
||
<image :src="fileUrl+item.coverurl" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view style="margin-top: 7upx;">
|
||
<interact-bar :data="item"></interact-bar>
|
||
</view>
|
||
</div>
|
||
<!-- <div v-if="item.coverurl!=''" class="article-img">
|
||
<image :src="fileUrl+item.coverurl" style="width: 200rpx;height: 150rpx;"></image>
|
||
</div> -->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 问答 -->
|
||
<view v-if="conType == 4">
|
||
<view class="tags" v-if="dataFilter.qaTags.length>0">
|
||
<u-scroll-list :indicator="false">
|
||
<view v-for="(tag, tagIdx) in dataFilter.qaTags" :key="tagIdx" >
|
||
<view class="tag-item">{{tag.text}} </view>
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<view class="qa" v-for="(item,irs) in qaList" :key="irs">
|
||
<view class="content">
|
||
<view class="content-list" @click="toQaDetail(item)">
|
||
<view class="content-title">
|
||
<!-- qa-basic -->
|
||
<text v-if="item.isResolve" class="qa-solve">[已解决] </text>
|
||
<text v-else class="qa-unSolve">[待解决] </text>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
<view class="item-author" style="display: flex;" @click="toQaDetail(item)">
|
||
<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
|
||
<text style="padding-top: 8rpx;padding-left: 9rpx;line-height: 40upx; color: #999; font-size: 26rpx; ">
|
||
{{item.sysCreateTime.substring(0,10)}}
|
||
</text>
|
||
</view>
|
||
<view class="content-listtwo" @click="toQaDetail(item)">
|
||
<view class="list-details">
|
||
<view class="list-text" >{{item.content }}</view>
|
||
<view class="list-best" v-if="item.isResolve" >
|
||
<text style="color:#FFB30F">最佳回答：</text>
|
||
{{item.bestAnswer}}</view>
|
||
</view>
|
||
<view style="margin-top: 10rpx;margin-left: 10rpx;" v-if="item.images != ''" @click="toQaDetail(item)">
|
||
<image :src="fileUrl+item.images" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view style="margin-top: 0px;">
|
||
<interact-bar :data="item" :comments="false" :answers="true"></interact-bar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view >
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
|
||
import apiArticle from '@/api/modules/article.js'
|
||
import apiCourse from '@/api/modules/course.js'
|
||
// import apiOldCourse from '@/api/boe/course.js'
|
||
import apiCoursePortal from '@/api/modules/coursePortal.js'
|
||
import apiIndex from '@/api/modules/index.js'
|
||
import apiUser from '@/api/system/user.js'
|
||
import apiQa from '@/api/modules/qa.js'
|
||
import apiMessage from '@/api/system/message.js'
|
||
import {toScore} from '@/utils/tools.js'
|
||
import apiBoeCourse from '@/api/boe/course.js'
|
||
export default {
|
||
data(){
|
||
return {
|
||
noPageList: true,//判断接口是否还有数据
|
||
noDataList: true,//判断接口是否还有数据
|
||
msgNum:0,
|
||
courseList:[],//课程列表数据
|
||
articleList: [],//文章列表数据
|
||
qaList: [],//问答列表数据
|
||
tabIndex: 1,
|
||
conType: 1,
|
||
loadStatus: 'more',
|
||
pageSize:20,//统一每页多少条
|
||
converToScore:toScore,
|
||
conTypeList: [
|
||
//{type: 0,con: '全部'},
|
||
{type: 1,con: '课程'},
|
||
{type: 2,con: '文章'},
|
||
{type: 4,con: '问答'},
|
||
],
|
||
fileUrl:this.$config.fileUrl,
|
||
dataFilter:{
|
||
courseTags:[],
|
||
courseParams:{},
|
||
qaTags:[],
|
||
qaParams:{}
|
||
},
|
||
dataList:{
|
||
list00:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more', list:[]},
|
||
list01:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list02:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list04:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list10:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list11:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list12:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
|
||
list14:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]}
|
||
},
|
||
dataName:'list01',
|
||
totalPages:1,
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.onReachBottom();
|
||
},
|
||
onReachBottom() {
|
||
//this.loadStatus='loading';//more,loading,noMore
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
//this.dataList[this.dataName].pageIndex++;
|
||
let curData=this.dataList[this.dataName];
|
||
if(curData.hasMore){
|
||
curData.pageIndex++;
|
||
if(this.conType== 1) {// 课程
|
||
this.findCourseData();
|
||
} else if(this.conType == 2) {// 文章
|
||
this.findArticleData();
|
||
} else if(this.conType == 4) {// 问答
|
||
this.findQaData();
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
//this.$watermark.set('');
|
||
},
|
||
onShow() {
|
||
|
||
this.countNoReadMsg();
|
||
},
|
||
mounted() {
|
||
this.findCourseData();
|
||
},
|
||
methods: {
|
||
toNewLink(){
|
||
location.href='https://m.qingxuetang.com/x/?appId=qxtcorp306130';
|
||
},
|
||
countNoReadMsg(){
|
||
apiMessage.isRead().then(rs=>{
|
||
if(rs.status==200){
|
||
this.msgNum=rs.result;
|
||
}else{
|
||
console.log('加载未读消息数量失败:'+rs.message);
|
||
}
|
||
})
|
||
},
|
||
reLoad(){
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let curData=this.dataList[this.dataName];
|
||
curData.list=[];
|
||
curData.pageIndex=1;
|
||
if(this.conType== 1) {// 课程
|
||
this.findCourseData();
|
||
} else if(this.conType == 2) {// 文章
|
||
this.findArticleData();
|
||
} else if(this.conType == 4) {// 问答
|
||
this.findQaData();
|
||
}
|
||
},
|
||
resetFilters(){
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let curData=this.dataList[this.dataName];
|
||
if(this.conType==1){
|
||
this.dataFilter.courseTags=[];
|
||
this.dataFilter.courseParams={};
|
||
this.reLoad();
|
||
}else if(this.conType==4){
|
||
this.dataFilter.qaTags=[];
|
||
this.dataFilter.qaParams={};
|
||
this.reLoad();
|
||
}
|
||
|
||
},
|
||
submitFilters(tags,params){
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let curData=this.dataList[this.dataName];
|
||
curData.pageIndex=1;
|
||
this.noDataList=true;
|
||
this.noPageList=true;
|
||
if(this.conType==1){
|
||
this.dataFilter.courseTags=tags;
|
||
this.dataFilter.courseParams=params;
|
||
this.reLoad();
|
||
}else if(this.conType==4){
|
||
this.dataFilter.qaTags=tags;
|
||
this.dataFilter.qaParams=params;
|
||
this.reLoad();
|
||
}
|
||
},
|
||
findQaData(){
|
||
//pageIndex,pageSize,keyWord(关键词)，isResolve(待解决和已解决，false,true),
|
||
//isEssence(是否是精华问题,true或者false,),orderField 排序字段，前端给什么字段，根据什么字段查询
|
||
//排序顺序 orderAsc(顺序或者倒叙),true顺序，
|
||
let curData=this.dataList[this.dataName];
|
||
let queryObj={
|
||
pageIndex: curData.pageIndex,
|
||
orderField:'',
|
||
orderAsc:false,
|
||
isEssence:'',
|
||
isResolve:'',
|
||
status:1
|
||
};
|
||
if(this.tabIndex==0){
|
||
queryObj.orderField='id';
|
||
}else{
|
||
queryObj.orderField='answers';
|
||
}
|
||
if(this.dataFilter.qaParams.isEssence){
|
||
queryObj.isEssence=this.dataFilter.qaParams.isEssence;
|
||
}
|
||
// if(this.dataFilter.qaParams.isResolve){
|
||
queryObj.isResolve=this.dataFilter.qaParams.isResolve;
|
||
// }
|
||
uni.showLoading({title:'加载中...'});
|
||
apiQa.pageList(queryObj).then(res=>{
|
||
setTimeout(function(){ uni.hideLoading() },100);
|
||
if(res.status==200){
|
||
|
||
let userIds=[];
|
||
res.result.list.forEach(item=>{
|
||
item.authorInfo={avatar:'',name:'',code:'',sex:null};
|
||
curData.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
if(curData.pageIndex>=res.result.totalPages){
|
||
curData.hasMore=false;
|
||
curData.loadText='noMore';
|
||
}else{
|
||
curData.hasMore=true;
|
||
curData.loadText='more';
|
||
}
|
||
this.loadUserInfos(res.result.list,userIds);
|
||
this.qaList=curData.list;
|
||
if(curData.hasMore){
|
||
this.loadStatus='more';
|
||
}else{
|
||
this.loadStatus='noMore';
|
||
}
|
||
}else{
|
||
uni.showToast({icon: 'none',title:"获取数据失败"});
|
||
}
|
||
})
|
||
|
||
},
|
||
//拿到课程数据列表方法
|
||
async findCourseData(){
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let curData=this.dataList[this.dataName];
|
||
let isTopList = [];// 置顶数据
|
||
let data = [];
|
||
let query = {
|
||
pageIndex:curData.pageIndex,
|
||
pageSize:10,
|
||
orderField:'',
|
||
topOrder:true,
|
||
orderAsc:false,
|
||
device:2,
|
||
publish:true,
|
||
sysType1:'',
|
||
sysType2:'',
|
||
sysType3:'',
|
||
scenes:'',
|
||
type:''
|
||
}
|
||
let oldPageIndex = 0;
|
||
if(this.dataFilter.courseParams.type == undefined && this.dataFilter.courseParams.cateName == undefined) {
|
||
oldPageIndex = curData.pageIndex-3;
|
||
}
|
||
else {
|
||
oldPageIndex = curData.pageIndex;
|
||
}
|
||
let oldParams={type:'',page:oldPageIndex,size:10,cateName:this.dataFilter.courseParams.cateName,sort:''};//老数据的查询条件
|
||
let courseType=this.dataFilter.courseParams.type;
|
||
if(this.tabIndex==0){
|
||
query.orderField='id';
|
||
oldParams.sort = 'new';
|
||
}else{
|
||
query.orderField='studys';
|
||
oldParams.sort = 'hot';
|
||
}
|
||
if(courseType){
|
||
query.type=courseType;
|
||
if(courseType==10){
|
||
oldParams.type='weike';
|
||
}else if(courseType==20){
|
||
oldParams.type='online-course';
|
||
}else if(courseType==30){
|
||
//query.type=courseType;
|
||
oldParams.type='face-course';
|
||
}else if(courseType==40){
|
||
//query.type=courseType;
|
||
oldParams.type='project';
|
||
}else{
|
||
//oldParams.type=courseType;
|
||
}
|
||
|
||
}
|
||
// if(this.dataFilter.courseParams.scenes){
|
||
// query.scenes=this.dataFilter.courseParams.scenes;
|
||
// }
|
||
if(this.dataFilter.courseParams.sysType1){
|
||
query.sysType1=this.dataFilter.courseParams.sysType1;
|
||
}
|
||
if(this.dataFilter.courseParams.sysType2){
|
||
query.sysType2=this.dataFilter.courseParams.sysType2;
|
||
}
|
||
if(this.dataFilter.courseParams.sysType3){
|
||
query.sysType3=this.dataFilter.courseParams.sysType3;
|
||
}
|
||
if(curData.pageIndex > this.totalPages) {
|
||
this.noDataList = true;
|
||
oldParams.page=curData.pageIndex-this.totalPages;
|
||
}else{
|
||
if(this.totalPages<3){
|
||
this.noDataList = false;
|
||
}
|
||
}
|
||
// if(oldParams.page < 1) {
|
||
// this.noDataList = false;
|
||
// } else {
|
||
// this.noDataList = true;
|
||
// }
|
||
//从新课程库中取10条，从老库中取10条 keyword:this.course.keyword
|
||
if(courseType == 30 || courseType == 40) {
|
||
this.noPageList = false;
|
||
}
|
||
uni.showLoading({title:'加载中...'});
|
||
if(courseType!=10){
|
||
this.noDataList && await apiBoeCourse.courseList(oldParams).then(res=>{
|
||
setTimeout(function(){ uni.hideLoading() },100);
|
||
if(res.status==200 && res.result.dataList.length > 0){
|
||
let list = this.filterConversion(res.result.dataList);
|
||
list.forEach(item=>{
|
||
// curData.list.push(item);
|
||
data.push(item);
|
||
});
|
||
// this.courseList=curData.list;
|
||
} else {
|
||
this.noDataList = false;
|
||
}
|
||
})
|
||
}
|
||
this.noPageList && await apiCoursePortal.pageList(query).then(res=>{
|
||
setTimeout(function(){ uni.hideLoading() },100);
|
||
if(res.status==200 && res.result.list.length>0){
|
||
this.totalPages = res.result.totalPages;
|
||
let courseIds=[];
|
||
res.result.list.forEach(item=>{
|
||
item.authorInfo={avatar:'',name:'',code:'',sex:null};
|
||
item.teachersName = '';
|
||
item.teachersId = '';
|
||
// curData.list.push(item);
|
||
// data.push(item);
|
||
courseIds.push(item.id);
|
||
if(item.isTop) {
|
||
isTopList.push(item);
|
||
} else {
|
||
data.push(item);
|
||
}
|
||
});
|
||
this.loadCouserTeacher(res.result.list,courseIds);
|
||
}else{
|
||
this.noPageList = false;
|
||
}
|
||
})
|
||
if(this.tabIndex==0) {//最新
|
||
// curData.list.sort(this.pcompare("publishTime",false))
|
||
data.sort(this.pcompare("publishTime",false))
|
||
}
|
||
if(this.tabIndex==1) {//最热
|
||
// curData.list.sort(this.pcompare("studys",false))
|
||
data.sort(this.pcompare("studys",false))
|
||
}
|
||
// curData.list.sort(this.pcompare("sysCreateTime",false));
|
||
curData.list.push(...isTopList,...data);
|
||
this.courseList=curData.list;
|
||
if(this.noPageList || this.noDataList) {
|
||
this.loadStatus='more';
|
||
} else if(!this.noPageList && !this.noDataList) {
|
||
this.loadStatus='noMore';
|
||
}
|
||
},
|
||
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),//学习人数
|
||
score: item.score,
|
||
avatar: '',
|
||
code: '',
|
||
sex:null,
|
||
sysCreateTime:item.releaseDate,//用于记录时间，
|
||
sysCreateBy:'',
|
||
})
|
||
})
|
||
return list;
|
||
},
|
||
|
||
|
||
//拿到文章数据列表方法
|
||
findArticleData(){
|
||
//console.log('查询文章');
|
||
let curData=this.dataList[this.dataName];
|
||
let artdata = {
|
||
pageIndex:curData.pageIndex,
|
||
pageSize:20,
|
||
order:this.tabIndex==0? 1:2
|
||
}
|
||
uni.showLoading({title:'加载中...'});
|
||
apiArticle.findPortal(artdata).then(res=>{
|
||
setTimeout(function(){ uni.hideLoading() },100);
|
||
if(res.status==200){
|
||
let userIds=[];
|
||
res.result.list.forEach(item=>{
|
||
item.authorInfo={avatar:'',name:'',code:'',sex:null};
|
||
curData.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
if(curData.pageIndex>=res.result.totalPages){
|
||
curData.hasMore=false;
|
||
}else{
|
||
curData.hasMore=true;
|
||
}
|
||
this.loadUserInfos(res.result.list,userIds);
|
||
this.articleList=curData.list;
|
||
if(curData.hasMore){
|
||
this.loadStatus='more';
|
||
}else{
|
||
this.loadStatus='noMore';
|
||
}
|
||
}
|
||
else{
|
||
//this.$refs.message.show({message:'加载文章数据失败',type:'error'});
|
||
console.log(res.message,res.error);
|
||
}
|
||
})
|
||
},
|
||
//
|
||
//文章跳转详情
|
||
toArticleDetail(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/articeDetail?id=' + item.id
|
||
});
|
||
},
|
||
toQaDetail(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/qaDetail?id=' + item.id
|
||
});
|
||
},
|
||
//课程跳转详情
|
||
toCourseDetail(citem) {
|
||
if(isNaN(citem.type)){
|
||
uni.navigateTo({
|
||
url: '/pages/study/studydetail?id='+citem.id+'&type='+citem.type
|
||
});
|
||
} else {
|
||
if (citem.type == 10) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/microDetail?id=' + citem.id
|
||
});
|
||
} else if (citem.type == 20) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/courseDetail?id=' +citem.id
|
||
});
|
||
}
|
||
}
|
||
},
|
||
toMessage() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/message'
|
||
})
|
||
},
|
||
toSearch(){
|
||
let pageUrl='/pages/resource/search';
|
||
uni.navigateTo({
|
||
url:pageUrl
|
||
})
|
||
},
|
||
changeList(){
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let curData=this.dataList[this.dataName];
|
||
if(curData.list.length==0){
|
||
if(this.conType== 1) {// 课程
|
||
this.findCourseData();
|
||
} else if(this.conType == 2) {// 文章
|
||
this.findArticleData();
|
||
} else if(this.conType == 4) {// 问答
|
||
this.findQaData();
|
||
}
|
||
}else{
|
||
if(this.conType== 1) {//课程
|
||
this.courseList=curData.list;
|
||
} else if(this.conType == 2) {// 文章
|
||
this.articleList=curData.list;
|
||
} else if(this.conType == 4) {// 问答
|
||
this.qaList=curData.list;
|
||
}
|
||
}
|
||
},
|
||
clicktab(idx) {
|
||
this.tabIndex = idx;
|
||
this.noPageList= true,//判断接口是否还有数据
|
||
this.noDataList= true,//判断接口是否还有数据
|
||
this.changeList();
|
||
},
|
||
changeConType(item) {
|
||
this.conType = item.type;
|
||
this.changeList();
|
||
},
|
||
loadCouserTeacher(list,ids){ //临时解决方案，单独的查询课程教师
|
||
let that = this;
|
||
//先查课程关联教师iD
|
||
apiCoursePortal.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.teachersName = courseTeahcer.names[0];
|
||
item.teachersId = courseTeahcer.teacherIds[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;
|
||
if(author.avatar != '') {
|
||
item.authorInfo.avatar = this.$config.fileUrl + author.avatar;
|
||
}
|
||
item.authorInfo.name = author.name;
|
||
item.authorInfo.sex = author.sex;
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
});
|
||
}else{
|
||
console.log('查询课程教师用户信息失败:'+res.error);
|
||
//this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
toProductAgree(){
|
||
uni.navigateTo({
|
||
url: '/pages/plus/feedback'
|
||
})
|
||
},
|
||
loadUserInfos(list,userIds){
|
||
let $this=this;
|
||
const noReapetIds=[...new Set(userIds)]
|
||
apiUser.getByIds(noReapetIds).then(res=>{
|
||
if(res.status==200){
|
||
list.forEach(item=>{
|
||
res.result.some(author=>{
|
||
if(author.aid==item.sysCreateAid){
|
||
|
||
item.authorInfo={
|
||
avatar:author.avatar,
|
||
code:author.code,
|
||
name:author.name,
|
||
sex:author.sex
|
||
};
|
||
if(author.avatar!=''){
|
||
item.authorInfo.avatar=$this.fileUrl+author.avatar;
|
||
}
|
||
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
})
|
||
}else{
|
||
console.log('查询用户信息失败:'+res.error);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uxclass{
|
||
width: 100%;
|
||
height: 200rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
.ux_tab{
|
||
display: flex;
|
||
padding: 10px 15px;
|
||
.ux-image{
|
||
width: 265upx;
|
||
height: 144upx;
|
||
margin-top: 6upx;
|
||
margin-right: 10rpx;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 16upx;
|
||
}
|
||
}
|
||
.uxtext{
|
||
flex: 1;
|
||
// padding-left: 5px;
|
||
// padding-top: 8rpx;
|
||
margin-left: 10px;
|
||
.ux-tit{
|
||
|
||
font-size: 32upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
.ux-cont{
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 35rpx;
|
||
color: #333;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tags{
|
||
padding: 10upx;
|
||
line-height: 30upx;
|
||
.u-scroll-list{
|
||
padding-bottom: 0px;
|
||
}
|
||
.tag-item{
|
||
display: inline-block;
|
||
padding: 10upx 35upx;
|
||
white-space:nowrap;
|
||
margin: 10upx;
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #e7e7e7;
|
||
font-size: 26upx;
|
||
border-radius: 28upx;
|
||
}
|
||
}
|
||
.qalabel{
|
||
//border: 1px solid #d7d7d7;
|
||
line-height: 16upx;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
padding: 5upx 10upx 0upx 0upx;
|
||
}
|
||
.con_box {
|
||
margin-bottom: 10px;
|
||
background-color: #FFFFFF;
|
||
padding: 10px 15px;
|
||
// margin-top: 10px;
|
||
.tit {
|
||
font-size: 32rpx;
|
||
color: #4c4c4c;
|
||
font-weight: 35upx;
|
||
margin-bottom: 10upx;
|
||
}
|
||
}
|
||
.course {
|
||
.course-img {
|
||
display: flex;
|
||
align-items: center;
|
||
/deep/ .course-left{
|
||
width: 262upx;
|
||
height: 147upx;
|
||
margin-top: 4upx;
|
||
position: relative;
|
||
margin-right: 10rpx;
|
||
uni-image {
|
||
// width: 152upx;
|
||
// height: 88upx;
|
||
border-radius: 16upx;
|
||
}
|
||
}
|
||
.con-con {
|
||
// display: flex;
|
||
flex-direction: column;
|
||
font-size: 14px;
|
||
color: #444444;
|
||
padding-left: 10upx;
|
||
margin-top: 3px;
|
||
margin-bottom: 6px;
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
.con-au {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// padding-top: 20upx;
|
||
|
||
image {
|
||
border-radius: 50%;
|
||
}
|
||
/deep/ .item-author{
|
||
>view:nth-of-type(1){
|
||
display:none
|
||
}
|
||
>view:nth-of-type(2){
|
||
padding-left:0!important;
|
||
}
|
||
}
|
||
}
|
||
.im {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin-right: 8upx;
|
||
}
|
||
.tet {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
padding-top: 10upx;
|
||
}
|
||
.coures-conent{
|
||
margin-left: 10px;
|
||
// padding: 10upx 10upx 0 15upx;
|
||
display: flex;
|
||
flex-direction:column;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
// overflow: hidden;
|
||
height: 147upx;
|
||
.conent-title{
|
||
width: 199px;
|
||
font-size: 32upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
white-space:nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.stu-f {
|
||
font-size: 28upx;
|
||
color: #FFB30F;
|
||
font-weight: 500;
|
||
// margin-top: 5upx;
|
||
}
|
||
.statuy-ren{
|
||
font-size: 24upx;
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// font-size: 25upx;
|
||
.statuy-score{
|
||
color: #FFB30F;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
// height: 100%;
|
||
}
|
||
|
||
}
|
||
.stu_c {
|
||
display:flex;
|
||
justify-content: space-between;
|
||
.stu_e {
|
||
margin-top: 10upx;
|
||
display: flex;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
}
|
||
.stu_e :nth-child(2) {
|
||
margin-left: 40upx;
|
||
}
|
||
.stu-f {
|
||
font-size: 20upx;
|
||
color: #FFB30F;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.article {
|
||
// height: 264upx;
|
||
margin-bottom: 10px;
|
||
background-color: #FFFFFF;
|
||
padding: 20upx 28upx 10upx 28upx;
|
||
margin-top: 5px;
|
||
.article-content{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.article-info{
|
||
flex: 1;
|
||
.article-title{
|
||
font-size: 30rpx;
|
||
color: #040404;
|
||
font-weight: 610;
|
||
letter-spacing: 0.5px;
|
||
//line-height: 42px;
|
||
margin-bottom: 15rpx;
|
||
word-break:break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;-webkit-line-clamp: 2;
|
||
}
|
||
.article-author{
|
||
display: flex;
|
||
padding-top: 0upx;
|
||
}
|
||
.article-summary{
|
||
word-break:break-all;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
color: #454545;
|
||
line-height: 39rpx;
|
||
// height: 80upx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
.article-img{
|
||
// width: 100px;
|
||
// height: 75px;
|
||
// margin: 0px 10px;
|
||
padding-left: 20rpx;
|
||
margin-top: 18rpx;
|
||
|
||
image{
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.qa {
|
||
// height: 264upx;
|
||
background: #FFFFFF;
|
||
margin-bottom: 10px;
|
||
margin-top: 5px;
|
||
padding: 20upx 28upx 10upx 28upx;
|
||
.content{
|
||
padding: 0px;
|
||
.content-list{
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 10upx 0upx;
|
||
margin-right: 8upx;
|
||
.content-title{
|
||
font-weight: 610;
|
||
font-size: 30rpx;
|
||
color: #040404;
|
||
word-break:break-all;
|
||
//line-height: 42px;
|
||
margin-bottom: 15rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
|
||
|
||
}
|
||
.content-time{
|
||
flex: 1;
|
||
margin-left: 5rpx;
|
||
font-size: 15rpx;
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
}
|
||
.content-listtwo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10upx;
|
||
// height: upx;
|
||
// margin-left: 8upx;
|
||
margin-right: 8upx;
|
||
.list-details{
|
||
|
||
.list-text{
|
||
font-size: 30rpx;
|
||
color: #454545;
|
||
line-height: 45upx;
|
||
font-family: Source Han Sans CN;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
word-break:break-all;
|
||
margin-bottom: 10rpx;
|
||
|
||
}
|
||
.list-best{
|
||
font-size:30rpx;
|
||
color: #454545;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
word-break:break-all;
|
||
-webkit-line-clamp: 2;
|
||
line-height: 45rpx;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top {
|
||
background: #FFFFFF;
|
||
position: relative;
|
||
.top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// height: 50px;
|
||
// line-height: 50px;
|
||
.top-bar-alert{
|
||
position: absolute;
|
||
left:30px;
|
||
top:-6px;
|
||
color:#ff5500;
|
||
font-size: 12rpx;
|
||
}
|
||
.top-bar-icon {
|
||
margin-left: 14px;
|
||
margin-right: 14px;
|
||
margin-top: 12px;
|
||
}
|
||
/deep/ .top-bar-center {
|
||
display: flex;
|
||
font-size: 35upx;
|
||
flex: 1;
|
||
margin-right: 15px;
|
||
margin-top: 18rpx;
|
||
.top-bar-tab {
|
||
margin: 0upx 50upx;
|
||
color: #666666;
|
||
font-size: 30upx;
|
||
}
|
||
.active {
|
||
border-bottom: 2px solid #588AFC;
|
||
color: #333333;
|
||
font-size: 36upx;
|
||
}
|
||
|
||
.u-search__content{
|
||
// border-radius: 999px!important;
|
||
height: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.con-top{
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
padding: 14upx 0upx;
|
||
background-color: #fff;
|
||
margin-bottom: 10px;
|
||
.con-tab{
|
||
display: flex;
|
||
padding-top: 5upx;
|
||
|
||
.con-tab-item {
|
||
padding: 0upx 0upx;
|
||
margin: 0 20rpx;
|
||
color: #666666;
|
||
text-align: center;
|
||
height: 33px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.active {
|
||
font-weight: 700;
|
||
padding-bottom: 5rpx;
|
||
font-size: 37rpx;
|
||
height: 33px;
|
||
box-sizing: border-box;
|
||
color: #666666;
|
||
font-weight: bold;
|
||
// border-bottom: 2px solid #007AFF;
|
||
}
|
||
.border-dw{
|
||
height: 2px;
|
||
width: 16px;
|
||
position: absolute;
|
||
// position: relative;
|
||
left: 25%;
|
||
top: 86%;
|
||
background-color: #007AFF
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.item-author{
|
||
font-size: 0.9em;
|
||
// margin-bottom: 10rpx;
|
||
}
|
||
.items{
|
||
margin-bottom: 30upx;
|
||
.item{
|
||
|
||
margin-bottom: 20upx;
|
||
background: #ffffff;
|
||
position: relative;
|
||
padding: 20upx;
|
||
.item-title{
|
||
line-height: 48upx;
|
||
font-size: 1.1em;
|
||
}
|
||
.item-info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
padding: 10upx 0upx;
|
||
color: #8f8f8f;
|
||
|
||
.item-score{
|
||
|
||
}
|
||
.item-time{
|
||
font-size: 0.8em;
|
||
color: #828282;
|
||
}
|
||
}
|
||
.item-image{
|
||
|
||
}
|
||
.item-con{
|
||
line-height: 40upx;
|
||
font-size: 0.9em;
|
||
color: #333333;
|
||
.item-con-img{
|
||
float: right;
|
||
width:320upx;
|
||
height: 180upx;
|
||
}
|
||
}
|
||
.item-foot{
|
||
display: flex;
|
||
padding-top: 26upx;
|
||
.item-foot-num{
|
||
margin-left: 15upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.course-type{
|
||
position:absolute;
|
||
bottom: 8px;
|
||
right: -1px;
|
||
text-align: center;
|
||
line-height: 15px;
|
||
background-color: #7f7f7f;
|
||
font-size: 10px;
|
||
opacity: 0.7;
|
||
color: #FFFFFF;
|
||
z-index: 88;
|
||
padding: 1px 5px;
|
||
border-radius: 10px 0px 0px 10px;
|
||
}
|
||
.empty{
|
||
text-align: center;
|
||
padding-top: 100px;
|
||
color: #999999;
|
||
/deep/ .items{
|
||
.u-empty{
|
||
.u-empty__text{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.agreeTip{
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: rgb(192, 196, 204);
|
||
.productAgree{
|
||
font-size: 18px;
|
||
color: black;
|
||
}
|
||
}
|
||
}
|
||
</style>
|