uni-halo/pagesA/leaving/leaving.vue

<template>
	<view class="app-page">
		<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>
		</view>
		<!-- 内容区域 -->
		<view v-else class="app-page-content pa-24" :class="{ 'bg-white': dataList.length !== 0 }">
			<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="(item, index) in dataList" :key="index">
					<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
						<!-- 列表项 -->
						<comment-item
							class="mb-12"
							:isChild="false"
							:comment="item"
							:postId="sheetId"
							:useSolid="false"
							@on-copy="fnCopyContent"
							@on-comment="fnToComment"
							@on-detail="fnOnShowCommentDetail"
						></comment-item>
					</tm-translate>
				</block>
				<tm-flotbutton :offset="[16, 80]" @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton>
				<view class="load-text">{{ loadMoreText }}</view>
			</block>
			<tm-flotbutton actions-pos="left" :show-text="true" color="bg-gradient-orange-accent" @click="fnToComment(null)"></tm-flotbutton>
		</view>

		<!-- 评论详情 -->
		<tm-poup v-model="commentDetail.show" height="auto" :round="6" :over-close="true" position="bottom">
			<view class="pa-24">
				<view class="poup-head pb-24">
					<view class="poup-title text-align-center text-size-g text-weight-b mb-32">留言详情</view>
					<comment-item :useActions="false" :isChild="false" :comment="commentDetail.comment" :postId="sheetId"></comment-item>
				</view>

				<scroll-view :scroll-y="true" class="poup-body">
					<view v-if="commentDetail.loading != 'success'" class="poup-loading-wrap flex flex-center">
						<view v-if="commentDetail.loading == 'loading'" class="loading flex flex-center flex-col">
							<text class="e-loading-icon iconfont icon-loading text-blue"></text>
							<view class="text-size-n text-grey-lighten-1 py-12 mt-12">加载中，请稍等...</view>
						</view>
						<view v-else-if="commentDetail.loading == 'error'" class="error">
							<tm-empty icon="icon-wind-cry" label="加载失败">
								<tm-button theme="bg-gradient-light-blue-accent" size="m" @click="fnGetChildComments()">刷新试试</tm-button>
							</tm-empty>
						</view>
					</view>
					<block v-else>
						<view v-if="commentDetail.list.length == 0" class="poup-empty flex flex-center">
							<tm-empty icon="icon-shiliangzhinengduixiang-" label="没有更多评论啦~"></tm-empty>
						</view>

						<block v-else>
							<comment-item
								v-for="(comment, index) in commentDetail.list"
								:useSolid="false"
								:useActions="false"
								:key="index"
								:isChild="false"
								:comment="comment"
								:postId="sheetId"
							></comment-item>
						</block>
					</block>
				</scroll-view>
			</view>
		</tm-poup>
	</view>
</template>

<script>
import AppKeys from '@/config//keys.js';
import SheetConfig from '@/config/sheets.config.js';

import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import commentItem from '@/components/comment-item/comment-item.vue';

export default {
	components: {
		tmSkeleton,
		tmFlotbutton,
		tmTranslate,
		tmEmpty,
		tmPoup,
		tmButton,
		commentItem
	},
	data() {
		return {
			loading: 'loading',
			queryParams: {
				size: 10,
				page: 0
			},
			result: null,
			dataList: [],
			isLoadMore: false,
			loadMoreText: '加载中...',
			sheetId: SheetConfig[AppKeys.SHEET_LEAVING],
			commentDetail: {
				loading: 'loading',
				show: false,
				comment: {},
				postId: undefined,
				list: []
			}
		};
	},

	onLoad() {
		this.fnSetPageTitle('留言板');
	},
	created() {
		this.fnGetData();
		uni.$on('leaving_refresh', () => {
			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: {
		fnGetData() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			// 设置状态为加载中
			if (!this.isLoadMore) {
				this.loading = 'loading';
			}
			this.loadMoreText = '加载中...';
			this.$httpApi
				.getSheetsCommentsTreeBySheetId(this.sheetId, this.queryParams)
				.then(res => {
					if (res.status == 200) {
						this.loading = 'success';
						// return;
						this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
						// 处理数据
						this.result = res.data;
						if (this.isLoadMore) {
							this.dataList = this.dataList.concat(res.data.content);
						} else {
							this.dataList = res.data.content;
						}
					} else {
						this.loading = 'error';
						this.loadMoreText = '加载失败，请下拉刷新！';
					}
				})
				.catch(err => {
					console.error(err);
					this.loading = 'error';
					this.loadMoreText = '加载失败，请下拉刷新！';
				})
				.finally(() => {
					setTimeout(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}, 500);
				});
		},
		fnToComment(data) {
			let _comment = {};
			if (data) {
				_comment = {
					id: this.sheetId,
					parentId: data.comment.id,
					title: data.comment.author,
					from: 'sheets',
					formPage: 'leaving',
					type: 'user'
				};
			} else {
				_comment = {
					id: this.sheetId,
					parentId: 0,
					title: '留言板留言',
					from: 'sheets',
					formPage: 'leaving',
					type: 'post'
				};
			}

			uni.$tm.vx.commit('comment/setCommentInfo', _comment);
			this.$Router.push({
				path: '/pagesA/comment/comment',
				query: _comment
			});
		},
		fnCopyContent(content) {
			uni.$tm.u.setClipboardData(content);
			uni.$tm.toast('内容已复制成功！');
		},
		fnOnShowCommentDetail(comment) {
			this.commentDetail.comment = comment;
			this.commentDetail.list = [];
			this.commentDetail.show = true;
			this.fnGetChildComments();
		},
		fnGetChildComments() {
			this.commentDetail.loading = 'loading';
			this.$httpApi
				.getSheetsChildrenCommentList(this.sheetId, this.commentDetail.comment.id, {})
				.then(res => {
					if (res.status == 200) {
						this.commentDetail.loading = 'success';
						this.commentDetail.list = res.data;
					} else {
						this.commentDetail.loading = 'error';
					}
				})
				.catch(err => {
					this.commentDetail.loading = 'error';
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-page {
	width: 100vw;
	display: flex;
	flex-direction: column;
	background-color: #fafafd;
}
.app-page-content {
	box-sizing: border-box;
	// box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
}
.content-empty {
	width: 100%;
	height: 60vh;
}
.loading-wrap {
	box-sizing: border-box;
	padding: 24rpx;
}
</style>