talk_appAmin/pages/common/postview/index.vue

<template>
	<!-- 话题 -->
		<view class="center-content-post" @click="toPostInfoView()">
			<view class="center-content-post-padding">
				<view class="center-content-post-head">
				    <!-- 左对齐 -->
				    <view class="flex alignCenter">
						<!-- 头像 -->
				        <div class="avatar-container">
				            <u-avatar class="avatar-1" size="84rpx" :src="postValue.avatar"></u-avatar>
				            <image v-if="postValue.isOfficial" class="official-1" src="../../../static/images/icon/tu3-6.png"></image>
				        </div>
						<!-- 用户名 -->
				        <view class="center-content-post-head-title">
				            <text class="center-content-post-head-title-uname">{{postValue.uname}}</text>
				            <text class="center-content-post-head-title-timeAddress">{{postValue.createTime + '·' + postValue.address}}</text>
				        </view>
				    </view>
				    <!-- 右对齐 -->
				    <view class="flex alignCenter" v-if="postViewIndex != 0">
				        <text class="no-focus-text" v-if="postValue.isFocus" @click.stop="addFocus(index)">关注</text>
				        <text class="focus-text" v-else @click.stop="cancelFocus()">已关注</text>
				    </view>
				</view>
				<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
				<text class="center-content-post-content-0" v-if="postViewType == 0">{{postValue.content}}</text>
				<text class="center-content-post-content-1" v-if="postViewType == 1">{{postValue.content}}</text>
				<!-- 图片 -->
				<!--一张图片-->
				<block v-if="postValue.media.length == 1">
					<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="postValue.media[0]"
						@tap.stop="previewImage(postValue.media[0], postValue.media)"></image>
				</block>
				<!--二张图片-->
				<block v-if="postValue.media.length == 2">
					<view class="img-style-2">
						<image :lazy-load="true" v-for="(mediaItem, index2) in postValue.media" :key="index2"
							@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
							:src="mediaItem"></image>
					</view>
				</block>
				<!--三张图片-->
				<block v-if="postValue.media.length >= 3">
					<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
				</block>
				<!-- tab -->
				<view class="center-content-post-tab" style="display: flex;">
					<text
						class="center-content-post-tab-text"
						v-for="(tabItem, index2) in postValue.tab" :key="index2"
						:text="'#' + tabItem">{{'#' + tabItem}}</text>
				</view>
				<view class="post-list-bottom" v-if="postViewType == 0" style="display: flex; justify-content: space-between;">
				    <!-- 靠左对齐 -->
					<view class="">
						<view class="p-item">

						    <!-- <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image> -->

						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu2-9.png" mode=""></image>

						    <text class="count">{{ postValue.transmitCount }}</text>
						</view>
					</view>
				    <!-- 靠右对齐 -->
					<view class="flex alignCenter">
						<view v-if="postValue.isLike" class="p-item" @click.stop="cancelCollection()">
						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-8.png" mode=""></image>
						    <text class="count-like">{{ postValue.likeCount }}</text>
						</view>
										
						<!-- 靠右对齐 -->
						<view v-if="!postValue.isLike" class="p-item" @click.stop="addCollection()">
						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-7.png" mode=""></image>
						    <text class="count">{{ postValue.likeCount }}</text>
						</view>
										
						<!-- 靠右对齐 -->
						<view class="p-item margin50">
						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-3.png" mode=""></image>
						    <text class="count">{{ postValue.commentCount }}</text>
						</view>
										
						<!-- 靠右对齐 -->
						<view class="p-item margin50" v-if="postValue.ifFavorite" @click.stop="cancelFavorite()">
						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-2.png" mode=""></image>
						    <text class="count-favorite">{{ postValue.favoriteCount }}</text>
						</view>
										
						<!-- 靠右对齐 -->
						<view class="p-item margin50" v-if="!postValue.ifFavorite" @click.stop="addFavorite()">
						    <image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-1.png" mode=""></image>
						    <text class="count">{{ postValue.favoriteCount }}</text>
						</view>
					</view>
				</view>				
			</view>
		</view>
</template>

<script setup>
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
	const props = defineProps({
	    postValue: Object,
		postViewIndex: Number,
		postViewType: Number
	});
	// 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 { proxy } = getCurrentInstance();
	const toPostInfoView = () => {
		if(props.postViewType == 1) {
			return;
		}
		proxy.$tab.navigateTo('/pages/post/postInfo/postInfo')
	}
	
	const previewImage = (url, urls) => {
		uni.previewImage({
			current: url, // 当前显示图片的http链接
			urls: urls // 需要预览的图片http链接列表
		});
	};
	
	const cancelCollection = () => {
		props.postValue.likeCount -= 1;
		props.postValue.isLike = !props.postValue.isLike;
	};
	
	const addCollection = () => {
		props.postValue.likeCount += 1;
		props.postValue.isLike = !props.postValue.isLike;
	};
	
	const cancelFavorite = () => {
		props.postValue.favoriteCount -= 1;
		props.postValue.ifFavorite = !props.postValue.ifFavorite;
	};
	
	const addFavorite = () => {
		props.postValue.favoriteCount += 1;
		props.postValue.ifFavorite = !props.postValue.ifFavorite;
	};
	
	const cancelFocus = () => {
		props.postValue.isFocus = !props.postValue.isFocus;
	};
	
	const addFocus = () => {
		props.postValue.isFocus = !props.postValue.isFocus;
	};
