add: 分享

cloudroam

7 天以前 c31a8def0ac90d86b8e8e345441bd28002a9ef2f

 pages/home/community.vue

@@ -1,119 +1,168 @@
<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 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 class="inner-content">
        <!-- 内容图片 -->
        <image class="main-image" :src="image" mode="aspectFill" />
  
        <!-- 描述内容 -->
        <view class="description">
          {{ content }}
    </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="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 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>
  </template>
  
  <script setup lang="ts">
  interface Props {
    avatar?: string;
    nickname?: string;
    time?: string;
    image?: string;
    content?: string;
    likeCount?: number | string;
    commentCount?: number | string;
  }
  
  const props = defineProps<Props>();
  </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;
  }
  </style>
  
  </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>