瀏覽代碼

feat(feedback): 添加反馈列表页面

- 实现反馈列表展示功能
- 支持下拉刷新更新数据
- 添加反馈状态标签显示
- 支持点击跳转详情页
- 实现空数据提示
- 添加返回上一页功能
nahida 6 月之前
父節點
當前提交
87b535d707
共有 1 個文件被更改,包括 118 次插入0 次删除
  1. 118 0
      src/pages/feedback/list/index.vue

+ 118 - 0
src/pages/feedback/list/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+// 模拟反馈数据
+interface FeedbackItem {
+  id: number
+  content: string
+  imageUrl?: string
+  date: string
+  status: '已回复' | '处理中' | '已解决'
+}
+
+const feedbackList = ref<FeedbackItem[]>([
+  {
+    id: 1,
+    content: '这是一个测试反馈内容,用户提出的问题在这里展示。',
+    imageUrl: '',
+    date: '2025-10-28 14:30',
+    status: '已回复'
+  },
+  {
+    id: 2,
+    content: '另一个反馈示例,带有图片附件。',
+    imageUrl: '/static/plus.png',
+    date: '2025-10-29 09:15',
+    status: '处理中'
+  }
+])
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack()
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+  // 这里可以调用 API 获取实际数据
+})
+
+// 下拉刷新
+const onPullDownRefresh = () => {
+  // 模拟刷新数据
+  setTimeout(() => {
+    uni.stopPullDownRefresh()
+
+    // 模拟更新数据
+    feedbackList.value.unshift({
+      id: feedbackList.value.length + 1,
+      content: '这是下拉刷新后新增的反馈内容',
+      imageUrl: '',
+      date: new Date().toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      }).replace(/\//g, '-'),
+      status: '处理中'
+    })
+  }, 1000)
+}
+
+// 跳转到详情页
+const goToDetail = (id: number) => {
+  uni.navigateTo({
+    url: `/pages/feedback/list/detail/index?id=${id}`
+  })
+}
+
+// 触发下拉刷新的方法(用于测试)
+const triggerRefresh = () => {
+  onPullDownRefresh()
+}
+</script>
+
+<template>
+    <!-- 列表内容 -->
+    <view class="p-3">
+      <view
+        v-for="item in feedbackList"
+        :key="item.id"
+        class="bg-white rounded-lg shadow-sm mb-4 p-4"
+        @click="goToDetail(item.id)"
+      >
+        <view class="flex justify-between items-start mb-2">
+          <text class="text-gray-900 font-medium">反馈 #{{ item.id }}</text>
+          <text class="text-xs px-2 py-1 rounded" :class="{
+            'bg-green-100 text-green-800': item.status === '已解决',
+            'bg-yellow-100 text-yellow-800': item.status === '处理中',
+            'bg-blue-100 text-blue-800': item.status === '已回复'
+          }">{{ item.status }}</text>
+        </view>
+
+        <view class="text-gray-700 text-sm mb-3">
+          {{ item.content }}
+        </view>
+
+        <view v-if="item.imageUrl" class="mb-3">
+          <image
+            :src="item.imageUrl"
+            class="w-24 h-24 rounded object-cover"
+            mode="aspectFill"
+          />
+        </view>
+
+        <view class="text-xs text-gray-500">
+          {{ item.date }}
+        </view>
+      </view>
+
+      <view v-if="feedbackList.length === 0" class="text-center py-10 text-gray-500">
+        暂无反馈记录
+      </view>
+    </view>
+</template>
+
+<style scoped>
+</style>