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

<template>
  <view class="container">
    <view class="header">
      <text class="title">确认订单</text>
      <text class="subtitle">请确认测评订单信息并完成支付</text>
    </view>

    <!-- 订单信息 -->
    <view class="section">
      <view class="section-title">订单详情</view>
      <view class="info-row">
        <text class="info-label">套餐名称</text>
        <text class="info-value">{{ packageName }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">成长规划师</text>
        <text class="info-value">{{ guideName }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">预约日期</text>
        <text class="info-value">{{ appointmentDate }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">预约时间</text>
        <text class="info-value">{{ appointmentTime }}</text>
      </view>
    </view>

    <!-- 费用信息 -->
    <view class="section">
      <view class="section-title">费用信息</view>
      <view class="price-row">
        <text class="price-label">测评费用</text>
        <text class="price-value">¥{{ totalPrice }}</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 highlight">¥{{ actualPrice }}</text>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="section">
      <view class="section-title">支付方式</view>
      <view class="pay-methods">
        <view class="pay-method-item" :class="{ active: payMethod === 'wechat' }" @click="payMethod = 'wechat'">
          <text class="pay-icon">💳</text>
          <text class="pay-name">微信支付</text>
          <view class="pay-radio" v-if="payMethod === 'wechat'">
            <view class="radio-inner" />
          </view>
        </view>
        <view class="pay-method-item" :class="{ active: payMethod === 'alipay' }" @click="payMethod = 'alipay'">
          <text class="pay-icon">🔷</text>
          <text class="pay-name">支付宝</text>
          <view class="pay-radio" v-if="payMethod === 'alipay'">
            <view class="radio-inner" />
          </view>
        </view>
      </view>
    </view>

    <button class="btn-submit" @click="handlePay">确认支付 ¥{{ actualPrice }}</button>
  </view>
</template>

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

export default {
  data() {
    return {
      packageName: '',
      guideName: '',
      appointmentDate: '',
      appointmentTime: '',
      totalPrice: '0',
      discountAmount: '0',
      actualPrice: '0',
      payMethod: 'wechat',
      childId: null,
      guideId: null,
      packageId: null
    }
  },
  onLoad(options) {
    this.packageName = decodeURIComponent(options.packageName || 'DAN专注力测评')
    this.guideName = decodeURIComponent(options.guideName || '')
    this.appointmentDate = options.appointmentDate || ''
    this.appointmentTime = options.appointmentTime || ''
    this.totalPrice = options.totalPrice || '0'
    this.discountAmount = options.discountAmount || '0'
    this.actualPrice = options.actualPrice || this.totalPrice
    this.childId = options.childId || null
    this.guideId = options.guideId || null
    this.packageId = options.packageId || null
  },
  methods: {
    async handlePay() {
      if (!this.guideId) {
        uni.showToast({ title: '请选择成长规划师', icon: 'none' })
        return
      }
      try {
        uni.showLoading({ title: '创建订单中...' })
        const res = await createAssessmentAppointment({
          childId: this.childId,
          guideId: this.guideId,
          packageId: this.packageId,
          appointmentDate: this.appointmentDate,
          appointmentTime: this.appointmentTime,
          notes: '',
          totalPrice: this.totalPrice,
          guideName: this.guideName,
          packageName: this.packageName,
          discountAmount: this.discountAmount
        })
        if (res.code !== 200) {
          uni.hideLoading()
          return
        }
        const orderNo = res.data.orderNo
        uni.showLoading({ title: '支付中...' })
        const payRes = await payAssessmentOrder(orderNo, this.payMethod)
        uni.hideLoading()
        if (payRes.code === 200) {
          uni.removeStorageSync('assessmentFlowData')
          uni.removeStorageSync('assessmentChildInfo')
          uni.showModal({
            title: '支付成功',
            content: '您的测评订单已支付，请按时参加测评',
            showCancel: false,
            success: () => {
              uni.redirectTo({ url: '/pages/assessment/results' })
            }
          })
        } else {
          uni.showToast({ title: payRes.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: 40rpx 0 30rpx;
}
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #666;
}
.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #eee;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  font-size: 28rpx;
}
.info-label { color: #666; }
.info-value { color: #333; font-weight: 500; }
.price-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  font-size: 28rpx;
}
.price-label { color: #666; }
.price-value { color: #333; font-weight: bold; }
.price-value.discount { color: #F97316; }
.price-row.total {
  margin-top: 16rpx;
  padding-top: 24rpx;
  border-top: 1rpx dashed #eee;
}
.price-value.highlight {
  font-size: 36rpx;
  color: #F97316;
}
.pay-methods {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.pay-method-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #F8F8F8;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
}
.pay-method-item.active {
  border-color: #667eea;
  background: #F0F4FF;
}
.pay-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}
.pay-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}
.pay-radio {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio-inner {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #667eea;
}
.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;
  margin-bottom: 40rpx;
}
</style>