mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 10:56:47 +08:00
2022年5月29日 从svn移到git
This commit is contained in:
daihh
440
pages/index/backups.vue
Normal file
440
pages/index/backups.vue
Normal file
@@ -0,0 +1,440 @@
|
||||
<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>
|
||||
1268
pages/index/index.vue
Normal file
1268
pages/index/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user