|
|
@@ -1,36 +1,69 @@
|
|
|
<template>
|
|
|
- <view class="app-page">
|
|
|
-
|
|
|
+ <view class="app-page" :style="{
|
|
|
+ padding:calcShowType==='list-post'? 0 : '24rpx 0'
|
|
|
+ }">
|
|
|
<view v-if="loading !== 'success'" class="loading-wrap">
|
|
|
<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">
|
|
|
+ <view v-else class="app-page-content" :class="[calcShowType==='list-post'?'list-post':'']">
|
|
|
<view v-if="dataList.length === 0" class="content-empty flex flex-center" style="height: 70vh;">
|
|
|
<!-- 空布局 -->
|
|
|
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty>
|
|
|
</view>
|
|
|
<block v-else>
|
|
|
- <tm-translate v-for="(item, index) in dataList" :key="index"
|
|
|
- style="box-sizing: border-box;width: 50%;padding: 0 8rpx;" animation-name="fadeUp"
|
|
|
- :wait="calcAniWait(index)">
|
|
|
- <view class="catgory-card" :style="{backgroundImage:`url(${item.spec.cover})`}">
|
|
|
- <view class="content" @click="handleToCategory(item)">
|
|
|
- <view style="font-size: 32rpx;color: #ffffff;">{{ item.spec.displayName }}</view>
|
|
|
- <view v-if="!calcAuditModeEnabled" style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
|
|
|
- 共 {{ item.postCount }} 篇文章
|
|
|
- </view>
|
|
|
- <view v-else style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
|
|
|
- 共 {{ item.postCount }} 篇内容
|
|
|
+ <block v-if="calcShowType==='list'">
|
|
|
+ <tm-translate v-for="(item, index) in dataList" :key="index"
|
|
|
+ style="box-sizing: border-box;width: 50%;padding: 0 8rpx;" animation-name="fadeUp"
|
|
|
+ :wait="calcAniWait(index)">
|
|
|
+ <view class="catgory-card" :style="{backgroundImage:`url(${item.spec.cover})`}">
|
|
|
+ <view class="content" @click="handleToCategory(item)">
|
|
|
+ <view style="font-size: 32rpx;color: #ffffff;">{{ item.spec.displayName }}</view>
|
|
|
+ <view v-if="!calcAuditModeEnabled"
|
|
|
+ style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
|
|
|
+ 共 {{ item.postCount }} 篇文章
|
|
|
+ </view>
|
|
|
+ <view v-else style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
|
|
|
+ 共 {{ item.postCount }} 篇内容
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </tm-translate>
|
|
|
+ <view class="load-text">{{ loadMoreText }}</view>
|
|
|
+ </block>
|
|
|
+ <view v-else-if="calcShowType==='list-post'" class="fulled flex" style="min-height:100vh">
|
|
|
+ <view class="bg-white" :style="{height: '100%'}">
|
|
|
+ <tm-sliderNav :list="categoryList" bg-color="white" color="light-blue" rang-key="displayName"
|
|
|
+ @change="fnOnCategoryChange"></tm-sliderNav>
|
|
|
</view>
|
|
|
- </tm-translate>
|
|
|
- <tm-flotbutton @click="fnToTopPage" size="m" color="light-blue"
|
|
|
- icon="icon-angle-up"></tm-flotbutton>
|
|
|
- <view class="load-text">{{ loadMoreText }}</view>
|
|
|
+ <scroll-view class="right-content pt-12 pb-12" :scroll-y="true" :scroll-top="scrollTop"
|
|
|
+ :scroll-with-animation="true" :refresher-enabled="true" :refresher-triggered="triggered"
|
|
|
+ :refresher-threshold="60" refresher-background="#fafafa"
|
|
|
+ @refresherrefresh="fnGetPostByCategory(true)" @scrolltolower="fnGetPostByCategory(false)"
|
|
|
+ @scroll="fnOnScroll" @touchmove.stop @touchstart="fnOnTouchStart" @touchend="fnOnTouchEnd"
|
|
|
+ @touchcancel="fnOnTouchEnd">
|
|
|
+ <view v-if="postList.length === 0" class="article-empty flex flex-center">
|
|
|
+ <tm-empty :size="120" icon="icon-shiliangzhinengduixiang-" label="该分类下暂无文章~"></tm-empty>
|
|
|
+ </view>
|
|
|
+ <block v-else>
|
|
|
+ <block v-for="(post, index) in postList" :key="post.spec.publishTime">
|
|
|
+ <tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
|
|
|
+ <article-min-card :article="post" @on-click="fnToArticleDetail"></article-min-card>
|
|
|
+ </tm-translate>
|
|
|
+ </block>
|
|
|
+ <view class="load-text">{{ loadMoreText }}</view>
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flot-buttons">
|
|
|
+ <tm-button @click="fnScrollTop" size="m" :fab="true" theme="light-blue"
|
|
|
+ icon="icon-angle-up"></tm-button>
|
|
|
+ <tm-button @click="fnChangeShowType" size="m" :fab="true" theme="light-blue"
|
|
|
+ :icon="calcShowType==='list'?'icon-align-left':'icon-all'"></tm-button>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
@@ -39,20 +72,27 @@
|
|
|
|
|
|
<script>
|
|
|
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
|
|
-import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
|
|
+import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
|
|
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
|
|
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
|
|
|
|
|
import MarkdownConfig from '@/common/markdown/markdown.config.js';
|
|
|
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
|
|
|
+import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
|
|
|
+import tmSliderNav from '@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue';
|
|
|
+import ArticleMinCard from '@/components/article-min-card/article-min-card.vue';
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
tmSkeleton,
|
|
|
- tmFlotbutton,
|
|
|
+ tmButton,
|
|
|
tmTranslate,
|
|
|
tmEmpty,
|
|
|
- mpHtml
|
|
|
+ mpHtml,
|
|
|
+ tmFlowLayout,
|
|
|
+ tmSliderNav,
|
|
|
+ ArticleMinCard
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -65,30 +105,58 @@ export default {
|
|
|
},
|
|
|
hasNext: false,
|
|
|
dataList: [],
|
|
|
+ categoryList: [],
|
|
|
isLoadMore: false,
|
|
|
- loadMoreText: '加载中...'
|
|
|
+ loadMoreText: '加载中...',
|
|
|
+ currentCategoryConfig: {
|
|
|
+ type: "list"
|
|
|
+ },
|
|
|
+ currentCategoryName: "",
|
|
|
+ postQueryParams: {
|
|
|
+ size: 10,
|
|
|
+ page: 0,
|
|
|
+ },
|
|
|
+ postList: [],
|
|
|
+ triggered: false,
|
|
|
+ scrollTop: 0,
|
|
|
+ tempScrollTop: 0,
|
|
|
+ scrollTimeout: null,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
haloConfigs() {
|
|
|
return this.$tm.vx.getters().getConfigs;
|
|
|
},
|
|
|
- calcAuditModeEnabled(){
|
|
|
+ calcAuditModeEnabled() {
|
|
|
return this.haloConfigs.auditConfig.auditModeEnabled
|
|
|
},
|
|
|
mockJson() {
|
|
|
return this.$tm.vx.getters().getMockJson;
|
|
|
+ },
|
|
|
+ categoryConfig() {
|
|
|
+ return this.haloConfigs.pageConfig.categoryConfig
|
|
|
+ },
|
|
|
+ calcShowType() {
|
|
|
+ return this.currentCategoryConfig.type
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- this.fnGetData();
|
|
|
+ watch: {
|
|
|
+ categoryConfig: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(newVal) {
|
|
|
+ console.log("执行了", newVal)
|
|
|
+ if (!newVal) return;
|
|
|
+ this.currentCategoryConfig = newVal
|
|
|
+ this.handleInitPage()
|
|
|
+ },
|
|
|
+ }
|
|
|
},
|
|
|
onPullDownRefresh() {
|
|
|
this.isLoadMore = false;
|
|
|
this.queryParams.page = 0;
|
|
|
this.fnGetData();
|
|
|
},
|
|
|
-
|
|
|
onReachBottom(e) {
|
|
|
if (this.calcAuditModeEnabled) {
|
|
|
uni.showToast({
|
|
|
@@ -98,7 +166,12 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
if (this.hasNext) {
|
|
|
- this.queryParams.page += 1;
|
|
|
+ if (this.calcShowType === 'list') {
|
|
|
+
|
|
|
+ this.queryParams.page += 1;
|
|
|
+ } else {
|
|
|
+ this.postQueryParams.page += 1;
|
|
|
+ }
|
|
|
this.isLoadMore = true;
|
|
|
this.fnGetData();
|
|
|
} else {
|
|
|
@@ -109,8 +182,37 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ fnChangeShowType() {
|
|
|
+ if (this.calcShowType === 'list-post') {
|
|
|
+ this.currentCategoryConfig.type = 'list'
|
|
|
+ } else {
|
|
|
+ this.currentCategoryConfig.type = 'list-post'
|
|
|
+ }
|
|
|
+ this.handleInitPage();
|
|
|
+ },
|
|
|
+ handleResetInit() {
|
|
|
+ this.postList = []
|
|
|
+ this.dataList = []
|
|
|
+ this.categoryList = []
|
|
|
+ this.queryParams.page = 0;
|
|
|
+ this.postQueryParams.page = 0;
|
|
|
+ this.hasNext = false
|
|
|
+ this.isLoadMore = false
|
|
|
+ this.loadMoreText = '加载中...'
|
|
|
+ this.currentCategoryName = ""
|
|
|
+ this.triggered = false
|
|
|
+ this.fnResetSetAniWaitIndex()
|
|
|
+ },
|
|
|
+ handleInitPage() {
|
|
|
+ this.handleResetInit()
|
|
|
+ if (this.calcShowType === 'list-post') {
|
|
|
+ this.queryParams.size = 99999
|
|
|
+ }
|
|
|
+ this.fnGetData();
|
|
|
+ },
|
|
|
fnGetData() {
|
|
|
if (this.calcAuditModeEnabled) {
|
|
|
+ this.categoryConfig.type = "list"
|
|
|
this.dataList = this.mockJson.category.list.map((item) => {
|
|
|
return {
|
|
|
metadata: {
|
|
|
@@ -143,21 +245,37 @@ export default {
|
|
|
.then(res => {
|
|
|
console.log('请求结果：');
|
|
|
console.log(res);
|
|
|
+ if (this.calcShowType === 'list') {
|
|
|
+ this.loading = 'success';
|
|
|
+ this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
|
|
+ // 处理数据
|
|
|
+ this.hasNext = res.hasNext;
|
|
|
|
|
|
- this.loading = 'success';
|
|
|
- this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
|
|
- // 处理数据
|
|
|
- this.hasNext = res.hasNext;
|
|
|
+ const tempItems = res.items.map(item => {
|
|
|
+ item.spec.cover = this.$utils.checkThumbnailUrl(item.spec.cover, true)
|
|
|
+ return item;
|
|
|
+ })
|
|
|
|
|
|
- const tempItems = res.items.map(item => {
|
|
|
- item.spec.cover = this.$utils.checkThumbnailUrl(item.spec.cover, true)
|
|
|
- return item;
|
|
|
- })
|
|
|
-
|
|
|
- if (this.isLoadMore) {
|
|
|
- this.dataList = this.dataList.concat(tempItems);
|
|
|
+ if (this.isLoadMore) {
|
|
|
+ this.dataList = this.dataList.concat(tempItems);
|
|
|
+ } else {
|
|
|
+ this.dataList = tempItems;
|
|
|
+ }
|
|
|
} else {
|
|
|
- this.dataList = tempItems;
|
|
|
+ this.dataList = res.items
|
|
|
+ this.categoryList = res.items.map(item => {
|
|
|
+ return {
|
|
|
+ displayName: item.spec.displayName,
|
|
|
+ name: item.metadata.name,
|
|
|
+ ...item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.triggered = false;
|
|
|
+ this.loading = 'success';
|
|
|
+ if (this.dataList.length !== 0) {
|
|
|
+ this.currentCategoryName = this.dataList[0].metadata.name;
|
|
|
+ this.fnGetPostByCategory()
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
.catch(err => {
|
|
|
@@ -185,6 +303,84 @@ export default {
|
|
|
uni.navigateTo({
|
|
|
url: `/pagesA/category-detail/category-detail?name=${data.metadata.name}&title=${data.spec.displayName}`
|
|
|
})
|
|
|
+ },
|
|
|
+ fnGetPostByCategory(isPulldownRefresh = true, triggered = true) {
|
|
|
+ if (!isPulldownRefresh) {
|
|
|
+ if (this.hasNext) {
|
|
|
+ this.postQueryParams.page += 1;
|
|
|
+ } else {
|
|
|
+ return uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '没有更多数据了'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.postQueryParams.page = 0;
|
|
|
+ if (triggered) {
|
|
|
+ this.triggered = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$httpApi.v2
|
|
|
+ .getCategoryPostList(this.currentCategoryName, this.postQueryParams)
|
|
|
+ .then(res => {
|
|
|
+ this.hasNext = res.hasNext;
|
|
|
+
|
|
|
+ if (!isPulldownRefresh) {
|
|
|
+ this.postList = this.postList.concat(res.items);
|
|
|
+ } else {
|
|
|
+ this.postList = res.items;
|
|
|
+ }
|
|
|
+ this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loadMoreText = '加载失败！';
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.triggered = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ fnOnCategoryChange(e) {
|
|
|
+ this.fnResetSetAniWaitIndex();
|
|
|
+ this.currentCategoryName = this.dataList[e].metadata.name;
|
|
|
+ this.fnToTopScroll();
|
|
|
+ this.postList = [];
|
|
|
+ this.fnGetPostByCategory();
|
|
|
+ },
|
|
|
+
|
|
|
+ fnOnScroll(e) {
|
|
|
+ this.tempScrollTop = e.detail.scrollTop;
|
|
|
+ },
|
|
|
+ fnToTopScroll() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 500
|
|
|
+ });
|
|
|
+ this.scrollTop = 0;
|
|
|
+ this.tempScrollTop = 0;
|
|
|
+ },
|
|
|
+ fnOnTouchStart() {
|
|
|
+ clearTimeout(this.scrollTimeout);
|
|
|
+ },
|
|
|
+ fnOnTouchEnd() {
|
|
|
+ this.scrollTimeout = setTimeout(() => {
|
|
|
+ this.scrollTop = this.tempScrollTop;
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ //跳转文章详情
|
|
|
+ fnToArticleDetail(post) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pagesA/article-detail/article-detail?name=' + post.metadata.name,
|
|
|
+ animationType: 'slide-in-right'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fnScrollTop() {
|
|
|
+ if (this.calcShowType === 'list') {
|
|
|
+ this.fnToTopPage()
|
|
|
+ } else {
|
|
|
+ this.fnToTopScroll()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -216,8 +412,14 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
padding: 0 12rpx;
|
|
|
gap: 20rpx 0;
|
|
|
+
|
|
|
+ &.list-post {
|
|
|
+ padding: 0;
|
|
|
+ gap: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+
|
|
|
.catgory-card {
|
|
|
width: 100%;
|
|
|
height: 200rpx;
|
|
|
@@ -259,4 +461,14 @@ export default {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
+.flot-buttons {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 100rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ display: flex;
|
|
|
+ gap: 6rpx;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
</style>
|
小莫唐尼