From 7b3ce853e90ce7aff00f2ca055177e22ade47bc8 Mon Sep 17 00:00:00 2001
From: Connor <1813766834@qq.com>
Date: Thu, 6 Jun 2024 19:36:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=84=E8=AE=BA=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/post/postInfo/postInfo.vue | 297 ++++++++++++++++++++++++++++++-
 1 file changed, 292 insertions(+), 5 deletions(-)

diff --git a/pages/post/postInfo/postInfo.vue b/pages/post/postInfo/postInfo.vue
index 6dda658..651a5d4 100644
--- a/pages/post/postInfo/postInfo.vue
+++ b/pages/post/postInfo/postInfo.vue
@@ -7,16 +7,70 @@
 				<text class="commentLabel">全部评论</text>
 				<text class="report">举报</text>
 			</view>
-			<view class="no-comment">
+			<view v-if="!postList" class="no-comment">
 				<image class="no-comment-img" src="../../../static/images/icon/no_comment.png" mode=""></image>
 				<text class="no-comment-text">暂无评论，快去做评论第一人吧！</text>
 				<view class="no-comment-bt">
 					<text class="no-comment-bt-text">快去抢沙发</text>
 				</view>
 			</view>
+			<view v-else class="have-comment" v-for="(item, index) in postList" :key="index">
+				<view class="flex alignCenter">
+					<!-- 头像 -->
+					<view class="have-comment-avatar-container">
+					    <u-avatar class="have-comment-avatar-1" size="60rpx" :src="item.avatar"></u-avatar>
+					    <image v-if="item.isOfficial" class="have-comment-official-1" src="../../../static/images/icon/tu3-6.png"></image>
+					</view>
+					<view class="flex flexColumn">
+						<text class="have-comment-uname">{{item.uname}}</text>
+						<text class="have-comment-address">{{item.address}}</text>
+					</view>
+				</view>
+				<view class="have-comment-content">
+					<text class="have-comment-content-text-1">{{item.content}}</text>
+					<view class="have-comment-content-text-2">
+						<text>{{item.createTime}}</text>
+						<text class="have-comment-content-text-2-hf" @click="toAnswer(item.uname)">回复</text>
+					</view>
+				</view>
+				<view class="" v-if="item.answerCommentList.length != 0">
+					<text v-if="!item.isDeployment" class="deploymentAnswer-text" @click="deploymentAnswer(index)">---展开回复</text>
+					<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList" :key="answer">
+						<view class="flex alignCenter">
+							<!-- 头像 -->
+							<view class="have-comment-answer-avatar-container">
+							    <u-avatar class="have-comment-answer-avatar-1" size="48rpx" :src="answer.avatar"></u-avatar>
+							    <image v-if="answer.isOfficial" class="have-comment-answer-official-1" src="../../../static/images/icon/tu3-6.png"></image>
+							</view>
+							<text class="have-comment-answer-uname">{{answer.uname}}</text>
+							<text v-if="answer.toUserName" class="have-comment-answer-uname">-></text>
+							<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
+						</view>
+						<view class="have-comment-answer-content">
+							<text class="have-comment-answer-content-text-1">{{answer.content}}</text>
+							<view class="have-comment-answer-content-text-2">
+								<text>{{answer.createTime}}</text>
+								<text class="have-comment-answer-content-text-2-hf" @click="toAnswer(answer.uname)">回复</text>
+							</view>
+						</view>
+					</view>
+					<text v-if="item.isDeployment" class="deploymentAnswer-text"  @click="putAnswer(index)">---收起</text>
+				</view>
+			</view>
 		</view>
-		
 	</view>
+	<!-- 评论区输入框 -->
+	<up-popup :show="showInput" duration="0" @close="close" @open="open" class="comment-po">
+		<view class="flex justifyBetween comment-input" :style="{ paddingBottom: bottomVal + 'px' }">
+			<view class="input-in flex alignCenter justifyCenter">
+				<input class="input-in-text" v-if="showInputText" focus="true" maxlength="55" :placeholder="placeholderInput" :adjust-position="false" />
+			</view>
+			<view class="input-bt flex alignCenter justifyCenter">
+				<text class="input-bt-text">发送</text>
+			</view>
+		</view>
+	</up-popup>
+	<!-- 底部操作栏 -->
 	<up-tabbar
 		:fixed="true"
 		:placeholder="true"
@@ -24,7 +78,7 @@
 	>
 		<!-- <view class="flex justifyCenter"> -->
 		<view class="flex alignCenter justifyCenter">
-			<view class="flex justifyCenter alignCenter commentInput">
+			<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
 				<image class="commentInput-img" src="../../../static/logo.png" mode=""></image>
 				<text class="commentInput-text">友好评论~</text>
 			</view>
@@ -57,9 +111,55 @@
 </template>
 
 <script setup>
-	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
+	import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue';
 	import PostView from "@/pages/common/postview/index.vue";
 	
