Homestay_manage_app/components/commentChild3.vue

<template>
	<view class="item_child">
		<view class="child_box" v-for="item in list" :key="item.id" @click.stop="handleComment(item)">
			<view class="box_user">
				<img mode="aspectFill" :src="item.image" @click.stop="handleGoMyHome(item.userId)" />
				<view class="user_info">
					{{ item.userName }}
				</view>
			</view>
			<view class="box_content">
				<text class="content_key">回复{{ item.parentName }}：</text>
				{{ item.content }}
				<view class="content_bottom">
					{{ item.date.slice(0, 19) }}
				</view>
			</view>

			<view>
				<Child v-if="item.childrens" :list="item.childrens" :commentParentId="commentParentId"></Child>
			</view>
		</view>
	</view>
</template>

<script>
var dayjs = require('dayjs')
// uniapp不兼容递归组件,需要重新引入注册使用
import Child from '@/components/commentChild3.vue'
export default {
	components: { Child },
	props: {
		list: Array,
		commentParentId: String
	},
	methods: {
		handleComment(item) {
			uni.showModal({
				title: '请输入评论',
				editable: true,
				success: async (res) => {
					if (res.confirm) {
						const result = res.content
						if (!res.content) {
							uni.showToast({
								title: '评论内容不能为空',
								icon: 'none',
								mask: true
							})
							setTimeout(() => {
								this.handleComment()
							}, 1500)
						} else {
							const res = await this.$myRequest({
								url: '/mhotel/articlecommentArticle.action',
								method: 'post',
								data: {
									articleId: this.commentParentId,
									parentId: item.id,
									userId: uni.getStorageSync('userInfo').id,
									content: result
								}
							})
							// console.log(res);
							if (res.code === 200) {
								uni.$emit('getReset')
							}
						}
					}
				}
			})
		},
		handleGoMyHome(userId) {
			uni.navigateTo({
				url: `/pagesSub/myHome/myHome?userId=${userId}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.item_child {
	// margin-left: 50rpx;

	.child_box {
		margin-bottom: 10rpx;
		.box_user {
			display: flex;
			align-items: center;
			height: 70rpx;

			img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.user_info {
				display: flex;
				align-items: center;
				margin-left: 18rpx;
				height: 70rpx;
				font-size: 28rpx;
			}
		}

		.box_content {
			margin-left: 80rpx;
			font-size: 24rpx;

			.content_key {
				color: #808080;
			}

			.content_bottom {
				margin: 10rpx 0;
				color: #808080;
			}
		}
	}
}
</style>