cfc/cfc-frontend/pages/assessment/apply.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">申请测评</text>
      <text class="subtitle">专业的DAN测评，了解孩子的专注力发展</text>
    </view>

    <!-- 成长规划师选择（可选） -->
    <view class="section">
      <view class="section-title">选择成长规划师（可选）</view>
      <view class="guide-selector">
        <view 
          class="guide-item" 
          :class="{ 'selected': selectedGuideId === null }"
          @click="selectGuide(null)"
        >
          <view class="guide-avatar guide-avatar-none">
            <text>🤝</text>
          </view>
          <view class="guide-info">
            <text class="guide-name">由系统安排</text>
            <text class="guide-price">购买后客服对接</text>
          </view>
          <view class="guide-check" v-if="selectedGuideId === null">✓</view>
        </view>
        <view 
          class="guide-item" 
          :class="{ 'selected': selectedGuideId === guide.guideId }"
          v-for="guide in availableGuides" 
          :key="guide.guideId"
          @click="selectGuide(guide)"
        >
          <image class="guide-avatar" :src="guide.guideAvatar || '/static/default-avatar.png'" />
          <view class="guide-info">
            <text class="guide-name">{{ guide.guideName }}</text>
            <text class="guide-price">¥{{ guide.price }}</text>
          </view>
          <view class="guide-check" v-if="selectedGuideId === guide.guideId">✓</view>
        </view>
      </view>
    </view>

    <!-- 测评类型选择 -->
    <view class="section">
      <view class="section-title">测评类型</view>
      <view class="type-selector">
        <view 
          class="type-item" 
          :class="{ 'selected': selectedType === type.value }"
          v-for="type in assessmentTypes" 
          :key="type.value"
          @click="selectType(type.value)"
        >
          <text class="type-icon">{{ type.icon }}</text>
          <text class="type-name">{{ type.name }}</text>
          <text class="type-desc">{{ type.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 预约时间 -->
    <view class="section">
      <view class="section-title">预约时间</view>
      <view class="date-picker">
        <picker mode="date" :value="appointmentDate" @change="onDateChange">
          <view class="picker-value">
            <text>{{ appointmentDate || '选择日期' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>
      <view class="time-picker">
        <picker mode="time" :value="appointmentTime" @change="onTimeChange">
          <view class="picker-value">
            <text>{{ appointmentTime || '选择时间' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>
    </view>

    <!-- 孩子选择 -->
    <view class="section">
      <view class="section-title">选择孩子</view>
      <view class="child-selector">
        <view 
          class="child-item" 
          :class="{ 'selected': selectedChildId === child.id }"
          v-for="child in children" 
          :key="child.id"
          @click="selectChild(child)"
        >
          <view class="child-avatar">{{ child.nickname ? child.nickname[0] : '?' }}</view>
          <view class="child-info">
            <text class="child-name">{{ child.nickname || '未命名' }}</text>
            <text class="child-age">{{ child.age || 0 }}岁</text>
          </view>
          <view class="child-check" v-if="selectedChildId === child.id">✓</view>
        </view>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="section" v-if="selectedGuideId">
      <view class="section-title">费用信息</view>
      <view class="price-info">
        <view class="price-row">
          <text class="price-label">测评费用</text>
          <text class="price-value">¥{{ totalPrice }}</text>
        </view>
        <view class="price-row">
          <text class="price-label">成长规划师</text>
          <text class="price-value">{{ selectedGuideName }}</text>
        </view>
        <view class="price-row" v-if="inviteCodeInfo">
          <text class="price-label">邀请码优惠</text>
          <text class="price-value discount">-¥{{ discountAmount }}</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="btn-submit" @click="submit">提交申请</button>
  </view>
</template>

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

export default {
  data() {
    return {
      availableGuides: [],
      selectedGuideId: null,
      selectedGuideName: '',
      selectedType: 'initial',
      appointmentDate: '',
      appointmentTime: '',
      selectedChildId: null,
      children: [],
      inviteCode: '',
      inviteCodeInfo: null,
      totalPrice: 0,
      discountAmount: 0
    }
  },
  onLoad(options) {
    // 如果有邀请码参数，自动填充
    if (options.inviteCode) {
      this.inviteCode = options.inviteCode
      this.validateInviteCode()
    }

    // 如果有套餐ID参数，自动选择
    if (options.packageId) {
      this.loadAvailableGuides(options.packageId)
    } else {
      this.loadAvailableGuides()
    }

    this.loadChildren()
  },
  methods: {
    async loadAvailableGuides(packageId) {
      try {
        const res = await getAvailableGuides(packageId)
        if (res.code === 200) {
          this.availableGuides = res.data || []
          // 如果有邀请码，自动选择对应的成长规划师
          if (this.inviteCodeInfo && this.inviteCodeInfo.guideId) {
            const guide = this.availableGuides.find(g => g.guideId === this.inviteInfo.guideId)
            if (guide) {
              this.selectGuide(guide)
            }
          }
        }
      } catch (e) {
        console.error('获取成长规划师列表失败', e)
      }
    },

    async loadChildren() {
      try {
        const res = await getChildren()
        if (res.code === 200) {
          this.children = res.data || []
          // 如果只有一个孩子，自动选择
          if (this.children.length === 1) {
            this.selectedChildId = this.children[0].id
          }
        }
      } catch (e) {
        console.error('获取孩子列表失败', e)
      }
    },

    selectGuide(guide) {
      this.selectedGuideId = guide.guideId
      this.selectedGuideName = guide.guideName
      this.calculatePrice()
    },

    selectType(type) {
      this.selectedType = type
    },

    onDateChange(e) {
      this.appointmentDate = e.detail.value
    },

    onTimeChange(e) {
      this.appointmentTime = e.detail.value
    },

    selectChild(child) {
      this.selectedChildId = child.id
    },

    calculatePrice() {
      if (!this.selectedGuideId) {
        this.totalPrice = 0
        return
      }

      const guide = this.availableGuides.find(g => g.guideId === this.selectedGuideId)
      if (guide) {
        this.totalPrice = guide.price
        this.discountAmount = 0
      }
    },

    async validateInviteCode() {
      if (!this.inviteCode) {
        return
      }

      try {
        const res = await validateInviteCode(this.inviteCode)
        if (res.code === 200) {
          this.inviteCodeInfo = res.data
          // 自动选择邀请码关联的成长规划师
          if (this.inviteCodeInfo.guideId) {
            const guide = this.availableGuides.find(g => g.guideId === this.inviteCodeInfo.guideId)
            if (guide) {
              this.selectGuide(guide)
            }
          }
        }
      } catch (e) {
        console.error('验证邀请码失败', e)
      }
    },

    async submit() {
      // 验证表单（成长规划师可选）
      if (!this.selectedType) {
        uni.showToast({ title: '请选择测评类型', icon: 'none' })
        return
      }

      if (!this.appointmentDate) {
        uni.showToast({ title: '请选择预约日期', icon: 'none' })
        return
      }

      if (!this.appointmentTime) {
        uni.showToast({ title: '请选择预约时间', icon: 'none' })
        return
      }

      if (!this.selectedChildId) {
        uni.showToast({ title: '请选择孩子', icon: 'none' })
        return
      }

      try {
        uni.showLoading({ title: '提交中...' })

        const userId = uni.getStorageSync('userId')
        const familyId = uni.getStorageSync('familyId')

        const res = await createAssessmentAppointment({
          userId: userId,
          familyId: familyId,
          childId: this.selectedChildId,
          teacherId: this.selectedGuideId,
          appointmentType: this.selectedType,
          appointmentDate: this.appointmentDate,
          appointmentTime: this.appointmentTime,
          durationMinutes: 60
        })

        uni.hideLoading()

        if (res.code === 200) {
          uni.showModal({
            title: '申请成功',
            content: '您的测评申请已提交，请等待成长规划师确认',
            showCancel: false,
            success: () => {
              uni.navigateBack()
            }
          })
        } else {
          uni.showToast({
            title: res.message || '提交失败',
            icon: 'none'
          })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.guide-selector,
.type-selector,
.child-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.guide-item,
.type-item,
.child-item {
  position: relative;
  background: #F8F8F8;
  border: 2rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 20rpx;
  min-width: 200rpx;
  flex: 1;
}

.guide-item.selected,
.type-item.selected,
.child-item.selected {
  border-color: #667eea;
  background: #F0F4FF;
}

.guide-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10rpx;
}

.guide-info,
.child-info {
  display: flex;
  flex-direction: column;
}

.guide-name,
.child-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.guide-price {
  font-size: 24rpx;
  color: #F97316;
  font-weight: bold;
}

.child-age {
  font-size: 24rpx;
  color: #999;
}

.guide-check,
.child-check {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #667eea;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.type-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 10rpx;
}

.type-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.type-desc {
  font-size: 24rpx;
  color: #999;
}

.child-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.date-picker,
.time-picker {
  margin-bottom: 20rpx;
}

.picker-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 40rpx;
  color: #999;
}

.price-info {
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.price-row:last-child {
  margin-bottom: 0;
}

.price-label {
  font-size: 28rpx;
  color: #666;
}

.price-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.price-value.discount {
  color: #F97316;
}

.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;
}
</style>