cfc/cfc-frontend/pages/teacher/review-workbench.vue

<template>
  <view class="page">
    <view class="header">
      <text class="title">审核工作台</text>
      <text class="sub">我服务的家庭</text>
    </view>

    <view v-if="loading" class="empty">加载中…</view>

    <view v-else-if="families.length === 0" class="empty">
      尚未绑定任何家庭
    </view>

    <view v-else>
      <view
        v-for="f in families"
        :key="getFamilyKey(f)"
        class="card"
        @click="goFamily(f)"
      >
        <view class="row">
          <text class="name">{{ f.familyName || ('家庭 #' + f.familyId) }}</text>
          <text class="badge">{{ f.serviceType === 'paid' ? '收费' : '免费' }}</text>
        </view>
        <view class="row">
          <text class="meta">成员 {{ f.memberCount || 0 }} 人</text>
          <text class="meta">绑定于 {{ formatTime(f.boundAt) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGuideMyFamilies } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: true,
      families: []
    }
  },
  onLoad() {
    this.fetchFamilies()
  },
  methods: {
    async fetchFamilies() {
      this.loading = true
      try {
        const res = await getGuideMyFamilies()
        if (res && res.code === 200) {
          this.families = res.data || []
        } else {
          uni.showToast({ title: (res && res.message) || '加载失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络异常', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    getFamilyKey(f) {
      return 'gf-' + f.familyId
    },
    formatTime(t) {
      if (!t) return '-'
      // 项目统一时间格式：取前19位并把 ISO 的 T 换成空格，避免 toLocaleString 的浏览器差异
      return String(t).substring(0, 19).replace('T', ' ')
    },
    goFamily(f) {
      uni.navigateTo({
        url: '/pages/teacher/review-family?familyId=' + f.familyId
      })
    }
  }
}
</script>

<style scoped>
.page { padding: 24rpx; background: #F5FAFE; min-height: 100vh; }
.header { padding: 24rpx 8rpx; }
.title { font-size: 36rpx; font-weight: 600; color: #1F2D3D; display: block; }
.sub { font-size: 26rpx; color: #8A94A6; margin-top: 8rpx; display: block; }
.card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; }
.row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 12rpx; }
.name { font-size: 30rpx; color: #1F2D3D; font-weight: 500; }
.badge { font-size: 22rpx; color: #4A9BD7; background: #EAF4FC; padding: 4rpx 12rpx; border-radius: 8rpx; }
.meta { font-size: 24rpx; color: #8A94A6; }
.empty { text-align: center; color: #8A94A6; font-size: 28rpx; padding: 80rpx 0; }
</style>