EpicSoul/pages/notes/detail.vue

<template>
  <view class="note-detail-container">
    <!-- 笔记内容区域 -->
    <view class="content-scroll">
      <!-- 轮播图区域 -->
      <view class="banner-content">
        <swiper
          class="top-banner"
          :circular="true"
          :interval="6000"
          :duration="800"
          :indicator-dots="false"
          :autoplay="true"
          @change="swiperChange"
        >
          <swiper-item v-for="(item, index) in topBanner" :key="index">
            <image class="top-banner" :src="item" mode="aspectFill" @click="previewImage(item)"></image>
          </swiper-item>
        </swiper>

        <view class="dot-container">
          <view
            :class="['dot-line', index == swiperIndex ? 'active' : '']"
            v-for="(item, index) in topBanner"
            :key="index"
          ></view>
        </view>
      </view>

      <!-- 内容卡片 -->
      <view class="content-card">
        <!-- 作者信息 -->
        <view class="author-section">
          <image
            class="author-avatar"
            :src="noteDetail.headImg"
            mode="aspectFill"
          />
          <view class="author-info">
            <text class="author-name">{{ noteDetail.nickname }}</text>
          </view>
          <!-- <view
            class="follow-btn"
            :class="{ followed: noteDetail.user.isFollowed }"
            @click="toggleFollow"
          >
            {{ noteDetail.user.isFollowed ? "已关注" : "关注" }}
          </view> -->
        </view>
        <!-- 笔记标题 -->
        <view class="note-title">
          {{ noteDetail.title }}
        </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="note-content">
          <view class="content-text">{{ noteDetail.content }}</view>
          <!-- 标签名称 -->
          <view class="tag-names" v-if="noteDetail.tagNames">
            <text
              v-for="(tag, index) in noteDetail.tagNames"
              :key="index"
              class="tag-link"
              @click="handleTagClick(tag)"
              >#{{ tag }}</text
            >
          </view>
        </view>
      </view>
      <view
        class=""
        style="
          width: auto;
          height: 1rpx;
          background-color: #999999;
          margin: 60rpx 32rpx;
        "
      >
      </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="showImg(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>
        </view>
      </view>

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

    <!-- 底部评论输入框 -->
    <view class="comment-input-section-box">
      <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 class="like-section" @click="toggleLike">
          <image
            class="like-icon"
            mode="widthFix"
            :src="
              !noteDetail.userLiked
                ? showImg(
                    'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png'
                  )
                : showImg(
                    'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png'
                  )
            "
          ></image>
          <text
            class="like-count"
            :class="{ 'liked-text': noteDetail.userLiked }"
            >{{ noteDetail.likeCount }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  name: "NoteDetail",
  components: {
    headerVue,
  },
  data() {
    return {
      noteId: "",
      commentText: "",
      topBanner: [],
      swiperIndex: 0,
      noteDetail: {
        id: "",
        title: "",
        content: "",
        image: "",
        tags: [],
        likes: 0,
        isLiked: false,
        createTime: "",
        tagNames: [],

        comments: [],
      },
    };
  },
  onLoad(options) {
    if (options.id) {
      this.noteId = options.id;
      this.loadNoteDetail();
    } else {
      uni.showToast({
        title: "笔记ID不存在",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    swiperChange(e) {
      this.swiperIndex = e.detail.current;
    },
    // 加载笔记详情
    async loadNoteDetail() {
      try {
        uni.showLoading({ title: "加载中..." });
        // 调用真实API
        const res = await this.Post(
          { noteId: this.noteId },
          "/framework/note/getInfo/" + this.noteId,
          "DES"
        );
        if (res.code === 200) {
          this.noteDetail = res.data;
          this.noteDetail.tagNames = this.noteDetail.tagNames.split(",");
          console.log(this.noteDetail.tagNames);
          // 如果有图片，设置轮播图
          this.topBanner = this.noteDetail.coverImage.split(",");
        } else {
          uni.showToast({
            title: res.msg || "加载失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载笔记详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 加载模拟数据
    loadMockData() {
      this.noteDetail = {
        id: "mock001",
        title: "首期「桃园山河令」",
        content:
          "一周前，我们种下了一片想象中的桃园，并向江湖发出了一封「桃园山河令」，邀请你来分享属于自己的“桃园时刻”。未曾想到，这片初生的桃园，会迎来五湖四海如此多的“桃园客”——这是我们想送给每一位「EpicSoul交响」星球上「三个桃子」粉丝的名字。这些回响，来自每一位被「三个桃子」IP故事所触动的你。因为是你们，用一个个真实、温暖的故事，让我们想象中的那片桃园，迅速地枝繁叶茂，长满了沉甸甸的果实。",
        image: "https://des.dayunyuanjian.cn/epicSoul/canal-town.jpg",
        tags: ["时间里的约定", "审美", "治愈系调色"],
        likes: 30,
        isLiked: false,
        createTime: "2025-08-20 14:30:00",
        user: {
          id: "user001",
          name: "发布者",
          avatar: "/uploads/20250826/b4b7c64ce37481e75742454c037e6407.png",
          isFollowed: false,
        },
        comments: [
          {
            id: "comment001",
            content:
              "我的「桃园时刻」是和发小一起玩耍，阳光透过桃叶洒下斑驳光影，空气中弥漫着桃子的香甜。我们一起摘桃子，分享秘密，笑声在桃园里回荡。",
            createTime: "2025-08-20 15:00:00",
            user: {
              id: "user002",
              name: "@小新",
              avatar: "/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png",
            },
          },
          {
            id: "comment002",
            content:
              "我的「桃园时刻」是和家人一起野餐，在桃树下享受美食，孩子们在周围嬉戏，欢声笑语让时光变得缓慢而美好。",
            createTime: "2025-08-20 16:20:00",
            user: {
              id: "user003",
              name: "Mr.曾",
              avatar: "/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png",
            },
          },
        ],
      };
    },

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

    // 切换关注状态
    async toggleFollow() {
      try {
        const action = this.noteDetail.user.isFollowed ? "cancel" : "follow";
        const res = await this.Post(
          {
            method: "POST",
            userId: this.noteDetail.user.id,
            action: action,
          },
          "/framework/user/follow",
          "DES"
        );

        if (res.code === 200) {
          this.noteDetail.user.isFollowed = !this.noteDetail.user.isFollowed;
          uni.showToast({
            title: this.noteDetail.user.isFollowed ? "已关注" : "取消关注",
            icon: "success",
          });
        } else {
          uni.showToast({
            title:
              res.msg || (action === "follow" ? "关注失败" : "取消关注失败"),
            icon: "none",
          });
        }
      } catch (error) {
        console.error("关注操作失败:", error);
        uni.showToast({
          title: "操作失败",
          icon: "none",
        });
      }
    },

    // 切换点赞状态
    async toggleLike() {
      try {
        const action = this.noteDetail.isLiked ? "cancel" : "like";
        const res = await this.Post(
          {
            method: "POST",
            noteId: this.noteId,
            action: action,
          },
          "/framework/note/like",
          "DES"
        );

        if (res.code === 200) {
          this.noteDetail.isLiked = !this.noteDetail.isLiked;
          this.noteDetail.likes += this.noteDetail.isLiked ? 1 : -1;

          // 可选：更新点赞数为接口返回的准确数值
          if (res.data && res.data.likeCount !== undefined) {
            this.noteDetail.likes = res.data.likeCount;
          }
        } else {
          uni.showToast({
            title: res.msg || (action === "like" ? "点赞失败" : "取消点赞失败"),
            icon: "none",
          });
        }
      } catch (error) {
        console.error("点赞操作失败:", error);
        uni.showToast({
          title: "操作失败",
          icon: "none",
        });
      }
    },

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

      try {
        uni.showLoading({ title: "提交中..." });
        const res = await this.Post(
          {
            method: "POST",
            noteId: this.noteId,
            content: this.commentText,
          },
          "/framework/note/comment/add",
          "DES"
        );

        if (res.code === 200) {
          // 评论成功后重新加载笔记详情，获取最新评论
          this.loadNoteDetail();
          this.commentText = "";

          uni.showToast({
            title: "评论成功",
            icon: "success",
          });
        } else {
          uni.showToast({
            title: res.msg || "评论失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("提交评论失败:", error);
        uni.showToast({
          title: "评论失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 格式化时间
    formatTime(timeString) {
      const time = new Date(timeString);
      const year = time.getFullYear();
      const month = String(time.getMonth() + 1).padStart(2, "0");
      const day = String(time.getDate()).padStart(2, "0");
      return `${year}/${month}/${day}`;
    },

    // 显示图片
    showImg(img) {
      if (!img) return "/static/image/default-avatar.png";
      if (img.indexOf("https://") !== -1 || img.indexOf("http://") !== -1) {
        return img;
      } else {
        return this.NEWAPIURLIMG + img;
      }
    },

    // 处理标签点击
    handleTagClick(tag) {
      console.log("标签点击:", tag);
      // 可以根据需求跳转到标签相关页面或执行其他操作
      // uni.showToast({
      //   title: `点击了标签: ${tag}`,
      //   icon: "none",
      // });

      // 如果需要跳转到标签相关页面，可以使用以下代码
      // uni.navigateTo({
      //   url: `/pages/tags/detail?tag=${encodeURIComponent(tag)}`
      // });
    },
  },
};
</script>

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

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

// 笔记图片
.note-image-container {
  width: 100%;
  height: 500rpx;
  overflow: hidden;

  .note-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 作者信息
.author-section {
  display: flex;
  align-items: center;
  background: #fff;

  .author-avatar {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }

  .author-info {
    flex: 1;

    .author-name {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .follow-btn {
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    border: 2rpx solid #02fcfc;
    color: #333333;
    background-color: white;
    padding: 12rpx 30rpx;
    &.followed {
      background: #ccc;
    }
  }
}

// 内容卡片容器
.content-card {
  margin: 32rpx;
  background: #fff;
  border-radius: 0rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 40rpx;
}

// 笔记标题
.note-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 14rpx;
  margin-top: 24rpx;
}

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

  .tag-item {
    // background: #f8f9fa;
    // border-radius: 20rpx;
    font-size: 26rpx;
    color: #666;
  }
}

// 笔记内容
.note-content {
  .content-text {
    font-size: 30rpx;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
    word-break: break-all;
  }

  .tag-names {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 24rpx;

    .tag-link {
      font-size: 28rpx;
      color: #0066cc;
      font-weight: 500;
    }
  }
}

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

    .comments-title {
      font-size: 34rpx;
      font-weight: bold;
      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: 30rpx;
          font-weight: bold;
          color: #000000;
        }

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

      .comment-text {
        font-size: 28rpx;
        line-height: 1.5;
        color: #000000;
      }
    }
  }
}
.comment-input-section-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-top: 1rpx solid #f0f0f0;
  background: #fff;
}
// 底部评论输入
.comment-input-section {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx 0;
  padding-bottom: max(env(safe-area-inset-bottom), 24rpx);

  .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: 140rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #94fafa;
    color: #000000;
    border-radius: 40rpx;
    font-size: 30rpx;
    border: none;
    font-weight: 500;
    margin-right: 24rpx;

    &:disabled {
      background: #ccc;
    }
  }

  .like-section {
    display: flex;
    align-items: center;
    gap: 8rpx;

    .like-icon {
      width: 36rpx;
      transition: color 0.3s;
      &.liked {
        color: #ff4757;
      }
    }

    .like-count {
      font-size: 30rpx;
      color: #666;
      font-weight: bold;

      &.liked-text {
        color: #ff4757;
      }
    }
  }
}

.bottom-placeholder {
  height: 130rpx;
  width: 100%;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  box-sizing: content-box;
}
.banner-content {
  width: 100%;
  height: 1000rpx;
  position: relative;

  .top-banner {
    width: 100%;
    height: 100%;
  }

  .dot-container {
    position: absolute;
    bottom: 43rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .dot-line {
      width: 52rpx;
      height: 4rpx;
      margin: 0 8rpx;
      background: RGBA(189, 170, 173, 0.8);

      &.active {
        background: white;
      }
    }
  }

  .page-indicator {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    // background: rgba(0, 0, 0, 0.5);
    border-radius: 10rpx;
    padding: 10rpx 20rpx;

    .page-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}
</style>