EpicSoul/pages/notes/detail.vue

<template>
  <view class="note-detail-container">
    <!-- 笔记内容区域 -->
    <view class="content-scroll" >
      <!-- 作者信息 -->
      <view class="author-section">
        <image
          class="author-avatar"
          :src="noteDetail.user.avatar"
          mode="aspectFill"
        />
        <view class="author-info">
          <text class="author-name">{{ noteDetail.user.name }}</text>
          <text class="publish-time">{{
            formatTime(noteDetail.createTime)
          }}</text>
        </view>
        <button
          class="follow-btn"
          :class="{ followed: noteDetail.user.isFollowed }"
          @click="toggleFollow"
        >
          {{ noteDetail.user.isFollowed ? "已关注" : "+ 关注" }}
        </button>
      </view>

      <!-- 笔记标题 -->
      <view class="note-title">
        {{ noteDetail.title }}
      </view>

      <!-- 笔记主图 -->
      <view class="note-image-container" v-if="noteDetail.image">
        <image
          class="note-image"
          :src="noteDetail.image"
          mode="aspectFill"
          @click="previewImage(noteDetail.image)"
        />
      </view>

      <!-- 笔记内容 -->
      <view class="note-content">
        <text class="content-text">{{ noteDetail.content }}</text>
      </view>

      <!-- 标签 -->
      <view
        class="tags-section"
        v-if="noteDetail.tags && noteDetail.tags.length"
      >
        <view class="tag-item" v-for="tag in noteDetail.tags" :key="tag">
          #{{ tag }}
        </view>
      </view>

      <!-- 互动数据 -->
      <view class="interaction-section">
        <view class="interaction-item" @click="toggleLike">
          <text class="interaction-icon" :class="{ liked: noteDetail.isLiked }"
            >♥</text
          >
          <text class="interaction-text">{{ noteDetail.likes }}</text>
        </view>
        <view class="interaction-item" @click="toggleCollect">
          <text
            class="interaction-icon"
            :class="{ collected: noteDetail.isCollected }"
            >★</text
          >
          <text class="interaction-text">{{ noteDetail.collects }}</text>
        </view>
        <view class="interaction-item" @click="showShareMenu">
          <text class="interaction-icon">↗</text>
          <text class="interaction-text">分享</text>
        </view>
      </view>

      <!-- 评论区域 -->
      <view class="comments-section">
        <view class="comments-header">
          <text class="comments-title"
            >评论 ({{ noteDetail.comments.length }})</text
          >
        </view>

        <view
          class="comment-item"
          v-for="comment in noteDetail.comments"
          :key="comment.id"
        >
          <image
            class="comment-avatar"
            :src="comment.user.avatar"
            mode="aspectFill"
          />
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-user">{{ comment.user.name }}</text>
              <text class="comment-time">{{
                formatTime(comment.createTime)
              }}</text>
            </view>
            <text class="comment-text">{{ comment.content }}</text>
            <view class="comment-actions">
              <view class="comment-like" @click="toggleCommentLike(comment)">
                <text class="like-icon" :class="{ liked: comment.isLiked }"
                  >♥</text
                >
                <text class="like-count">{{ comment.likes }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder"></view>
    </view>

    <!-- 底部评论输入框 -->
    <view class="comment-input-section">
      <input
        class="comment-input"
        v-model="commentText"
        placeholder="写下你的想法..."
        @confirm="submitComment"
      />
      <button
        class="send-btn"
        @click="submitComment"
        :disabled="!commentText.trim()"
      >
        发送
      </button>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  name: "NoteDetail",
  components: {
    headerVue,
  },
  data() {
    return {
      noteId: "",
      commentText: "",
      noteDetail: {
        id: "",
        title: "",
        content: "",
        image: "",
        tags: [],
        likes: 0,
        collects: 0,
        isLiked: false,
        isCollected: false,
        createTime: "",
        user: {
          id: "",
          name: "",
          avatar: "",
          isFollowed: false,
        },
        comments: [],
      },
    };
  },
  onLoad(options) {
    if (options.id) {
      this.noteId = options.id;
      this.loadNoteDetail();
    } else {
      this.loadMockData();
    }
  },
  methods: {
    // 加载笔记详情
    async loadNoteDetail() {
      try {
        uni.showLoading({ title: "加载中..." });
        // 模拟API调用
        const res = await this.getNoteDetail(this.noteId);
        this.noteDetail = res.data;
      } catch (error) {
        console.error("加载笔记详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 加载模拟数据
    loadMockData() {
      this.noteDetail = {
        id: "mock001",
        title: "这里是用户发布内容的标题",
        content:
          "这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容这里是用户发布的内容",
        image: "https://picsum.photos/800/600",
        tags: ["时间力", "阅读体验"],
        likes: 128,
        collects: 64,
        isLiked: false,
        isCollected: false,
        createTime: "2024-01-15 14:30:00",
        user: {
          id: "user001",
          name: "杨璐摄影",
          avatar:
            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100",
          isFollowed: false,
        },
        comments: [
          {
            id: "comment001",
            content: "很棒的分享，学到了很多！",
            likes: 5,
            isLiked: false,
            createTime: "2024-01-15 15:00:00",
            user: {
              id: "user002",
              name: "读书爱好者",
              avatar:
                "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100",
            },
          },
          {
            id: "comment002",
            content: "感谢分享，很有启发性的内容",
            likes: 3,
            isLiked: false,
            createTime: "2024-01-15 16:20:00",
            user: {
              id: "user003",
              name: "时间管理达人",
              avatar:
                "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100",
            },
          },
        ],
      };
    },

    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl,
      });
    },

    // 切换关注状态
    toggleFollow() {
      this.noteDetail.user.isFollowed = !this.noteDetail.user.isFollowed;
      uni.showToast({
        title: this.noteDetail.user.isFollowed ? "已关注" : "取消关注",
        icon: "none",
      });
    },

    // 切换点赞状态
    toggleLike() {
      this.noteDetail.isLiked = !this.noteDetail.isLiked;
      this.noteDetail.likes += this.noteDetail.isLiked ? 1 : -1;
    },

    // 切换收藏状态
    toggleCollect() {
      this.noteDetail.isCollected = !this.noteDetail.isCollected;
      this.noteDetail.collects += this.noteDetail.isCollected ? 1 : -1;
    },

    // 显示分享菜单
    showShareMenu() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: `https://example.com/notes/${this.noteDetail.id}`,
        title: this.noteDetail.title,
        summary: this.noteDetail.content.substring(0, 100),
        imageUrl: this.noteDetail.image,
      });
    },

    // 切换评论点赞
    toggleCommentLike(comment) {
      comment.isLiked = !comment.isLiked;
      comment.likes += comment.isLiked ? 1 : -1;
    },

    // 提交评论
    async submitComment() {
      if (!this.commentText.trim()) {
        return;
      }

      const newComment = {
        id: "comment" + Date.now(),
        content: this.commentText,
        likes: 0,
        isLiked: false,
        createTime: new Date().toISOString(),
        user: {
          id: "current_user",
          name: "当前用户",
          avatar:
            "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100",
        },
      };

      this.noteDetail.comments.unshift(newComment);
      this.commentText = "";

      uni.showToast({
        title: "评论成功",
        icon: "success",
      });
    },

    // 格式化时间
    formatTime(timeString) {
      const time = new Date(timeString);
      const now = new Date();
      const diff = now.getTime() - time.getTime();

      if (diff < 60 * 1000) {
        return "刚刚";
      } else if (diff < 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 1000)) + "分钟前";
      } else if (diff < 24 * 60 * 60 * 1000) {
        return Math.floor(diff / (60 * 60 * 1000)) + "小时前";
      } else {
        return time.toLocaleDateString();
      }
    },

    // 模拟API - 获取笔记详情
    async getNoteDetail(noteId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loadMockData();
          resolve({
            code: 200,
            data: this.noteDetail,
          });
        }, 500);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.note-detail-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.content-scroll {
  flex: 1;
  padding: 0 32rpx;
}

