uni-halo/components/comment-list/comment-list.vue

<template>
	<view class="comment-list">
		<!-- 顶部区域 -->
		<view class="comment-list_head">
			<view class="title">
				<text>评论列表</text>
				<text class="count">（{{ (result&& result.total) || 0 }}条）</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="comment-list_content">
			<view v-if="loading != 'success'" class="loading-wrap flex">
				<view v-if="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="loading == 'error'" class="error">
					<tm-empty icon="icon-wind-cry" label="加载失败">
						<tm-button theme="bg-gradient-light-blue-accent" size="m" v-if="!disallowComment"
							@click="fnToComment()">刷新试试</tm-button>
					</tm-empty>
				</view>
			</view>
			<block v-else>
				<tm-alerts v-if="disallowComment && dataList.length !== 0" color="red" text :margin="[0, 0]" :shadow="0"
					label="Ծ‸Ծ博主已设置该文章禁止评论!" :round="3"></tm-alerts>
				<view class="empty pt-50" v-if="dataList.length == 0">
					<tm-empty v-if="disallowComment" icon="icon-shiliangzhinengduixiang-" label="暂无评论">
						<text class="text-red text-size-s">- 文章已开启禁止评论 -</text>
					</tm-empty>
					<tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无评论">
						<tm-button theme="light-blue" :dense="true" :shadow="0" size="m"
							@click="fnToComment(null)">抢沙发</tm-button>
					</tm-empty>
				</view>
				<block v-else>
					<!-- 评论内容 : 目前仅支持二级评论 -->
					<block v-for="(comment, index) in dataList" :key="comment.metadata.name">
						<comment-item :useContentBg="false" :isChild="false" :comment="comment" :postName="postName"
							:disallowComment="disallowComment" @on-copy="fnCopyContent" @on-comment="fnToComment"
							@on-todo="fnToDo" @on-detail="fnShowCommetnDetail"></comment-item>

						<!-- 二级评论 -->
						<block v-if="comment.replies && comment.replies.items.length != 0">
							<block v-for="(childComment, childIndex) in comment.replies.items"
								:key="childComment.metadata.name">
								<comment-item :useContentBg="false" :isChild="true" :comment="childComment"
									:postName="postName" :disallowComment="disallowComment" @on-copy="fnCopyContent"
									@on-comment="fnToComment" @on-todo="fnToDo"
									@on-detail="fnShowCommetnDetail"></comment-item>
							</block>
						</block>
					</block>
					<view v-if="false" class="to-more-comment">
						<tm-button item-class="btn" :block="true" width="90vw" theme="bg-gradient-light-blue-lighten"
							size="m">点击查看全部评论</tm-button>
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmAlerts from '@/tm-vuetify/components/tm-alerts/tm-alerts.vue';

	export default {
		name: 'comment-list',
		components: {
			tmEmpty,
			tmButton,
			tmAlerts
		},
		props: {
			// 是否禁用评论
			disallowComment: {
				type: Boolean,
				default: false
			},
			postName: {
				type: String,
				default: ""
			},
			post: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				loading: 'loading',
				queryParams: {
					group: "content.halo.run",
					kind: "Post",
					version: "v1alpha1",
					name: "",
					page: 1,
					size: 50,
					withReplies: true,
					replySize: 10
				},
				result: null,
				dataList: []
			};
		},
		created() {
			this.queryParams.name = this.postName;
			this.fnGetData();
			uni.$on('comment_list_refresh', () => {
				this.fnOnSort(true);
			});
		},
		methods: {
			fnOnSort(refresh = false) {
				if (refresh == false) return;
				this.fnGetData();
			},
			fnGetData() {
				this.loading = 'loading';
				this.$httpApi.v2.getPostCommentList(this.queryParams)
					.then(res => {
						console.log("日志：", res)
						this.result = res;
						this.dataList = res.items;
						this.loading = 'success';
						this.$emit('on-loaded', this.dataList);
					})
					.catch(err => {
						this.loading = 'error';
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			fnToDo() {
				uni.$tm.toast('Halo暂未支持！');
			},
			fnToComment(data) {
				if (this.disallowComment) {
					return uni.$tm.toast('文章已禁止评论！');
				}
				console.log('data', data);
				let _comment = {};
				if (data) {
					let {
						type,
						comment
					} = data;
					// 来自用户
					_comment = {
						isComment: false,
						postName: comment.metadata.name,
						title: comment.owner.displayName,
						from: 'posts',
						formPage: 'comment_list',
						type: 'user'
					};
				} else {
					// 来自文章
					_comment = {
						isComment: true,
						postName: this.post.metadata.name,
						title: '评论文章：' + this.post.spec.title,
						formPage: 'comment_list',
						from: 'posts',
						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('内容已复制成功！');
			},

			fnShowCommetnDetail(comment) {
				this.$emit('on-comment-detail', {
					postName: this.postName,
					comment: comment
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.comment-list {
		&_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			box-sizing: border-box;
			padding-left: 24rpx;
			font-size: 30rpx;
			font-weight: bold;

			&:before {
				content: '';
				position: absolute;
				left: 0rpx;
				top: 8rpx;
				width: 8rpx;
				height: 26rpx;
				background-color: rgb(3, 174, 252);
				border-radius: 6rpx;
			}

			.title {
				.count {
					font-size: 28rpx;
					font-weight: normal;
				}
			}

			.filter {
				font-size: 26rpx;
				font-weight: normal;

				&-item {
					margin-left: 20rpx;
					color: #666;

					&.active {
						font-weight: bold;
						color: rgb(255, 152, 0);
						font-size: 26rpx;
					}
				}
			}
		}

		&_content {
			margin-top: 24rpx;
			padding-bottom: 36rpx;
		}
	}

	.loading-wrap {
		width: 100%;
		height: 506rpx;

		.loading {
			width: 100%;
		}

		.e-loading-icon {
			font-size: 100rpx;
		}
	}

	.to-more-comment {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;

		::v-deep {
			.tm-button .tm-button-btn uni-button {
				height: 70rpx;
			}
		}
	}
</style>