mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
537 lines
13 KiB
Vue
537 lines
13 KiB
Vue
<template>
|
||
<!--我的文章-->
|
||
<view class="article">
|
||
<u-toast ref="articleToast"></u-toast>
|
||
<page-title style="padding-left: 10upx;" :showBack="true" goPgae="/pages/plus/addArticle">
|
||
我的文章
|
||
<template #right>
|
||
<p style="width: 100upx;margin-top: 18upx;">去发表</p>
|
||
</template>
|
||
</page-title>
|
||
<view class="top-filter">
|
||
<view class="top-content">
|
||
<!-- <view class="put-articles" @click="toAdd()">
|
||
去发表
|
||
</view> -->
|
||
|
||
<view class="top-content-options">
|
||
<view class="input-search">
|
||
<u-search
|
||
@search="findData(true)"
|
||
:showAction="false"
|
||
@clear="findData(true)"
|
||
:clearabled="true"
|
||
:height="36"
|
||
v-model="articleList.keyword"
|
||
placeholder="搜索">
|
||
<!-- <template slot="suffix">
|
||
<u-icon @click="findData(true)" name="search"></u-icon>
|
||
</template> -->
|
||
</u-search>
|
||
|
||
|
||
</view>
|
||
<view class="addition">
|
||
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
||
<text>筛选</text>
|
||
<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
|
||
</view>
|
||
<view class="sea-show" v-show="statusSelectShow">
|
||
<view v-for="(status,index) in selectData" :key="index" :class="[articleList.status == status.value? 'sea-active':'','sea-index']" @click="chooseStatus(status)">
|
||
{{status.label}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-list">
|
||
<!-- <view v-show="statusSelectShow" class="sea-show">
|
||
<text :class="[articleList.status == status.value? 'sea-active':'','sea-index']" v-for="(status,index) in selectData" :key="index" @click="chooseStatus(status)">{{status.label}}</text>
|
||
</view> -->
|
||
<view v-if="articleList.list.length == 0 && loadStatus == 'noMore'" style="text-align: center;margin-top: 100upx;color: #666;">
|
||
暂未搜索到内容
|
||
</view>
|
||
<view style="padding-top: 14upx;">
|
||
<!-- 文章内容 下面需要把样式提到class中-->
|
||
<view class="article_one" v-for="(item, index) of articleList.list" :key="item.id">
|
||
<view >
|
||
<view class="article-center">
|
||
<author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"></author-info>
|
||
<view class="article-status" >
|
||
<!-- <view class="article-top" v-html="statusDisplay(item.status)">
|
||
|
||
</view> -->
|
||
<view @click="toDetail(item)" v-html="$keywordActiveShow(item.title, articleList.keyword)" ></view>
|
||
</view>
|
||
<view class="article-bot">
|
||
<text class="article-wz" @click="toDetail(item)" v-html="$keywordActiveShow(item.summary, articleList.keyword)"></text>
|
||
<view class="article-img" @click="toDetail(item)" v-if="item.coverurl">
|
||
<img style="width: 182upx;height:124upx" :src="$config.fileUrl+item.coverurl" alt=""/>
|
||
</view>
|
||
</view>
|
||
<!--自己不需要显示作者信息呀-->
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view style="display: flex;">
|
||
<view class="rowbtn" @click="toEdit(item)">
|
||
<image class="btn-img" src="../../static/images/icon/edit.png" size="24"></image><text class="btn-text">编辑</text>
|
||
</view>
|
||
<view class="rowbtn" style="margin-left: 12upx;" @click="del(item)">
|
||
<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
|
||
</view>
|
||
</view>
|
||
<view style="margin-right: -30upx;">
|
||
<interact-bar :views="false" :data="item"></interact-bar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-load-more v-show="articleList.count>0" :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import apiArticle from '@/api/modules/article.js';
|
||
import apiUser from '@/api/system/user.js';
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
flagLoading:false,
|
||
statusArray: [
|
||
[
|
||
{
|
||
name: '全部',
|
||
value: null
|
||
},
|
||
{
|
||
name: '待解决',
|
||
value: false
|
||
},
|
||
{
|
||
name: '已解决',
|
||
value: true
|
||
}
|
||
]
|
||
],
|
||
articleList: {
|
||
pageIndex: 1,
|
||
pageSize: 4,
|
||
keyword:'',
|
||
status: null,
|
||
count: 0,
|
||
list: []
|
||
},
|
||
editId:'',
|
||
loadStatus: 'more',
|
||
statusSelectShow: false,
|
||
statusBtn: '全部',
|
||
selectData: [
|
||
// [
|
||
{ label: '全部', value: null },
|
||
{ label: '草稿', value: 1 },
|
||
{ label: '待审核', value: 2 },
|
||
{ label: '未通过', value: 3 },
|
||
// { label: '已通过', value: 5 },
|
||
{ label: '已下架', value: 8 },
|
||
{ label: '已发布', value: 9 },
|
||
]
|
||
// ]
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
methods: {
|
||
setEditId(item){
|
||
this.editId=item.id;
|
||
},
|
||
findData(flag) {
|
||
if(this.flagLoading) {
|
||
return;
|
||
}
|
||
this.flagLoading = true;
|
||
//是否重置列表
|
||
if (flag) {
|
||
this.articleList.list = [];
|
||
}
|
||
uni.showLoading({ title: '加载中...' });
|
||
//查询条件
|
||
let params = {
|
||
pageIndex: this.articleList.pageIndex,
|
||
pageSize: this.articleList.pageSize,
|
||
status: this.articleList.status,
|
||
keyword:this.articleList.keyword,
|
||
sysCreateAid:this.userInfo.aid
|
||
};
|
||
apiArticle.myPageList(params).then(async rs => {
|
||
this.flagLoading = false;
|
||
uni.hideLoading();
|
||
if (rs.status == 200) {
|
||
this.articleList.count = rs.result.count;
|
||
|
||
if (rs.result.list.length != 0) {
|
||
let userIds = [];
|
||
rs.result.list.forEach(item => {
|
||
item.name=''
|
||
item.aid = '';
|
||
item.orgInfo = '';
|
||
item.code = '';
|
||
item.avatar = '';
|
||
item.sex = null;
|
||
this.articleList.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
await this.loadUserInfos(rs.result.list, userIds);
|
||
if (this.articleList.list.length < this.articleList.count) {
|
||
this.loadStatus = 'more';
|
||
} else {
|
||
this.loadStatus = 'noMore';
|
||
}
|
||
}else{
|
||
this.loadStatus = 'noMore';
|
||
// uni.showToast({
|
||
// title: '查无数据',
|
||
// icon: 'none'
|
||
// });
|
||
}
|
||
}
|
||
// uni.hideLoading();
|
||
});
|
||
},
|
||
loadUserInfos(list, userIds) {
|
||
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) {
|
||
let { aid, avatar, name, orgInfo, code ,sex} = author;
|
||
item.name = name;
|
||
item.aid = aid;
|
||
item.orgInfo = orgInfo;
|
||
item.code = code;
|
||
item.avatar = avatar;
|
||
item.sex =sex;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
// this.$nextTick(function(){
|
||
// uni.hideLoading();
|
||
// })
|
||
//原本想用async await等数据请求完成后使用hideLoading,但是页面渲染需要时间，关闭太早了，有考虑用nexeTick()
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
}, 100);
|
||
});
|
||
},
|
||
chooseStatus(e) {
|
||
if(this.flagLoading) {
|
||
return;
|
||
}
|
||
this.statusSelectShow = false;
|
||
// this.statusBtn = e.value[0].label;
|
||
this.articleList.pageIndex = 1;
|
||
this.articleList.status = e.value;
|
||
this.findData(true);
|
||
},
|
||
toAdd() {
|
||
uni.navigateTo({
|
||
url: '/pages/plus/addArticle'
|
||
});
|
||
},
|
||
toDetail(item) {
|
||
if(item.status==1){
|
||
return uni.navigateTo({
|
||
// url: '/pages/plus/editArticle?value=' + JSON.stringify(item)
|
||
url:'/pages/plus/editArticle?id='+item.id
|
||
});
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/resource/articeDetail?id=' + item.id
|
||
});
|
||
},
|
||
statusDisplay(status){
|
||
let obj={
|
||
1:'<span style="color:#999">[草稿]<span>',
|
||
2:'<span style="color:#3E7FFF">[待审核]<span>',
|
||
3:'<span style="color:#FF3E3E">[未通过]<span>',
|
||
8:'<span style="color:#2AB28B">[已下架]<span>',
|
||
9:'<span style="color:#3E7FFF">[已发布]<span>'
|
||
}
|
||
return obj[status]
|
||
},
|
||
del(item){
|
||
const $this=this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要删除此文章吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
//$this.del();
|
||
apiArticle.del(item.id).then(res=>{
|
||
if(res.status=200){
|
||
$this.$refs.articleToast.show({message:'删除成功',type:'success'});
|
||
setTimeout(()=>{
|
||
$this.findData(true)
|
||
},1000)
|
||
// $this.findData(true)
|
||
// let pages =getCurrentPages();
|
||
// const prevPage=pages[pages.length-2];
|
||
// if(!prevPage){
|
||
// uni.switchTab({
|
||
// url:'/pages/index/index'
|
||
// })
|
||
// }else{
|
||
// uni.navigateBack();
|
||
// }
|
||
}else{
|
||
$this.$refs.articleToast.show({message:'删除失败，请稍后再试',type:'error'});
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
},
|
||
toEdit(item){
|
||
uni.navigateTo({
|
||
url:'/pages/plus/editArticle?id='+item.id
|
||
})
|
||
},
|
||
},
|
||
onLoad: function(options) {
|
||
this.findData(true);
|
||
},
|
||
onPullDownRefresh() {
|
||
this.onReachBottom();
|
||
},
|
||
async onReachBottom() {
|
||
if (this.articleList.list.length < this.articleList.count) {
|
||
this.loadStatus = 'loading'; //more,loading,noMore
|
||
this.articleList.pageIndex++;
|
||
await this.findData(false);
|
||
this.loadStatus = 'more';
|
||
} else {
|
||
this.loadStatus = 'noMore';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.article{
|
||
background-color: #fff;
|
||
padding: 36upx;
|
||
}
|
||
.rowbtn{
|
||
padding: 5px 8px 0px 0;
|
||
height: 20px;
|
||
border-radius: 10upx;
|
||
.btn-img{
|
||
width: 16px;
|
||
height: 18px;
|
||
vertical-align: middle;
|
||
}
|
||
.btn-text{
|
||
margin-left: 12upx;
|
||
font-size: 24upx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.rowbtn-info{
|
||
background-color: #f7f7f7;
|
||
}
|
||
.top-filter {
|
||
.top-content {
|
||
// position: relative;
|
||
.put-articles{
|
||
text-align: right;
|
||
// float: right;
|
||
// position: absolute;
|
||
// right:0;
|
||
// top:-60upx;
|
||
font-size: 32upx;
|
||
font-weight: 600;
|
||
color: #387DF7;
|
||
}
|
||
// padding: 5px 5px;
|
||
.top-content-options {
|
||
// height: 40px;
|
||
display: flex;
|
||
line-height: 40px;
|
||
.input-search {
|
||
flex: 1;
|
||
// padding: 28upx 20upx;
|
||
margin: 0upx 20upx 0upx 0;
|
||
.u-input {
|
||
background: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-filter-result {
|
||
// padding: 5px 10px;
|
||
font-size: 24upx;
|
||
color: #747474;
|
||
}
|
||
}
|
||
|
||
|
||
.addition {
|
||
width: 108upx;
|
||
margin-left: 90rpx;
|
||
position: relative;
|
||
|
||
.textbtn {
|
||
display: flex;
|
||
width: 108upx;
|
||
color: #4f4f4f;
|
||
font-size: 28upx;
|
||
}
|
||
.sea-show{
|
||
width: 130upx;
|
||
position: absolute;
|
||
top: 80upx;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 2upx 8upx 4upx rgba(0,0,0,0.07);
|
||
border-radius: 12upx;
|
||
padding: 20upx 60upx;
|
||
z-index: 99;
|
||
.sea-active{
|
||
color: #387DF7 !important;
|
||
}
|
||
.sea-index{
|
||
font-size: 28upx;
|
||
color: #666666;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
}
|
||
.sea-index:last-child{
|
||
margin-right: 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.uni-list {
|
||
|
||
|
||
.article_one{
|
||
// padding: 20upx 30upx;
|
||
// padding-top: 10upx;
|
||
// margin-bottom: 20upx;
|
||
background-color: #ffffff;
|
||
// &:last-of-type{
|
||
// margin-bottom: 0;
|
||
// }
|
||
// .article_action{
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// /deep/ .article_btn{
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// .u-icon__label{
|
||
// span{
|
||
// font-size: 12px;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
.article-center {
|
||
background: #ffffff;
|
||
//border-radius: 5px;
|
||
padding-top: 20upx;
|
||
padding-bottom: 40upx;
|
||
border-bottom: 20upx solid #F9F9F9;
|
||
.article-status{
|
||
// display: flex;
|
||
// font-weight: bold;
|
||
// justify-content: flex-start;
|
||
// align-items: center;
|
||
font-size: 30rpx;
|
||
.article-top {
|
||
line-height: 50upx;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;-webkit-line-clamp: 2;
|
||
word-break:break-all;
|
||
color: #333333;
|
||
// text-align: left;
|
||
// flex-shrink: 10000;
|
||
// margin-left: 4px;
|
||
}
|
||
}
|
||
.article-bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.article-wz {
|
||
font-size: 28upx;
|
||
color: #666666;
|
||
height: 80upx;
|
||
line-height: 40upx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;-webkit-line-clamp: 2;
|
||
word-break:break-all;
|
||
margin: 16upx 0px 0;
|
||
}
|
||
.article-img{
|
||
margin-left:26upx;
|
||
width: 182upx;
|
||
height: 124upx;
|
||
border-radius: 8upx;
|
||
}
|
||
}
|
||
.item-author{
|
||
margin: 20upx 0;
|
||
}
|
||
.art-bottom{
|
||
.createTime{
|
||
padding-bottom: 30upx;
|
||
color:#999;
|
||
font-size: 20upx;
|
||
|
||
}
|
||
.article_btn{
|
||
float: right;
|
||
font-size: 12px;
|
||
margin-top: 5rpx;
|
||
.u-icon__label{
|
||
font-size: 12rpx;
|
||
span{
|
||
font-size: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.createTime{
|
||
color:#999;
|
||
font-size: 24upx;
|
||
line-height: 48upx;
|
||
}
|
||
}
|
||
</style> |