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

<template>
  <view class="container">
    <view class="header">
      <text class="title">选择测评套餐</text>
      <text class="subtitle">选择适合孩子的测评套餐</text>
    </view>

    <!-- 成长规划师选择 -->
    <view class="section" v-if="!guideId">
      <view class="section-title">选择成长规划师</view>
      <view class="guide-selector">
        <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="package-list">
        <view 
          class="package-item" 
          :class="{ 'selected': selectedPackageId === package.id }"
          v-for="package in packages" 
          :key="package.id"
          @click="selectPackage(package)"
        >
          <view class="package-header">
            <text class="package-name">{{ package.name }}</text>
            <view class="package-price">
              <text class="price">¥{{ package.price }}</text>
              <text class="original-price" v-if="package.originalPrice">¥{{ package.originalPrice }}</text>
            </view>
          </view>
          <view class="package-desc">{{ package.description }}</view>
          <view class="package-features">
            <view class="feature-item" v-for="(feature, index) in package.features" :key="index">
              <text class="feature-icon">✓</text>
              <text class="feature-text">{{ feature }}</text>
            </view>
          </view>
          <view class="package-check" v-if="selectedPackageId === package.id">✓</view>
        </view>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="section" v-if="selectedPackageId">
      <view class="section-title">费用明细</view>
      <view class="price-breakdown">
        <view class="price-row">
          <text class="price-label">套餐价格</text>
          <text class="price-value">¥{{ selectedPackage.price }}</text>
        </view>
        <view class="price-row" v-if="selectedGuideId">
          <text class="price-label">成长规划师费用</text>
          <text class="price-value">¥{{ guidePrice }}</text>
        </view>
        <view class="price-row" v-if="discountAmount > 0">
          <text class="price-label">邀请码优惠</text>
          <text class="price-value discount">-¥{{ discountAmount }}</text>
        </view>
        <view class="price-row total">
          <text class="price-label">总计</text>
          <text class="price-value">¥{{ totalPrice }}</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="btn-submit" @click="submit" :disabled="!selectedPackageId">确认购买</button>
  </view>
</template>

<script>
import { getAvailableGuides, getPackagePrice, createPackageOrder } from '../../utils/api.js'

export default {
  data() {
    return {
      guideId: null,
      selectedGuideId: null,
      selectedGuideName: '',
      selectedPackageId: null,
      selectedPackage: null,
      availableGuides: [],
      packages: [],
      totalPrice: 0,
      guidePrice: 0,
      discountAmount: 0,
      inviteCode: '',
      inviteCodeInfo: null
    }
  },
  onLoad(options) {
    // 如果有邀请码参数，自动填充
    if (options.inviteCode) {
      this.inviteCode = options.inviteCode
      this.validateInviteCode()
    }

    // 如果有成长规划师ID参数，自动选择
    if (options.guideId) {
      this.guideId = options.guideId
    }

    this.loadPackages()
    this.loadAvailableGuides()
  },
  methods: {
    async loadPackages() {
      try {
        // TODO: 从后端获取套餐列表
        // 这里简化处理，使用模拟数据
        this.packages = [
          {
            id: 1,
            name: '基础测评套餐',
            description: '包含注意力、专注力、记忆力三项基础测评',
            price: 299,
            originalPrice: 399,
            features: ['注意力测评', '专注力测评', '记忆力测评', '测评报告', '成长建议']
          },
          {
            id: 2,
            name: '全面测评套餐',
            description: '包含五项全面测评，提供详细分析报告',
            price: 499,
            originalPrice: 699,
            features: ['注意力测评', '专注力测评', '记忆力测评', '逻辑思维测评', '综合分析报告', '个性化成长建议', '后续跟踪']
          },
          {
            id: 3,
            name: '高级测评套餐',
            name: '高级测评套餐',
            description: '包含所有测评项目，提供专家一对一解读',
            price: 799,
            originalPrice: 999,
            features: ['所有测评项目', '专家一对一解读', '详细分析报告', '个性化成长方案', '后续跟踪服务', '家长指导建议']
          }
        ]
      } catch (e) {
        console.error('获取套餐列表失败', e)
      }
    },

    async loadAvailableGuides() {
      try {
        const packageId = this.selectedPackageId ? this.selectedPackageId : 1
        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)
            }
          } else if (this.guideId) {
            // 如果有成长规划师ID参数，自动选择
            const guide = this.availableGuides.find(g => g.guideId === this.guideId)
            if (guide) {
              this.selectGuide(guide)
            }
          }
        }
      } catch (e) {
        console.error('获取成长规划师列表失败', e)
      }
    },

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

    selectPackage(pkg) {
      this.selectedPackageId = pkg.id
      this.selectedPackage = pkg
      this.calculatePrice()
    },

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

      this.totalPrice = this.selectedPackage.price
      this.guidePrice = 0
      this.discountAmount = 0

      if (this.selectedGuideId) {
        const guide = this.availableGuides.find(g => g.guideId === this.selectedGuideId)
        if (guide) {
          this.guidePrice = guide.price
          this.totalPrice += guide.price
        }
      }

      if (this.inviteCodeInfo && this.inviteCodeInfo.discountAmount) {
        this.discountAmount = this.inviteCodeInfo.discountAmount
        this.totalPrice -= this.discountAmount
      }
    },

    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.selectedPackageId) {
        uni.showToast({ title: '请选择套餐', icon: 'none' })
        return
      }

      try {
        uni.showLoading({ title: '创建订单中...' })

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

        const res = await createPackageOrder({
          userId: userId,
          familyId: familyId,
          packageId: this.selectedPackageId,
          guideId: this.selectedGuideId,
          inviteCode: this.inviteCode,
          price: this.totalPrice,
          payMethod: 'wechat'
        })

        uni.hideLoading()

        if (res.code === 200) {
          // 跳转到支付页面
          uni.navigateTo({
            url: `/pages/assessment/purchase?orderNo=${res.data.orderNo}&totalPrice=${this.totalPrice}`
          })
        } 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,
.package-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.guide-item {
  position: relative;
  display: flex;
  align-items: center;
  background: #F8F8F8;
  border: 2rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 20rpx;
}

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

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

.guide-info {
  flex: 1;
}

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

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

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

.package-item {
  position: relative;
  background: #F8F8F8;
  border: 2rpx solid #E0E0E0;
  border-radius: 10rpx;
  padding: 20rpx;
}

.package-item.selected {
  border-color: #667eea;
  background: #F0F4FF;
}

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

.package-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.package-price {
  text-align: right;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.package-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.package-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  background: #E8F5E9;
  padding: 8rpx 12rpx;
  border-radius: 20rpx;
}

.feature-icon {
  color: #4CAF50;
  font-size: 24rpx;
  margin-right: 8rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
}

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

.price-breakdown {
  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;
}

.price-row.total .price-label {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.price-row.total .price-value {
  font-size: 36rpx;
  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;
}

.btn-submit[disabled] {
  background: #CCCCCC;
}
</style>