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"
        @click="goDetail(item)"
      >
        <view class="feedback-content">
          <text class="subject">{{ item.subject }}</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: [
        {
          id: 1,
          subject: '建议增加更多儿童绘本',
          content: '图书馆的儿童区绘本种类不够丰富，希望能增加更多适合3-6岁儿童的绘本读物。',
          createTime: '2026-05-10 14:30',
          reply: '感谢您的建议！我们已将增加儿童绘本纳入采购计划，预计下季度会新增500余册绘本。'
        },
        {
          id: 2,
          subject: '自习室空调温度过低',
          content: '最近自习室空调开得太冷了，希望能适当调高温度，或者提供毯子。',
          createTime: '2026-05-08 09:15',
          reply: ''
        },
        {
          id: 3,
          subject: '希望延长周末开放时间',
          content: '周末很多人想来看书，但是下午5点就关门了，希望能够延长到晚上8点。',
          createTime: '2026-05-05 16:45',
          reply: '您的建议已收悉，我们正在研究调整开放时间的可行性，感谢支持。'
        }
      ]
    };
  },
  methods: {
    goWriteComment() {
      uni.navigateTo({
        url: '/subpkg/pages/feedback/feedback'
      });
    },
    goDetail(item) {
      uni.navigateTo({
        url: '/subpkg/pages/feedback-detail/feedback-detail?item=' + encodeURIComponent(JSON.stringify(item))
      });
    }
  }
};
</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-content {
  line-height: 1.6;
}

.subject {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.create-time {
  font-size: 12px;
  color: #999;
  display: block;
  text-align: right;
}

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

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