fix: 修复文章归档功能

pages/tabbar/about/about.vue

@@ -84,9 +84,13 @@
 </template>
 
 <script>
-import {checkHasAdminLogin} from '@/utils/auth.js';
+	import {
+		checkHasAdminLogin
+	} from '@/utils/auth.js';
 	import CheckAppUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
-import {CheckWxUpdate} from '@/utils/update.js';
+	import {
+		CheckWxUpdate
+	} from '@/utils/update.js';
 
 	import tmGrouplist from '@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue';
 	import tmListitem from '@/tm-vuetify/components/tm-listitem/tm-listitem.vue';
@@ -186,7 +190,7 @@ export default {
 						path: '/pagesA/archives/archives',
 						isAdmin: false,
 						type: 'page',
-                show: false
+						show: true
 					}, {
 						key: 'love',
 						title: '恋爱日记',
@@ -358,8 +362,7 @@ export default {
 								url: '/pagesB/login/login'
 							});
 						})
-                    .catch(err => {
+						.catch(err => {});
-                    });
 					return;
 				}
 
@@ -380,8 +383,7 @@ export default {
 									this.navList.find(x => x.key == 'cache').rightText =
 										uni.getStorageInfoSync().currentSize + 'KB';
 								})
-                            .catch(err => {
+								.catch(err => {});
-                            });
 							break;
 						case 'update':
 							// #ifdef APP-PLUS

pagesA/archives/archives.vue

@@ -1,7 +1,8 @@
 <template>
 	<view class="app-page">
 		<view class="e-fixed">
-            <tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs>
+			<tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center"
+				@change="fnOnTabChange"></tm-tabs>
 		</view>
 		<!-- 占位区域 -->
 		<view style="width: 100vw;height: 90rpx;"></view>
@@ -23,34 +24,41 @@
 					<view class="tm-timeline-item tm-timeline-item--leftDir">
 						<view style="width: 160rpx;">
 							<view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']"
-                                  class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"></view>
+								class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4">
+							</view>
 							<view :style="{ marginTop: '-24rpx' }"
 								:class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']"
 								class="grey-lighten-2"></view>
 						</view>
 						<view class="tm-timeline-item-content relative">
 							<view class="tm-timeline-item-left">
-                                <view class="time text-weight-b mb-24">
+								<view class="flex time text-weight-b mb-24">
-                                    {{ item.year }}年
+									<text>{{ item.year }}年</text>
-                                    <block v-if="tab.activeIndex == 0">{{ item.month }}月</block>
+									<text v-if="tab.activeIndex == 0">{{ item.month }}月</text>
-                                    <text class="text-size-s text-grey-darken-1 ml-24">（共发布 {{ item.posts.length }} 篇文章）</text>
+									<view class="text-size-s text-grey-darken-1 ml-12">
+										（共 {{ item.posts.length }} 篇文章）
+									</view>
 								</view>
 								<block v-if="item.posts.length != 0">
-                                    <block v-for="(post, postIndex) in item.posts" :key="post.id">
+									<block v-for="(post, postIndex) in item.posts" :key="post.metadata.name">
 										<tm-translate animation-name="fadeUp" :wait="calcAniWait(postIndex)">
-                                            <view class="flex post shadow-3 pa-24 mb-24" :class="[globalAppSettings.layout.cardType]"
+											<view class="flex post shadow-3 pa-24 mb-24"
+												:class="[globalAppSettings.layout.cardType]"
 												@click="fnToArticleDetail(post)">
-                                                <image class="post-thumbnail" :src="$utils.checkThumbnailUrl(post.thumbnail)"
+												<image class="post-thumbnail"
-                                                       mode="aspectFill"></image>
+													:src="$utils.checkThumbnailUrl(post.spec.cover)" mode="aspectFill">
+												</image>
 												<view class="post-info pl-20">