</script>

<style lang="scss">

		.center-content-post {
		}
		.center-content-post-padding {
			padding: 46rpx 32rpx 28rpx 32rpx;
		}
		.center-content-post-head {
		    display: flex;
		    justify-content: space-between;
		}
		
		.center-content-post-head-title {
		    display: flex;
		    flex-direction: column;
			margin-left: 20rpx;
		}
		
		.center-content-post-head-title-uname {
		    font-weight: 400;
		    font-size: 30rpx;
		    text-align: left;
		    color: #000000;
		    align-self: flex-start; /* 垂直起始对齐 */
			margin-bottom: 20rpx;
			height: 32rpx;
			line-height: 32rpx;
		}
		
		.center-content-post-head-title-timeAddress {
		    font-weight: 400;
		    font-size: 30rpx;
		    text-align: left;
		    color: #999999;
		    align-self: flex-end; /* 垂直结束对齐 */
			height: 30rpx;
			line-height: 30rpx;
		}
		.no-focus-text {
			font-weight: 400;
			width: 58rpx;
			// height: 30rpx;
			font-size: 28rpx;
			text-align: left;
			color: #3477FC;
		}
		.focus-text {
			font-weight: 400;
			/* width: 58rpx; */
			// height: 30rpx;
			font-size: 28rpx;
			text-align: left;
			color: #2553b4;
		}
		.center-content-post-title{
			display: block;
			font-weight: 600;
			/* width: 670rpx; */
			// height: 80rpx;
			font-size: 32rpx;
			text-align: left;
			color: #000000;
			margin-top: 30rpx;
			display: -webkit-box; /* 将文本视为弹性盒子 */
			    -webkit-line-clamp: 2; /* 设置最大行数 */
			    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
			    overflow: hidden; /* 隐藏超出部分 */
		}
		.center-content-post-content-0{
			display: block;
			font-weight: 400;
			/* width: 670rpx; */
			// height: 80rpx;
			font-size: 30rpx;
			text-align: left;
			color: #333333;
			margin-top: 18rpx;
			margin-bottom: 28rpx;
			display: -webkit-box; /* 将文本视为弹性盒子 */
			    -webkit-line-clamp: 2; /* 设置最大行数 */
			    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
			    overflow: hidden; /* 隐藏超出部分 */
		}
		.center-content-post-content-1{
			display: block;
			font-weight: 400;
			/* width: 670rpx; */
			// height: 80rpx;
			font-size: 30rpx;
			text-align: left;
			color: #333333;
			margin-top: 18rpx;
			margin-bottom: 28rpx;
			
		}
		
		.u-album__row[data-v-723ad357] {
		    justify-content: center !important;
		}
		.u-album__row.data-v-723ad357 {
			justify-content: center !important;
			/* height: 200rpx !important; */
		}
		.u-album__row__wrapper {}
		
		.data-v-6fcabaad {
			border-radius: 20rpx 20rpx 20rpx 20rpx !important;
	/* 		width: 200rpx !important;
			height: 200rpx !important; */
		}
		
		.center-content-post-tab{
			margin-top: 20rpx;
			// margin-bottom: 20rpx;
		}
		
	
		.post-list-bottom {
			margin-top: 20rpx;
		  display: flex;
		  justify-content: center; /* 水平居中 */
		}
		
		.p-item {
		    display: flex;
		    align-items: center; /* 垂直居中 */
		    justify-content: center; /* 水平居中 */
	
		}
		.center-content-post-tab-text{
			font-weight: 400;
			/* width: 139rpx; */
			// height: 26rpx;
			font-size: 24rpx;
			text-align: left;
			color: #3477FC;
			/* width: 130rpx; */
			// height: 44rpx;
			// line-height: 44rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			background: #f7f8fa;
			padding: 8rpx;
			/* margin-left: 50rpx; */
		}
		.center-content-post-tab-text:nth-child(2) {
		    /* 您的样式 */
			margin-left: 24rpx; /* 添加额外的左边距 */
		}
		
		.margin50 {
		  margin-left: 50rpx; /* 添加额外的左边距 */
		}
		.count{
			font-weight: 400;
			width: 48rpx;
			/* height: 23rpx; */
			font-size: 28rpx;
			text-align: left;
			color: #787878;
			margin-left: 10rpx;
		}
		
		.count-like{
			font-weight: 400;
			width: 48rpx;
			/* height: 23rpx; */
			font-size: 28rpx;
			text-align: left;
			color: #FA3939;
			margin-left: 10rpx;
		}
		
		.count-favorite{
			font-weight: 400;
			width: 48rpx;
			/* height: 23rpx; */
			font-size: 28rpx;
			text-align: left;
			color: #FFC729;
			margin-left: 10rpx;
		}
		
		.avatar-container {
		    position: relative;
		}
		
		.avatar-1 {
		    position: relative;
		}
		
		.official-1 {
		    position: absolute;
		    width: 32rpx;
		    height: 32rpx;
		    bottom: 0;
		    right: 0;
		}
		.img-style-1 {
			display: block;
			width: 100%;
			height: 600rpx;
			border-radius: 6px;
			overflow: hidden;
		
		width: 686rpx;
		height: 370rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		background: #b3d7ff;
		}
		
		.img-style-2 {
			display: flex;
		
			image {
				margin: 6rpx;
		
				width: 100%;
				height: 306rpx;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
			}
		}

	
		

</style>