LandSurveyApplet/pages/feedback/list/detail/index.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 模拟反馈详情数据
interface FeedbackDetail {
  id: number
  content: string
  imageUrl?: string
  date: string
  status: '已回复' | '处理中' | '已解决'
  replyContent?: string
  replyDate?: string
}

const feedbackDetail = ref<FeedbackDetail>({
  id: 0,
  content: '',
  imageUrl: '',
  date: '',
  status: '处理中'
})

// 使用UniApp的onLoad钩子获取页面参数
onLoad((options) => {
  if (options && options.id) {
    // 模拟根据ID获取详情数据
    // 实际项目中这里应该调用API获取数据
    setTimeout(() => {
      feedbackDetail.value = {
        id: parseInt(options.id),
        content: '这是一个详细的反馈内容，用户在这里描述了具体的问题和情况。希望团队能够尽快处理这个问题。',
        imageUrl: '/static/plus.png',
        date: '2025-10-28 14:30',
        status: '已回复',
        replyContent: '感谢您的反馈，我们已经收到并开始处理您的问题。预计会在3个工作日内解决，请耐心等待。',
        replyDate: '2025-10-29 09:15'
      }
    }, 500)
  }
})
</script>

<template>
  <view class="bg-gray-50 min-h-screen">
    <!-- 详情内容 -->
    <view class="p-4">
      <view class="bg-white rounded-lg shadow-sm p-4 mb-4">
        <view class="flex justify-between items-start mb-3">
          <text class="text-gray-900 font-medium">反馈 #{{ feedbackDetail.id }}</text>
          <text class="text-xs px-2 py-1 rounded" :class="{
            'bg-green-100 text-green-800': feedbackDetail.status === '已解决',
            'bg-yellow-100 text-yellow-800': feedbackDetail.status === '处理中',
            'bg-blue-100 text-blue-800': feedbackDetail.status === '已回复'
          }">{{ feedbackDetail.status }}</text>
        </view>

        <view class="text-gray-700 text-sm mb-4">
          {{ feedbackDetail.content }}
        </view>

        <view v-if="feedbackDetail.imageUrl" class="mb-4">
          <image
            :src="feedbackDetail.imageUrl"
            class="w-32 h-32 rounded object-cover"
            mode="aspectFill"
          />
        </view>

        <view class="text-xs text-gray-500 border-t border-gray-100 pt-3">
          {{ feedbackDetail.date }}
        </view>
      </view>

      <!-- 回复内容 -->
      <view
        v-if="feedbackDetail.replyContent"
        class="bg-white rounded-lg shadow-sm p-4"
      >
        <view class="font-medium text-gray-900 mb-3">官方回复</view>
        <view class="text-gray-700 text-sm mb-3">
          {{ feedbackDetail.replyContent }}
        </view>
        <view class="text-xs text-gray-500 border-t border-gray-100 pt-3">
          {{ feedbackDetail.replyDate }}
        </view>
      </view>

      <view
        v-else
        class="bg-white rounded-lg shadow-sm p-4"
      >
        <view class="text-gray-500 text-center py-6">
          暂无回复
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
</style>