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

<template>
  <view class="container">
    <view class="header">
      <text class="title">创建成长档案</text>
      <text class="subtitle">选择创建方式</text>
    </view>

    <view v-if="hasFamily">
      <view class="source-type-section">
        <view class="source-card" :class="sourceType === 'manual' ? 'source-active' : ''" @click="sourceType = 'manual'">
          <text class="source-icon">📝</text>
          <text class="source-name">手动创建</text>
          <text class="source-desc">填写孩子基本信息</text>
        </view>
        <view class="source-card" :class="sourceType === 'upload' ? 'source-active' : ''" @click="sourceType = 'upload'">
          <text class="source-icon">📄</text>
          <text class="source-name">上传报告</text>
          <text class="source-desc">上传PDF测评报告</text>
        </view>
        <view class="source-card" :class="sourceType === 'assessment' ? 'source-active' : ''" @click="sourceType = 'assessment'">
          <text class="source-icon">🎓</text>
          <text class="source-name">购买测评</text>
          <text class="source-desc">购买DAN测评服务</text>
        </view>
      </view>

      <view class="form" v-if="sourceType === 'manual'">
      <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>

        <button class="btn-submit" @click="submitManual">创建档案</button>
      </view>

      <view class="redirect-section" v-if="sourceType === 'upload'">
        <view class="redirect-card">
          <text class="redirect-desc">上传PDF格式的DAN测评报告，系统将自动解析报告内容并创建成长档案。</text>
          <button class="btn-submit" @click="goUpload">上传测评报告</button>
        </view>
      </view>

      <view class="redirect-section" v-if="sourceType === 'assessment'">
        <view class="redirect-card">
          <text class="redirect-desc">购买DAN测评服务后，规划师完成测评录入将自动创建成长档案，无需手动填写。</text>
          <button class="btn-submit" @click="goPurchase">购买测评服务</button>
        </view>
      </view>
    </view>

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

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

export default {
  data() {
    return {
      sourceType: 'manual',
      children: [],
      selectedChild: null,
      targetChildId: '',
      gradeOptions: ['一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三'],
      formData: {
        memberId: null,
        recordTitle: '',
        height: '',
        weight: '',
        school: '',
        grade: null,
        academicPerformance: '',
        schoolProvince: '',
        schoolCity: '',
        schoolDistrict: '',
        schoolStreet: ''
      }
    }
  },
  onLoad(options) {
    this.targetChildId = options.memberId || ''
    if (options.sourceType) {
      this.sourceType = options.sourceType
    }
    this.loadChildren()
    if (this.targetChildId) {
      this.formData.recordTitle = '成长档案 - ' + this.getCurrentDate()
    }
  },
  computed: {
    hasFamily: function() {
      return this.$store.getters.hasFamily
    }
  },
  methods: {
    getCurrentDate() {
      var d = new Date()
      return d.getFullYear() + '年' + (d.getMonth() + 1) + '月'
    },
    async loadChildren() {
      try {
        var res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          var target = null
          if (this.targetChildId) {
            target = this.children.find(function(c) { return String(c.id) === String(this.targetChildId) }.bind(this))
          }
          if (!target && this.children.length > 0) {
            target = this.children[0]
          }
          if (target) {
            this.selectedChild = target
            this.formData.memberId = target.id
          }
        }
      } catch (e) {
        console.error(e)
      }
    },
    selectChild() {
      var items = this.children.map(function(c) { return c.nickname || c.name })
      var self = this
      uni.showActionSheet({
        itemList: items,
        success: function(res) {
          var idx = res.tapIndex
          if (idx >= 0 && idx < self.children.length) {
            self.selectedChild = self.children[idx]
            self.formData.memberId = self.selectedChild.id
          }
        }
      })
    },
    onGradeChange(e) {
      this.formData.grade = e.detail.value + 1
    },
    async submitManual() {
      if (!this.formData.memberId) {
        uni.showToast({ title: '请选择孩子', icon: 'none' })
        return
      }

      uni.showLoading({ title: '创建中...' })
      try {
        var submitData = {
          memberId: this.formData.memberId,
          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
        }

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

        if (res.code === 200) {
          uni.showToast({ title: '创建成功', icon: 'success' })
          setTimeout(function() {
            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' })
      }
    },
    goUpload() {
      var url = '/pages/growth/upload'
      if (this.targetChildId) {
        url += '?memberId=' + this.targetChildId
      }
      uni.navigateTo({ url: url })
    },
    goPurchase() {
      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;
}
.source-type-section {
  display: flex;
  gap: 16rpx;
  margin-bottom: 30rpx;
}
.source-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  text-align: center;
  border: 2rpx solid #E0E0E0;
}
.source-active {
  border-color: #667eea;
  background: #f5f3ff;
}
.source-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 8rpx;
}
.source-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}
.source-desc {
  font-size: 20rpx;
  color: #999;
  display: block;
}
.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;
}
.picker-input {
  height: 76rpx;
  line-height: 76rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}
.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;
}
.redirect-section {
  margin-top: 20rpx;
}
.redirect-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}
.redirect-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  margin-bottom: 30rpx;
}
</style>