mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
516 lines
13 KiB
Vue
516 lines
13 KiB
Vue
<template>
|
||
<!--我的文章-->
|
||
<view class="article">
|
||
<u-toast ref="articleToast"></u-toast>
|
||
<page-title :showBack="true">我的文章</page-title>
|
||
<view class="top-filter">
|
||
<view class="top-content">
|
||
<view class="top-content-options">
|
||
<view style="margin-right: 20upx;">
|
||
<!-- <u-picker :show="statusSelectShow" @cancel="statusSelectShow = false" @confirm="chooseStatus" :columns="selectData" keyName="label"></u-picker> -->
|
||
<!-- <text class="textbtn" style="color:#666" @click="statusSelectShow = true">{{ statusBtn }}</text> -->
|
||
<text class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">状态</text>
|
||
</view>
|
||
<view class="input-search">
|
||
<u-search
|
||
@search="findData(true)"
|
||
:showAction="false"
|
||
@clear="findData(true)"
|
||
:clearabled="true"
|
||
v-model="articleList.keyword"
|
||
placeholder="搜索关键字"
|
||
shape="square"
|
||
bgColor="#ffffff"
|
||
>
|
||
<!-- <template slot="suffix">
|
||
<u-icon @click="findData(true)" name="search"></u-icon>
|
||
</template> -->
|
||
</u-search>
|
||
</view>
|
||
<view style="width: 70upx;">
|
||
<view class="textbtn" @click="toAdd()"><u-icon name="plus" color="#2979ff" size="18"></u-icon></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 style="padding-top: 14upx;">
|
||
<!-- 文章内容 下面需要把样式提到class中-->
|
||
<view class="article_one" v-for="(item, index) of articleList.list" :key="item.id">
|
||
<view >
|
||
<view class="article-center">
|
||
<view class="article-status" @click="toDetail(item)">
|
||
<view style="" v-html="statusDisplay(item.status)"></view>
|
||
<view style="" v-html="$keywordActiveShow(item.title, articleList.keyword)" class="article-top"></view>
|
||
</view>
|
||
<view class="article-bot" @click="toDetail(item)">
|
||
<text class="article-wz" v-html="$keywordActiveShow(item.summary, articleList.keyword)"></text>
|
||
<img v-if="item.coverurl" :src="$config.fileUrl+item.coverurl" alt=""/>
|
||
<!-- <view class="article-tom">
|
||
<img class="imgs" :src="item.avatar" alt="" />
|
||
<text class="tom-wz">{{ item.name }}{{ item.orgInfo }}</text>
|
||
</view> -->
|
||
</view>
|
||
<!--自己不需要显示作者信息呀-->
|
||
<!-- <author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></author-info> -->
|
||
|
||
<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
|
||
<view class="createTime">
|
||
{{item.sysCreateTime}}
|
||
</view>
|
||
<view style="display: flex;">
|
||
<view class="rowbtn rowbtn-primary">
|
||
<u-icon name="edit-pen" color="#3E7FFF" labelColor="#3E7FFF" @click="toEdit(item)" label="编辑" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
<view class="rowbtn rowbtn-info" style="margin-left: 20px;">
|
||
<u-icon @click="del(item)" color="#767676" labelColor="#767676" name="trash" label="删除" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
<!-- <u-icon name="more-dot-fill" @click="setEditId(item)" size="16" labelSize="16"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="editId==item.id">
|
||
<view v-if="userInfo.aid==item.sysCreateAid" style="display: flex;justify-content: space-around;">
|
||
<view class="rowbtn rowbtn-primary">
|
||
<u-icon name="edit-pen" color="#2c7dc8" labelColor="#2c7dc8" @click="toEdit(item)" label="编辑" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
<view class="rowbtn rowbtn-info">
|
||
<u-icon @click="del(item)" color="#767676" labelColor="#767676" name="trash" label="删除" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view class="article_action"> -->
|
||
<!-- <interact-bar :views="false" :data="item"></interact-bar> -->
|
||
<!-- v-if="userInfo.aid==detail.sysCreateAid" -->
|
||
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-load-more v-show="this.articleList.count>articleList.pageSize" :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) {
|
||
if (rs.result.list.length != 0) {
|
||
this.articleList.count = rs.result.count;
|
||
let userIds = [];
|
||
rs.result.list.forEach(item => {
|
||
item.name=''
|
||
item.aid = '';
|
||
item.orgInfo = '';
|
||
item.code = '';
|
||
item.avatar = '';
|
||
this.articleList.list.push(item);
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
await this.loadUserInfos(rs.result.list, userIds);
|
||
}else{
|
||
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 } = author;
|
||
if (!avatar) {
|
||
avatar = this.$config.fileUrl + avatar;
|
||
}else{
|
||
avatar='';
|
||
}
|
||
item.name = name;
|
||
item.aid = aid;
|
||
item.orgInfo = orgInfo;
|
||
item.code = code;
|
||
item.avatar = avatar;
|
||
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/addArticle?value=' + JSON.stringify(item)
|
||
});
|
||
}
|
||
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>
|
||
.rowbtn{
|
||
padding: 5px 8px 0px 8px;
|
||
height: 20px;
|
||
border-radius: 10upx;
|
||
}
|
||
.rowbtn-primary{
|
||
background-color: #ebf3fe;
|
||
}
|
||
.rowbtn-info{
|
||
background-color: #f7f7f7;
|
||
}
|
||
.top-filter {
|
||
.top-content {
|
||
// padding: 5px 5px;
|
||
.top-content-options {
|
||
// height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
line-height: 40px;
|
||
padding:20upx 30upx 0 30upx ;
|
||
// .textbtn {
|
||
// background-color: #ffffff;
|
||
// color: #4f4f4f;
|
||
// border-radius: 8upx;
|
||
// font-size: 24upx;
|
||
|
||
// }
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.textbtn {
|
||
background-color: #ffffff;
|
||
padding: 18upx 20upx;
|
||
color: #4f4f4f;
|
||
border-radius: 8upx;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
.addition {
|
||
margin-left: 20rpx;
|
||
.textbtn {
|
||
background-color: #ffffff;
|
||
color: #4f4f4f;
|
||
border-radius: 8upx;
|
||
font-size: 24upx;
|
||
}
|
||
}
|
||
|
||
.uni-list {
|
||
|
||
.sea-show{
|
||
padding: 10rpx 30upx 0 30upx;
|
||
// padding-top: 10upx;
|
||
line-height: 60upx;
|
||
.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;
|
||
}
|
||
.sea-index:last-child{
|
||
margin-right: 0;
|
||
}
|
||
|
||
}
|
||
.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;
|
||
border-bottom: 4upx;
|
||
.article-status{
|
||
display: flex;
|
||
font-weight: bold;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
line-height: 60upx;
|
||
.article-top {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #040404;
|
||
text-align: left;
|
||
flex-shrink: 10000;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
.article-bot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.article-wz {
|
||
font-size: 28rpx;
|
||
color: #454545;
|
||
line-height: 39rpx;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
margin: 10upx 0px 15upx;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
img{
|
||
margin-left:43upx;
|
||
width: 137upx;
|
||
height: 80upx;
|
||
}
|
||
}
|
||
.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> |