Ver Fonte

fix: 修复首页加载异常问题

小莫唐尼 há 1 ano atrás
pai
commit
512a4013b9

+ 0 - 1
components/article-card/article-card.vue

@@ -16,7 +16,6 @@
 					{{ { d: article.spec.publishTime, f: 'yyyy-MM-dd' } | formatTime }}
 				</view>
 				<view class="visits">
-					<!-- <tm-icons :size="24" name="icon-filter-fill"></tm-icons> -->
 					浏览
 					<text class="number">{{ article.stats.visit }}</text>

+ 7 - 0
pages.json

@@ -259,6 +259,13 @@
 						}
 					}
 				}
+			},
+			{
+				"path" : "test-page/test-page",
+				"style" : 
+				{
+					"navigationBarTitleText" : ""
+				}
 			}]
 		},
 		{

+ 4 - 0
pages/index/index.vue

@@ -20,6 +20,10 @@
 					uni.switchTab({
 						url: '/pages/tabbar/home/home'
 					});
+					
+					// uni.navigateTo({
+					// 	url:'/pagesA/test-page/test-page'
+					// })
 				} else {
 					uni.redirectTo({
 						url: '/pagesA/start/start'

+ 19 - 15
pages/tabbar/category/category.vue

@@ -12,20 +12,19 @@
 				<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty>
 			</view>
 			<block v-else>
-				<block v-for="(item, index) in dataList" :key="index">
-					<!--  卡片 -->
-					<tm-translate style="box-sizing: border-box;width: 50%;padding: 0 8rpx;" animation-name="fadeUp"
-						:wait="calcAniWait()">
-						<view class="catgory-card" :style="{backgroundImage:`url(${item.spec.cover})`}">
-							<view class="content">
-								<view style="font-size: 32rpx;color: #ffffff;">{{item.spec.displayName}}</view>
-								<view style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">共
-									{{item.postCount}} 篇文章
-								</view>
+
+				<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 style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">共
+								{{item.postCount}} 篇文章
 							</view>
 						</view>
-					</tm-translate>
-				</block>
+					</view>
+				</tm-translate>
 				<tm-flotbutton @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
 				<view class="load-text">{{ loadMoreText }}</view>
 			</block>
@@ -57,7 +56,7 @@
 					size: 20,
 					page: 1
 				},
-				result: null,
+				hasNext: false,
 				dataList: [],
 				isLoadMore: false,
 				loadMoreText: '加载中...'
@@ -80,7 +79,7 @@
 		},
 
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -111,7 +110,7 @@
 						this.loading = 'success';
 						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
 						// 处理数据
-						this.result = res;
+						this.hasNext = res.hasNext;
 
 						const tempItems = res.items.map(item => {
 							item.spec.cover = this.$utils.checkThumbnailUrl(item.spec.cover, true)
@@ -141,6 +140,11 @@
 					current: index,
 					urls: list.map(item => item.url)
 				})
+			},
+			handleToCategory(data) {
+				uni.navigateTo({
+					url: `/pagesA/category-detail/category-detail?name=${data.metadata.name}&title=${data.spec.displayName}`
+				})
 			}
 		}
 	};

+ 3 - 3
pages/tabbar/gallery/gallery.vue

@@ -81,7 +81,7 @@
 				},
 				isLoadMore: false,
 				loadMoreText: '',
-				result: {},
+				hasNext: false,
 				dataList: []
 			};
 		},
