talk_appAmin/pages/post/postInfo/postInfo.vue

<template>
	<view>
		<PostView :postValue="postValue" :postViewIndex="1" :postViewType="1"></PostView>
		<view class="center-content-focus-line"></view>
		<view class="comment">
			<view class="flex justifyBetween alignCenter commentTop">
				<text class="commentLabel">全部评论（4）</text>
				<text class="report">举报</text>
			</view>
			<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">
					<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>
							<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>
							<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>
					<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>
	</view>
	<!-- 评论区输入框 -->
	<up-popup :show="showInput" duration="0" @close="close" @open="open" class="comment-po">
		<view class="flex justifyBetween comment-input" :style="{ marginBottom: bottomVal + 26 + '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"
		:safeAreaInsetBottom="true"
	>
		<!-- <view class="flex justifyCenter"> -->
		<view class="flex alignCenter justifyCenter">
			<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
				<image class="commentInput-img-1" src="../../../static/images/icon/write-1.png" mode=""></image>
				<text class="commentInput-text">友好评论~</text>
			</view>
		</view>
			
			<view v-if="postValue.isLike" @click.stop="cancelCollection()" class="flex alignCenter justifyCenter flexColumn">
				<image class="commentInput-img" src="../../../static/images/icon/tu3-8.png" mode=""></image>
				<text class="commentInput-txt-like">{{postValue.likeCount}}</text>
			</view>
			<view v-if="!postValue.isLike" @click.stop="addCollection()" class="flex alignCenter justifyCenter flexColumn">
				<image class="commentInput-img" src="../../../static/images/icon/tu3-7.png" mode=""></image>
				<text class="commentInput-txt">{{postValue.likeCount}}</text>
			</view>
			
			<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 flexColumn alignCenter justifyCenter ">
				<image class="commentInput-img" src="../../../static/images/icon/tu3-1.png" mode=""></image>
				<text class="commentInput-txt">{{postValue.favoriteCount}}</text>
			</view>
			
			<view class="flex alignCenter justifyCenter flexColumn">
				<image class="commentInput-img" src="../../../static/images/icon/tu2-9.png" mode=""></image>
				<text class="commentInput-txt">转发</text>
			</view>
		<!-- </view> -->
	</up-tabbar>
</template>

<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);
	
	// 监听键盘高度变化
	onLoad(() => {
	  // if (!data.value) {
	    uni.onKeyboardHeightChange(res => {
	    	if(res.height == 0) {
	    		bottomVal.value = 0;
	    		return;
	    	}
	      bottomVal.value = res.height - 20;
	      console.log(bottomVal.value)
	    });
	  // }
	})
	
	onBeforeUnmount(async () => {
      uni.offKeyboardHeightChange();
    });
	
	
	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,
		answerCommentAllCount: 4,
		answerCommentPage: 0,
		answerCommentDisplayCount: 0,
		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://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: '喜欢你没道理',
		},
		]
	},
	{
		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',
			uname: '爱吃饭的小张',
			createTime: '11分钟前',
			address: '南开大学',
			isFocus: false,
			isOfficial: true,
			title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
			content: '八年前，学弟在工地上杀了一个工友，上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，和地点，并......',
			type: '1',
			media: [
				'https://img1.baidu.com/it/u=1179199327,1946315836&fm=253&fmt=auto&app=138&f=JPEG?w=1364&h=800',
				'https://www4.bing.com//th?id=OHR.CopenhagenBicycles_ZH-CN3047958346_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
				'https://www4.bing.com//th?id=OHR.CarnavalTenerife_ZH-CN1559136778_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
				'https://www4.bing.com//th?id=OHR.StJamesPool_ZH-CN5930624359_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
			],
			tab: ['学术讨论组', '校园风景'],
			transmitCount: 136,
			isLike: true,
			likeCount: 999,
			commentCount: 136,
			ifFavorite: true,
			favoriteCount: 136
		}
	);
	
	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;
	};
	
	const addCollection = () => {
		postValue.likeCount += 1;
		postValue.isLike = !postValue.isLike;
	};
	
	const cancelFavorite = () => {
		postValue.favoriteCount -= 1;
		postValue.ifFavorite = !postValue.ifFavorite;
	};
	
	const addFavorite = () => {
		postValue.favoriteCount += 1;
		postValue.ifFavorite = !postValue.ifFavorite;
	};
	
	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">
page{
    background-color: #ffffff;

}
	.data-v-6fcabaad {
			border-radius: 20rpx 20rpx 20rpx 20rpx !important;
	/* 		width: 200rpx !important;
			height: 200rpx !important; */
	}
	
	.center-content-focus-line{
		height: 8rpx;
		background: #f4f5f6;
	}
	
	.comment{
		padding: 32rpx;
	}
	
	.commentLabel{
		font-weight: 400;
		/* width: 265rpx; */
		/* height: 38rpx; */
		font-size: 36rpx;
		/* text-align: left; */
		color: #000000;
		
	}
	
	.report{
		font-weight: 400;
		/* width: 52rpx; */
		/* height: 26rpx; */
		font-size: 26rpx;
		/* text-align: left; */
		color: #999999;
	}
	
	.no-comment {
	    display: flex;
	    flex-direction: column;
	    align-items: center; /* 水平居中 */
	    justify-content: center; /* 垂直居中 */
	}
	
	.no-comment-img{
		margin-top: 44rpx;
		width: 200rpx;
		height: 145rpx;
	}
	
	.no-comment-text{
		margin-top: 8rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}
	
	.no-comment-bt{
		margin-top: 36rpx;
		width: 308rpx;
		height: 82rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border-width: 2rpx;
		border-color: #C9F6F5;
		background: #ffffff;	
		display: flex;
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
	}
	
	.no-comment-bt-text{
		font-weight: 400;
		font-size: 32rpx;
		color: #CBF6F5;
	}
	
	.commentInput{
		width: 364rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #f7f8fa;
	}
	
	.commentInput-img{
		width: 36rpx;
		height: 36rpx;
		// margin-right: 12rpx;
	}
	.commentInput-img-1{
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}
	
	.commentInput-text{
		font-weight: 400;
		font-size: 30rpx;
		color: #999999;
	}
	
	.commentInput-txt{
		font-weight: 400;
		font-size: 28rpx;
		color: #787878;
	}
	
	.commentInput-txt-like{
		font-weight: 400;
		font-size: 28rpx;
		color: #FA3939;
	}
	
	.commentInput-txt-favorite{
		font-weight: 400;
		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{
		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;
	}
	
	.input-bt-text{
		font-weight: 400;
		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>