cfc/cfc-frontend/pages/growth/create.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">创建成长档案</text>
      <text class="subtitle">填写孩子基本信息</text>
    </view>

    <view class="form">
      <view class="form-item">
        <text class="label">孩子</text>
        <view class="child-select" @click="selectChild">
          <text class="select-text" v-if="selectedChild">{{ selectedChild.nickname || selectedChild.name }}</text>
          <text class="select-placeholder" v-else>请选择孩子</text>
          <text class="select-arrow">›</text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">档案标题</text>
        <input class="input" v-model="formData.recordTitle" placeholder="例如：2026年5月成长记录" />
      </view>

      <view class="form-row">
        <view class="form-item half">
          <text class="label">身高（cm）</text>
          <input class="input" v-model="formData.height" type="number" placeholder="选填" />
        </view>
        <view class="form-item half">
          <text class="label">体重（kg）</text>
          <input class="input" v-model="formData.weight" type="number" placeholder="选填" />
        </view>
      </view>

      <view class="form-item">
        <text class="label">学校名称</text>
        <input class="input" v-model="formData.school" placeholder="选填" />
      </view>

      <view class="form-row">
        <view class="form-item half">
          <text class="label">年级</text>
          <picker mode="selector" :range="gradeOptions" :value="formData.grade ? (formData.grade - 1) : -1" @change="onGradeChange">
            <view class="picker-input">{{ formData.grade ? gradeOptions[formData.grade - 1] : '请选择年级' }}</view>
          </picker>
        </view>
        <view class="form-item half">
          <text class="label">成绩表现</text>
          <input class="input" v-model="formData.academicPerformance" placeholder="选填" />
        </view>
      </view>

      <view class="form-item">
        <text class="label">学校所在省</text>
        <input class="input" v-model="formData.schoolProvince" placeholder="选填" />
      </view>

      <view class="form-item">
        <text class="label">学校所在市</text>
        <input class="input" v-model="formData.schoolCity" placeholder="选填" />
      </view>

      <view class="form-item">
        <text class="label">学校所在区</text>
        <input class="input" v-model="formData.schoolDistrict" placeholder="选填" />
      </view>

      <view class="form-item">
        <text class="label">学校所在街道</text>
        <input class="input" v-model="formData.schoolStreet" placeholder="选填" />
      </view>

<view class="form-item checkbox-item">
<label class="checkbox-label">
  <input type="checkbox" :checked="alsoPurchase" @change="onAlsoPurchaseChange" />
  <text>同时购买 DAN 测评</text>
</label>
<text class="checkbox-hint">创建档案后将直接进入测评购买流程</text>
</view>

<button class="btn-submit" @click="submit">创建档案{{ alsoPurchase ? '并购买测评' : '' }}</button>
</view>

<view class="assessment-section" v-if="selectedChild && !alsoPurchase">
<view class="section-divider"></view>
<view class="section-header">
<text class="section-title">关联测评</text>
<text class="section-hint">创建完成后，可购买测评服务完善档案</text>
</view>
<button class="btn-assessment" @click="goToPurchase">购买测评服务</button>
</view>
</view>
</template>

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

export default {
  data() {
    return {
      children: [],
      selectedChild: null,
      targetChildId: '',
      alsoPurchase: false,
      gradeOptions: ['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
      formData: {
        childId: null,
        recordTitle: '',
        height: '',
        weight: '',
        school: '',
        grade: null,
        academicPerformance: '',
        schoolProvince: '',
        schoolCity: '',
        schoolDistrict: '',
        schoolStreet: ''
      }
    }
  },
  onLoad(options) {
    this.targetChildId = options.childId || ''
    this.loadChildren()
    if (this.targetChildId) {
      this.formData.recordTitle = '成长档案 - ' + this.getCurrentDate()
    }
  },
  methods: {
    getCurrentDate() {
      const d = new Date()
      return d.getFullYear() + '年' + (d.getMonth() + 1) + '月'
    },
    async loadChildren() {
      try {
        const res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          // 优先选中从上级页面传入的孩子
          let target = null
          if (this.targetChildId) {
            target = this.children.find(c => String(c.id) === String(this.targetChildId))
          }
          if (!target && this.children.length > 0) {
            target = this.children[0]
          }
          if (target) {
            this.selectedChild = target
            this.formData.childId = target.id
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    selectChild() {
      const items = this.children.map(c => c.nickname || c.name)
      uni.showActionSheet({
        itemList: items,
        success: (res) => {
          const idx = res.tapIndex
          if (idx >= 0 && idx < this.children.length) {
            this.selectedChild = this.children[idx]
            this.formData.childId = this.selectedChild.id
          }
        }
      })
    },
    onGradeChange(e) {
      this.formData.grade = e.detail.value + 1
    },
    onAlsoPurchaseChange(e) {
      this.alsoPurchase = e.detail.value
    },
    async submit() {
      if (!this.formData.childId) {
        uni.showToast({ title: '请选择孩子', icon: 'none' })
        return
      }

      uni.showLoading({ title: this.alsoPurchase ? '创建并购买中...' : '创建中...' })
      try {
        const familyId = uni.getStorageSync('familyId')
        const submitData = {
          childId: this.formData.childId,
          recordTitle: this.formData.recordTitle || '成长档案',
          height: this.formData.height || null,
          weight: this.formData.weight || null,
          school: this.formData.school || null,
          grade: this.formData.grade,
          academicPerformance: this.formData.academicPerformance || null,
          schoolProvince: this.formData.schoolProvince || null,
          schoolCity: this.formData.schoolCity || null,
          schoolDistrict: this.formData.schoolDistrict || null,
          schoolStreet: this.formData.schoolStreet || null,
          familyId: familyId
        }

        if (this.alsoPurchase) {
          // 同时购买测评
          submitData.alsoPurchaseAssessment = true
          submitData.packageId = 1 // 默认套餐 ID，实际应从套餐列表选择
          submitData.totalPrice = 29900 // 单位分，299 元
          submitData.discountAmount = 0
        }

        const res = await createGrowthRecord(submitData)
        uni.hideLoading()

        if (res.code === 200) {
          uni.showToast({ title: '创建成功', icon: 'success' })
          setTimeout(() => {
            if (this.alsoPurchase && res.data.order) {
              // 跳转到支付页面
              uni.navigateTo({
                url: '/pages/assessment/pay?orderNo=' + res.data.order.orderNo
              })
            } else {
              uni.navigateTo({
                url: '/pages/growth/detail?recordId=' + res.data.id
              })
            }
          }, 500)
        } else {
          uni.showToast({ title: res.message || '创建失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '创建失败', icon: 'none' })
      }
    },
    goToPurchase() {
      uni.navigateTo({
        url: '/pages/assessment/purchase'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #999;
}
.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.form-row {
  display: flex;
  gap: 20rpx;
}
.half {
  flex: 1;
}
.label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
  font-weight: bold;
}
.input {
  width: 100%;
  height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.child-select {
  display: flex;
  align-items: center;
  height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
}
.select-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.select-placeholder {
  flex: 1;
  font-size: 28rpx;
  color: #ccc;
}
.select-arrow {
  font-size: 32rpx;
  color: #ccc;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 10rpx;
}
.assessment-section {
  margin-top: 30rpx;
}
.section-divider {
  height: 1rpx;
  background: #E0E0E0;
  margin-bottom: 30rpx;
}
.section-header {
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.section-hint {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}
.btn-assessment {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
}
.checkbox-item {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
}
.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}
.checkbox-label input[type="checkbox"] {
  margin-right: 12rpx;
  width: 36rpx;
  height: 36rpx;
}
.checkbox-hint {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}
</style>