num/client/pages/payment/index.vue

<template>
  <view class="page-payment">
    <view class="plan-card">
      <view class="plan-header">
        <text class="plan-name">VIP 会员</text>
        <text class="plan-price">¥398</text>
        <text class="plan-period">/ 年</text>
      </view>
      <view class="plan-features">
        <text class="feature">✓ 无限次数字能量分析</text>
        <text class="feature">✓ AI 深度解读报告</text>
        <text class="feature">✓ 号码标注与标签管理</text>
        <text class="feature">✓ 历史记录永久保存</text>
        <text class="feature">✓ 推广赚取佣金</text>
      </view>
    </view>

    <view class="order-summary">
      <text class="summary-title">订单摘要</text>
      <view class="summary-row">
        <text>VIP 会员年费</text>
        <text>¥398</text>
      </view>
      <view class="summary-row total">
        <text>合计</text>
        <text>¥398</text>
      </view>
    </view>

    <button class="pay-btn" @click="handlePay" :disabled="paying">
      {{ paying ? '支付中...' : '立即支付 ¥398' }}
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { payApi } from '@/utils/api'

const paying = ref(false)

async function handlePay() {
  paying.value = true
  try {
    const order = await payApi.create({ totalFee: 39800, payType: 'wxpay' })
    // Dev mode — WxPay returns mock prepay params directly
    if (order.mock) {
      // In dev/mock mode, simulate payment success
      uni.showToast({ title: '支付成功!', icon: 'success' })
      setTimeout(() => uni.navigateBack(), 1500)
    } else if (order.prepayId) {
      // Real WeChat Pay — invoke payment SDK
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: order.timeStamp,
        nonceStr: order.nonceStr,
        package: order.package,
        signType: order.signType || 'MD5',
        paySign: order.paySign,
        success: () => {
          uni.showToast({ title: '支付成功!', icon: 'success' })
          setTimeout(() => uni.navigateBack(), 1500)
        },
        fail: () => {
          uni.showToast({ title: '支付取消', icon: 'none' })
        }
      })
    }
  } catch (e) {
    uni.showToast({ title: '支付失败: ' + (e.message || ''), icon: 'none' })
  } finally {
    paying.value = false
  }
}
</script>

<style scoped lang="scss">
.page-payment { padding: 16px; }
.plan-card {
  background: #fff; border-radius: 16px; padding: 24px;
  text-align: center; margin-bottom: 16px;
}
.plan-header { margin-bottom: 20px; }
.plan-name { font-size: 20px; font-weight: 700; color: #1F2937; display: block; }
.plan-price {
  font-size: 36px; font-weight: 800; color: #3B82F6; display: inline; margin-top: 8px;
}
.plan-period { font-size: 14px; color: #6B7280; }
.plan-features { text-align: left; }
.feature {
  display: block; padding: 6px 0; color: #4B5563; font-size: 14px;
}
.order-summary {
  background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 24px;
}
.summary-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; display: block; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.summary-row.total { border-top: 1px solid #E5E7EB; margin-top: 8px; padding-top: 12px; font-weight: 700; }
.pay-btn {
  width: 100%; height: 48px; background: #3B82F6; color: #fff;
  border: none; border-radius: 12px; font-size: 18px; line-height: 48px;
}
.pay-btn[disabled] { opacity: 0.6; }
</style>