cfc/cfc-frontend/pages/profile-extra/children.vue

<template>
  <view class="container">
    <view class="children-list">
      <view class="child-item" v-for="child in children" :key="child.id">
        <view class="child-avatar">{{ child.nickname ? child.nickname[0] : '?' }}</view>
        <view class="child-info">
          <text class="child-name">{{ child.nickname }}</text>
          <text class="child-detail">年龄: {{ child.age }} | 积分: {{ child.totalPoints }}</text>
        </view>
        <view class="child-actions">
          <button class="btn-invite" open-type="share" @click="prepareInvite(child)">邀请</button>
          <text class="btn-edit" @click="editChild(child)">编辑</text>
        </view>
      </view>
    </view>
    <view class="empty" v-if="children.length === 0">
      <text>暂无孩子，请点击下方按钮添加</text>
    </view>
    
    <!-- 添加孩子按钮 -->
    <view class="add-btn-wrapper">
      <button class="btn-add" @click="addChild">
        <text class="add-icon">+</text>
        <text>添加孩子</text>
      </button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      children: [],
      shareData: null
    }
  },
  onLoad() {
  },
  onShow() {
    this.loadChildren()
  },
  onShareAppMessage() {
    if (this.shareData) {
      return {
        title: this.shareData.title,
        path: this.shareData.path,
        imageUrl: '/static/invite-card.png'
      }
    }
  },
  methods: {
    async loadChildren() {
      try {
        const res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error(e)
      }
    },
    async prepareInvite(child) {
      try {
        const { generateInviteCard } = require('../../utils/api.js')
        const res = await generateInviteCard('child', child.id)
        const code = res.data.code
        this.shareData = {
          title: '邀请 ' + (child.nickname || '孩子') + ' 加入家庭',
          path: '/pages/login/login?invite_code=' + code
        }
        uni.showToast({ title: '点击右上角转发给TA', icon: 'none' })
      } catch (e) {
        uni.showToast({ title: e.message || '生成邀请失败', icon: 'none' })
      }
    },
    editChild(child) {
      uni.navigateTo({
        url: '/pages/profile-extra/edit-child?childId=' + child.id
      })
    },
    addChild() {
      uni.navigateTo({
        url: '/pages/profile-extra/create-child'
      })
    }
  }
}
</script>

<style scoped>
.container { padding: 30rpx; padding-bottom: 150rpx; }
.children-list { background: #fff; border-radius: 20rpx; }
.child-item { display: flex; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #f0f0f0; }
.child-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40rpx; font-weight: bold; margin-right: 20rpx; }
.child-info { flex: 1; }
.child-name { font-size: 32rpx; font-weight: bold; color: #333; display: block; }
.child-detail { font-size: 26rpx; color: #666; display: block; }
.child-dan { font-size: 24rpx; color: #999; }
.btn-edit { color: #F97316; font-size: 28rpx; }
.btn-invite { background: #3B82F6; color: #fff; font-size: 24rpx; padding: 4rpx 16rpx; border-radius: 8rpx; margin-right: 10rpx; line-height: 1.8; display: inline-block; }
.empty { text-align: center; padding: 100rpx; color: #999; }
.add-btn-wrapper { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; }
.btn-add { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(135deg, #F97316, #FB923C); 
  color: #fff; 
  border-radius: 50rpx; 
  padding: 24rpx 0;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}
.add-icon { font-size: 40rpx; margin-right: 10rpx; font-weight: bold; }
</style>