erlunyanbao/src/pages/feedback/list/index.vue

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