From 95ab7480bddab3d692d2adc07561a4c8e44d0f08 Mon Sep 17 00:00:00 2001
From: Connor <1813766834@qq.com>
Date: Sun, 9 Jun 2024 17:08:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=84=E8=AE=BA=E5=8C=BA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E3=80=81=E5=AD=90=E8=AF=84=E8=AE=BA=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue                     |  37 +++++-----
 pages/post/postInfo/postInfo.vue    | 111 +++++++++++++++++++++++++---
 static/images/icon/deployment-1.png | Bin 0 -> 611 bytes
 static/images/icon/ring-1.png       | Bin 0 -> 242 bytes
 4 files changed, 117 insertions(+), 31 deletions(-)
 create mode 100644 static/images/icon/deployment-1.png
 create mode 100644 static/images/icon/ring-1.png

diff --git a/pages/index.vue b/pages/index.vue
index d8ce11b..0422af9 100644
--- a/pages/index.vue
+++ b/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");
 		}
diff --git a/pages/post/postInfo/postInfo.vue b/pages/post/postInfo/postInfo.vue
index b4963a9..6ecfa88 100644
--- a/pages/post/postInfo/postInfo.vue
+++ b/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" :key="answer">
+					<view v-if="item.isDeployment" class="have-comment-answer" v-for="answer in item.answerCommentList.slice(0,item.answerCommentDisplayCount)" :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 class="flex alignCenter justifyBetween">
+								<text class="have-comment-answer-uname">{{answer.uname}}</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>
 
diff --git a/static/images/icon/deployment-1.png b/static/images/icon/deployment-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..ece320aff8baa19e8558b6445101c5326d01c38f
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq000^Q000jN1^@s6`cdEJ00001b5ch_0Itp)
z=>Px%9Z5t%R5(wqlTV0FVHC!H=lwo1_rC8Xp%ht6iqb4BC}l9pY{--%8w+A(gN@mU
z4K^kl3q?vS6iGygNv34OVq!7bNGT(kZ|)ycX5ORw-8-6LX1;Hjv%7Vk=XcKYo-4yi
zc3sd;HPRIY!7JvlYFW0?c)bVuT;e4C3M>I?-bm-dAb33&tXh_BFkT-6i-2zu$3NN;
z{|E?x??%`jhT+@)fu(7>-YZXm#lVQ5J0&-a<9Hil9*n~T-D0in{}))2ByEbkC^yL=
zyREfP>Y%)mB-x?JePBK?i24ra+`HMp;y7N1m}kH;;HMF~!Z3W8d;A9FAH!+7OO!jn
zJm8D^N_!M77-$9-$MIUk<eMx7M%BpPC<yM3YbSw<7_&Wy-U2GX=W4}lYH4ZtI1{W^
z8(D2CV}0c&9+iF01-B<^{sI*-X8RSr0T_f26_Ji02tG{(8yXsEtyIT)ft7$4^nkVY
z=AXS&g31^VigL9O=m4slopXZ|4YDj-G3vEXU{&6v=%L8kYf}w0EvO!2njS&9TngW#
zeyejX|L;iCbh(F@D6RETgu_u7UYRc989`-?#}&O$8uY6l>oCSt71Im4rdXJx&V`p|
zddG&KdW=cZEy&r@=nYT>+KRK4W7Y;28(n5opfbi&C}$>LlAN$M=xGEg2AV}BNp?=r
xlSNwE9a($6S^2C$WsE(dGVEM<x>-ox_X{Z~$ar&+zLEd{002ovPDHLkV1iil4-)_Y

literal 0
HcmV?d00001

diff --git a/static/images/icon/ring-1.png b/static/images/icon/ring-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..27cc2a37bbccc788b27652582cb93485af925314
GIT binary patch
literal 242
zcmV<O01f|%P)<h;3K|Lk000e1NJLTq000gE000;W1^@s6%E!!C00001b5ch_0Itp)
z=>Px#tVu*cR5(w))WHqHFboCIZ%+cFv^&5CIb@@F1ek#}C^tC65Ei6D6;;z<M~Fzd
z<;k{Un?&RYVE4LbRqbPp4;T)K$PK{e{dQ2*&Vn<%0@!{88JM{bA>3<$OEAB`FmqSK
zYcS(#+BI0k-{6Q#HCte@W-DBz?SV7wg;UKfFyqr-;rKn?h*LLt;H(9$aMAP@*wk{X
s6Y}%1Y8vFG)nQ*&DWwAu?Y-;q2_f;S^(y+E`2YX_07*qoM6N<$f{V0ejQ{`u

literal 0
HcmV?d00001