universal-wechat-uniapp-241007/components/list/square/waterfallItem.vue

<template>
	<view class="waterfall-item" @click="handleClick">
		<!-- 主媒体 -->
		<view class="main-image" v-if="mainMedia">
			<!-- 图片 -->
			<image v-if="mainMedia.type === 'image'" :src="mainMedia.url" mode="aspectFill"></image>
			<!-- 视频 -->
			<view v-else-if="mainMedia.type === 'video'" class="video-container">
				<video :src="mainMedia.url" :poster="mainMedia.url" :show-center-play-btn="false" :controls="false" muted></video>
				<!-- <view class="video-overlay">
					<uv-icon name="play-circle" size="60rpx" color="rgba(255,255,255,0.8)"></uv-icon>
				</view> -->
			</view>
			<!-- 分类标签 -->
			<view class="category-tag" v-if="item.classId_dictText">
				#{{ item.classId_dictText }}
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 标题/内容 -->
			<view class="title" v-if="item.title" v-html="formatContent(item.title)"></view>
			
			<!-- 地址信息 -->
			<view class="address" v-if="item.address">
				<uv-icon name="map-pin" size="24rpx" color="#999"></uv-icon>
				<text>{{ item.address }}</text>
			</view>
			
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-avatar">
					<image :src="item.userImage" mode="aspectFill" @click.stop="previewImage([item.userImage])"></image>
				</view>
				<view class="user-details">
					<view class="username">{{ item.userName }}</view>
					<view class="user-tags">
						<text class="tag" v-if="item.sex" :style="{'background-color': sexColors[item.sex] || '#999'}">{{ item.sex }}</text>
						<text class="tag" v-if="item.yearDate">{{ item.yearDate }}</text>
						<text class="auth-tag" v-if="item.isContent">{{ item.isContent }}</text>
					</view>
				</view>
			</view>
			
			<!-- 互动数据 -->
			<view class="interaction">
				<view class="interaction-item">
					<uv-icon name="eye" size="24rpx" color="#999"></uv-icon>
					<text>{{ item.isBrowse || 0 }}</text>
				</view>
				<view class="interaction-item">
					<uv-icon name="chat" size="24rpx" color="#999"></uv-icon>
					<text>{{ item.isComment || 0 }}</text>
				</view>
				<view class="interaction-item" @click.stop="handleLike">
					<uv-icon name="thumb-up" size="24rpx" :color="isLiked ? '#ff4757' : '#999'"></uv-icon>
					<text :style="{color: isLiked ? '#ff4757' : '#999'}">{{ item.isUp || 0 }}</text>
				</view>
				
				<!-- 发布时间 -->
				<view class="publish-time">
					{{ formatTime(item.createTime) }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				isLiked: false,
				sexColors: {
					'男': '#4A90E2',
					'女': '#FF69B4',
					'其他': '#999'
				}
			}
		},
		computed: {
			// 主媒体 - 优先显示微信图片，然后是第一个文件（图片或视频）
			mainMedia() {
				if (this.item.wxImage) {
					return {
						url: this.item.wxImage,
						type: 'image'
					}
				}
				if (this.item.image) {
					const files = this.item.image.split(',').filter(file => file.trim())
					if (files.length > 0) {
						const firstFile = files[0].trim()
						return {
							url: firstFile,
							type: this.isVideoFile(firstFile) ? 'video' : 'image'
						}
					}
				}
				return null
			}
		},
		methods: {
			// 处理点击事件
			handleClick() {
				this.$emit('click', this.item)
			},
			
			// 处理点赞事件
			handleLike() {
				this.isLiked = !this.isLiked
				this.$emit('like', this.item)
			},
			
			// 预览媒体
			previewMedia(media) {
				if (media.type === 'image') {
					// 图片预览
					this.previewImage([media.url])
				} else if (media.type === 'video') {
					// 视频播放
					uni.navigateTo({
						url: `/pages/video/videoPlayer?url=${encodeURIComponent(media.url)}`
					})
				}
			},
			
			// 预览图片
			previewImage(urls, current = 0) {
				if (!urls || urls.length === 0) return
				
				uni.previewImage({
					urls: urls,
					current: current
				})
			},
			
			// 判断是否为视频文件
			isVideoFile(url) {
				const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm', '.m4v']
				const lowerUrl = url.toLowerCase()
				return videoExtensions.some(ext => lowerUrl.includes(ext))
			},
			
			// 格式化内容
			formatContent(content) {
				if (!content) return ''
				
				// 尝试使用全局utils，如果不存在则返回原内容
				if (this.$utils && this.$utils.stringFormatHtml) {
					return this.$utils.stringFormatHtml(content)
				}
				
				// 简单的HTML处理
				return content.replace(/\n/g, '<br/>')
			},
			
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return ''
				
				// 如果已经包含"发布"，直接返回
				if (timeStr.includes('发布')) {
					return timeStr
				}
				
				// 简单的时间格式处理
				const now = new Date()
				const time = new Date(timeStr)
				const diff = now - time
				const days = Math.floor(diff / (1000 * 60 * 60 * 24))
				
				if (days === 0) {
					return '今天'
				} else if (days === 1) {
					return '昨天'
				} else if (days < 7) {
					return `${days}天前`
				} else {
					// 返回月-日格式
					const month = time.getMonth() + 1
					const day = time.getDate()
					return `${month}-${day}`
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.waterfall-item {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 20rpx;
		
		.main-image {
			position: relative;
			width: 100%;
			
			image {
				width: 100%;
				height: 400rpx;
				object-fit: cover;
			}
			
			.video-container {
				position: relative;
				width: 100%;
				height: 400rpx;
				
				video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				
				.video-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(0, 0, 0, 0.3);
				}
			}
			
			.category-tag {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				background: rgba(255, 215, 0, 0.9);
				color: #333;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
			}
		}
		
		.content {
			padding: 24rpx;
			
			.title {
				font-size: 28rpx;
				line-height: 1.4;
				color: #333;
				margin-bottom: 16rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			
			.address {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				text {
					font-size: 24rpx;
					color: #666;
					margin-left: 8rpx;
				}
			}
			
			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.user-avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					overflow: hidden;
					margin-right: 16rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.user-details {
					flex: 1;
					
					.username {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 6rpx;
					}
					
					.user-tags {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						
						.tag {
							font-size: 20rpx;
							color: white;
							background-color: #999;
							padding: 4rpx 12rpx;
							border-radius: 12rpx;
							margin-right: 8rpx;
							margin-bottom: 4rpx;
						}
						
						.auth-tag {
							font-size: 20rpx;
							color: white;
							background-color: #ffd036;
							padding: 4rpx 12rpx;
							border-radius: 12rpx;
							margin-right: 8rpx;
							margin-bottom: 4rpx;
						}
					}
				}
			}
			
			.interaction {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.interaction-item {
					display: flex;
					align-items: center;
					
					text {
						font-size: 24rpx;
						color: #999;
						margin-left: 6rpx;
					}
				}
				
				.publish-time {
					font-size: 24rpx;
					color: #999;
					margin-left: auto;
				}
			}
		}
	}
</style>