num/client/pages/records/index.vue

<template>
  <view class="page-records">
    <view v-if="store.records.length === 0" class="empty-state">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无分析记录</text>
      <text class="empty-desc">去首页分析您的手机号码</text>
    </view>

    <view v-else class="records-list">
      <view
        v-for="record in store.records"
        :key="record.id"
        class="record-card"
        @click="viewDetail(record)"
      >
        <view class="record-header">
          <text class="record-name">{{ record.name || record.birthday || '未知' }}</text>
          <text class="record-date">{{ formatDate(record.createdAt) }}</text>
        </view>
        <text class="record-phone">{{ record.birthday || '' }}</text>
        <view class="record-tags">
          <text v-if="record.difyResponse" class="tag-status">已解读</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { useChartStore } from '@/stores/chart'

const store = useChartStore()

onShow(() => {
  store.fetchRecords()
})

function formatDate(dateStr) {
  if (!dateStr) return ''
  return dateStr.slice(0, 10)
}

function viewDetail(record) {
  store.loadChart(record.id).then(() => {
    uni.navigateTo({ url: '/pages/chart/index' })
  })
}
</script>

<style scoped lang="scss">

.page-records { padding: 16px; }
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 80px;
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 16px; color: #6B7280; margin-bottom: 4px; }
.empty-desc { font-size: 14px; color: #9CA3AF; }
.records-list { display: flex; flex-direction: column; gap: 10px; }
.record-card {
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.record-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.record-name { font-weight: 600; color: #1F2937; }
.record-date { font-size: 12px; color: #9CA3AF; }
.record-phone { font-size: 18px; color: #3B82F6; font-weight: 500; }
.tag-status {
  display: inline-block; background: #D1FAE5; color: #059669;
  font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-top: 8px;
}
</style>