完成评论区样式、子评论展开逻辑

pages/index.vue

@@ -17,7 +17,7 @@
 		    </template>
 			 <template class="img2Box" #center>
 				<view class="qiehuanBox">
-					<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4"
+					<u-tabs lineColor="#B3D7FF" lineWidth="24" lineHeight="4" :scrollable="false"
 					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}"
 					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
 					:list="list1" :current="viewIndex" @click="click"></u-tabs>
@@ -132,20 +132,23 @@ import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
 import PostView from "@/pages/common/postview/index.vue";
 
 		const bgColor = ref('rgba(170, 0, 0, 0)');
-		
+		onMounted(() => {
+			onPageScroll((e) => {
+				// console.log("滚动距离为：" + e.scrollTop);
+				if (e.scrollTop >= 70) {
+					bgColor.value = 'rgba(255, 255, 255, 1)'
+				} else {
+					bgColor.value = 'rgba(170, 0, 0, 0)'
+				}
+			});
+			onReachBottom(() => {
+			    console.log('触底了')
+			})
+		})
 
-		onPageScroll((e) => {
+		
-			// console.log("滚动距离为：" + e.scrollTop);
-			if (e.scrollTop >= 70) {
-				bgColor.value = 'rgba(255, 255, 255, 1)'
-			} else {
-				bgColor.value = 'rgba(170, 0, 0, 0)'
-			}
-		})
 		const { proxy } = getCurrentInstance();
-		onReachBottom(() => {
+		
-		    console.log('触底了')
-		})
 
 		const viewIndex = ref(1);
 		const searchOpen = ref(false);
@@ -311,13 +314,7 @@ import PostView from "@/pages/common/postview/index.vue";
 		const handerShowHand = () => {
 			searchOpen.value = !searchOpen.value;
 		};
-
+					
-		onMounted(() => {
-			console.log(proxy.$store.state.user.QNDomain);
-		});
-		
-		
-			
 		function GotoUNISignid(){
 			proxy.$tab.navigateTo("/pages/signln/signid");
 		}

pages/post/postInfo/postInfo.vue

@@ -34,17 +34,20 @@
 					</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.slice(0,item.answerCommentDisplayCount)" :key="answer">
-					<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>
+							<view class="flex alignCenter justifyBetween">
-							<text v-if="answer.toUserName" class="have-comment-answer-uname">-></text>
+								<text class="have-comment-answer-uname">{{answer.uname}}</text>
-							<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
+								<!-- <text v-if="answer.toUserName" class="have-comment-answer-uname">-></text> -->
+								<image v-if="answer.toUserName" class="have-comment-answer-uname-img" src="../../../static/images/icon/ring-1.png"></image>
+								<text v-if="answer.toUserName" class="have-comment-answer-uname">{{answer.toUserName}}</text>
+							</view>
+		
 						</view>
 						<view class="have-comment-answer-content">
 							<text class="have-comment-answer-content-text-1">{{answer.content}}</text>
@@ -54,7 +57,21 @@
 							</view>
 						</view>
 					</view>
-					<text v-if="item.isDeployment" class="deploymentAnswer-text"  @click="putAnswer(index)">---收起</text>
+					<view class="have-comment-answer-deploy flex alignCenter">
+						<up-line class="have-comment-answer-line" length="40rpx"></up-line>
+						<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="!item.isDeployment">
+							<text class="deploymentAnswer-text" @click="deploymentAnswer(index)">展开{{item.answerCommentAllCount}}条回复</text>
+							<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
+						</view>
+						<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="item.isDeployment && item.answerCommentDisplayCount < item.answerCommentAllCount">
+							<text  class="deploymentAnswer-text" @click="loadMoreAnswers(index)">展开回复</text>
+							<image class="have-comment-answer-img-1" src="../../../static/images/icon/deployment-1.png" mode=""></image>
+						</view>
+						<view class="have-comment-answer-deploy-1 flex alignCenter" v-if="item.isDeployment">
+							<text class="deploymentAnswer-text"  @click="putAnswer(index)">收起</text>
+							<image class="have-comment-answer-img-2" src="../../../static/images/icon/deployment-1.png" mode=""></image>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -79,7 +96,7 @@
 		<!-- <view class="flex justifyCenter"> -->
 		<view class="flex alignCenter justifyCenter">
 			<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
-				<image class="commentInput-img" src="../../../static/images/icon/write-1.png" mode=""></image>
+				<image class="commentInput-img-1" src="../../../static/images/icon/write-1.png" mode=""></image>
 				<text class="commentInput-text">友好评论~</text>
 			</view>
 		</view>
@@ -93,11 +110,11 @@
 				<text class="commentInput-txt">{{postValue.likeCount}}</text>
 			</view>
 			
