Homestay_manage_app/components/commentChild.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.headPhoto" />
				<view class="user_info">
					<view class="info_top">{{ item.userName }}</view>
					<view class="info_bottom">{{ item.dateTime }}</view>
				</view>
			</view>
			<view class="box_content">
				<text class="content_key">回复{{ item.commentName }}：</text>
				{{ item.content }}
			</view>

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

<script>
var dayjs = require('dayjs')
// uniapp不兼容递归组件,需要重新引入注册使用
import Child from '@/components/commentChild.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 {
							let time = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
							const res = await this.$myRequest({
								url: '/mhotel/abcareplyComment.action',
								data: {
									commentId: item.id,
									commentParentId: this.commentParentId,
									commentName: item.userName,
									content: result,
									commentStatus: 1,
									createId: uni.getStorageSync('userInfo').id,
									createUsername: uni.getStorageSync('userInfo').user_name,
									createDate: time,
									modifyDate: time
								}
							})
							// console.log(res);
							if (res.code === 200) {
								uni.showToast({
									title: res.message,
									icon: 'success',
									mask: true
								})
								setTimeout(() => {
									uni.$emit('getData')
								}, 1500)
							}
						}
					}
				}
			})
		}
	}
}
</script>

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

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

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

			.user_info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 18rpx;
				height: 70rpx;

				.info_top {
					font-size: 28rpx;
				}
				.info_bottom {
					color: #a6a6a6;
					font-size: 24rpx;
				}
			}
		}

		.box_content {
			font-size: 24rpx;

			.content_key {
				color: #808080;
			}
		}
	}
}
</style>