cfc/cfc-frontend/pages/assessment/child-info.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">孩子信息</text>
      <text class="subtitle">请填写孩子的详细信息，用于测评档案</text>
    </view>

    <!-- 基本信息 -->
    <view class="section">
      <view class="section-title">基本信息</view>
      <view class="form-group">
        <view class="form-label">孩子姓名</view>
        <input class="form-input" v-model="form.childName" placeholder="请输入孩子姓名" />
      </view>
      <view class="form-group">
        <view class="form-label">出生日期</view>
        <picker mode="date" :value="form.childBirthday" @change="onBirthdayChange">
          <view class="picker-value">{{ form.childBirthday || '请选择出生日期' }}</view>
        </picker>
      </view>
      <view class="form-group">
        <view class="form-label">性别</view>
        <radio-group @change="onGenderChange">
          <label class="radio-item">
            <radio value="男" :checked="form.childGender === '男'" />
            <text>男</text>
          </label>
          <label class="radio-item">
            <radio value="女" :checked="form.childGender === '女'" />
            <text>女</text>
          </label>
        </radio-group>
      </view>
      <view class="form-group">
        <view class="form-label">年龄</view>
        <text class="form-value">{{ form.childAge || '自动计算' }}</text>
      </view>
    </view>

    <!-- 学校信息 -->
    <view class="section">
      <view class="section-title">学校信息</view>
      <view class="form-group">
        <view class="form-label">学校名称</view>
        <input class="form-input" v-model="form.school" placeholder="请输入学校名称" />
      </view>
      <view class="form-group">
        <view class="form-label">年级</view>
        <input class="form-input" v-model="form.grade" placeholder="如：一年级" />
      </view>
      <view class="form-group">
        <view class="form-label">班级</view>
        <input class="form-input" v-model="form.gradeClass" placeholder="如：3班" />
      </view>
      <view class="form-group">
        <view class="form-label">在校成绩</view>
        <radio-group @change="onSchoolScoreChange">
          <label class="radio-item">
            <radio value="优秀" :checked="form.schoolScore === '优秀'" />
            <text>优秀</text>
          </label>
          <label class="radio-item">
            <radio value="良好" :checked="form.schoolScore === '良好'" />
            <text>良好</text>
          </label>
          <label class="radio-item">
            <radio value="一般" :checked="form.schoolScore === '一般'" />
            <text>一般</text>
          </label>
          <label class="radio-item">
            <radio value="较差" :checked="form.schoolScore === '较差'" />
            <text>较差</text>
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 身体信息 -->
    <view class="section">
      <view class="section-title">身体信息</view>
      <view class="form-row">
        <view class="form-group half">
          <view class="form-label">身高 (cm)</view>
          <input class="form-input" type="number" v-model="form.height" placeholder="cm" />
        </view>
        <view class="form-group half">
          <view class="form-label">体重 (kg)</view>
          <input class="form-input" type="digit" v-model="form.weight" placeholder="kg" />
        </view>
      </view>
    </view>

    <!-- 家庭信息 -->
    <view class="section">
      <view class="section-title">家庭信息</view>
      <view class="form-group">
        <view class="form-label">家庭状况</view>
        <input class="form-input" v-model="form.familyStatus" placeholder="如：双亲家庭/单亲家庭" />
      </view>
      <view class="form-group">
        <view class="form-label">父母最高学历</view>
        <radio-group @change="onParentDegreeChange">
          <label class="radio-item">
            <radio value="高中及以下" :checked="form.parentDegree === '高中及以下'" />
            <text>高中及以下</text>
          </label>
          <label class="radio-item">
            <radio value="大专" :checked="form.parentDegree === '大专'" />
            <text>大专</text>
          </label>
          <label class="radio-item">
            <radio value="本科" :checked="form.parentDegree === '本科'" />
            <text>本科</text>
          </label>
          <label class="radio-item">
            <radio value="硕士" :checked="form.parentDegree === '硕士'" />
            <text>硕士</text>
          </label>
          <label class="radio-item">
            <radio value="博士" :checked="form.parentDegree === '博士'" />
            <text>博士</text>
          </label>
        </radio-group>
      </view>
      <view class="form-group">
        <view class="form-label">民族</view>
        <input class="form-input" v-model="form.nation" placeholder="如：汉族" />
      </view>
      <view class="form-group">
        <view class="form-label">是否独生子女</view>
        <radio-group @change="onSingleChildChange">
          <label class="radio-item">
            <radio value="是" :checked="form.singleChild === '是'" />
            <text>是</text>
          </label>
          <label class="radio-item">
            <radio value="否" :checked="form.singleChild === '否'" />
            <text>否</text>
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 地址信息 -->
    <view class="section">
      <view class="section-title">地址信息</view>
      <view class="form-group">
        <view class="form-label">省份</view>
        <input class="form-input" v-model="form.province" placeholder="请输入省份" />
      </view>
      <view class="form-group">
        <view class="form-label">城市</view>
        <input class="form-input" v-model="form.city" placeholder="请输入城市" />
      </view>
      <view class="form-group">
        <view class="form-label">区县</view>
        <input class="form-input" v-model="form.district" placeholder="请输入区县" />
      </view>
      <view class="form-group">
        <view class="form-label">详细地址</view>
        <input class="form-input" v-model="form.address" placeholder="请输入详细地址" />
      </view>
    </view>

    <!-- 紧急联系人 -->
    <view class="section">
      <view class="section-title">紧急联系人</view>
      <view class="form-group">
        <view class="form-label">姓名</view>
        <input class="form-input" v-model="form.urgentName" placeholder="紧急联系人姓名" />
      </view>
      <view class="form-group">
        <view class="form-label">电话</view>
        <input class="form-input" type="number" v-model="form.urgentPhone" placeholder="紧急联系人电话" />
      </view>
    </view>

    <button class="btn-submit" @click="submit">下一步</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flowData: {},
      form: {
        childName: '',
        childBirthday: '',
        childGender: '',
        childAge: 0,
        school: '',
        grade: '',
        gradeClass: '',
        height: '',
        weight: '',
        familyStatus: '',
        parentDegree: '',
        nation: '',
        province: '',
        city: '',
        district: '',
        address: '',
        singleChild: '',
        schoolScore: '',
        urgentName: '',
        urgentPhone: ''
      }
    }
  },
  onLoad() {
    this.flowData = uni.getStorageSync('assessmentFlowData') || {}
  },
  methods: {
    onBirthdayChange(e) {
      this.form.childBirthday = e.detail.value
      this.calcAge(e.detail.value)
    },
    calcAge(birthday) {
      if (!birthday) return
      const birth = new Date(birthday)
      const today = new Date()
      let age = today.getFullYear() - birth.getFullYear()
      const m = today.getMonth() - birth.getMonth()
      if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
        age--
      }
      this.form.childAge = age > 0 ? age : 0
    },
    onGenderChange(e) { this.form.childGender = e.detail.value },
    onSchoolScoreChange(e) { this.form.schoolScore = e.detail.value },
    onParentDegreeChange(e) { this.form.parentDegree = e.detail.value },
    onSingleChildChange(e) { this.form.singleChild = e.detail.value },

    validate() {
      const required = ['childName', 'childBirthday', 'childGender']
      for (let i = 0; i < required.length; i++) {
        if (!this.form[required[i]]) {
          uni.showToast({ title: '请填写必填项', icon: 'none' })
          return false
        }
      }
      return true
    },

    submit() {
      if (!this.validate()) return
      uni.setStorageSync('assessmentChildInfo', this.form)
      const f = this.flowData
      uni.navigateTo({
        url: '/pages/assessment/order?guideId=' + (f.guideId || '') +
          '&guideName=' + encodeURIComponent(f.guideName || '') +
          '&packageId=' + (f.packageId || '') +
          '&packageName=' + encodeURIComponent(f.packageName || 'DAN专注力测评') +
          '&childId=' + (f.childId || '') +
          '&appointmentDate=' + (f.appointmentDate || '') +
          '&appointmentTime=' + (f.appointmentTime || '') +
          '&totalPrice=' + (f.totalPrice || '0') +
          '&discountAmount=' + (f.discountAmount || '0') +
          '&actualPrice=' + ((f.totalPrice || 0) - (f.discountAmount || 0))
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #666;
}
.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #eee;
}
.form-group {
  margin-bottom: 24rpx;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  font-weight: 500;
}
.form-input {
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.form-value {
  font-size: 28rpx;
  color: #999;
  line-height: 80rpx;
}
.picker-value {
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 80rpx;
}
.form-row {
  display: flex;
  gap: 20rpx;
}
.half {
  flex: 1;
}
.radio-item {
  display: inline-flex;
  align-items: center;
  margin-right: 40rpx;
  font-size: 28rpx;
  color: #333;
}
.btn-submit {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}
</style>