You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
358 lines
7.9 KiB
358 lines
7.9 KiB
<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>
|