@@ -101,7 +101,7 @@
 			this.fnGetData();
 		},
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -150,7 +150,7 @@
 					.getPhotoListByGroupName(this.queryParams)
 					.then(res => {
 						console.log("相册 res", res)
-						this.result = res;
+						this.hasNext = res.hasNext;
 						this.loading = 'success';
 						if (res.items.length != 0) {
 							const _list = res.items.map((item, index) => {

+ 8 - 13
pages/tabbar/home/home.vue

@@ -20,14 +20,12 @@
 		</view>
 		<block v-else>
 			<view class="bg-white pb-24">
-				<!-- 轮播图+广告 -->
 				<view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0">
 					<e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true"
 						:useDot="globalAppSettings.banner.useDot" :list="bannerList"
 						@on-click="fnOnBannerClick"></e-swiper>
 				</view>
 			</view>
-			<!-- 精品分类 -->
 			<view class="flex flex-between mt-16 mb-24 pl-24 pr-24">
 				<view class="page-item_title text-weight-b ">精品分类</view>
 				<view class="show-more flex flex-center bg-white round-3" @click="fnToCategoryPage">
@@ -64,9 +62,9 @@
 					label="博主还没有发表任何文章~"></tm-empty></view>
 			<block v-else>
 				<view :class="globalAppSettings.layout.home">
-					<tm-translate v-for="(article, index) in articleList" :key="article.metadata.name" class="ani-item"
+					<tm-translate v-for="(article, index) in articleList" :key="index" class="ani-item"
 						animation-name="fadeUp" :wait="calcAniWait(index)">
-						<article-card from="home" :article="article" @on-click="fnToArticleDetail"></article-card>
+						<article-card from="home" :article="article" :post="article" @on-click="fnToArticleDetail"></article-card>
 					</tm-translate>
 				</view>
 				<view class="load-text mt-12">{{ loadMoreText }}</view>
@@ -258,19 +256,16 @@
 				}
 				this.loadMoreText = '加载中...';
 
-
 				this.$httpApi.v2
 					.getPostList(this.queryParams)
 					.then(res => {
 						console.log('加载成功', res);
-						setTimeout(() => {
-							this.result = res;
-							if (this.isLoadMore) {
-								this.articleList = this.articleList.concat(res.items);
-							} else {
-								this.articleList = res.items;
-							}
-						}, 200)
+						this.result.hasNext = res.hasNext;
+						if (this.isLoadMore) {
+							this.articleList = this.articleList.concat(res.items);
+						} else {
+							this.articleList = res.items;
+						}
 						this.loading = 'success';
 						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
 					})

+ 4 - 5
pages/tabbar/moments/moments.vue

@@ -79,7 +79,7 @@
 					size: 10,
 					page: 1
 				},
-				result: null,
+				hasNext: false,
 				dataList: [],
 				isLoadMore: false,
 				loadMoreText: '加载中...'
@@ -102,7 +102,7 @@
 		},
 
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -131,9 +131,8 @@
 						console.log(res);
 
 						this.loading = 'success';
-						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
-						// 处理数据
-						this.result = res;
+						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~'; 
+						this.hasNext = res.hasNext;
 
 						const tempItems = res.items.map(item => {
 							item.spec.user = {

+ 1 - 0
pages/template.vue

@@ -47,6 +47,7 @@ export default {
 			},
 			result: null,
 			dataList: [],
+			hasNext:false,
 			isLoadMore: false,
 			loadMoreText: '加载中...'
 		};

+ 7 - 5
pagesA/articles/articles.vue

@@ -29,8 +29,10 @@
 				<tm-translate v-for="(article, index) in dataList" :key="article.name" animation-name="fadeUp"
 					:wait="calcAniWait(index)">
 					<view class="article-card" @click="fnToArticleDetail(article)">
-						<text style="font-size: 32rpx;font-weight: bold;color: #333;" v-html="article.title">{{article.title}}</text>
-						<text style="font-size: 28rpx;margin-top: 16rpx;color: #555;" v-html="article.content">{{article.content}}
+						<text style="font-size: 32rpx;font-weight: bold;color: #333;"
+							v-html="article.title">{{article.title}}</text>
+						<text style="font-size: 28rpx;margin-top: 16rpx;color: #555;"
+							v-html="article.content">{{article.content}}
 						</text>
 						<text style="font-size: 24rpx;margin-top: 24rpx;color:#888">
 							发布日期:{{ { d: article.publishTimestamp, f: 'yyyy年MM月dd日' } | formatTime }}
@@ -80,16 +82,16 @@
 					dataList: [],
 					total: 0
 				},
+				hasNext: false,
 				isLoadMore: false,
 				loadMoreText: '加载中...',
-				result: {},
 				dataList: []
 			};
 		},
 		onLoad() {
 			this.fnSetPageTitle('文章列表');
 		},
-		created() { 
+		created() {
 			if (!this.queryParams.keyword) {
 				this.loading = 'success'
 			} else {
@@ -145,7 +147,7 @@
 
 						this.loading = 'success';
 						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
-						this.result = res;
+						this.hasNext = res.hasNext;
 						if (this.isLoadMore) {
 							this.dataList = this.dataList.concat(res.hits);
 						} else {

+ 8 - 6
pagesA/category-detail/category-detail.vue

@@ -7,11 +7,13 @@
 			<tm-skeleton model="listAvatr"></tm-skeleton>
 		</view>
 		<block v-else>
-			<view class="empty" v-if="dataList.length == 0"><tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无文章"></tm-empty></view>
+			<view class="empty" v-if="dataList.length == 0"><tm-empty icon="icon-shiliangzhinengduixiang-"
+					label="该分类下暂无文章"></tm-empty></view>
 			<block v-else>
 				<block v-for="(article, index) in dataList" :key="article.createTime">
 					<!-- 文章卡片 -->
-					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)"><article-card :article="article" @on-click="fnToArticleDetail"></article-card></tm-translate>
+					<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)"><article-card :article="article"
+							@on-click="fnToArticleDetail"></article-card></tm-translate>
 				</block>
 				<view class="load-text">{{ loadMoreText }}</view>
 			</block>
@@ -44,7 +46,7 @@
 				},
 				name: '',
 				pageTitle: '加载中...',
-				result: null,
+				hasNext: false,
 				dataList: [],
 				isLoadMore: false,
 				loadMoreText: ''
@@ -62,7 +64,7 @@
 			this.fnGetData();
 		},
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -87,9 +89,9 @@
 				this.$httpApi
 					.getCategoryPostList(this.name, this.queryParams)
 					.then(res => {
-						console.log("请求成功:",res)
+						console.log("请求成功:", res)
 						this.fnSetPageTitle(`${this.pageTitle} (共${res.total}篇)`);
-						this.result = res;
+						this.hasNext = res.hasNext;
 						if (this.isLoadMore) {
 							this.dataList = this.dataList.concat(res.items);
 						} else {

+ 4 - 4
pagesA/comment/comment.vue

@@ -127,7 +127,7 @@
 					}
 					this.$httpApi.v2.addPostComment(commentForm)
 						.then(res => {
-							uni.$tm.toast('日志:提交成功!');
+							uni.$tm.toast('提交成功!');
 							// 更新评论者信息
 							this.handleSetVisitor();
 							setTimeout(() => {
@@ -135,7 +135,7 @@
 							}, 1500)
 						})
 						.catch(err => {
-							uni.$tm.toast("提示:评论失败");
+							uni.$tm.toast("评论失败");
 						});
 					return;
 				}
@@ -155,7 +155,7 @@
 				}
 				this.$httpApi.v2.addPostCommentReply(this.form.postName, replyForm)
 					.then(res => {
-						uni.$tm.toast('提示:提交成功!');
+						uni.$tm.toast('提交成功!');
 						// 更新评论者信息
 						this.handleSetVisitor();
 						setTimeout(() => {
@@ -163,7 +163,7 @@
 						}, 1500)
 					})
 					.catch(err => {
-						uni.$tm.toast("提示:回复失败");
+						uni.$tm.toast("回复失败");
 					});
 			}
 		}

