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

<template>
  <view class="feedback-page">
    <!-- 留言列表 -->
    <view class="feedback-list">
      
      <!-- 空状态：无留言时显示 -->
      <view class="empty-box" v-if="feedbackList.length === 0">
        <uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80" color="#ccc"></uni-icons>
        <text style="margin-top: 20px;">暂无留言</text>
      </view>

      <!-- 有数据时显示列表 -->
      <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" v-if="feedbackList.length > 0">
      <button class="write-btn" @click="goWriteComment">写留言</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackList: [] // 测试空数据
      // feedbackList: [你的数据]
    };
  },
  methods: {
    likeComment(index) {
      const item = this.feedbackList[index];
      item.isLike ? item.likeNum-- : 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;
  padding: 10px;
}

/* 空状态 */
.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 200px);
  color: #999;
  font-size: 15px;
}

/* 单条留言 */
.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>