// 作者信息
.author-section {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  .author-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin-right: 24rpx;
  }

  .author-info {
    flex: 1;

    .author-name {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }

    .publish-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .follow-btn {
    border-radius: 30rpx;
    font-size: 24rpx;
    border: 2rpx solid #ff4757;
    background: transparent;
    color: #ff4757;
    font-weight: 600;

    &.followed {
      background: #ff4757;
      color: #fff;
    }
  }
}

// 笔记标题
.note-title {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin: 32rpx 0;
}

// 笔记图片
.note-image-container {
  margin: 32rpx 0;

  .note-image {
    width: 100%;
    max-height: 800rpx;
    border-radius: 16rpx;
  }
}

// 笔记内容
.note-content {
  margin: 32rpx 0;

  .content-text {
    font-size: 32rpx;
    line-height: 1.6;
    color: #333;
  }
}

// 标签
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin: 32rpx 0;

  .tag-item {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border-radius: 32rpx;
    font-size: 24rpx;
    color: #666;
  }
}

// 互动区域
.interaction-section {
  display: flex;
  align-items: center;
  gap: 48rpx;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  .interaction-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;

    .interaction-icon {
      font-size: 32rpx;
      color: #999;
      transition: color 0.3s;

      &.liked {
        color: #ff4757;
      }

      &.collected {
        color: #ffd700;
      }
    }

    .interaction-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// 评论区域
.comments-section {
  margin: 32rpx 0;

  .comments-header {
    margin-bottom: 32rpx;

    .comments-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .comment-item {
    display: flex;
    margin-bottom: 32rpx;

    .comment-avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 32rpx;
      margin-right: 24rpx;
    }

    .comment-content {
      flex: 1;

      .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;

        .comment-user {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }

        .comment-time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .comment-text {
        font-size: 30rpx;
        line-height: 1.5;
        color: #333;
        margin-bottom: 16rpx;
      }

      .comment-actions {
        display: flex;
        align-items: center;

        .comment-like {
          display: flex;
          align-items: center;
          gap: 8rpx;
          cursor: pointer;

          .like-icon {
            font-size: 24rpx;
            color: #999;

            &.liked {
              color: #ff4757;
            }
          }

          .like-count {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}

// 底部评论输入
.comment-input-section {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
  .comment-input {
    flex: 1;
    height: 80rpx;
    background: #f8f9fa;
    border-radius: 40rpx;
    padding: 0 32rpx;
    font-size: 28rpx;
    border: none;
    margin-right: 16rpx;
  }

  .send-btn {
    width: 120rpx;
    height: 60rpx;
	line-height: 60rpx;
    background: #ff4757;
    color: #fff;
    border-radius: 40rpx;
    font-size: 28rpx;
    border: none;
    font-weight: 600;

    &:disabled {
      background: #ccc;
    }
  }
}

.bottom-placeholder {
  height: 130rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
}
</style>