library-wechat/subpkg/pages/feedback-list/feedback-list.vue

<template>
  <view class="feedback-page">
    <!-- 留言列表 -->
    <view class="feedback-list">
      <view 
        class="feedback-item" 
        v-for="(item, index) in feedbackList" 
        :key="index"
      >
        <!-- 头像 + 用户名 + 点赞 -->
        <view class="feedback-item-top">
          <view class="user-info">
            <image 
              class="avatar" 
              :src="item.avatar || '@/static/images/avatar.png'" 
              mode="aspectFill"
            ></image>
            <text class="username">{{ item.nickname }}</text>
          </view>

          <!-- 点赞按钮 -->
          <view class="like-box" @click="likeComment(index)">
            <uni-icons 
              :type="item.isLike ? 'hand-up-filled' : 'hand-up'" 
              size="22" 
              :color="item.isLike ? '#FF4D4F' : '#999'"
            ></uni-icons>
            <text class="like-count">{{ item.likeNum }}</text>
          </view>
        </view>

        <!-- 留言内容 -->
        <view class="feedback-content">
          <text class="content-text">{{ item.content }}</text>
          <text class="create-time">{{ item.createTime }}</text>
        </view>
      </view>
    </view>

    <!-- 写留言按钮 -->
    <view class="write-btn-box">
      <button class="write-btn" @click="goWriteComment">写留言</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 留言列表数据（可从接口获取）
      feedbackList: [
        {
          nickname: "用户1",
          avatar: "@/static/images/avatar.png",
          content: "这篇文章充满了激情，从字里行间能体会到作者的喜爱之情，全文层次清晰，语句流畅，叙事生动具体，趣味性强。",
          createTime: "2026-04-23 10:23:01",
          likeNum: 12,
          isLike: false
        },
        {
          nickname: "热情读者",
          avatar: "@/static/images/avatar.png",
          content: "写得非常棒！情感真挚，结构完整，非常有感染力，值得大家阅读学习。",
          createTime: "2026-04-23 11:10:05",
          likeNum: 8,
          isLike: false
        },
        {
          nickname: "热情读者",
          avatar: "@/static/images/avatar.png",
          content: "写得非常棒！情感真挚，结构完整，非常有感染力，值得大家阅读学习。",
          createTime: "2026-04-23 11:10:05",
          likeNum: 8,
          isLike: false
        },
        {
          nickname: "热情读者",
          avatar: "@/static/images/avatar.png",
          content: "写得非常棒！情感真挚，结构完整，非常有感染力，值得大家阅读学习。",
          createTime: "2026-04-23 11:10:05",
          likeNum: 8,
          isLike: false
        }
      ]
    };
  },
  methods: {
    // 点赞功能
    likeComment(index) {
      const item = this.feedbackList[index];
      if (item.isLike) {
        // 取消点赞
        item.likeNum--;
      } else {
        // 点赞
        item.likeNum++;
      }
      item.isLike = !item.isLike;
    },
    
    // 写留言
    goWriteComment() {
      uni.navigateTo({
        url: '/subpkg/pages/feedback/feedback'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

/* 留言列表 */
.feedback-list {
  height: calc(100vh - 80px);
  overflow-y: scroll;
}

/* 单条留言 */
.feedback-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* 顶部：头像 + 用户名 + 点赞 */
.feedback-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 点赞 */
.like-box {
  display: flex;
  align-items: center;
}

.like-count {
  font-size: 12px;
  color: #999;
  margin-left: 4px;
}

/* 留言内容 */
.feedback-content {
  line-height: 1.6;
}

.content-text {
  font-size: 14px;
  color: #555;
  display: block;
  margin-bottom: 8px;
}

.create-time {
  font-size: 12px;
  color: #999;
}

.write-btn-box {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 15px;
}

.write-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 25px;
  font-size: 14px;
  padding: 4px 0;
}
</style>