mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
769 lines
15 KiB
Vue
769 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<page-title :showBack="true">分享给我的</page-title>
|
|
<view v-for="(item,index) in dataList.list" :key="index">
|
|
<view v-if="item.type == 1">
|
|
<view class="course_box">
|
|
<view class="course" @click="toCourseDetail(item)">
|
|
<view class="course-img" style="position: relative;">
|
|
<course-image :course="item" width="262upx" height="147upx"></course-image>
|
|
<view class="coureslabel">
|
|
{{ contentTypeFilter(item.contentType).text }}
|
|
</view>
|
|
</view>
|
|
<view class="course-content">
|
|
<text style="height: 100upx;margin-top: 6upx;" v-html="$keywordActiveShow(item.title,query.keyword)"></text>
|
|
<view class="coures-bottom">
|
|
<view class="course-author" >{{ item.authorName }}分享给我</view>
|
|
<view style="margin-left: auto;display: flex;">
|
|
<view v-if="item.isRead" class="Viewed" >
|
|
已查看
|
|
</view>
|
|
<view v-else class="notViewed" >
|
|
未查看
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item.type == 2">
|
|
<view class="article_one" @click="toArticleDetail(item)">
|
|
<view class="articla_tit">{{ $keywordActiveShow(item.title,query.keyword) }}</view>
|
|
<text class="articla_text" v-html="$keywordActiveShow(item.summary,query.keyword)"></text>
|
|
<view class="artical_text_bottom">
|
|
<view style="margin-top: 10upx;">
|
|
<text style="font-size: 24upx;color: #999;margin-right: 35upx;">{{ item.sysCreateBy }}分享给我</text>
|
|
</view>
|
|
<view class="rowbtn-right">
|
|
<view v-if="item.isRead" class="Viewed">
|
|
已查看
|
|
</view>
|
|
<view v-else class="notViewed">
|
|
未查看
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view v-if="item.type == 4">
|
|
<view class="qa" >
|
|
<view class="qa-body" @click="toQaDetail(item.question)">
|
|
<text v-html="$keywordActiveShow(item.question.title,query.keyword)"></text>
|
|
</view>
|
|
<view class="qa-bottom" @click="toQaDetail(item.question)" v-html="$keywordActiveShow(item.question.content,query.keyword)"></view>
|
|
<view class="qa-bottombox">
|
|
<view class="qa-bottom-left">
|
|
<text style="font-size: 24upx;color: #999;margin-top: 10upx;" @click="toQaDetail(item.question)">分享给{{item.toAname}}</text>
|
|
</view>
|
|
<view class="rowbtn-right" style="margin-left: auto;">
|
|
<view v-if="item.question.isRead" class="Viewed">
|
|
已查看
|
|
</view>
|
|
<view v-else class="notViewed">
|
|
未查看
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view v-show="count>dataList.pageSize"><uni-load-more :status="loadStatus"></uni-load-more></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex';
|
|
import apiShares from '@/api/modules/shares.js';
|
|
import apiUser from '@/api/system/user.js';
|
|
import apiCourseStudy from '@/api/modules/courseStudy.js';
|
|
export default {
|
|
computed: mapState(['resourceTab']),
|
|
data() {
|
|
return {
|
|
dataList: {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
keyword: '',
|
|
count: 0,
|
|
list: []
|
|
},
|
|
isRead:null,
|
|
statusBtn: '全部',
|
|
selectData: [
|
|
[
|
|
{ label: '全部', value: null },
|
|
{ label: '已查看', value: true },
|
|
{ label: '未查看', value: false },
|
|
|
|
]
|
|
],
|
|
statusSelectShow: false,
|
|
conType: 1,
|
|
query:{
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
keyword:'',
|
|
isRead:null
|
|
},
|
|
courseList:[],
|
|
articleList:[],
|
|
qaList:[],
|
|
count:0,
|
|
loadStatus: 'more', //more,loading,noMore, 应该划分出三个
|
|
running:false,
|
|
};
|
|
},
|
|
onLoad: function(options) {
|
|
this.findData(true);
|
|
},
|
|
onPullDownRefresh() {
|
|
this.onReachBottom();
|
|
},
|
|
async onReachBottom() {
|
|
if(this.dataList.list.length<this.count){
|
|
this.loadStatus='loading';
|
|
this.query.pageIndex++;
|
|
await this.findData(false);
|
|
this.loadStatus='more';
|
|
}else{
|
|
this.loadStatus='noMore';
|
|
}
|
|
},
|
|
methods: {
|
|
//查找数据
|
|
findData(flag) {
|
|
//生成查询条件
|
|
uni.showLoading({ title: '加载中...' });
|
|
apiShares.findShareMe(this.query).then(rs => {
|
|
if (rs.status == 200) {
|
|
this.count=rs.result.count
|
|
rs.result.list.forEach(item => {
|
|
if(item.type == 4) {
|
|
item.question = {isResolve:false,title:'',content:'',bestAnswer:''};
|
|
item.question.isResolve=item.isResolve;
|
|
item.question.title=item.title;
|
|
item.question.content=item.content;
|
|
item.question.bestAnswer=item.bestAnswer;
|
|
item.question.id=item.id;
|
|
item.question.shareId=item.shareId;
|
|
item.question.isRead=item.isRead;
|
|
}
|
|
if(item.type == 3){
|
|
item.cases = {title:'',summary:''};
|
|
item.cases.title=item.title;
|
|
item.cases.summary=item.content;
|
|
item.cases.id=item.id;
|
|
}
|
|
|
|
});
|
|
if(flag){
|
|
this.dataList.list = rs.result.list;
|
|
}else{
|
|
this.dataList.list.push(...rs.result.list);
|
|
}
|
|
|
|
}else{
|
|
uni.showToast({
|
|
title: "获取数据失败",
|
|
icon:'none'
|
|
});
|
|
}
|
|
// this.running=false;
|
|
});
|
|
setTimeout(function() {
|
|
uni.hideLoading();
|
|
}, 100);
|
|
},
|
|
loadUserInfos(list, userIds) {
|
|
let $this = this;
|
|
const noReapetIds = [...new Set(userIds)];
|
|
if(noReapetIds.length==0){
|
|
return;
|
|
}
|
|
if(noReapetIds[0]==null){
|
|
return;
|
|
}
|
|
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.$config.fileUrl + author.avatar;
|
|
//实际上根本没有拿到fileUrl
|
|
}else{
|
|
item.avatar=''
|
|
}
|
|
item.sex = author.sex;
|
|
item.orgInfo = author.orgInfo;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
});
|
|
|
|
}
|
|
});
|
|
},
|
|
loadQaUserInfos(list, userIds) {
|
|
let $this = this;
|
|
const noReapetIds = [...new Set(userIds)];
|
|
if(noReapetIds.length==0){
|
|
return;
|
|
}
|
|
if(noReapetIds[0]==null){
|
|
return;
|
|
}
|
|
apiUser.getByIds(noReapetIds).then(res => {
|
|
if (res.status == 200) {
|
|
list.forEach(item => {
|
|
res.result.some(author => {
|
|
if (author.aid == item.question.sysCreateAid) {
|
|
if (author.avatar != '') {
|
|
item.avatar = $this.$config.fileUrl + author.avatar;
|
|
//实际上根本没有拿到fileUrl
|
|
}else{
|
|
item.avatar=''
|
|
}
|
|
item.sex = author.sex;
|
|
item.orgInfo = author.orgInfo;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
});
|
|
}
|
|
|
|
});
|
|
},
|
|
chooseStatus(e) {
|
|
// this.statusSelectShow = false;
|
|
// this.statusBtn = e.value[0].label;
|
|
this.isRead = e;
|
|
//console.log(this.isRead)
|
|
this.findData(true);
|
|
|
|
},
|
|
toCourseDetail(citem) {
|
|
if(!citem.isRead){
|
|
apiShares.updateIsRead(citem.shareId).then(res=>{
|
|
if(res.status==200){
|
|
}
|
|
})
|
|
citem.isRead = true;
|
|
}
|
|
// uni.navigateTo({
|
|
// url: '/pages/study/courseStudy?id=' + citem.id
|
|
// });
|
|
apiCourseStudy.hasSignup(citem.id).then(rs => {
|
|
// if (rs.status == 200) {
|
|
// uni.navigateTo({
|
|
// url: '/pages/study/courseStudy?id=' + citem.id
|
|
// })
|
|
// } else {
|
|
uni.navigateTo({
|
|
url: '/pages/resource/courseDetail?id=' + citem.id
|
|
})
|
|
// }
|
|
})
|
|
// if (citem.contentType == 10) {
|
|
// uni.navigateTo({
|
|
// url: '/pages/resource/microDetail?id=' + citem.objId
|
|
// });
|
|
// } else if (citem.contentType == 20 || citem.contentType == 21) {
|
|
// uni.navigateTo({
|
|
// url: '/pages/resource/courseDetail?id=' + citem.objId
|
|
// });
|
|
// }
|
|
},
|
|
toArticleDetail(item) {
|
|
console.log(item,'item')
|
|
if(!item.isRead){
|
|
apiShares.updateIsRead(item.shareId).then(res=>{
|
|
if(res.status==200){
|
|
}
|
|
})
|
|
item.isRead = true;
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/resource/articeDetail?id=' + item.id
|
|
});
|
|
},
|
|
toQaDetail(item) {
|
|
if(!item.isRead){
|
|
apiShares.updateIsRead(item.shareId).then(res=>{
|
|
if(res.status==200){
|
|
}
|
|
})
|
|
item.isRead = true;
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/resource/qaDetail?id=' + item.id
|
|
});
|
|
},
|
|
contentTypeFilter(value) {
|
|
let lmj = String(value)
|
|
let obj = {};
|
|
switch (lmj) {
|
|
case '10': {
|
|
obj.text = '录播';
|
|
break;
|
|
}
|
|
case '21': {
|
|
obj.text = '直播';
|
|
break;
|
|
}
|
|
case '20': {
|
|
obj.text = '录播';
|
|
break;
|
|
}
|
|
case '30': {
|
|
obj.text = '面授';
|
|
break;
|
|
}
|
|
case '90': {
|
|
obj.text = '混合';
|
|
break;
|
|
}
|
|
}
|
|
return obj;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.qa-bottombox{
|
|
display: flex;
|
|
}
|
|
.coures-bottom{
|
|
display: flex;
|
|
}
|
|
.coureslabel{
|
|
width: 78upx;
|
|
height: 32upx;
|
|
background: #2C2C2C;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 32upx;
|
|
font-weight: normal;
|
|
font-size: 20upx;
|
|
border-radius: 6upx;
|
|
opacity: 0.52;
|
|
position: absolute;
|
|
right: 12upx;
|
|
top: 104upx;
|
|
}
|
|
.withdraw{
|
|
font-size: 24upx;
|
|
color: #666666;
|
|
line-height: 38upx;
|
|
margin-right: 46upx;
|
|
image{
|
|
width: 28upx;
|
|
height: 28upx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.Viewed{
|
|
font-size: 24upx;
|
|
color: #999999;
|
|
line-height: 38upx;
|
|
}
|
|
.notViewed{
|
|
font-size: 24upx;
|
|
color: #FD3F1A;
|
|
line-height: 38upx;
|
|
}
|
|
.rowbtn-right{
|
|
margin-top: 10upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.rowbtn{
|
|
border-radius: 10upx;
|
|
}
|
|
.rowbtn-primary{
|
|
// background-color: #ebf3fe;
|
|
}
|
|
.rowbtn-info{
|
|
// background-color: #f7f7f7;
|
|
}
|
|
/deep/.filter .btn-box > uni-view {
|
|
border: solid 0.5px #ffb30f;
|
|
}
|
|
|
|
/deep/.filter .btn-box .submit {
|
|
background-color: #ffb30f;
|
|
}
|
|
|
|
/deep/.filter .btn-box > uni-view {
|
|
border: solid 0.5px #ffb30f;
|
|
}
|
|
|
|
/deep/.filter .btn-box .reset {
|
|
color: #ffb30f;
|
|
}
|
|
|
|
/deep/.filter .menu-box .box .labels .on {
|
|
border-color: #ffb30f;
|
|
background-color: #ffb30f;
|
|
}
|
|
|
|
/deep/.filter .menu-box .box .labels > uni-view {
|
|
width: 125px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/deep/.sub-menu-list .sub-menu > .menu-name > .iconfont {
|
|
color: #ffb30f;
|
|
}
|
|
|
|
/deep/.sub-menu-list.alone .sub-menu {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/deep/.nav .first-menu.on {
|
|
color: #ffb30f;
|
|
}
|
|
|
|
/deep/.sub-menu-list.alone .sub-menu.on {
|
|
color: #ffb30f;
|
|
}
|
|
|
|
/deep/.u-tabs__wrapper__nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.sea-show{
|
|
padding: 20rpx 30upx;
|
|
padding-bottom: 0;
|
|
.sea-active{
|
|
border: 1rpx solid #679cfc !important;
|
|
color: #679cfc;
|
|
}
|
|
.sea-index{
|
|
font-size: 26rpx;
|
|
padding: 6rpx 16rpx;
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 20rpx;
|
|
margin-right: 16rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
}
|
|
.isread{
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
line-height: 35rpx;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 10rpx;
|
|
padding-top: 10rpx;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.top-content-options{
|
|
// height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
// line-height: 40px;
|
|
padding: 20upx 30upx 0upx 30upx;
|
|
|
|
/deep/ .input-search {
|
|
margin-top: 4upx;
|
|
flex: 1;
|
|
.u-search {
|
|
height: 34px;
|
|
background: #ffffff;
|
|
border-radius: 8upx;
|
|
.u-search__content{
|
|
// border-width:0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.textbtn {
|
|
background-color: #ffffff;
|
|
padding: 18upx 20upx;
|
|
color: #666;
|
|
border-radius: 8upx;
|
|
font-size: 28upx;
|
|
}
|
|
|
|
.top-tab {
|
|
height: 50px;
|
|
// background: linear-gradient(to bottom, #6BA0FC, #6297FD);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 60px;
|
|
color: #373737;
|
|
.top-bar-center {
|
|
display: flex;
|
|
font-size: 30upx;
|
|
// margin-left: 40upx;
|
|
.top-bar-tab {
|
|
margin: 0upx 50upx;
|
|
}
|
|
.active {
|
|
border-bottom: 2px solid #588afc;
|
|
// color: #5282eb;
|
|
font-size: 35upx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.top-tab-left {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.top-tab-line {
|
|
width: 50px;
|
|
height: 3px;
|
|
background: #ffffff;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
|
|
.input-search{
|
|
// padding:28upx 20upx;
|
|
.u-input{
|
|
background: #ffffff;
|
|
}
|
|
|
|
}
|
|
.course_box {
|
|
margin-bottom: 20upx;
|
|
background-color: #ffffff;
|
|
padding: 40upx 32upx;
|
|
/deep/ .course {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
uni-image{
|
|
border-radius:8upx;
|
|
}
|
|
.course-img {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-right: 20upx;
|
|
}
|
|
|
|
.course-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 10upx;
|
|
.course-con_source{
|
|
font-size: 28upx;
|
|
color: #444;
|
|
margin-top: 10rpx;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
.course-author {
|
|
font-size: 26upx;
|
|
color: #666;
|
|
}
|
|
.common{
|
|
padding: 3upx 20upx;
|
|
border-radius: 2px;
|
|
font-size: 26upx;
|
|
color: #fff;
|
|
margin-right: 20upx;
|
|
}
|
|
.uc-course-type1{
|
|
background: #588afc;
|
|
}
|
|
.uc-course-type2{
|
|
background: #ffb30f;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-center {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.article {
|
|
background: #f8fbfd;
|
|
}
|
|
|
|
.article_one {
|
|
// padding-top: 10px;
|
|
margin-bottom: 20upx;
|
|
margin-top: 20upx;
|
|
background-color: #fff;
|
|
padding: 20upx 30upx;
|
|
.articla_tit {
|
|
font-weight: bold;
|
|
padding-bottom: 15rpx;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 36upx;
|
|
color: #333;
|
|
word-break:break-all;
|
|
}
|
|
|
|
.articla_text {
|
|
word-break:break-all;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
margin-bottom: 10rpx;
|
|
|
|
}
|
|
.artical_text_bottom{
|
|
margin-top: 10rpx;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
text{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.qa {
|
|
padding: 36upx 36upx;
|
|
box-shadow: #f7f7f7 0px 6px 5px;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
margin-bottom: 20upx;
|
|
padding-bottom: 15rpx;
|
|
.qa-header {
|
|
height: 26px;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.qa-user {
|
|
display: flex;
|
|
|
|
img {
|
|
height: 25px;
|
|
width: 25px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.qa-body {
|
|
line-height: 26px;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
word-break:break-all;
|
|
-webkit-line-clamp: 2;
|
|
|
|
}
|
|
|
|
.qa-bottom {
|
|
margin-top: 18upx;
|
|
font-size: 30upx;
|
|
color: #454545;
|
|
display: -webkit-box;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
word-break:break-all;
|
|
}
|
|
|
|
.qa-answers {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
color: #5b5b5b;
|
|
display: flex;
|
|
overflow: hidden;
|
|
line-height: 20upx;
|
|
width: 100%;
|
|
// height: 70upx;
|
|
margin: 10upx 0upx;
|
|
padding: 10upx 0;
|
|
|
|
}
|
|
|
|
.qa-text{
|
|
font-size: 26rpx;
|
|
color: #9d9d9d;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
height: 127px;
|
|
border-bottom: 1px solid #e3e3e3;
|
|
}
|
|
.newest {
|
|
width: 60px;
|
|
height: 31px;
|
|
background: #ffffff;
|
|
font-size: 11px;
|
|
border-radius: 4px;
|
|
color: #505050;
|
|
text-align: center;
|
|
line-height: 31px;
|
|
margin-top: 2px;
|
|
margin-left: 9px;
|
|
}
|
|
|
|
.hottest {
|
|
background: #dfebf4;
|
|
color: #5ba2fc;
|
|
}
|
|
|
|
.big_top {
|
|
height: 37px;
|
|
}
|
|
|
|
.big_box_top {
|
|
display: flex;
|
|
height: 80upx;
|
|
padding: 30upx 0;
|
|
}
|
|
|
|
.big-box_center {
|
|
height: 173px;
|
|
margin-top: 9px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.llef {
|
|
width: 168px;
|
|
height: 172px;
|
|
border-radius: 4px;
|
|
background: #ffffff;
|
|
box-shadow: #f1f6fe 0px 6px 5px;
|
|
}
|
|
|
|
.llef img {
|
|
width: 168px;
|
|
height: 96px;
|
|
}
|
|
</style>
|