mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-07 01:46:44 +08:00
441 lines
12 KiB
Vue
441 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<!--查询-->
|
||
<u-popup :show="searchShow" mode="top" @close="closeSearch()">
|
||
<view style="background-color: #f2f2f2;">
|
||
<view style="padding: 20upx;">
|
||
<u-search shape="round" placeholder="关键词" borderColor="#ffb30f"></u-search>
|
||
</view>
|
||
<view class="search-words">
|
||
<view class="search-words-type">
|
||
<text>搜索历史</text>
|
||
</view>
|
||
<view class="search-words-tag">
|
||
<text>企业文化</text><text>美女</text>
|
||
</view>
|
||
<view class="search-words-type">
|
||
<text>热门搜索</text>
|
||
</view>
|
||
<view class="search-words-tag">
|
||
<text>企业文化</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!--页面头部-->
|
||
<view class="top">
|
||
<view class="top-bar">
|
||
<view style="position: relative" @click="system()" >
|
||
<!-- <text class="top-bar-alert">●</text> -->
|
||
<view style="position: absolute;top:16px;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">
|
||
<view class="top-bar-tab" @click="clicktab(0)" :class="{'active':tabIndex==0}">最新</view>
|
||
<view class="top-bar-tab" @click="clicktab(1)" :class="{'active':tabIndex==1}">最热</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>
|
||
</view>
|
||
</view>
|
||
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
|
||
<view class="items">
|
||
<!--每条信息的显示,id,type,title,-->
|
||
<view class="item" v-for="(item,idx) in dataList[dataName].list" :key="idx">
|
||
<view @click="toPage(item)">
|
||
<view class="item-title">{{item.title}}</view>
|
||
<view class="item-info">
|
||
<view class="item-author" style="display: flex;">
|
||
<view>
|
||
<u-avatar v-if="item.avatar==''" :size="25" shape="square" icon="account"></u-avatar>
|
||
<u-avatar v-else :size="25" shape="square" :src="item.avatar"></u-avatar>
|
||
</view>
|
||
<view style="padding-left: 10upx;">({{item.sysCreateBy}})</view>
|
||
</view>
|
||
<view v-if="item.type==1" class="item-time"><text style="color:#FFB30F;font-size: 1.5em;">{{item.views}}</text>分</view>
|
||
<view v-if="item.type>1" class="item-time">{{item.sysCreateTime}} </view>
|
||
</view>
|
||
|
||
<view v-if="item.type==1 && item.images!=''" style="position: relative;">
|
||
<!-- <image :src="fileUrl+item.images" mode ="aspectFill" style="width: 100%;"></image> -->
|
||
<course-image :course="item" width="100%" height="400upx" ></course-image>
|
||
<text v-if="item.ctype == 10" class="course-type">录播</text>
|
||
<text v-if="item.ctype == 20" class="course-type">录播</text>
|
||
</view>
|
||
<view v-if="item.type>1 && item.summary!=''" class="item-con">
|
||
{{item.summary}}
|
||
</view>
|
||
</view>
|
||
<view class="item-foot">
|
||
<view>
|
||
<text v-if="item.type==1" style="color: #FFB30F;">课程</text>
|
||
<text v-if="item.type==2" style="color: #5ba2fc;">文章</text>
|
||
<text v-if="item.type==4" style="color: #08a890;">问答</text>
|
||
</view>
|
||
<view class="item-foot-num">
|
||
<u-icon v-if="item.type==1" name="eye" color="#666666" size="20" :label="item.studys+'人学习'"></u-icon>
|
||
<u-icon v-else name="chat" size="20" color="#666666" :label="item.comments"></u-icon>
|
||
</view>
|
||
<view class="item-foot-num">
|
||
<u-icon v-if="item.type==1" name="thumb-up" color="#666666" size="20" :label="item.praises+'人点赞'"></u-icon>
|
||
<u-icon v-else name="thumb-up" size="20" color="#666666" :label="item.praises"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
<!--查询-->
|
||
<u-popup :show="searchShow" mode="top" @close="closeSearch()">
|
||
<view style="background-color: #f2f2f2;">
|
||
<view style="padding: 20upx;">
|
||
<u-search shape="round" placeholder="关键词" borderColor="#ffb30f"></u-search>
|
||
</view>
|
||
<view class="search-words">
|
||
<view class="search-words-type">
|
||
<text>搜索历史</text>
|
||
</view>
|
||
<view class="search-words-tag">
|
||
<text>企业文化</text><text>美女</text>
|
||
</view>
|
||
<view class="search-words-type">
|
||
<text>热门搜索</text>
|
||
</view>
|
||
<view class="search-words-tag">
|
||
<text>企业文化</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
|
||
import apiArticle from '@/api/modules/article.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 config from '@/config/index.js'
|
||
export default {
|
||
data(){
|
||
return {
|
||
tabIndex: 0,
|
||
conType: 0,
|
||
loadStatus: 'more',
|
||
searchShow:false,
|
||
pageSize:10,//统一每页多少条
|
||
conTypeList: [
|
||
{type: 0,con: '全部'},
|
||
{type: 1,con: '课程'},
|
||
{type: 2,con: '文章'},
|
||
{type: 4,con: '问答'},
|
||
],
|
||
fileUrl:config.fileUrl,
|
||
dataList:{
|
||
list00:{pageIndex:1,hasMore:true,list:[]},
|
||
list01:{pageIndex:1,hasMore:true,list:[]},
|
||
list02:{pageIndex:1,hasMore:true,list:[]},
|
||
list04:{pageIndex:1,hasMore:true,list:[]},
|
||
list10:{pageIndex:1,hasMore:true,list:[]},
|
||
list11:{pageIndex:1,hasMore:true,list:[]},
|
||
list12:{pageIndex:1,hasMore:true,list:[]},
|
||
list14:{pageIndex:1,hasMore:true,list:[]}
|
||
},
|
||
dataName:'list00'
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.onReachBottom();
|
||
},
|
||
onReachBottom() {
|
||
this.loadStatus='loading';//more,loading,noMore
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
this.dataList[this.dataName].pageIndex++;
|
||
this.findData(false);
|
||
},
|
||
mounted() {
|
||
this.findData(true);
|
||
},
|
||
methods: {
|
||
system() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/message'
|
||
})
|
||
},
|
||
showSearch(){
|
||
this.searchShow=true;
|
||
},
|
||
closeSearch(){
|
||
this.searchShow=false;
|
||
},
|
||
toSearch(){
|
||
let pageUrl='/pages/resource/search';
|
||
uni.navigateTo({
|
||
url:pageUrl
|
||
})
|
||
},
|
||
clicktab(idx) {
|
||
this.tabIndex = idx;
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let len=this.dataList[this.dataName].list.length;
|
||
if(len==0){
|
||
this.findData(false);
|
||
}
|
||
|
||
},
|
||
changeConType(item) {
|
||
this.conType = item.type;
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
let len=this.dataList[this.dataName].list.length;
|
||
if(len==0){
|
||
this.findData(false);
|
||
}
|
||
},
|
||
findData(flag){ //是否重置列表
|
||
//哪个列表
|
||
this.dataName='list'+this.tabIndex+this.conType;
|
||
//console.log(this.dataName);
|
||
let curList=this.dataList[this.dataName];
|
||
let $this=this;
|
||
//生成查询条件
|
||
uni.showLoading({title:'加载中...'})
|
||
//查询条件
|
||
let params={
|
||
pageIndex:curList.pageIndex,
|
||
pageSize:this.pageSize,
|
||
type:this.conType,
|
||
orderType:this.tabIndex
|
||
}
|
||
if(flag){
|
||
curList.list=[];
|
||
}
|
||
if(this.conType==0){ //查询全部
|
||
apiIndex.findAll(params).then(rs=>{
|
||
if(rs.status==200){
|
||
let userIds=[];
|
||
rs.result.list.forEach(item=>{
|
||
curList.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
this.loadUserInfos(rs.result.list,userIds);
|
||
}
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
})
|
||
}else { //查询问答
|
||
apiIndex.findByType(params).then(rs=>{
|
||
if(rs.status==200){
|
||
let userIds=[];
|
||
rs.result.list.forEach(item=>{
|
||
curList.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
this.loadUserInfos(rs.result.list,userIds);
|
||
}
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
})
|
||
}
|
||
setTimeout(function(){$this.loadStatus='more';},1000);
|
||
},
|
||
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){
|
||
if(author.avatar!=''){
|
||
item.avatar=$this.fileUrl+author.avatar;
|
||
}
|
||
item.orgInfo=author.orgInfo;
|
||
return true;
|
||
}
|
||
return false;
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
toPage(item) {
|
||
//根据判断是转赂课程1，文章 2，问答4
|
||
let pageUrl='';
|
||
if (item.type ==1) {
|
||
if(item.ctype==10){
|
||
pageUrl='/pages/resource/microDetail?id='+ item.id
|
||
}else if(item.ctype==20){
|
||
pageUrl='/pages/resource/courseDetail?id='+ item.id
|
||
}
|
||
} else if (item.type == 2) {
|
||
pageUrl='/pages/resource/articeDetail?id='+item.id
|
||
} else if (item.type ==4) {
|
||
pageUrl='/pages/resource/qaDetail?id='+item.id
|
||
}
|
||
if(pageUrl!=''){
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:'无此跳转['+item.type+']'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.search-words{
|
||
// background-color: #f1f1f1;
|
||
padding: 30upx;
|
||
height: 300upx;
|
||
.search-words-type{
|
||
padding: 30upx 0upx;
|
||
font-size: 1.1em;
|
||
color: #999999;
|
||
}
|
||
.search-words-tag{
|
||
text{
|
||
background-color: #FFFFFF;
|
||
padding: 6upx 20upx;
|
||
border-radius: 20upx;
|
||
margin: 20upx 20upx 10upx 0upx;
|
||
}
|
||
}
|
||
}
|
||
.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: 15px;
|
||
}
|
||
.top-bar-center {
|
||
display: flex;
|
||
font-size: 35upx;
|
||
.top-bar-tab {
|
||
margin: 0upx 50upx;
|
||
}
|
||
.active {
|
||
border-bottom: 2px solid #588AFC;
|
||
color: #5282eb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.con-top{
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
height: 50upx;
|
||
line-height: 50upx;
|
||
padding: 15upx 0upx;
|
||
.con-tab{
|
||
display: flex;
|
||
.con-tab-item {
|
||
padding: 0upx 20upx;
|
||
font-size: 1.1em;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
.active {
|
||
font-weight: 700;
|
||
color: #666666;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
}
|
||
.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-author{
|
||
font-size: 0.9em;
|
||
}
|
||
.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;
|
||
top: 10upx;right: 0px;
|
||
width: 140upx;
|
||
height: 50upx;
|
||
text-align: center;
|
||
line-height: 50upx;
|
||
z-index: 9;
|
||
background-color: #676767;
|
||
opacity: 0.5;
|
||
border-top-left-radius: 25upx;
|
||
border-bottom-left-radius: 25upx;
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|