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

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">续费升级</text>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- CF值余额 -->
      <view class="cf-balance-card">
        <text class="balance-label">您的CF值余额</text>
        <text class="balance-value">{{ cfBalance }}</text>
        <text class="balance-equivalent">{{ cfBalance }} CF = ¥{{ (cfBalance * 0.01).toFixed(2) }}</text>
      </view>

      <!-- 续费信息 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">续费详情</text>
        </view>
        <view class="price-row">
          <text class="price-label">家庭会员年费</text>
          <text class="price-original">¥1,999</text>
        </view>
        <view class="price-row discount">
          <text class="price-label">CF值抵扣</text>
          <text class="price-discount">-¥{{ discountAmount }}</text>
        </view>
        <view class="price-divider"></view>
        <view class="price-row total">
          <text class="price-label">实付金额</text>
          <text class="price-total">¥{{ payAmount }}</text>
        </view>
        <text class="price-note" v-if="discountPercent > 0">已抵扣 {{ discountPercent }}%（{{ cfBalance }} CF值）</text>
      </view>

      <!-- 会员权益 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">年费会员权益</text>
        </view>
        <view class="benefit-grid">
          <view class="benefit-cell" v-for="(item, idx) in benefits" :key="idx">
            <text class="benefit-cell-icon">{{ item.icon }}</text>
            <text class="benefit-cell-text">{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 支付按钮 -->
      <view class="pay-wrap">
        <view class="pay-btn" :class="{ 'loading': submitting }" @tap="handlePay">
          <text class="btn-text">{{ submitting ? '处理中...' : '立即续费' }}</text>
        </view>
        <text class="pay-tip">支持微信支付/支付宝，续费后即时生效</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getRenewalInfo } from '../../utils/api.js'

export default {
  data() {
    return {
      submitting: false,
      cfBalance: 0,
      discount: 0,
      payAmount: 199900
    }
  },
  computed: {
    discountAmount() {
      return (this.discount * 0.01).toFixed(2)
    },
    discountPercent() {
      return this.cfBalance >= 19900 ? 100 : Math.round(this.discount / 19900 * 100)
    }
  },
  benefits: [
    { icon: '📋', text: '无限报告上传' },
    { icon: '🤖', text: 'AI报告解析' },
    { icon: '📝', text: '无限方案生成' },
    { icon: '🏆', text: '全量闯关奖励' },
    { icon: '👨‍👩‍👧', text: '最多5名成员' },
    { icon: '🎯', text: '专属规划师' }
  ],
  onLoad() {
    this.loadInfo()
  },
  methods: {
    goBack() { uni.navigateBack() },
    async loadInfo() {
      try {
        var res = await getRenewalInfo()
        if (res.data && res.data.success) {
          this.cfBalance = res.data.cfBalance
          this.discount = res.data.discount
          this.payAmount = res.data.payAmount
        }
      } catch (e) {
        console.log('加载续费信息失败', e)
      }
    },
    handlePay() {
      // TODO: 对接真实支付
      uni.showModal({
        title: '续费确认',
        content: '确认支付 ¥' + (this.payAmount / 100).toFixed(2) + ' 续费家庭会员年费？',
        success: (res) => {
          if (res.confirm) {
            this.submitting = true
            setTimeout(() => {
              this.submitting = false
              uni.showToast({ title: '续费成功', icon: 'success' })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #FFF7ED; }
.nav-bar { display: flex; align-items: center; height: 88rpx; padding-top: env(safe-area-inset-top); background: #fff; border-bottom: 1rpx solid #f0f0f0; position: relative; }
.nav-back { position: absolute; left: 24rpx; top: 0; bottom: 0; display: flex; align-items: center; }
.back-text { font-size: 28rpx; color: #F97316; }
.nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: bold; color: #333; }
.content { height: calc(100vh - 88rpx); }

.cf-balance-card { background: linear-gradient(135deg, #667eea, #764ba2); padding: 40rpx 32rpx; text-align: center; }
.balance-label { font-size: 24rpx; color: rgba(255,255,255,0.8); display: block; }
.balance-value { font-size: 64rpx; font-weight: bold; color: #fff; display: block; margin: 8rpx 0; }
.balance-equivalent { font-size: 24rpx; color: rgba(255,255,255,0.9); display: block; }

.card { margin: 16rpx 24rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.card-header { padding: 24rpx; border-bottom: 1rpx solid #f5f5f5; }
.card-title { font-size: 28rpx; font-weight: bold; color: #333; }

.price-row { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 24rpx; }
.price-label { font-size: 26rpx; color: #666; }
.price-original { font-size: 26rpx; color: #999; text-decoration: line-through; }
.price-row.discount { background: #FFF3E0; }
.price-discount { font-size: 26rpx; color: #F97316; font-weight: bold; }
.price-divider { height: 1rpx; background: #e0e0e0; margin: 0 24rpx; }
.price-row.total { background: #FFF8E1; }
.price-total { font-size: 36rpx; color: #F97316; font-weight: bold; }
.price-note { font-size: 22rpx; color: #999; text-align: center; padding: 12rpx 24rpx 24rpx; display: block; }

.benefit-grid { display: flex; flex-wrap: wrap; padding: 16rpx 24rpx; }
.benefit-cell { width: calc(50% - 12rpx); display: flex; align-items: center; gap: 12rpx; padding: 16rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.benefit-cell-icon { font-size: 32rpx; }
.benefit-cell-text { font-size: 24rpx; color: #333; }

.pay-wrap { padding: 32rpx 24rpx 40rpx; text-align: center; }
.pay-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; text-align: center; padding: 28rpx 0; border-radius: 16rpx; font-size: 32rpx; font-weight: bold; }
.pay-btn.loading { opacity: 0.6; }
.pay-tip { font-size: 22rpx; color: #999; margin-top: 16rpx; display: block; }
</style>