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="showImg(item)"
              mode="aspectFill"
            ></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="showImg(noteDetail.user.avatar)"
		      mode="aspectFill"
		    />
		    <view class="author-info">
		      <text class="author-name">{{ noteDetail.user.name }}</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">
          <text class="content-text">{{ noteDetail.content }}</text>
        </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">
			<image class="like-icon" mode="widthFix" :src="showImg('/uploads/20250826/3f4c0ccaaaccbef50bf8c5c27ff6a87b.png')"></image>
     	 <!-- <text
     	    class="like-icon"
     	    :class="{ liked: noteDetail.isLiked }"
     	    @click="toggleLike"
     	    >♥</text
     	  > -->
     	  <text class="like-count">{{ noteDetail.likes }}</text>
     	</view>
     </view>
    </view>
  </view>
</template>

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

export default {
  name: "NoteDetail",
  components: {
    headerVue,
  },
  data() {
    return {
      noteId: "",
      commentText: "",
	  topBanner: ["/uploads/20250826/17356ed4dcdeedcd13de60ca28909d22.png"],
	  swiperIndex: 0,
      noteDetail: {
        id: "",
        title: "",
        content: "",
        image: "",
        tags: [],
        likes: 0,
        isLiked: false,
        createTime: "",
        user: {
          id: "",
          name: "",
          avatar: "",
          isFollowed: false,
        },
        comments: [],
      },
    };
  },
  onLoad(options) {
    if (options.id) {
      this.noteId = options.id;
      this.loadNoteDetail();
    } else {
      this.loadMockData();
    }
  },
  methods: {
	  swiperChange(e) {
	    this.swiperIndex = e.detail.current;
	  },
    // 加载笔记详情
    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:
          "一周前，我们种下了一片想象中的桃园，并向江湖发出了一封「桃园山河令」，邀请你来分享属于自己的“桃园时刻”。未曾想到，这片初生的桃园，会迎来五湖四海如此多的“桃园客”——这是我们想送给每一位「EpicSoul交响」星球上「三个桃子」粉丝的名字。这些回响，来自每一位被「三个桃子」IP故事所触动的你。因为是你们，用一个个真实、温暖的故事，让我们想象中的那片桃园，迅速地枝繁叶茂，长满了沉甸甸的果实。",
        image: "https://static.ticket.sz-trip.com/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: [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;
    },

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

      const newComment = {
        id: "comment" + Date.now(),
        content: this.commentText,
        createTime: new Date().toISOString(),
        user: {
          id: "current_user",
          name: "我",
          avatar:
            "https://static.ticket.sz-trip.com/epicSoul/avatar-current.png",
        },
      };

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

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

    // 格式化时间
    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}`;
    },

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

// 评论区域
.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;
    }
  }
}

.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>