hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-08 18:36:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022年5月29日 从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:59:24 +08:00
parent 9580ff8c9b
commit faa7afb65f
897 changed files with 171836 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

511
pages/my/myArticles.vue Normal file
View File

@@ -0,0 +1,511 @@
<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="width: 100upx;">
<!-- <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="margin-top: 5upx;">
<!-- 文章内容 下面需要把样式提到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: 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>',
5:'<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 10upx 30upx ;
.textbtn {
background-color: #ffffff;
color: #4f4f4f;
border-radius: 8upx;
font-size: 24upx;
}
.input-search {
flex: 1;
// padding: 28upx 20upx;
margin: 0upx 20upx 0upx 12upx;
.u-input {
background: #ffffff;
}
}
}
}
.top-filter-result {
padding: 5px 10px;
font-size: 24upx;
color: #747474;
}
}
.textbtn {
background-color: #ffffff;
padding: 9px 10px;
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: 20rpx;
.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>