-			<view v-if="postValue.ifFavorite" @click.stop="cancelFavorite()" class="flex alignCenter justifyCenter flexColumn">
+			<view v-if="postValue.ifFavorite" @click.stop="cancelFavorite()" class="flex flexColumn alignCenter justifyCenter ">
 				<image class="commentInput-img" src="../../../static/images/icon/tu3-2.png" mode=""></image>
 				<text class="commentInput-txt-favorite">{{postValue.favoriteCount}}</text>
 			</view>
-			<view v-if="!postValue.ifFavorite" @click.stop="addFavorite()" class="flex alignCenter justifyCenter flexColumn">
+			<view v-if="!postValue.ifFavorite" @click.stop="addFavorite()" class="flex flexColumn alignCenter justifyCenter ">
 				<image class="commentInput-img" src="../../../static/images/icon/tu3-1.png" mode=""></image>
 				<text class="commentInput-txt">{{postValue.favoriteCount}}</text>
 			</view>
@@ -112,12 +129,13 @@
 
 <script setup>
 	import { ref, reactive, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
+	import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
 	import PostView from "@/pages/common/postview/index.vue";
 	
 	const bottomVal = ref(0);
 	
 	// 监听键盘高度变化
-	onMounted(async () => {
+	onLoad(() => {
 	  // if (!data.value) {
 	    uni.onKeyboardHeightChange(res => {
 	    	if(res.height == 0) {
@@ -143,6 +161,9 @@
 		createTime: '7分钟前',
 		isOfficial: true,
 		isDeployment: false,
+		answerCommentAllCount: 4,
+		answerCommentPage: 0,
+		answerCommentDisplayCount: 0,
 		answerCommentList: [{
 			avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
 			uname: '恋爱60秒',
@@ -160,6 +181,24 @@
 			content: '你干嘛～',
 			toUserName: '恋爱60秒',
 		},
+		{
+			avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
+			uname: '神奇宝贝',
+			createTime: '2024.05.04',
+			isOfficial: false,
+			address: '理工大学',
+			content: '哎呦～',
+			toUserName: '喜欢你没道理',
+		},
+		{
+			avatar: 'https://files.codelife.cc/wallhaven/full/wq/wallhaven-wqkw2r.jpg?x-oss-process=image/resize,limit_0,m_fill,w_307,h_158/quality,Q_92/format,webp',
+			uname: '皮卡丘',
+			createTime: '2024.05.04',
+			isOfficial: true,
+			address: '理工大学',
+			content: '要再点一下才能看到我',
+			toUserName: '喜欢你没道理',
+		},
 		]
 	},
 	{
@@ -254,11 +293,25 @@
 	
 	const deploymentAnswer = (index) => {
 		postList[index].isDeployment = true;
+		loadMoreAnswers(index);
 	};
 	
 	const putAnswer = (index) => {
 		postList[index].isDeployment = false;
+		postList[index].answerCommentDisplayCount = 0;
+		postList[index].answerCommentPage = 0;
 	};
+	
+	const loadMoreAnswers = (index) => {
+		const increment = 3; // 每次加载的评论数量
+		const comment = postList[index];
+		if (comment.answerCommentDisplayCount + increment <= comment.answerCommentAllCount) {
+			comment.answerCommentDisplayCount += increment;
+		} else {
+			comment.answerCommentDisplayCount = comment.answerCommentAllCount; // 显示所有剩余的评论
+		}
+	};
+
 </script>
 
 <style lang="scss">
@@ -347,6 +400,11 @@ page{
 	}
 	
 	.commentInput-img{
+		width: 36rpx;
+		height: 36rpx;
+		// margin-right: 12rpx;
+	}
+	.commentInput-img-1{
 		width: 36rpx;
 		height: 36rpx;
 		margin-right: 12rpx;
@@ -484,7 +542,6 @@ page{
 	}
 	
 	.deploymentAnswer-text{
-		margin-left: 80rpx;
 		font-weight: 400;
 		font-size: 24rpx;
 		color: #999999;
@@ -528,5 +585,37 @@ page{
 		font-size: 28rpx;
 		color: #FFFFFF;
 	}
+	
+	.have-comment-answer-deploy{
+		margin-top: 30rpx;
+		margin-left: 80rpx;
+	}
+	
+	.have-comment-answer-line{
+	}
+	
+	.have-comment-answer-img-1{
+		width: 26rpx;
+		height: 14rpx;
+		margin-left: 12rpx;
+	}
+	
+	.have-comment-answer-img-2{
+		width: 26rpx;
+		height: 14rpx;
+		margin-left: 12rpx;
+		transform: scaleY(-1);
+	}
+	
+	.have-comment-answer-deploy-1{
+		margin-left: 12rpx;
+		margin-right: 130rpx;
+	}
+	
+	.have-comment-answer-uname-img{
+		width: 14rpx;
+		height: 24rpx;
+		margin: 0 8rpx;
+	}
 </style>