Files
learning-system-mobile/pages/my/myShares.vue
2022-11-23 18:39:09 +08:00

802 lines
17 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="256upx" height="150upx"></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" style="margin-right: 50upx;">分享给{{ item.toAname }}</view>
<view class="withdraw" v-if="!item.isRead" @click.stop="withdraw(item)">
<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
</view>
<view v-if="item.isRead" style="margin-left:auto ;" class="Viewed">
已查看
</view>
<view v-else style="margin-left:auto ;" class="notViewed">
未查看
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="item.type == 2">
<view class="article_one">
<view>
<view @click="toArticleDetail(item)" class="articla_tit" >
<text v-html="$keywordActiveShow(item.title,query.keyword)"></text>
</view>
<text class="articla_text" @click="toArticleDetail(item)" v-html="$keywordActiveShow(item.summary,query.keyword)"></text>
<!-- <author-info :avatar="item.avatar" :name="item.sysCreateBy" :info="item.orgInfo" :sex="item.sex"></author-info> -->
<view class="artical_text_bottom">
<view style="margin-top: 10upx;">
<text style="font-size: 24upx;color: #999;margin-right: 35upx;">分享给{{item.toAname}}</text>
</view>
<view class="rowbtn-right">
<view class="withdraw" v-if="!item.isRead" @click.stop="withdraw(item)">
<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
</view>
<view v-if="item.isRead" class="Viewed">
已查看
</view>
<view v-else class="notViewed">
未查看
</view>
</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 class="withdraw" v-if="!item.isRead" @click.stop="withdraw(item)">
<image src="../../static/images/icon/withdrawnew.png" mode=""></image>撤回
</view>
<view v-if="item.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';
export default {
computed: mapState(['resourceTab']),
data() {
return {
dataList: {
pageIndex: 1,
pageSize: 10,
keyword: '',
count: 0,
list: []
},
isRead:null,
statusBtn: '全部',
statusSelectShow: false,
conType: 1,
query:{
pageIndex: 1,
pageSize: 10,
keyword:'',
isRead:null
},
courseList:[],
articleList:[],
qaList:[],
count:0,
loadStatus: 'more', //more,loading,noMore, 应该划分出三个
};
},
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: {
contentTypeFilter(value) {
let lmj = String(value)
let obj = {};
switch (lmj) {
case '10': {
obj.class = 'uc-course-type2';
obj.text = '录播';
break;
}
case '21': {
obj.class = 'uc-course-type2';
obj.text = '直播';
break;
}
case '20': {
obj.class = 'uc-course-type2';
obj.text = '录播';
break;
}
case '30': {
obj.class = 'uc-course-type2';
obj.text = '面授';
break;
}
case '90': {
obj.class = 'uc-course-type2';
obj.text = '混合';
break;
}
}
return obj;
},
//点击切换类别时请求数据
clicktab(val) {
this.conType=val;
this.query.pageIndex=1;
this.query.keyword='';
this.isRead = null;
this.query.isRead = null;
this.statusBtn = '全部'
this.findData(true);
},
//查找数据
findData(flag) {
//生成查询条件
uni.showLoading({ title: '加载中...' });
//查询条件
apiShares.findMeShare(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;
}
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'
});
}
});
setTimeout(function() {
uni.hideLoading();
}, 100);
},
withdraw(item){
apiShares.deleteshares(item.shareId).then(res=>{
if(res.status == 200){
uni.showToast({
icon:'success',
title:"撤回成功"
})
setTimeout(()=>{
this.findData(true);
},1000)
}else{
uni.showToast({
icon:'none',
title:"撤回失败"
})
}
})
},
loadUserInfos(list, userIds) {
let $this = this;
const noReapetIds = [...new Set(userIds)];
apiUser.getByIds(noReapetIds).then(res => {
if (res.status == 200) {
if(this.conType==2){
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;
});
});
}else{
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;
});
});
}
}
});
},
toCourseDetail(citem) {
// if (citem.contentType == 10) {
// uni.navigateTo({
// url: '/pages/resource/microDetail?id=' + citem.objId
// });
// } else {
uni.navigateTo({
url: '/pages/study/courseStudy?id=' + citem.id
});
// }
},
toArticleDetail(item) {
uni.navigateTo({
url: '/pages/resource/articeDetail?id=' + item.id
});
},
toQaDetail(item) {
uni.navigateTo({
url: '/pages/resource/qaDetail?id=' + item.id
});
},
chooseStatus(e) {
// this.statusSelectShow = false;
// this.statusBtn = e.value[0].label;
this.isRead = e;
//console.log(this.isRead)
this.findData(true);
},
}
}
</script>
<style lang="scss" scoped>
.qa-bottombox{
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;
}
.coures-bottom{
display: flex;
}
.course-author {
font-size: 26upx;
color: #666;
}
.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;
}
.sea-show{
padding: 20rpx;
padding-left: 28upx;
padding-bottom: 10upx;
.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;
}
}
.coursetit-sl{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break:break-all;
-webkit-line-clamp: 1;
line-height: 45rpx;
-webkit-box-orient: vertical;
}
.with{
color: #666;
font-size: 24rpx;
line-height: 35rpx;
image{
width: 26rpx;
height: 26rpx;
margin-right: 10rpx;
padding-top: 10rpx;
vertical-align: top;
}
}
.isread{
color: #666;
font-size: 24rpx;
line-height: 35rpx;
image{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
padding-top: 10rpx;
vertical-align: top;
}
}
.textbtn {
background-color: #ffffff;
padding: 18upx 20upx;
color: #4f4f4f;
border-radius: 8upx;
font-size: 28upx;
}
.top-content-options{
height: 34px;
display: flex;
align-items: center;
line-height: 34px;
padding: 20upx 0upx 0upx 28upx;
.input-search {
height: 34px;
padding-right: 10px;
flex: 1;
// padding: 28upx 20upx;
.u-input {
background: #ffffff;
}
}
}
/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;
}
.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{
height: 34px;
.u-input{
background: #ffffff;
}
// /deep/.u-icon{
// span{
// font-size: 50upx;
// color: #588afc;
// }
// }
// /deep/.uni-input-placeholder{
// color: #588afc!important;
// }
}
.course_box {
margin-bottom: 20upx;
background-color: #ffffff;
padding: 40upx 32upx;
.course {
display: flex;
justify-content: flex-start;
/deep/ .course-img {
display: flex;
justify-content: space-around;
margin-right: 20upx;
uni-image{
border-radius:8upx;
}
}
.course-content {
flex: 1;
display: flex;
flex-direction: column;
margin-left: 10upx;
.course-con_source{
font-size: 28upx;
color: #444444;
margin-top: 10rpx;
padding-bottom: 10rpx;
}
.common{
padding: 4upx 15upx;
border-radius: 2px;
font-size: 24upx;
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;
}
.art_type{
// float: left;
}
.articla_tit {
padding-bottom: 15rpx;
overflow: hidden;
font-weight: bold;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 36rpx;
color: #333;
}
.articla_text {
word-break:break-all;
font-size: 28rpx;
color: #666;
display: -webkit-box;
line-height: 40rpx;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 10rpx;
}
.article_one {
// padding-top: 10px;
margin-bottom: 20rpx;
background-color: #fff;
padding: 36upx 36upx;
.answers_text {
// font-size: 14px;
// color: #797979;
// display: -webkit-box;
overflow: hidden;
width: 80%;
// line-height: 25upx;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
}
.artical_text_bottom{
display: flex;
justify-content: space-between;
margin-top: 10rpx;
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: 25px;
display: flex;
justify-content: space-between;
.qa-user {
display: flex;
img {
height: 25px;
width: 25px;
margin-right: 5px;
}
}
}
.qa-body {
line-height: 40px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 30rpx;
font-weight: bold;
}
.qa-bottom {
font-size: 30rpx;
color: #454545;
display: -webkit-box;
overflow: hidden;
line-height: 45rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 4rpx;
word-break:break-all;
}
.qa-answers {
display: flex;
overflow: hidden;
line-height: 20upx;
width: 100%;
// height: 70upx;
margin: 10upx 0upx;
padding: 10upx 0;
font-size: 30rpx;
color: #5b5b5b;
answer-one{
width: 50%;
}
answer-two{
flex: 1;
word-break:break-all;
overflow: hidden;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
display:inline-block;/*转为行内块元素*/
white-space: pre-wrap;/*处理元素内的空白,保留空白符序列,但是正常地进行换行*/
word-wrap: break-word;
}
}
.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>