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="getAvatar(postValue.avatar)"></u-avatar>
				            <image v-if="postValue.isOfficial" class="official-1" src="../../../static/images/icon/tu3-6.png" :lazy-load="true"></image>
				        </div>
						<!-- 用户名 -->
				        <view class="center-content-post-head-title">
				            <text class="center-content-post-head-title-uname">{{postValue.nickName}}</text>
				            <text class="center-content-post-head-title-timeAddress">{{timeAgo(postValue.createTime)}}{{postValue.address ? '·'  + postValue.address : ""}}</text>
				        </view>
				    </view>
				    <!-- 右对齐 -->
				    <view class="flex alignCenter" v-if="postViewIndex != 0">
						<text class="focus-text" v-if="postValue.focus" @click.stop="cancelFocus(postValue.uid)">已关注</text>
				        <text class="no-focus-text" v-else  @click.stop="addFocus(postValue.uid)">关注</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="postValue.content && postViewType == 0">{{postValue.content}}</text>
				<text class="center-content-post-content-1" v-if="postValue.content && postViewType == 1">{{postValue.content}}</text>
				<!-- 图片 -->
				<!--一张图片-->
				<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 1">
					<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="toimage(postValue.media)"
						@tap.stop="previewImage(toimage(postValue.media), toimage(postValue.media))"></image>
				</block>
				<!--二张图片-->
				<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 2">
					<view class="img-style-2">
						<image :lazy-load="true" v-for="(mediaItem, index2) in toimage(postValue.media)" :key="index2"
							@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
							:src="mediaItem"></image>
					</view>
				</block>
				<!-- 三张图片 -->
				<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 3">
					<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
					<view class="flex justifyBetween">
						<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)" :key="index3">
								<image :lazy-load="true"
									@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
									:src="mediaItem"></image>
						</view>
					</view>
				</block>
				<!--大于三张图片-列表-->
				<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 0">
					<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
					<view class="flex justifyBetween">
						<view class="img-style-3-2" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)" :key="index3">
								<image :lazy-load="true"
									@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
									:src="mediaItem"></image>
								<view v-if="index3 == 2" class="img-cover-style" @tap.stop="previewImage(mediaItem, toimage(postValue.media))">
									<text>+{{ toimage(postValue.media).length - 3 }}</text>
								</view>
						</view>
					</view>
				</block>
				<!--大于三张图片-详情-->
				<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 1">
					<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
					<view class="flex justifyBetween wrap">
						<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media)" :key="index3">
								<image :lazy-load="true"
									@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
									:src="mediaItem"></image>
						</view>
					</view>
				</block>
				<!-- tab -->
				<view v-if="postValue.tab" class="center-content-post-tab" style="display: flex;">
					<text
						class="center-content-post-tab-text"
						v-for="(tabItem, index2) in strToList(postValue.tab)" :key="index2"
						:text="'#' + tabItem">{{'#' + dictTab(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=""  :lazy-load="true"></image>

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

<script setup>
	import { ref, reactive, onMounted, getCurrentInstance, defineEmits } from 'vue';
	import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
	import { useStore } from 'vuex';
	import { getDicts } from "@/api/system/dict/data";
	import { listFollowUser, getFollowUser, delFollowUserByFollowUser, addFollowUser, updateFollowUser } from "@/api/followUser/followUser";
	import { delLikeByPostLike, addLike } from "@/api/like/like";
	import { delPostFavoriteByPostFavorite, addPostFavorite } from "@/api/postFavorite/postFavorite";

	const dictPostTab = ref([])
	onLoad((options) => {
	  getDicts('post_tab').then(e => {
	    dictPostTab.value = e.data
		})
	});

	const { proxy } = getCurrentInstance();
	const store = useStore();
	const QNDomain = store.state.user.QNDomain;
	const props = defineProps({
	    postValue: Object,
		postViewIndex: Number,
		postViewType: Number
	});
	
	const postListStorage = ref(uni.getStorageSync('postList'));
	
	const upPostListStorage = () => {
	    console.log('更新前', postListStorage.value);
	
	    postListStorage.value.forEach(item => {
	        if (item.id === props.postValue.id) {
	            console.log('当前post', props.postValue);
	            Object.assign(item, props.postValue);
	        }
	    });
	
	    console.log('更新后', postListStorage.value);
	    uni.setStorageSync('postList', postListStorage.value);
	}

	const upPostListStorageInFocus = () => {
			postListStorage.value = postListStorage.value.map(item => {
				if (item.uid == props.postValue.uid) {
				  item.focus = props.postValue.focus;
				}
			  return item;
			});
			uni.setStorageSync('postList', postListStorage.value);
		}

	const dictTab = (tab) => {
	// console.log('dictPostTab',dictPostTab)
	  const dict = dictPostTab.value.find((dict) => dict.dictValue === tab);
	  return dict ? dict.dictLabel : '未知状态';
	}
	function strToList(strList) {
	    let list = strList.split(",");
	    return list;
	}
	function formatDate(input) {
	    const date = new Date(input);
	    if (isNaN(date)) {
	        throw new Error('Invalid date');
	    }
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0');
	    const day = String(date.getDate()).padStart(2, '0');
	    return `${year}.${month}.${day}`;
	}
	
	function timeAgo(input) {
	    const date = new Date(input);
		console.log('日期', date)
	    if (isNaN(date)) {
	        throw new Error('Invalid date');
	    }
	    const now = new Date();
	    const diff = now - date;
	    
	    const minutes = Math.floor(diff / 60000); // 1 minute = 60000 ms
	    const hours = Math.floor(diff / 3600000); // 1 hour = 3600000 ms
	    const days = Math.floor(diff / 86400000); // 1 day = 86400000 ms
	
	    if (minutes < 60) {
	        return `${minutes}分钟前`;
	    } else if (hours < 24) {
	        return `${hours}小时前`;
	    } else if (days < 3) {
	        return `${days}天前`;
	    } else {
	        return formatDate(date);
	    }
	}
	
	function getAvatar(avatar) {
	    return QNDomain + avatar;
	}
	const toimage = (url) => {
	    if (typeof url === 'string') {
	        let info = url.split(",");
	        let processedInfo = info.map(item => QNDomain + item);
	        // console.log("processedInfo", processedInfo);
	        return processedInfo;
	    }
	    return null;
	};
	

	const toPostInfoView = () => {
		if(props.postViewType == 1) {
			return;
		}
		uni.setStorageSync('postInfo',props.postValue)
		proxy.$tab.navigateTo('/pages/post/postInfo/postInfo')
	}
	
	const previewImage = (url, urls) => {
		uni.previewImage({
			current: url, // 当前显示图片的http链接
			urls: urls // 需要预览的图片http链接列表
		});
	};
	
	// 点赞操作
	const cancelCollection = (postId) => {
		const postLike = reactive({
			likeId: postId,
		})
		delLikeByPostLike(postLike).then(res => {
			props.postValue.likeCount -= 1;
			props.postValue.like = !props.postValue.like;
			upPostListStorage();
		})
	};
	
	const addCollection = (postId) => {
		const postLike = reactive({
			likeId: postId,
		})
		addLike(postLike).then(res => {
			props.postValue.likeCount += 1;
			props.postValue.like = !props.postValue.like;
			upPostListStorage();
		})
	};
	
	// 收藏操作
	const cancelFavorite = (postId) => {
		const postFavorite = reactive({
			favoriteId: postId,
		})
		delPostFavoriteByPostFavorite(postFavorite).then(res => {
			props.postValue.favoriteCount -= 1;
			props.postValue.favorite = !props.postValue.favorite;
			upPostListStorage();
		})
	};
	
	const addFavorite = (postId) => {
		const postFavorite = reactive({
			favoriteId: postId,
		})
		addPostFavorite(postFavorite).then(res => {
			props.postValue.favoriteCount += 1;
			props.postValue.favorite = !props.postValue.favorite;
			upPostListStorage();
		})

	};
	
	// 关注操作
	
	const emit = defineEmits(["updateFocusFather"])
	
	const cancelFocus = (uid) => {
		const followUser = reactive({
			followId: uid,
		})
		delFollowUserByFollowUser(followUser).then(res => {
			props.postValue.focus = !props.postValue.focus;
			upPostListStorageInFocus();
			console.log('关注操作后',uni.getStorageSync('postList'))
			// let param={
			// 	followId: uid,
			// 	focus: props.postValue.focus
			//   }
			  //传递给父组件
			  emit('updateFocusFather')
		});
	};
	
	const addFocus = (uid) => {
		const followUser = reactive({
			followId: uid,
		})
		addFollowUser(followUser).then(res => {
			props.postValue.focus = !props.postValue.focus;
			upPostListStorageInFocus();
			console.log('关注操作后',uni.getStorageSync('postList'))
			// let param={
			// 	followId: uid,
			// 	focus: props.postValue.focus
			//   }
			  //传递给父组件
			  emit('updateFocusFather')
		});
	};
</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: 600;
			width: 58rpx;
			// height: 30rpx;
			font-size: 28rpx;
			text-align: left;
			color: #3477FC;
		}
		.focus-text {
			font-weight: 600;
			/* 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;
			margin-bottom: 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 !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: 600;
			/* 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: 20rpx;
		background: #b3d7ff;
		}
		
		.img-style-2 {
			display: flex;
		
			image {
				margin: 6rpx;
		
				width: 100%;
				height: 306rpx;
				border-radius: 20rpx;
			}
		}
		
		.img-style-3-1{
			
			image {
				// margin: 6rpx;
				width: 222rpx;
				height: 222rpx;
				border-radius: 20rpx;
			}
		}
		
		.img-style-3-2{
			display: flex;
			justify-content: space-between;
			position: relative;
			image {
				// margin: 6rpx;
				width: 222rpx;
				height: 222rpx;
				border-radius: 20rpx;
			}
		}
		
		.img-cover-style{
			    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	border-radius: 20rpx;
	text{
		color: #fff;
	}
		}

	
		

</style>