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">{{ formatPriceWithSymbol(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="quotaId">
      <view class="section-title">额度信息</view>
      <view class="quota-info">
        <text class="quota-label">本次将消耗 1 次测评额度</text>
        <text class="quota-remaining" v-if="quotaRemaining !== null">
          剩余 {{ quotaRemaining }} 次
        </text>
      </view>
    </view>

    <!-- 价格信息（非额度预约时显示） -->
    <view class="section" v-if="!quotaId && selectedGuideId">
      <view class="section-title">费用信息</view>
      <view class="price-info">
        <view class="price-row">
          <text class="price-label">测评费用</text>
          <text class="price-value">{{ formatPriceWithSymbol(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">-{{ formatPriceWithSymbol(discountAmount) }}</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="btn-submit" :loading="submitting" :disabled="submitting" @click="submit">{{ quotaId ? '消耗额度预约' : '提交申请' }}</button>
  </view>
</template>

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

export default {
  data() {
    return {
      quotaId: null,
      quotaRemaining: null,
      availableGuides: [],
      selectedGuideId: null,
      selectedGuideName: '',
      selectedType: 'initial',
      appointmentDate: '',
      appointmentTime: '',
      selectedChildId: null,
      children: [],
      inviteCode: '',
      inviteCodeInfo: null,
      totalPrice: 0,
      discountAmount: 0,
      submitting: false
    }
  },
  onLoad(options) {
    this.quotaId = options.quotaId || null

    if (this.quotaId) {
      this.loadQuotaInfo()
    }

    if (options.inviteCode) {
      this.inviteCode = options.inviteCode
      this.validateInviteCode()
    }

    this.loadChildren()
  },
  methods: {
    async loadQuotaInfo() {
      try {
        const res = await getAssessmentQuotas()
        if (res.code === 200) {
          const quotas = res.data || []
          const current = quotas.find(q => q.id == this.quotaId)
          if (current) {
            this.quotaRemaining = current.remainingSessions
          }
        }
      } catch (e) {
        console.error('获取额度信息失败', e)
      }
    },

    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.inviteCodeInfo.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.submitting) return
      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
      }

      this.submitting = true
      uni.showLoading({ title: '提交中...' })

      try {
        if (this.quotaId) {
          const res = await createAssessmentAppointmentWithQuota({
            memberId: this.selectedChildId,
            guideId: this.selectedGuideId,
            assessorId: this.selectedGuideId,
            quotaId: this.quotaId,
            appointmentDate: this.appointmentDate,
            appointmentTime: this.appointmentTime,
            notes: ''
          })
          if (res.code === 200) {
            uni.showModal({
              title: '预约成功',
              content: '您的测评预约已提交，请等待成长规划师确认',
              showCancel: false,
              success: () => uni.navigateBack()
            })
          } else {
            uni.showToast({ title: res.message || '预约失败', icon: 'none' })
          }
        } else {
          const res = await createAssessmentAppointment({
            memberId: this.selectedChildId,
            teacherId: this.selectedGuideId,
            assessorId: this.selectedGuideId,
            appointmentType: this.selectedType,
            appointmentDate: this.appointmentDate,
            appointmentTime: this.appointmentTime,
            durationMinutes: 60
          })
          if (res.code === 200) {
            uni.showModal({
              title: '申请成功',
              content: '您的测评申请已提交，请等待成长规划师确认',
              showCancel: false,
              success: () => uni.navigateBack()
            })
          } else {
            uni.showToast({ title: res.message || '提交失败', icon: 'none' })
          }
        }
      } catch (e) {
        uni.showToast({ title: '提交失败', icon: 'none' })
      } finally {
        this.submitting = false
        uni.hideLoading()
      }
    }
  }
}
</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>