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">{{ 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="package-list">
        <view 
          class="package-item" 
          :class="{ 'selected': selectedPackageId === pkg.id }"
          v-for="pkg in packages" 
          :key="pkg.id"
          @click="selectPackage(pkg)"
        >
          <view class="package-header">
            <text class="package-name">{{ pkg.name }}</text>
            <view class="package-price">
              <text class="price">{{ formatPriceWithSymbol(pkg.price) }}</text>
              <text class="original-price" v-if="pkg.originalPrice">{{ formatPriceWithSymbol(pkg.originalPrice) }}</text>
            </view>
          </view>
          <view class="package-desc">{{ pkg.description }}</view>
          <view class="package-features">
            <view class="feature-item" v-for="(feature, index) in pkg.features" :key="index">
              <text class="feature-icon">✓</text>
              <text class="feature-text">{{ feature }}</text>
            </view>
          </view>
          <view class="package-check" v-if="selectedPackageId === pkg.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">{{ formatPriceWithSymbol(selectedPackage.price) }}</text>
        </view>
        <view class="price-row" v-if="selectedGuideId">
          <text class="price-label">成长规划师费用</text>
          <text class="price-value">{{ formatPriceWithSymbol(guidePrice) }}</text>
        </view>
        <view class="price-row" v-if="discountAmount > 0">
          <text class="price-label">邀请码优惠</text>
          <text class="price-value discount">-{{ formatPriceWithSymbol(discountAmount) }}</text>
        </view>
        <view class="price-row total">
          <text class="price-label">总计</text>
          <text class="price-value">{{ formatPriceWithSymbol(totalPrice) }}</text>
        </view>
      </view>
    </view>

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

<script>
import { getAvailableGuides, getPackagePrice, createAssessmentOrder, createVirtualPayOrder, requestVirtualPayment, getAssessmentOrderDetail } 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,
      submitting: false
    }
  },
  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.submitting) return
      if (!this.selectedPackageId) {
        uni.showToast({ title: '请选择任务模板', icon: 'none' })
        return
      }
      if (!this.selectedGuideId) {
        uni.showToast({ title: '请选择成长规划师', icon: 'none' })
        return
      }
      var memberId = uni.getStorageSync('currentChildId')
      if (!memberId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }

      this.submitting = true
      uni.showLoading({ title: '创建订单中...' })

      var userId = uni.getStorageSync('userId')
      var familyId = uni.getStorageSync('familyId')
      var self = this

      try {
        var createRes = await createAssessmentOrder({
          familyId: familyId,
          userId: userId,
          memberId: memberId,
          guideId: this.selectedGuideId,
          guideName: this.selectedGuideName,
          packageId: this.selectedPackageId,
          packageName: this.selectedPackage ? this.selectedPackage.name : '',
          totalPrice: this.totalPrice,
          discountAmount: this.discountAmount
        })

        if (createRes.code !== 200 || !createRes.data || !createRes.data.orderNo) {
          uni.showToast({ title: '创建订单失败', icon: 'none' })
          return
        }

        var orderNo = createRes.data.orderNo
        // 支付（内联返回 VirtualPayParamsDTO；testMode 返回 null 表示 mock 直接支付成功）
        var payRes = await createVirtualPayOrder(orderNo, 'ASSESSMENT')
        if (payRes.code !== 200) {
          uni.showToast({ title: payRes.message || '支付失败', icon: 'none' })
          return
        }

        if (!payRes.data) {
          // testMode：mock 已直接标记支付成功 → 跳预约页
          uni.showToast({ title: '支付成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateTo({ url: '/pages/assessment/apply' })
          }, 800)
          return
        }

        // 真实模式：拉起虚拟支付
        requestVirtualPayment(payRes.data, {
          success: function() {
            uni.showToast({ title: '支付成功，确认中…', icon: 'none' })
            self.pollOrderStatus(orderNo)
          },
          fail: function() {
            uni.showToast({ title: '支付未完成', icon: 'none' })
          }
        })
      } catch (e) {
        if (e.code === 46001) {
          uni.showToast({ title: '该商品暂未开放购买', icon: 'none' })
        } else {
          uni.showToast({ title: e.message || '支付失败', icon: 'none' })
        }
      } finally {
        this.submitting = false
        uni.hideLoading()
      }
    },
    pollOrderStatus: function(orderNo) {
      var self = this
      var times = 0
      var timer = setInterval(function() {
        times++
        getAssessmentOrderDetail(orderNo).then(function(res) {
          var order = res.data || {}
          if (order.status === 'paid') {
            clearInterval(timer)
            uni.showToast({ title: '支付成功', icon: 'success' })
            setTimeout(function() {
              uni.navigateTo({ url: '/pages/assessment/apply' })
            }, 800)
          } else if (times >= 5) {
            clearInterval(timer)
            uni.navigateTo({ url: '/pages/assessment/apply' })
          }
        }).catch(function() {
          if (times >= 5) { clearInterval(timer); uni.navigateTo({ url: '/pages/assessment/apply' }) }
        })
      }, 2000)
    }
  }
}
</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>