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.
297 lines
6.4 KiB
297 lines
6.4 KiB
<template>
|
|
<view class="waterfall-item" @click="handleClick">
|
|
<!-- 主图片 -->
|
|
<view class="main-image" v-if="mainImage">
|
|
<image :src="mainImage" mode="aspectFill" @click.stop="previewImage([mainImage])"></image>
|
|
<!-- 分类标签 -->
|
|
<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: {
|
|
// 主图片 - 优先显示微信图片，然后是第一张图片
|
|
mainImage() {
|
|
if (this.item.wxImage) {
|
|
return this.item.wxImage
|
|
}
|
|
if (this.item.image) {
|
|
const images = this.item.image.split(',').filter(img => img.trim())
|
|
return images.length > 0 ? images[0] : null
|
|
}
|
|
return null
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理点击事件
|
|
handleClick() {
|
|
this.$emit('click', this.item)
|
|
},
|
|
|
|
// 处理点赞事件
|
|
handleLike() {
|
|
this.isLiked = !this.isLiked
|
|
this.$emit('like', this.item)
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(urls, current = 0) {
|
|
if (!urls || urls.length === 0) return
|
|
|
|
uni.previewImage({
|
|
urls: urls,
|
|
current: current
|
|
})
|
|
},
|
|
|
|
// 格式化内容
|
|
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;
|
|
}
|
|
|
|
.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>
|