YwxAppThink/addon/wxchat/YwxMakeFriends/components/DynamicItem.uvue

<template>
	<view class="card-panel">
		<view class="card-panel-header">
			<image :src="itemData?.avatar ?? '/static/logo.png'" class="dynamic-card-avatar" alt="用户头像" />
			<view class="dynamic-card-user-info">
				<text class="dynamic-card-username">{{ itemData.nickname }}</text>
				<text class="dynamic-post-time">{{ formatTime(itemData.createTime) }}</text>
			</view>
		</view>
		<view class="card-panel-body">
			<text :class="['dynamic-text-content', { collapsed:  itemData.expanded==true }]">
				{{ itemData.content }}
			</text>
			<text v-if="itemData.content.length > 100" class="expand-btn" @click="toggleExpand(itemData)">
				{{ itemData.expanded  ==true ? '收起' : '展开全文' }}
			</text>
			<!-- 媒体内容 -->
			<view v-if="itemData.media !=null && itemData.media.length>0" class="media-container">
				<view v-for="(media, index) in itemData.media" :key="index" class="media-item">
					<image :src="media.url" class="media-item-image" />
					<view v-if="media.type === 'video'" class="video-indicator">
						<uni-icons type="videocam" size="32"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 位置标签 -->
			<view v-if="itemData.location !=null" class="location-tag">
				<uni-icons type="location" size="18"></uni-icons> <text
					class="location-tag-text">{{ itemData.location }}</text>
			</view>
		</view>
		<view class="card-panel-footer" style="justify-content: space-between;">
			<view class="action-btn like-btn" :class="{ active: itemData.likede  }" @click="toggleLike(itemData)">
				<uni-icons :type="itemData.likede ? 'heart-filled' : 'heart'" size="22"
					:color="itemData.likede ? '#f74c31' : ''"></uni-icons>
				<text class="action-text">{{ itemData.like }}</text>
			</view>
			<view class="action-btn comment-btn">
				<uni-icons type="chatbubble" size="22"></uni-icons>
				<text class="action-text">{{ itemData.comment }}</text>
			</view>
			<view class="action-btn share-btn">
				<uni-icons type="redo" size="22"></uni-icons>
				<text class="action-text">{{ itemData.share }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { type IMoment } from '@/types/moment.uts'

	const props = defineProps<{
		moment : IMoment
	}>()

	const itemData = computed(() : IMoment => {
		return props.moment
	})

	onPageShow(() => {
		console.log('page-props-composition onPageShow')
		console.log(itemData)
	})
	// 切换展开/收起
	const toggleExpand = (item : IMoment) => {
		item.expanded = item.expanded != null && !item.expanded;
	};

	// 切换点赞状态
	const toggleLike = (item : IMoment) => {
		item.likede = !item.likede;
		item.like += item.likede ? 1 : -1;
	};

	// 格式化时间
	const formatTime = (timestamp : number) => {
		const now = Date.now();
		const diff = now - timestamp;
		const minute = 60 * 1000;
		const hour = 60 * minute;
		const day = 24 * hour;

		if (diff < hour) {
			return `${Math.floor(diff / minute)}分钟前`;
		} else if (diff < day) {
			return `${Math.floor(diff / hour)}小时前`;
		} else if (diff < 2 * day) {
			return '昨天';
		} else {
			const date = new Date(timestamp);
			return `${date.getMonth() + 1}月${date.getDate()}日`;
		}
	};
</script>

<style>
	.dynamic-card-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #f0f0f0;
	}

	.dynamic-card-user-info {
		flex: 1;
	}

	.dynamic-card-username {
		font-weight: 600;
		font-size: 18px;
		color: #333;
	}

	.dynamic-post-time {
		font-size: 13px;
		color: #999;
		margin-top: 4px;
	}

	.dynamic-card-content {
		padding: 16px;
	}

	.dynamic-text-content {
		font-size: 16px;
		line-height: 1.7;
		color: #333;
		margin-bottom: 16px;
	}

	/* .text-content.collapsed {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	} */

	.expand-btn {
		color: #576b95;
		font-size: 14px;
		margin-top: 8px;
	}

	.media-container {
		display: flex;
		flex-flow: row wrap;
		overflow: hidden;
	}

	.media-item {
		margin: 5rpx;
		position: relative;
		flex-basis: 210rpx;
		height: 230rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}


	.media-item-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
	}

	.video-indicator {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.location-tag {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		align-self: flex-start;
		background: #f0f8ff;
		padding: 4px 10px;
		border-radius: 20px;
		margin-top: 8px;
	}

	.location-tag-text {
		font-size: 13px;
		color: #576b95;

	}

	.card-footer {
		padding: 15rpx 25rpx;
		border-top: 1px solid #f0f0f0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}

	.action-btn {
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		transition: color 0.2s;
	}

	.action-text {

		color: #666;
		font-size: 24rpx;
	}
</style>