+ 3 - 3
pagesA/friend-links/friend-links.vue

@@ -191,11 +191,11 @@
 					size: 10,
 					page: 1
 				},
-				result: {},
 				detail: {
 					show: false,
 					data: {}
 				},
+				hasNext:false,
 				isLoadMore: false,
 				loadMoreText: '',
 				dataList: [],
@@ -225,7 +225,7 @@
 			this.fnGetData();
 		},
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -252,7 +252,7 @@
 					.then(res => {
 						console.log('请求结果:');
 						console.log(res);
-						this.result = res;
+						this.hasNext = res.hasNext;
 						const list = res.items.map(item => {
 							item.spec.logo = this.$utils.checkAvatarUrl(item.spec.logo)
 							return item;

+ 3 - 2
pagesA/journal/journal.vue

@@ -46,8 +46,9 @@
 					size: 10,
 					page: 0
 				},
-				result: null,
+			 
 				dataList: [],
+				hasNext:false,
 				isLoadMore: false,
 				loadMoreText: '加载中...'
 			};
@@ -65,7 +66,7 @@
 			this.fnGetData();
 		},
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();

+ 4 - 3
pagesA/tag-detail/tag-detail.vue

@@ -47,8 +47,9 @@
 				},
 				name: '',
 				pageTitle: '加载中...',