-                                                    <view class="post-info_title text-overflow">{{ post.title }}</view>
+													<view class="post-info_title text-overflow">{{ post.spec.title }}
-                                                    <view class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1">
+													</view>
-                                                        {{ post.summary }}
+													<view
+														class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1">
+														{{ post.status.excerpt }}
 													</view>
 													<view class="post-info_time mt-12  text-size-s text-grey-darken-1">
 														<text class="iconfont icon-clock text-size-s mr-6"></text>
 														<text class="time-label">发布时间：</text>
-                                                        {{ {d: post.createTime, f: 'yyyy年MM月dd日 星期w'} | formatTime }}
+														{{ {d: post.spec.publishTime, f: 'yyyy年MM月dd日 星期w'} | formatTime }}
 													</view>
 												</view>
 											</view>
@@ -63,8 +71,10 @@
 					</view>
 				</block>
 			</view>
+			<view class="load-text mt-12">{{ loadMoreText }}</view>
 			<!-- 返回顶部 -->
-            <tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent" icon="icon-angle-up"></tm-flotbutton>
+			<tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent"
+				icon="icon-angle-up"></tm-flotbutton>
 		</block>
 	</view>
 </template>
@@ -75,6 +85,7 @@ import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
 	import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
 	import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
 	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
+	import qs from 'qs'
 
 	export default {
 		components: {
@@ -93,11 +104,13 @@ export default {
 				},
 				queryParams: {
 					size: 10,
-                page: 0
+					page: 1
 				},
-            result: null,
+				result: {},
-            dataList: [],
+				cacheDataList: [], // 所有请求的缓存数据
-            api: 'getMonthArchives'
+				dataList: [], // 显示的数据
+				isLoadMore: false,
+				loadMoreText: "加载中..."
 			};
 		},
 		computed: {
@@ -112,47 +125,171 @@ export default {
 			this.fnGetData();
 		},
 		onPullDownRefresh() {
+			this.isLoadMore = false;
+			this.queryParams.page = 1;
 			this.fnGetData();
-        this.queryParams.page = 0;
 		},
-
+		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.fnResetSetAniWaitIndex();
-            const _api = ['getMonthArchives', 'getYearArchives'];
-            this.api = _api[index];
 				this.queryParams.page = 0;
-            this.fnGetData();
+				this.dataList = this.handleGetShowDataList(this.handleGetPosts(this.cacheDataList))
 			},
 			fnGetData() {
+				if (this.isLoadMore) {
+					uni.showLoading({
+						title: "加载中..."
+					})
+				} else {
 					this.loading = 'loading';
-            // uni.showLoading({
+					this.loadMoreText = "加载中...";
-            // 	mask: true,
+				}
-            // 	title: '加载中...'
+
-            // });
+				const paramsStr = qs.stringify(this.queryParams, {
-            this.$httpApi[this.api](this.queryParams)
+					allowDots: true,
-                .then(res => {
+					encodeValuesOnly: true,
-                    this.result = res.data;
+					skipNulls: true,
-                    this.dataList = res.data;
+					encode: true,
-                    setTimeout(() => {
+					arrayFormat: 'repeat'
+				})
+				uni.request({
+					url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr,
+					method: 'GET',
+					success: (res) => {
+						const data = res.data;
+						this.result = data;
+						const posts = this.handleGetPosts(data.items)
+						const showDataList = this.handleGetShowDataList(posts)
+						if (this.isLoadMore) {
+							this.cacheDataList = this.cacheDataList.concat(data.items);
+							this.handleMergeDataList2(showDataList)
+						} else {
+							this.dataList = []
+							this.cacheDataList = data.items;
+							this.dataList = showDataList
+						}
+
 						this.loading = 'success';
-                    }, 500);
+						this.loadMoreText = data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
-                })
-                .catch(err => {
-                    console.error(err);
-                    this.loading = 'error';
-                })
-                .finally(() => {
-                    setTimeout(() => {
 						uni.hideLoading();
 						uni.stopPullDownRefresh();
-                    }, 500);
-                });
 					},
-        //跳转文章详情
+					fail: (err) => {
+						this.loading = 'error';
+						this.loadMoreText = '加载失败，请下拉刷新！';
+						uni.$tm.toast(err.message || '数据加载失败！');
+						uni.hideLoading();
+						uni.stopPullDownRefresh();
+					}
+				})
+			},
+			// 处理数据分类
+			handleGetPosts(dataList) {
+				const posts = {}
+				const postLabelYearKey = "content.halo.run/archive-year"
+				const postLabelMonthKey = "content.halo.run/archive-month"
+				dataList.forEach(item => {
+					let postItemKey = ""
+					if (this.tab.activeIndex == 0) {
+						postItemKey =
+							`${item.metadata.labels[postLabelYearKey]}-${item.metadata.labels[postLabelMonthKey]}`
+					} else {
+						postItemKey = `${item.metadata.labels[postLabelYearKey]}`
+					}
+					if (posts[postItemKey]) {
+						posts[postItemKey].push(item)
+					} else {
+						posts[postItemKey] = [item]
+					}
+				})
+				return posts;
+			},
+			// 根据分类的数据，处理成显示的数据
+			handleGetShowDataList(posts) {
+				const dataListResult = []
+				Object.keys(posts).forEach((key) => {
+					const postData = {
+						sort: 0,
+						key: key,
+						year: key,
+						month: "",
+						posts: posts[key]
+					}
+					if (this.tab.activeIndex == 0) {
+						const splitDate = key.split("-")
+						postData.year = splitDate[0]
+						postData.month = splitDate[1]
+						postData.sort = Number(key.replace("-", ""))
+					} else {
+						postData.sort = Number(key)
+					}
+					dataListResult.push(postData)
+				})
+				if (this.tab.activeIndex == 1) {
+					dataListResult.sort((a, b) => {
+						return Number(b.year) - Number(a.year)
+					})
+				}
+				return dataListResult;
+			},
+			handleMergeDataList(list1, list2) {
+				// 将list1转换为以key为键的对象
+				let merged = list1.reduce((acc, item) => {
+					acc[item.key] = {
+						...item
+					};
+					return acc;
+				}, {});
+
+				// 遍历list2，合并posts数组或添加新对象
+				list2.forEach(item => {
+					if (merged[item.key]) {
+						// 如果key已存在，合并posts数组
+						merged[item.key].posts = [...merged[item.key].posts, ...item.posts];
+					} else {
+						// 如果key不存在，添加新对象
+						merged[item.key] = {
+							...item
+						};
+					}
+				});
+
+				// 将对象转换回数组
+				return Object.values(merged);
+			},
+			handleMergeDataList2(list) {
+				const tempList = [...list]
+				this.dataList.forEach((item, index) => {
+					const find = this.dataList.find(x => x.key == item.key)
+					if (find) {
+						item.posts.forEach(post => {
+							if (!find.posts.some(x => x.metadata.name == post.metadata.name)) {
+								find.posts.push(post)
+							}
+						})
+						tempList.splice(index, 1)
+					}
+				})
+				tempList.forEach(post => {
+					this.dataList.push(post)
+				})
+				console.log("this.dataList", this.dataList)
+			},
 			fnToArticleDetail(article) {
 				uni.navigateTo({
-                url: '/pagesA/article-detail/article-detail?articleId=' + article.id,
+					url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
 					animationType: 'slide-in-right'
 				});
 			}
@@ -256,8 +393,7 @@ export default {
 		border-radius: 12rpx;
 		background-color: #fff;
 
-    &.lr_image_text {
+		&.lr_image_text {}
-    }
 
 		&.lr_text_image {
 			.post-thumbnail {
@@ -376,4 +512,8 @@ export default {
 			}
 		}
 	}
+
+	.time {
+		align-items: center;
+	}
 </style>