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">全部评论</text>
				<text class="report">举报</text>
			</view>
			<view 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>
		
	</view>
	<up-tabbar
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
	>
		<!-- <view class="flex justifyCenter"> -->
		<view class="flex alignCenter justifyCenter">
			<view class="flex justifyCenter alignCenter commentInput">
				<image class="commentInput-img" src="../../../static/logo.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 alignCenter justifyCenter flexColumn">
				<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">
				<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, onMounted, getCurrentInstance } from 'vue';
	import PostView from "@/pages/common/postview/index.vue";
	
	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://tu.sioe.cn/gj/qiege/image.jpg',
				'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
				'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
				'https://tu.sioe.cn/gj/qiege/image.jpg',
			],
			tab: ['学术讨论组', '校园风景'],
			transmitCount: 136,
			isLike: true,
			likeCount: 999,
			commentCount: 136,
			ifFavorite: true,
			favoriteCount: 136
		}
	);
	
	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;
	};
</script>

<style>
	.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: 40rpx;
		height: 40rpx;
	}
	
	.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;
	}
</style>