-				result: null,
+				 
 				dataList: [],
+				hasNext:false,
 				isLoadMore: false,
 				loadMoreText: ''
 			};
@@ -66,7 +67,7 @@
 			this.fnGetData();
 		},
 		onReachBottom(e) {
-			if (this.result && this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();
@@ -92,7 +93,7 @@
 					.getPostByTagName(this.name, this.queryParams)
 					.then(res => {
 						this.fnSetPageTitle(`${this.pageTitle} (共${res.total}篇)`);
-						this.result = res;
+						this.hasNext = res.hasNext;
 						if (this.isLoadMore) {
 							this.dataList = this.dataList.concat(res.items);
 						} else {

+ 289 - 0
pagesA/test-page/test-page.vue

@@ -0,0 +1,289 @@
+<template>
+	<view class="app-page">
+
+		<view v-if="loading != 'success' && articleList.length===0" class="loading-wrap">
+			加载中
+		</view>
+		<block v-else>
+
+			<view v-if="articleList.length == 0" class="article-empty"><tm-empty icon="icon-shiliangzhinengduixiang-"
+					label="博主还没有发表任何文章~"></tm-empty></view>
+			<block v-else>
+
+				<view style="width: 100%;text-align: center;display: flex;flex-direction: column;align-items: center;"
+					v-for="(article, index) in articleList" :key="index">
+					<image style="width: 100%;height: 250rpx;" :src="article.cover"></image>
+					<view style="margin-top: 12rpx;">{{article.title}}</view>
+				</view>
+				<view class="load-text mt-12">{{ loadMoreText }}</view>
+			</block>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+
+		},
+		data() {
+			return {
+				loading: 'loading',
+				queryParams: {
+					size: 30,
+					page: 1
+				},
+				result: {},
+				isLoadMore: false,
+				loadMoreText: '加载中...',
+				bannerCurrent: 0,
+				bannerList: [],
+				noticeList: [],
+				articleList: [],
+				categoryList: [],
+			};
+		},
+		onLoad() {
+			this.fnQuery();
+		},
+
+		onPullDownRefresh() {
+			this.isLoadMore = false;
+			this.queryParams.page = 1;
+			this.fnQuery();
+		},
+
+		onReachBottom(e) {
+			if (this.result.hasNext) {
+				this.queryParams.page += 1;
+				this.isLoadMore = true;
+				this.fnGetArticleList();
+			} else {
+				uni.showToast({
+					icon: 'none',
+					title: '没有更多数据了'
+				});
+			}
+		},
+		methods: {
+			fnQuery() {
+				this.fnGetArticleList();
+			},
+			fnOnBannerChange(e) {
+				this.bannerCurrent = e.current;
+			},
+			fnOnBannerClick(item) {
+				if (item.id == '') return;
+				this.fnToArticleDetail({
+					metadata: {
+						name: item.id
+					}
+				});
+			},
+			fnGetArticleList() {
+
+				// 设置状态为加载中
+				if (!this.isLoadMore) {
+					this.loading = 'loading';
+				}
+				this.loadMoreText = '加载中...';
+				const list = new Array(30).fill(10).map(item => {
+					return {
+						title: '红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈发放',
+						cover: 'https://blog.925i.cn/upload/房间%20少女%20蓝色眼睛%20夏天的裙子%20室内绿色植物%20动漫壁纸_彼岸壁纸.webp'
+					}
+				})
+
+				setTimeout(() => {
+					setTimeout(() => {
+						this.result = {
+							hasNext: true
+						};
+
+						if (this.isLoadMore) {
+							this.articleList = this.articleList.concat(list);
+						} else {
+							this.articleList = list;
+						}
+					}, 200)
+					this.loading = 'success';
+					this.loadMoreText = this.result ? '上拉加载更多' : '呜呜,没有更多数据啦~';
+					uni.hideLoading();
+					uni.stopPullDownRefresh();
+				}, 300)
+
+
+			},
+
+			//跳转文章详情
+			fnToArticleDetail(article) {
+				uni.navigateTo({
+					url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
+					animationType: 'slide-in-right'
+				});
+			},
+			// 快捷导航页面跳转
+			fnToNavPage(item) {
+				switch (item.type) {
+					case 'tabbar':
+						uni.switchTab({
+							url: item.path
+						});
+						break;
+					case 'page':
+						uni.navigateTo({
+							url: item.path
+						});
+						break;
+				}
+			},
+			// 分类页面
+			fnToCategoryPage() {
+				uni.switchTab({
+					url: '/pages/tabbar/category/category'
+				});
+			},
+			// 所有的文章列表页面
+			fnToArticlesPage() {
+				uni.navigateTo({
+					url: '/pagesA/articles/articles'
+				});
+			},
+
+			// 根据slug查询分类下的文章
+			fnToCategoryBy(category) {
+				uni.navigateTo({
+					url: `/pagesA/category-detail/category-detail?name=${category.metadata.name}&title=${category.spec.displayName}`
+				});
+			},
+
+			fnChangeMode() {
+				const isBlackTheme = this.$tm.vx.state().tmVuetify.black;
+				this.$tm.theme.setBlack(!isBlackTheme);
+				uni.setNavigationBarColor({
+					backgroundColor: !isBlackTheme ? '#0a0a0a' : '#ffffff',
+					frontColor: !isBlackTheme ? '#ffffff' : '#0a0a0a'
+				});
+			},
+
+			fnToSearch() {
+				uni.navigateTo({
+					url: '/pagesA/articles/articles'
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.app-page {
+		width: 100vw;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		// background-color: #ffffff;
+
+		.logo {
+			width: 60rpx;
+			height: 60rpx;
+			box-sizing: border-box;
+		}
+
+		::v-deep {
+			.tm-menubars .body .body_wk .left {
+				min-width: initial;
+			}
+		}
+	}
+
+	.loading-wrap {
+		padding: 24rpx;
+	}
+
+	.search-input {
+		background-color: #f5f5f5;
+		align-items: center;
+		/* #ifdef MP-WEIXIN */
+		margin-right: 24rpx;
+
+		/* #endif */
+		&_icon {}
+
+		&_text {}
+	}
+
+	.show-more {
+		width: 42rpx;
+		height: 42rpx;
+		box-sizing: border-box;
+		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.03);
+	}
+
+	.banner {
+		overflow: hidden;
+	}
+
+	.quick-nav {
+		background-color: #fff;
+		box-sizing: border-box;
+
+		// box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
+		.name {
+			color: var(--main-text-color);
+		}
+	}
+
+	.category {
+		width: 94vw;
+		display: flex;
+		height: 200rpx;
+		white-space: nowrap;
+		margin: 0 24rpx;
+
+		.content {
+			display: inline-block;
+			padding-left: 24rpx;
+
+			&:first-child {
+				padding-left: 0;
+			}
+		}
+
+		.cate-empty {
+			height: inherit;
+		}
+	}
+
+	.page-item {
+		&_title {
+			position: relative;
+			padding-left: 24rpx;
+			font-size: 32rpx;
+			z-index: 1;
+			color: var(--main-text-color);
+
+			&:before {
+				content: '';
+				position: absolute;
+				left: 0rpx;
+				top: 8rpx;
+				width: 8rpx;
+				height: 30rpx;
+				background-color: rgba(33, 150, 243, 1);
+				border-radius: 6rpx;
+				z-index: 0;
+			}
+		}
+	}
+
+	.h_row_col2 {
+		display: flex;
+		flex-wrap: wrap;
+		box-sizing: border-box;
+		padding: 0 12rpx;
+
+		.ani-item {
+			width: 50%;
+		}
+	}
+</style>

+ 2 - 2
pagesB/articles/articles.vue

@@ -153,7 +153,7 @@
 				},
 				isLoadMore: false,
 				loadMoreText: '加载中...',
-				result: {},
+			hasNext:false,
 				dataList: [],
 				category: {
 					loading: 'loading',
@@ -182,7 +182,7 @@
 		},
 
 		onReachBottom(e) {
-			if (this.result.hasNext) {
+			if (this.hasNext) {
 				this.queryParams.page += 1;
 				this.isLoadMore = true;
 				this.fnGetData();