mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-20 02:20:15 +09:00
405 lines
13 KiB
Vue
405 lines
13 KiB
Vue
<template>
|
|
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
|
|
<!-- 顶部切换 -->
|
|
<view class="e-fixed shadow-2">
|
|
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue" insert-color="light-blue" :clear="true">
|
|
<view slot="right" class="flex flex-center">
|
|
<tm-pickers title="请选择分类" :default-value="category.selected" :list="category.list" rang-key="name" btn-color="blue" @confirm="fnOnCategoryConfirm">
|
|
<text class="iconfont icon-filter text-size-lg text-grey-darken-2"></text>
|
|
</tm-pickers>
|
|
<text class="ml-16 text-size-g" style="min-width: 70rpx;" @click="fnOnSearch">搜索</text>
|
|
</view>
|
|
</tm-search>
|
|
<tm-tabs color="light-blue" :shadow="0" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
|
|
</view>
|
|
<!-- 占位区域 -->
|
|
<view style="width: 100vw;height: 184rpx;"></view>
|
|
<!-- 加载区域 -->
|
|
<view v-if="loading != 'success'" class="loading-wrap pa-24">
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
<tm-skeleton model="listAvatr"></tm-skeleton>
|
|
</view>
|
|
<!-- 内容区域 -->
|
|
<view v-else class="app-page-content pl-24 pr-24">
|
|
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
|
|
<!-- 空布局 -->
|
|
<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无数据"></tm-empty>
|
|
</view>
|
|
<block v-else>
|
|
<block v-for="(article, index) in dataList" :key="index">
|
|
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
|
<!-- 文章卡片 -->
|
|
<view class="article-card mt-24 bg-white pa-24 round-3">
|
|
<view class="thumbnail round-2" @click="fnToArticleDetail(article)">
|
|
<image v-if="article.hasThumbnail" class="thumbnail-img round-2" :src="article.thumbnail" mode="aspectFill"></image>
|
|
<view v-else class="thumbnail-not round-2 flex flex-center text-grey-darken-2">无封面图</view>
|
|
</view>
|
|
<view class="title mt-16 text-bg-gradient-blue-accent">{{ article.title }}</view>
|
|
<view class="summary mt-16 text-grey-darken-2 text-size-m">{{ article.summary }}</view>
|
|
<view class="flex mt-12 flex-start desc-box text-size-m">
|
|
<view class="label text-grey-darken-2">分类：</view>
|
|
<view class="value">
|
|
<block v-if="article.categories.length != 0">
|
|
<tm-tags v-for="(category, categoryIndex) in article.categories" :key="category.slug" color="light-blue" size="s" model="text">
|
|
{{ category.name }}
|
|
</tm-tags>
|
|
</block>
|
|
<text v-else class="ml-12 text-grey-darken-2">未选择分类</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-start desc-box text-size-m" :class="{ 'mt-12': article.tags.length == 0 }">
|
|
<view class="label text-grey-darken-2">标签：</view>
|
|
<view class="value">
|
|
<block v-if="article.tags.length != 0">
|
|
<tm-tags v-for="(tag, tagIndex) in article.tags" :key="tag.slug" color="orange" size="s" model="text">{{ tag.name }}</tm-tags>
|
|
</block>
|
|
<text v-else class="ml-12 text-grey-darken-2 ">未选择标签</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex flex-start desc-box text-size-m" :class="{ 'mt-12': article.tags.length == 0 }">
|
|
<view class="label text-grey-darken-2">状态：</view>
|
|
<view class="value">
|
|
<tm-tags v-if="article.status == 'PUBLISHED'" color="green" size="s" model="text">已发布（访客可见）</tm-tags>
|
|
<tm-tags v-else-if="article.status == 'INTIMATE'" color="light-blue" size="s" model="text">私密（访客不可见）</tm-tags>
|
|
<tm-tags v-else-if="article.status == 'DRAFT'" color="blue-grey" size="s" model="text">草稿（未发布）</tm-tags>
|
|
<tm-tags v-else-if="article.status == 'RECYCLE'" color="deep-orange" size="s" model="text">回收站</tm-tags>
|
|
</view>
|
|
</view>
|
|
<view class="flex mt-12 flex-start desc-box text-size-m">
|
|
<view class="label text-grey-darken-2">日期：</view>
|
|
<view class="value ml-12 text-grey-darken-2">{{ $tm.dayjs(article.createTime).format('YYYY年MM月DD日 HH点mm分ss秒') }}</view>
|
|
</view>
|
|
<view class="flex mt-12 flex-start desc-box text-size-m ">
|
|
<view class="label text-grey-darken-2">统计：</view>
|
|
<view class="value ml-12 text-grey-darken-2">
|
|
<text class="">
|
|
<text class="text-size-m text-weight-b text-bg-gradient-blue-accent">{{ article.wordCount }}</text>
|
|
<text class="ml-6 text-size-s">字</text>
|
|
</text>
|
|
<text class="ml-20">
|
|
<text class="text-size-m text-weight-b text-bg-gradient-light-blue-accent">{{ article.visits }}</text>
|
|
<text class="ml-6 text-size-s">浏览</text>
|
|
</text>
|
|
<text class="ml-20">
|
|
<text class="text-size-m text-weight-b text-bg-gradient-cyan-accent">{{ article.likes }}</text>
|
|
<text class="ml-6 text-size-s">点赞</text>
|
|
</text>
|
|
<text class="ml-20">
|
|
<text class="text-size-m text-weight-b text-bg-gradient-blue-grey-accent">{{ article.commentCount }}</text>
|
|
<text class="ml-6 text-size-s">评论</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="foot flex flex-between mt-20 pt-24 desc-box text-size-m">
|
|
<tm-button theme="light-blue" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnEditArticle(article)">编辑</tm-button>
|
|
<tm-button theme="red" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnDelArticle(article, index)">删除</tm-button>
|
|
<tm-button theme="blue-grey" :shadow="0" block :width="200" :height="60" size="m" @click="fnOnSetArticle(article, index)">设置</tm-button>
|
|
</view>
|
|
</view>
|
|
</tm-translate>
|
|
</block>
|
|
|
|
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
|
<tm-flotbutton :show-text="true" color="bg-gradient-orange-accent" @click="fnOnAddArticle()"></tm-flotbutton>
|
|
<view class="load-text">{{ loadMoreText }}</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
|
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
|
|
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
|
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
|
|
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
|
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
|
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
|
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
|
import tmPickers from '@/tm-vuetify/components/tm-pickers/tm-pickers.vue';
|
|
|
|
export default {
|
|
components: {
|
|
tmSkeleton,
|
|
tmSearch,
|
|
tmTranslate,
|
|
tmTabs,
|
|
tmFlotbutton,
|
|
tmEmpty,
|
|
tmTags,
|
|
tmButton,
|
|
tmPickers
|
|
},
|
|
data() {
|
|
return {
|
|
isBlackTheme: false,
|
|
loading: 'loading',
|
|
tab: {
|
|
activeIndex: 0,
|
|
list: ['全部', '已发布', '私密', '草稿', '回收站']
|
|
},
|
|
queryParams: {
|
|
size: 10,
|
|
page: 0,
|
|
status: '',
|
|
keyword: '',
|
|
categoryId: undefined
|
|
},
|
|
cache: {
|
|
dataList: [],
|
|
total: 0
|
|
},
|
|
isLoadMore: false,
|
|
loadMoreText: '加载中...',
|
|
result: {},
|
|
dataList: [],
|
|
category: {
|
|
loading: 'loading',
|
|
show: false,
|
|
list: [],
|
|
selected: [0]
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.fnSetPageTitle('文章管理');
|
|
this.fnGetCategoryList();
|
|
},
|
|
created() {
|
|
this.fnGetData();
|
|
uni.$on('refresh-article-list', () => {
|
|
this.isLoadMore = false;
|
|
this.queryParams.page = 0;
|
|
this.fnGetData();
|
|
});
|
|
},
|
|
onPullDownRefresh() {
|
|
this.isLoadMore = false;
|
|
this.queryParams.page = 0;
|
|
this.fnGetData();
|
|
},
|
|
|
|
onReachBottom(e) {
|
|
if (this.result.hasNext) {
|
|
this.queryParams.page += 1;
|
|
this.isLoadMore = true;
|
|
this.fnGetData();
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '没有更多数据了'
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
fnOnTabChange(index) {
|
|
this.dataList = [];
|
|
const _status = {
|
|
0: '',
|
|
1: 'PUBLISHED',
|
|
2: 'INTIMATE',
|
|
3: 'DRAFT',
|
|
4: 'RECYCLE'
|
|
};
|
|
this.queryParams.status = _status[index];
|
|
this.queryParams.page = 0;
|
|
this.fnToTopPage();
|
|
this.fnGetData();
|
|
},
|
|
// 获取分类列表
|
|
fnGetCategoryList() {
|
|
this.category.loading = 'loading';
|
|
this.$httpApi.admin
|
|
.getCategoryList()
|
|
.then(res => {
|
|
if (res.status == 200) {
|
|
let _list = res.data;
|
|
_list.unshift({ id: undefined, name: '全部' });
|
|
this.category.list = _list;
|
|
this.category.loading = 'success';
|
|
} else {
|
|
this.category.loading = 'error';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.category.loading = 'error';
|
|
});
|
|
},
|
|
// 显示分类选择
|
|
fnOnCategoryConfirm(e) {
|
|
this.category.selected = [e[0].index];
|
|
this.queryParams.categoryId = e[0].data.id;
|
|
},
|
|
fnOnSearch() {
|
|
this.queryParams.page = 0;
|
|
this.isLoadMore = false;
|
|
this.fnToTopPage();
|
|
this.fnGetData();
|
|
},
|
|
fnGetData() {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '加载中...'
|
|
});
|
|
// 设置状态为加载中
|
|
if (!this.isLoadMore) {
|
|
this.loading = 'loading';
|
|
}
|
|
this.loadMoreText = '加载中...';
|
|
this.$httpApi.admin
|
|
.getPostsByPage(this.queryParams)
|
|
.then(res => {
|
|
console.log('请求结果：');
|
|
console.log(res);
|
|
if (res.status == 200) {
|
|
// 处理数据
|
|
this.result = res.data;
|
|
const _dataList = res.data.content.map(item => {
|
|
item.hasThumbnail = item.thumbnail != '';
|
|
if (item.thumbnail) {
|
|
item.thumbnail = this.$utils.checkThumbnailUrl(item.thumbnail);
|
|
}
|
|
return item;
|
|
});
|
|
if (this.isLoadMore) {
|
|
this.dataList = this.dataList.concat(_dataList);
|
|
} else {
|
|
this.dataList = _dataList;
|
|
}
|
|
|
|
this.loading = 'success';
|
|
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
|
} else {
|
|
this.loading = 'error';
|
|
this.loadMoreText = '呜呜，加载失败了~';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
this.loading = 'error';
|
|
this.loadMoreText = '加载失败，请下拉刷新！';
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.stopPullDownRefresh();
|
|
}, 800);
|
|
});
|
|
},
|
|
|
|
// 跳转文章详情（预览）
|
|
fnToArticleDetail(article) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
|
|
animationType: 'slide-in-right'
|
|
});
|
|
},
|
|
// 新增
|
|
fnOnAddArticle() {
|
|
this.$Router.push({ path: '/pagesB/articles/article-edit', query: {} });
|
|
},
|
|
// 文章编辑
|
|
fnOnEditArticle(article) {
|
|
this.$Router.push({ path: '/pagesB/articles/article-edit', query: { postsId: article.id } });
|
|
},
|
|
// 设置文章信息
|
|
fnOnSetArticle(article, index) {
|
|
this.$Router.push({ path: '/pagesB/articles/article-setting', query: { postsId: article.id, postTitle: article.title, isEdit: 1, from: 'list' } });
|
|
},
|
|
// 删除文章
|
|
fnOnDelArticle(article, index) {
|
|
uni.$eShowModal({
|
|
title: '提示',
|
|
content: '是否确定要删除该文章？',
|
|
showCancel: true,
|
|
cancelText: '否',
|
|
cancelColor: '#999999',
|
|
confirmText: '是',
|
|
confirmColor: '#03a9f4'
|
|
})
|
|
.then(res => {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '删除中...'
|
|
});
|
|
this.$httpApi.admin
|
|
.deletePostsByIds([article.id])
|
|
.then(res => {
|
|
if (res.status == 200) {
|
|
uni.$tm.toast('文章已删除成功！');
|
|
this.dataList.splice(index, 1);
|
|
} else {
|
|
uni.$tm.toast('操作失败，请重试！');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
uni.$tm.toast('操作失败，请重试！');
|
|
});
|
|
})
|
|
.catch(err => {});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-page {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 24rpx;
|
|
background-color: #fafafd;
|
|
|
|
&.is-balck {
|
|
background-color: #212121;
|
|
}
|
|
}
|
|
.app-page-content {
|
|
box-sizing: border-box;
|
|
.content-empty {
|
|
height: 60vh;
|
|
}
|
|
}
|
|
|
|
.article-card {
|
|
box-sizing: border-box;
|
|
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
.thumbnail {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
&-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
&-not {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
}
|
|
.title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.summary {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.foot {
|
|
box-sizing: border-box;
|
|
border-top: 2rpx solid rgba(0, 0, 0, 0.03);
|
|
}
|
|
}
|
|
</style>
|