novel-front-app/pages_order/comment/comments.vue

<template>
	<view class="comments-page">
		<navbar title="评论详情" leftClick @leftClick="$utils.navigateBack" />
		<!-- 书本名称 -->
		<view class="book-title-area">
			<view class="book-title-label">书本名称</view>
			<view class="book-title">《{{ bookTitle }}》</view>
		</view>
		<!-- 主评论卡片 -->
		<view class="comment-card" v-if="comment.hanHaiMember">
			<view class="comment-header">
				<image class="avatar" :src="comment.hanHaiMember.headImage" mode="aspectFill" />
				<view class="user-info">
					<text class="username">{{ comment.hanHaiMember.nickName }}</text>
				</view>
			</view>
			<view class="comment-content">{{ comment.comment }}</view>
			<view class="comment-footer">
				<text class="comment-time">{{ comment.createTime }}</text>
			</view>
		</view>
		<!-- 全部评论列表 -->
		<view class="all-reply-area">
			<view class="all-reply-header">回复 · {{ comment.children.length }}</view>
			<view class="reply-list">
				<view class="reply-item" v-for="(item, idx) in comment.children" :key="idx">
					<image class="reply-avatar" :src="item.hanHaiMember.headImage" mode="aspectFill" />
					<view class="reply-main">
						<view class="reply-username">{{ item.hanHaiMember.nickName }}</view>
						<view class="reply-content">{{ item.comment }}</view>
						<view class="reply-time">{{ item.createTime }}</view>
					</view>
				</view>
				<uv-empty mode="list" v-if="comment.children.length == 0"></uv-empty>
			</view>
		</view>
		<!-- 底部回复按钮 -->
		<view class="reply-footer">
			<button class="submit-btn" @click="goToRespond">回复评论</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	export default {
		components: {
			navbar
		},
		data() {
			return {
				bookTitle: '',
				comment: {},
				id : 0,
			}
		},
		onLoad({id}) {
			this.id = id
		},
		onShow() {
			this.getData()
		},
		methods: {
			async getData(){
				this.comment = await this.$fetch('getCommentDetail', {
					commentId : this.id,
				})
				this.bookTitle = this.comment.commonShop.name
			},
			goToRespond() {
				uni.navigateTo({
					url: '/pages_order/comment/respondComments?id=' + this.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.comments-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.book-title-area {
		background: #fff;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0 24rpx;
	}

	.book-title-label {
		color: #bdbdbd;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}

	.book-title {
		font-size: 28rpx;
		color: #222;
		margin-bottom: 16rpx;
		border-bottom: 1px solid #ededed;
		padding-bottom: 8rpx;
	}

	.comment-card {
		background: #fff;
		margin: 24rpx;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		margin-bottom: 0;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 26rpx;
		color: #222;
		font-weight: 500;
	}

	.comment-content {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.comment-footer {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #bdbdbd;
		padding-bottom: 20rpx;
	}

	.comment-time {
		color: #bdbdbd;
		margin-top: 18rpx;
	}

	.all-reply-area {
		background: #fff;
		margin: 0 24rpx 0 24rpx;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 16rpx 24rpx;
		margin-top: 24rpx;
	}

	.all-reply-header {
		color: #222;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.reply-list {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 50rpx;
	}

	.reply-item {

		display: flex;
		align-items: flex-start;
	}

	.reply-avatar {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		flex-shrink: 0;

	}

	.reply-main {

		flex: 1;
		display: flex;
		flex-direction: column;

	}

	.reply-username {
		font-size: 24rpx;
		color: #222;
		font-weight: 500;
		margin-bottom: 4rpx;

	}

	.reply-content {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 6rpx;
		word-break: break-all;
	}

	.reply-time {
		font-size: 20rpx;
		color: #bdbdbd;
	}

	.reply-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 90rpx;
		background: #fff;
		padding: 24rpx 32rpx 32rpx 32rpx;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.03);
		z-index: 10;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background: #0a225f;
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
	}
</style>