+	const bottomVal = ref(0);
+	
+	// 监听键盘高度变化
+	uni.onKeyboardHeightChange(res => {
+	  bottomVal.value = res.height - 20;
+	  console.log(bottomVal.value)
+	});
+	
+	const postList = reactive([{
+		avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+		uname: '爱吃饭的小张',
+		address: '南开大学',
+		content: '大家来评论',
+		createTime: '7分钟前',
+		isOfficial: true,
+		isDeployment: false,
+		answerCommentList: [{
+			avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
+			uname: '恋爱60秒',
+			createTime: '2024.05.04',
+			isOfficial: false,
+			address: '理工大学',
+			content: '来了',
+		},
+		{
+			avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
+			uname: '喜欢你没道理',
+			createTime: '2024.05.04',
+			isOfficial: false,
+			address: '理工大学',
+			content: '你干嘛～',
+			toUserName: '恋爱60秒',
+		},
+		]
+	},
+	{
+		avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
+		uname: '恋爱60秒',
+		createTime: '2024.05.04',
+		isOfficial: false,
+		isDeployment: false,
+		address: '理工大学',
+		content: '评论区上线了',
+		answerCommentList: []
+	}]);
+	
 	const postValue = reactive(
 		{
 			avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
@@ -87,6 +187,38 @@
 		}
 	);
 	
+	const placeholderInput = ref('')
+	
+	// 创建响应式数据  
+	const showInput = ref(false);  
+	const showInputText = ref(false)
+	// 定义方法  
+	function open() {  
+	  // 打开逻辑，比如设置 show 为 true  
+	  showInput.value = true; 
+	setTimeout(() => {
+	    showInputText.value = true;
+	  }, 50);
+	  // console.log('open');  
+	}  
+	  
+	function close() {  
+	  // 关闭逻辑，设置 show 为 false  
+	  showInput.value = false;  
+	  showInputText.value = false;
+	  // console.log('close');  
+	}
+	
+	const toInput = () => {
+		placeholderInput.value = '发布评论'
+		open();
+	}
+	
+	const toAnswer = (toUser) => {
+		placeholderInput.value = '回复：' + toUser;
+		open();
+	} 
+	
 	const cancelCollection = () => {
 		postValue.likeCount -= 1;
 		postValue.isLike = !postValue.isLike;
@@ -106,9 +238,17 @@
 		postValue.favoriteCount += 1;
 		postValue.ifFavorite = !postValue.ifFavorite;
 	};
+	
+	const deploymentAnswer = (index) => {
+		postList[index].isDeployment = true;
+	};
+	
+	const putAnswer = (index) => {
+		postList[index].isDeployment = false;
+	};
 </script>
 
-<style>
+<style lang="scss">
 	.data-v-6fcabaad {
 			border-radius: 20rpx 20rpx 20rpx 20rpx !important;
 	/* 		width: 200rpx !important;
@@ -217,5 +357,152 @@
 		font-size: 28rpx;
 		color: #FFC729;
 	}
+	
+	.have-comment{
+		margin-top: 30rpx;
+	}
+	
+	.have-comment-avatar-container {
+	    position: relative;
+		width: 60rpx;
+		margin-right: 20rpx;
+	}
+	
+	.have-comment-avatar-1 {
+	    position: relative;
+	}
+	
+	.have-comment-official-1 {
+	    position: absolute;
+	    width: 24rpx;
+	    height: 24rpx;
+	    bottom: 0;
+	    right: 0;
+	}
+	
+	.have-comment-uname{
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.have-comment-address{
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.have-comment-content{
+		margin-left: 80rpx;
+		margin-top: 10rpx;
+	}
+	
+	.have-comment-content-text-1 {
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #333333;
+	}
+	
+	.have-comment-content-text-2 {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		margin-top: 12rpx;
+	}
+	
+	.have-comment-content-text-2-hf {
+		margin-left: 32rpx;
+	}
+	
+	.have-comment-answer{
+		margin-top: 24rpx;
+		margin-left: 80rpx;
+	}
+	
+	.have-comment-answer-avatar-container {
+	    position: relative;
+		width: 48rpx;
+		margin-right: 20rpx;
+	}
+	
+	.have-comment-answer-avatar-1 {
+	    position: relative;
+	}
+	
+	.have-comment-answer-official-1 {
+	    position: absolute;
+	    width: 16rpx;
+	    height: 16rpx;
+	    bottom: 0;
+	    right: 0;
+	}
+	
+	.have-comment-answer-uname{
+		font-weight: 400;
+		font-size: 26rpx;
+		color: #999999;
+	}
+	
+	.have-comment-answer-content{
+		margin-left: 80rpx;
+		margin-top: 10rpx;
+	}
+	
+	.have-comment-answer-content-text-1 {
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #333333;
+	}
+	
+	.have-comment-answer-content-text-2 {
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+		margin-top: 12rpx;
+	}
+	
+	.have-comment-answer-content-text-2-hf {
+		margin-left: 32rpx;
+	}
+	
+	.deploymentAnswer-text{
+		margin-left: 80rpx;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #999999;
+	}
+	
+	.input-in{
+		width: 560rpx;
+		height: 70rpx;
+		border-radius: 37rpx 37rpx 37rpx 37rpx;
+		background: #f7f8fa;
+	}
+	
+	.input-in-text{
+		width: 520rpx;
+	}
+	
+	.input-bt{
+		width: 120rpx;
+		height: 74rpx;
+		border-radius: 37rpx 37rpx 37rpx 37rpx;
+		background: #3477fc;
+	}
+	
+	.input-text{
+		font-weight: 400;
+		font-size: 30rpx;
+		color: #FFFFFF;
+	}
+	
+	.comment-input{
+		padding: 24rpx;
+		// margin-bottom: 800rpx;
+	}
+	
+	.comment-po{
+		// height: 500rpx;
+	}
 </style>