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" v-if="postViewIndex != 3">
				<!-- 左对齐 -->
				<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 && loginUser.userId != postValue.uid">
					<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 class="" v-if="postViewIndex == 2 && loginUser.userId == postValue.uid">
					<text class="pass-text" v-if="postValue.status == 0" >已发布</text>
					<text class="audit-text" v-if="postValue.status == 2" >审核中</text>
					<text class="refuse-text" v-if="postValue.status == 3" >未通过</text>
				</view>
				<!-- 删除操作 -->
				<view class="">
					<image v-if="postViewIndex == 4" class="delImg" @click="toDel"
						src="../../../static/images/icon/sang-1.png" :lazy-load="true"></image>
				</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 && postViewIndex == 3 || postViewIndex == 0 || postViewIndex == 1 || postViewIndex == 2">{{postValue.content}}</text>
			<text class="center-content-post-content-1"
				v-else>{{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>
	<up-modal :show="modalShow" title="是否删除该话题" showCancelButton="true" closeOnClickOverlay="true" @confirm='modalConfirm' @cancel="modalCancel" @close="modalClose"></up-modal>
	<up-toast ref="uToastRef"></up-toast>
</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 {
		listPost,
		listPostFollow,
		getPost,
		delPost,
		addPost,
		updatePost,
		getLoginUserinfo
	} from "@/api/talk/post";
	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 emit = defineEmits(["updateFocusFather"])
	const modalShow = ref(false)
	const loginUser = reactive(uni.getStorageSync('loginUserPost'));
	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 = () => {
		postListStorage.value.forEach(item => {
			if (item.id === props.postValue.id) {
				Object.assign(item, props.postValue);
			}
		});
		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);
		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 uToastRef = ref(null)
	const uToastRefParams = reactive({
		type: 'default',
		title: '结束后跳转标签页',
		message: "删除成功",
		// url: '/pages/componentsB/tag/tag',
		// iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
	})
	function showToast(params) {  
	  uToastRef.value.show({  
	    ...params,  
	    complete() {  
	      params.url && uni.navigateTo({  
	        url: params.url  
	      });  
	    }  
	  });  
	}  
	
	const modalConfirm = () => {
		delPost(props.postValue.id).then(res => {
			showToast(uToastRefParams);
			setTimeout(function() {
			  uni.$emit('refreshData');
			  uni.navigateBack({
			      delta: 1
			  });
			}, 1000);
		});
		modalShow.value = false;
	}
	
	const modalCancel = () => {
		modalShow.value = false;
	}
	
	const modalClose = () => {
		modalShow.value = false;
	}
	
	const toDel = () => {
		modalShow.value = true;
	}

	// 点赞操作
	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 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;
		display: block;
		width: 480rpx;
		// display: flex; /* 设置为弹性盒子 */
		// max-width: 450rpx; /* 最大宽度为 300rpx */
		overflow: hidden; /* 超出部分隐藏 */
		text-overflow: ellipsis; /* 超出部分用省略号表示 */
		white-space: nowrap; /* 不换行 */
	}

	.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;
		}
	}
	
	.pass-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #3477FC;
	}
	
	.audit-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #43CE8F;
	}
	
	.refuse-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #F87863;
	}
	
	.delImg {
		width: 32rpx;
		height: 42rpx;
	}
</style>