<template>
|
<view class="post-card">
|
<!-- 用户信息 -->
|
<view class="user-info">
|
<up-avatar :src="avatar" size="80rpx" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ nickname }}</text>
|
<text class="time">{{ time }}</text>
|
</view>
|
</view>
|
|
<view class="inner-content">
|
<!-- 内容图片 -->
|
<image class="main-image" :src="image" mode="aspectFill" />
|
<!-- <image class="main-image" :src="image" mode="aspectFit" /> -->
|
<!-- <image class="main-image" :src="image" mode="scaleToFill" /> -->
|
<!-- <view class="main-image-wrapper" :style="{ backgroundImage: `url(${image})` }"></view> -->
|
<!-- 下面图片可以展示完全，但是拉伸变得模糊 -->
|
<!-- <image :src="image" class="main-image" ></image> -->
|
<!-- <up-image :show-loading="true" :src="image" width="100%" shape="square"></up-image> -->
|
<!-- 动态计算高度：能够展示完全，高度会拉伸很高 -->
|
<!-- <up-image v-if="imageHeight > 0" :src="image" width="100%" :height="imageHeight + 'px'" shape="square"
|
:show-loading="true" /> -->
|
<!-- 描述内容 -->
|
<view class="description">
|
{{ content }}
|
</view>
|
|
<!-- 底部操作栏 -->
|
<view class="footer">
|
<view class="action">
|
<up-icon name="heart-fill" size="30rpx" color="#fff" />
|
<text class="count">{{ likeCount }}</text>
|
</view>
|
<view class="action">
|
<up-icon name="chat-fill" size="30rpx" color="#fff" />
|
<text class="count">{{ commentCount }}</text>
|
</view>
|
<view class="action">
|
<up-icon name="share" size="30rpx" color="#fff" />
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch,onMounted } from 'vue'
|
import { onReady } from '@dcloudio/uni-app'
|
|
interface Props {
|
avatar?: string;
|
nickname?: string;
|
time?: string;
|
image?: string;
|
content?: string;
|
likeCount?: number | string;
|
commentCount?: number | string;
|
}
|
|
const props = defineProps<Props>();
|
const imageHeight = ref(0)
|
|
const computeImageHeight = (src?: string) => {
|
if (!src) return
|
uni.getImageInfo({
|
src,
|
success: (res) => {
|
const screenWidth = uni.getSystemSetting().windowWidth
|
imageHeight.value = screenWidth * (res.height / res.width)
|
},
|
fail: () => {
|
console.warn('获取图片信息失败')
|
}
|
})
|
}
|
|
watch(
|
() => props.image,
|
(newImage) => {
|
if (!newImage) return
|
computeImageHeight(newImage)
|
},
|
{ immediate: true }
|
)
|
|
onReady(() => {
|
computeImageHeight(props.image)
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.post-card {
|
background-color: #1e1e1e;
|
border-radius: 24rpx;
|
padding: 10rpx;
|
color: #fff;
|
font-size: 28rpx;
|
margin-top: 20rpx;
|
}
|
|
.user-info {
|
margin: 20rpx 30rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.user-text {
|
font-size: 24rpx;
|
margin-left: 16rpx;
|
}
|
|
.nickname {
|
font-weight: bold;
|
display: block;
|
}
|
|
.time {
|
font-size: 18rpx;
|
color: #aaa;
|
}
|
|
.inner-content {
|
margin: 0 20rpx;
|
}
|
|
.main-image {
|
width: 100%;
|
height: 250rpx;
|
border-radius: 24rpx;
|
}
|
|
.description {
|
margin: 20rpx 0;
|
font-size: 24rpx;
|
font-weight: bold;
|
color: #ddd;
|
letter-spacing: 2rpx;
|
}
|
|
.footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.action {
|
display: flex;
|
align-items: center;
|
}
|
|
.count {
|
margin-left: 10rpx;
|
font-size: 26rpx;
|
color: #ccc;
|
}
|
|
.main-image-wrapper {
|
width: 100%;
|
width: 500px;
|
height: 200px;
|
/* 你可以根据需求自适应设置 */
|
background-size: contain;
|
/* 保证完整显示 */
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
</style>
|
