cfc/cfc-frontend/pages/share/index.vue

<template>
  <view class="share-page">
    <view class="sp-header" v-if="hasFamily && familyName">
      <text class="sp-title">{{ familyName }} · 健康足迹</text>
    </view>

    <view class="sp-body" v-if="hasFamily && members && members.length > 0">
      <view class="sp-member" v-for="m in members" :key="m.name">
        <image class="sp-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="sp-member-info">
          <text class="sp-member-name">{{ m.name }}</text>
          <view class="sp-member-stats">
            <text class="sp-stat">打卡 {{ m.streakDays || 0 }} 天</text>
            <text class="sp-stat" v-if="m.score > 0">积分 {{ m.score }}</text>
          </view>
        </view>
        <text class="sp-badge" v-if="m.streakDays && m.streakDays >= 30">🏆</text>
        <text class="sp-badge" v-else-if="m.streakDays && m.streakDays >= 7">🎯</text>
      </view>
    </view>

    <view class="sp-footer" v-if="hasFamily && totalCheckinDays">
      <text class="sp-slogan">我们坚持健康打卡 {{ totalCheckinDays }} 天了！</text>
    </view>

    <view v-else>
      <FamilyEmptyState type="card" />
    </view>

    <view class="sp-qr">
      <text class="sp-qr-text">扫码加入我们一起健康</text>
    </view>

    <view class="sp-empty" v-if="!members || members.length === 0">
      <text class="sp-empty-text">暂无健康数据</text>
    </view>
  </view>
</template>

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

export default {
  computed: {
    hasFamily: function() {
      return this.$store.getters.hasFamily
    }
  },
  data() {
    return {
      familyName: '',
      members: [],
      totalScore: 0,
      totalCheckinDays: 0
    }
  },
  onLoad(params) {
    var familyId = params.familyId || ''
    if (familyId) {
      this.loadData(familyId)
    }
  },
  methods: {
    loadData: function(familyId) {
      var self = this
      getFamilyFootprint({}).then(function(res) {
        if (res.code === 200 && res.data) {
          self.members = res.data.members || []
          self.totalScore = res.data.totalScore || 0
          self.totalCheckinDays = res.data.totalCheckinDays || 0
        }
      }).catch(function() {})
    }
  }
}
</script>

<style scoped>
.share-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F0FDF4 0%, #ECFDF5 100%);
  padding: 40rpx 30rpx;
}
.sp-header { text-align: center; margin-bottom: 40rpx; }
.sp-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #065F46;
}
.sp-body {
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
}
.sp-member {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F1F5F9;
}
.sp-member:last-child { border-bottom: none; }
.sp-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.sp-member-info { flex: 1; min-width: 0; }
.sp-member-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.sp-member-stats {
  display: flex;
  gap: 16rpx;
  margin-top: 4rpx;
}
.sp-stat {
  font-size: 24rpx;
  color: #64748B;
}
.sp-badge { font-size: 40rpx; }
.sp-footer {
  text-align: center;
  margin-top: 40rpx;
  padding: 24rpx;
  background: rgba(16,185,129,0.1);
  border-radius: 16rpx;
}
.sp-slogan {
  font-size: 28rpx;
  color: #065F46;
  font-weight: 600;
}
.sp-qr {
  text-align: center;
  margin-top: 40rpx;
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  border: 2rpx dashed #D1FAE5;
}
.sp-qr-text {
  font-size: 26rpx;
  color: #10B981;
}
.sp-empty {
  text-align: center;
  padding: 100rpx 0;
}
.sp-empty-text { font-size: 28rpx; color: #94A3B8; }
</style>