|
|
@@ -0,0 +1,167 @@
|
|
|
+<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>
|
Sisyphus