From 500078714411487af00161e01bd7e0b5efdc3414 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期四, 07 八月 2025 13:32:32 +0800
Subject: [PATCH] add：热门景点
---
pages/home/community.vue | 282 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 170 insertions(+), 112 deletions(-)
diff --git a/pages/home/community.vue b/pages/home/community.vue
index ba2bb99..968fbc3 100644
--- a/pages/home/community.vue
+++ b/pages/home/community.vue
@@ -1,119 +1,177 @@
<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" @click="handleClick">
+ <!-- 用户信息 -->
+ <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;
+ </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;
+ detailUrl?: string; // 新增跳转链接
+}
+
+const props = defineProps<Props>();
+const imageHeight = ref(0)
+
+const handleClick = () => {
+ if (props.detailUrl) {
+ uni.navigateTo({
+ url: props.detailUrl
+ });
}
-
- 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>
-
\ No newline at end of file
+}; // 注意这里需要分号
+
+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>
\ No newline at end of file
--
Gitblit v1.9.3