cfc/cfc-frontend/pages/register-child/index.vue

<template>
  <view class="register-child-page">
    <PlayfulCard elevation="1">
      <template slot="header">
        <view class="playful-card-header">
          <text class="playful-title">为孩子创建账户</text>
        </view>
      </template>

      <view v-if="step === 1" class="form-step">
        <text>请输入孩子的姓名</text>
        <input v-model="childName" placeholder="姓名" class="input" />
        <text>出生日期</text>
        <input v-model="birth" type="date" class="input" />
      </view>

      <view v-else-if="step === 2" class="form-step">
        <text>选择头像</text>
        <view class="avatar-grid">
          <image v-for="n in 5" :key="n" :src="avatarPlaceholder" class="avatar" @click="selectAvatar(n)" />
        </view>
      </view>

      <view v-else class="form-step">
        <text>确认信息</text>
        <text>Name: {{ childName }}</text>
        <text>Birth: {{ birth }}</text>
        <text>Avatar: {{ selectedAvatar || '默认' }}</text>
      </view>

      <template slot="actions">
        <PlayfulButton v-if="step < 3" variant="primary" size="md" @click="nextStep">
          下一步
        </PlayfulButton>
        <PlayfulButton v-else variant="primary" size="md" @click="finishRegistration">
          完成
        </PlayfulButton>
      </template>
    </PlayfulCard>
  </view>
</template>

<script>
import PlayfulCard from '@/components/PlayfulCard.vue';
import PlayfulButton from '@/components/PlayfulButton.vue';

export default {
  name: 'RegisterChild',
  components: { PlayfulCard, PlayfulButton },
  data() {
    return {
      step: 1,
      childName: '',
      birth: '',
      selectedAvatar: null,
      avatarPlaceholder: '/static/avatar-placeholder.png'
    }
  },
  methods: {
    nextStep() {
      if (this.step < 3) this.step++;
      else this.finishRegistration();
    },
    selectAvatar(n) { this.selectedAvatar = n; },
    finishRegistration() {
      // Here you would typically POST the data to your backend
      uni.showToast({ title: '注册完成！', icon: 'success' });
      // Navigate to child dashboard or home
      uni.redirectTo({ url: '/pages/index/index' });
    }
  }
}
</script>

<style scoped>
.register-child-page { padding: 16px; }
.input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 12px; font-size: 1rem; }
.playful-card-header { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.playful-title { font-family: var(--font-display); }
.avatar-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; }
</style>