cfc/cfc-frontend/pages/health/survey-history.vue

<template>
  <view class="container">
    <view class="empty-state" v-if="historyList.length === 0 && !loading">
      <text class="empty-icon">📋</text>
      <text class="empty-text">还没有调研记录</text>
      <text class="empty-hint">完成首次调研后这里会显示历史</text>
    </view>
    <view class="record-list">
      <view class="record-card" v-for="(item, idx) in historyList" :key="getRecordKey(item)">
        <view class="record-header">
          <text class="record-title">{{ getRecordTitle(item) }}</text>
          <text class="record-date">{{ item.submittedAt && item.submittedAt.substring(0, 10) }}</text>
        </view>
        <view class="record-period" v-if="item.periodStart || item.periodEnd">
          <text class="period-label">周期:</text>
          <text class="period-text">{{ item.periodStart && item.periodStart.substring(0, 10) }} - {{ item.periodEnd && item.periodEnd.substring(0, 10) }}</text>
        </view>
        <view class="record-answers">
          <text class="answers-label">答案摘要:</text>
          <text class="answers-text">{{ getAnswerSummary(item) }}</text>
        </view>
      </view>
    </view>
    <view class="loading-state" v-if="loading"><text class="loading-text">加载中...</text></view>
  </view>
</template>
<script>
import { getSurveyHistory, getActiveTemplates } from '../../utils/api.js'
export default {
  data() { return { memberId: '', loading: false, historyList: [], templateMap: {} } },
  onLoad(options) {
    var ui = uni.getStorageSync('userInfo') || {}
    this.memberId = options.memberId || uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId') || ''
    this.loadData()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) { this._onLoadFired = false }
    else if (this.memberId) this.loadData()
  },
  methods: {
    getRecordKey(item) { return item && item.id ? 'r-' + item.id : 'r-' + Math.random() },
    getRecordTitle(item) { if (item.title) return item.title; if (this.templateMap[item.templateId]) return this.templateMap[item.templateId]; return '调研记录' },
    getAnswerSummary(item) {
      if (!item.answersJson) return '无'
      try {
        var answers = JSON.parse(item.answersJson)
        if (answers && answers.length > 0) {
          var parts = []
          for (var i = 0; i < Math.min(answers.length, 3); i++) parts.push('Q' + (i + 1) + ': ' + answers[i])
          return parts.join(' | ')
        }
      } catch(e) {}
      return '已提交'
    },
    async loadData() {
      this.loading = true
      try {
        var self = this
        var tr = await getActiveTemplates()
        if (tr.code === 200 && tr.data) { for (var i = 0; i < tr.data.length; i++) { var t = tr.data[i]; if (t && t.id && t.title) self.templateMap[t.id] = t.title } }
        var res = await getSurveyHistory({ memberId: self.memberId })
        if (res.code === 200) self.historyList = res.data || []
      } catch(e) { console.error('加载调研历史失败', e) }
      finally { this.loading = false }
    }
  }
}
</script>
<style scoped>
.container{background:#FFF7ED;min-height:100vh;padding-bottom:40rpx}
.record-list{padding:0 24rpx}
.record-card{background:#fff;border-radius:20rpx;padding:24rpx;margin-bottom:16rpx;box-shadow:0 2rpx 12rpx rgba(0,0,0,0.06)}
.record-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12rpx}
.record-title{font-size:28rpx;font-weight:bold;color:#333}
.record-date{font-size:24rpx;color:#999}
.record-period{display:flex;align-items:center;margin-bottom:8rpx}
.period-label{font-size:24rpx;color:#999;margin-right:8rpx}
.period-text{font-size:24rpx;color:#F97316}
.record-answers{display:flex;align-items:flex-start}
.answers-label{font-size:24rpx;color:#999;margin-right:8rpx;flex-shrink:0}
.answers-text{font-size:24rpx;color:#666;flex:1}
.empty-state{display:flex;flex-direction:column;align-items:center;padding:120rpx 0}
.empty-icon{font-size:80rpx;margin-bottom:20rpx}
.empty-text{font-size:30rpx;color:#666;margin-bottom:12rpx}
.empty-hint{font-size:24rpx;color:#999}
.loading-state{display:flex;justify-content:center;padding:80rpx 0}
.loading-text{font-size:26rpx;color:#999}
</style>