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

<template>
	<view class="respond-comments-page">
		<!-- 顶部导航栏 -->
		<navbar title="回复评论" leftClick @leftClick="$utils.navigateBack" />

		<!-- 原评论展示 -->
		<view class="origin-comment-card">
			<!-- <view class="comment-header">
				<image class="avatar" :src="comment.avatar" mode="aspectFill" />
				<view class="user-info">
					<text class="username">{{ comment.username }}</text>
				</view>
			</view>
			<view class="comment-content">{{ comment.content }}</view>
			<view class="comment-footer">
				<text class="comment-time">{{ comment.time }}</text>
				<text class="comment-reply-count">
					<text class="emoji-icon">💬</text>
					{{ comment.replyCount }}
				</text>
			</view> -->
			
			<commentItem :item="comment" noClick/>
		</view>
		<!-- 回复输入区 -->
		<view class="reply-area">
			<view class="form-label-row">
				<text class="required-star">*</text>
				<text class="form-label">回复内容</text>
			</view>

			<textarea v-model="replyContent" class="review-textarea custom-placeholder full-textarea"
				placeholder="请输入书评内容" />
		</view>
		<!-- 底部提交按钮 -->
		<view class="reply-footer">
			<button class="submit-btn" :disabled="!replyContent.trim()" @click="submitReview">发送</button>
		</view>
	</view>
</template>

<script>
	import commentItem from '../components/comment/commentItem.vue'
	export default {
		components: {
			commentItem,
		},
		data() {
			return {
				comment: {},
				replyContent: '',
				id : 0,
			}
		},
		onLoad({id}) {
			this.id = id
			this.getData()
		},
		methods: {
			async getData(){
				this.comment = await this.$fetch('getCommentDetail', {
					commentId : this.id,
				})
			},
			async submitReview() {
				if (!this.replyContent.trim()) {
					uni.showToast({
						title: '请输入回复内容',
						icon: 'none'
					})
					return
				}
				
				await this.$fetch('replyComment', {
					commentId : this.id,
					content : this.replyContent,
				})
				
				uni.showToast({
					title: '回复成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		}
	}
</script>

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

	.origin-comment-card {
		background: #fff;
		margin: 24rpx 24rpx 0 24rpx;
		padding: 24rpx 24rpx 0 24rpx;
		margin-bottom: 0;
		border-radius: 0;
		box-shadow: none;
		padding-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;
		justify-content: space-between;
	}

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

	.comment-reply-count {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #bdbdbd;
		line-height: 1;
	}

	.emoji-icon {
		margin-right: 4rpx;
		font-size: 22rpx;
		line-height: 1;
		display: inline-block;
		vertical-align: middle;
	}

	.reply-area {
		background: #fff;
		margin: 0 24rpx 0 24rpx;
		padding: 0 24rpx 24rpx 24rpx;
		display: flex;
		flex-direction: column;
		border-radius: 0;
		box-shadow: none;
		margin-top: 0;
		
		.review-textarea {
			width: 100%;
			min-height: 320rpx;
			border: none;
			background: transparent;
			font-size: 28rpx;
			color: #333;
			resize: none;
			outline: none;
			margin-top: 20rpx;
		}
		
		.review-textarea.custom-placeholder::placeholder {
			color: #d2d2d2;
			font-size: 26rpx;
		}
		
	}

	.form-label-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		margin-top: 50rpx;
	}

	.required-star {
		color: #e23d3d;
		font-size: 22rpx;
		margin-right: 4rpx;
		line-height: 1;
	}

	.form-label {
		color: #222;
		font-size: 26rpx;
		font-weight: 400;
	}

	.reply-input {
		margin-top: 12rpx;
		border: none !important;
		box-shadow: none !important;
	}

	.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 !important;
		color: #fff !important;
		font-size: 30rpx;
		border-radius: 40rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		border: none;
		box-shadow: none;
		margin: 0 auto;
		display: block;
		text-align: center;
		line-height: 80rpx;
	}

	.submit-btn:disabled {
		background: #bdbdbd;
		color: #fff;
	}
</style>