docs: 会员支付/升级实现计划（upgrade→pay→result 三段式 + 原价配置）

docs/superpowers/plans/2026-08-09-membership-pay-upgrade.md

@@ -0,0 +1,1326 @@
+# 会员支付/升级页面实现计划（方案 B）
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 将会员开通/续费链路拆分为「套餐选择 upgrade → 订单确认 pay → 支付结果 result」三段式，并支持会员价格「原价/划线价」配置展示。
+
+**架构：** 后端仅增强 `/api/membership/plans` 返回原价字段 + sys_config 新增 4 个原价键（零表结构变更）；前端新增 pay.vue、result.vue，改造 upgrade.vue（移除支付逻辑），api.js 修复 createOrder 透传 couponId。
+
+**技术栈：** Spring Boot 2.7.18 + MyBatis-Plus（后端）/ uni-app Vue 2 Options API（小程序前端）/ 微信虚拟支付 `requestVirtualPayment`
+
+**设计文档：** `docs/superpowers/specs/2026-08-09-membership-pay-upgrade-design.md`
+
+**验证方式（本项目约定）：**
+- 后端：`cd cfc-backend && mvn clean compile`（唯一验证方式，不做运行时验证）
+- 前端：提取 `<script>` 块后 `node --check` 做语法校验；**禁止**执行 `npm run build:mp-weixin`（必须用 HBuilderX 打包，Agent 不做）
+
+---
+
+## 文件结构
+
+| 文件 | 动作 | 职责 |
+|------|------|------|
+| `cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java` | 修改 | SysConfig 种子区加 4 个原价键（幂等） |
+| `cfc-backend/src/main/java/com/etotem/cfc/controller/MembershipController.java` | 修改 | `getPricingPlans()` 增加 originalYearly/originalMonthly/originalQuarterly |
+| `cfc-frontend/utils/api.js` | 修改 | `createOrder` 增加 couponId 透传（第 4 参数） |
+| `cfc-frontend/pages/membership/upgrade.vue` | 修改 | 移除支付/优惠券逻辑；按钮改「下一步」；修会员状态判断 bug；价格区划线原价 |
+| `cfc-frontend/pages/membership/pay.vue` | 创建 | 订单确认：商品明细 + 优惠券 Picker + 拆单提示 + 支付调用 |
+| `cfc-frontend/pages/membership/result.vue` | 创建 | 支付结果：成功态（赠券）/失败态（续付入口） |
+| `cfc-frontend/pages.json` | 修改 | `pages/membership` 分包注册 pay、result 两页 |
+
+---
+
+## 任务 1：后端 sys_config 新增原价键
+
+**文件：**
+- 修改：`cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java`（SysConfig 种子区，约第 1040 行 `member_fee_premium_monthly` 之后）
+
+- [ ] **步骤 1：在 SysConfig 种子区添加 4 个原价键**
+
+在 `insertSysConfigSeed("member_fee_premium_monthly", "131400", "高级家庭会员月费（分）");` 这一行之后追加：
+
+```java
+            insertSysConfigSeed("member_fee_family_original_yearly", "199900", "家庭会员年费原价（分）");
+            insertSysConfigSeed("member_fee_family_original", "199900", "家庭会员原价兜底（分）");
+            insertSysConfigSeed("member_fee_premium_original", "1599900", "高级会员年费原价（分）");
+            insertSysConfigSeed("member_fee_premium_original_monthly", "159900", "高级会员月费原价（分）");
+```
+
+注意缩进与相邻行一致（`insertSysConfigSeed` 调用在 try 块内，前导 12 空格）。
+
+- [ ] **步骤 2：验证编译**
+
+运行：`cd cfc-backend && mvn clean compile`
+预期：`BUILD SUCCESS`（无编译错误）
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java
+git commit -m "feat: 会员原价配置(sys_config 新增4键: family/premium 年费月费原价)"
+```
+
+---
+
+## 任务 2：后端 `/api/membership/plans` 增加原价字段
+
+**文件：**
+- 修改：`cfc-backend/src/main/java/com/etotem/cfc/controller/MembershipController.java`（`getPricingPlans()` 方法，第 317-348 行）
+
+- [ ] **步骤 1：修改 getPricingPlans() 增加原价字段**
+
+将 `getPricingPlans()` 中三个价格分支各补充原价字段：
+
+```java
+            // 付费等级价格从 sys_config 读取
+            if ("FAMILY".equals(level.getLevelCode())) {
+                // 家庭会员仅支持年付
+                String yearlyStr = sysConfigService.getValue("member_fee_family_yearly");
+                if (yearlyStr == null) yearlyStr = sysConfigService.getValue("member_fee_family");
+                plan.put("yearly", yearlyStr != null ? Integer.parseInt(yearlyStr) : 131400);
+                plan.put("monthly", null);
+                plan.put("quarterly", null);
+                // 原价（划线价，仅展示）
+                String origYearlyStr = sysConfigService.getValue("member_fee_family_original_yearly");
+                if (origYearlyStr == null) origYearlyStr = sysConfigService.getValue("member_fee_family_original");
+                plan.put("originalYearly", origYearlyStr != null ? Integer.parseInt(origYearlyStr) : null);
+                plan.put("originalMonthly", null);
+                plan.put("originalQuarterly", null);
+            } else if ("PREMIUM".equals(level.getLevelCode())) {
+                String yearlyStr = sysConfigService.getValue("member_fee_premium");
+                String monthlyStr = sysConfigService.getValue("member_fee_premium_monthly");
+                plan.put("yearly", yearlyStr != null ? Integer.parseInt(yearlyStr) : 1316800);
+                plan.put("monthly", monthlyStr != null ? Integer.parseInt(monthlyStr) : 131400);
+                plan.put("quarterly", 0);
+                // 原价（划线价，仅展示）
+                String origYearlyStr = sysConfigService.getValue("member_fee_premium_original");
+                String origMonthlyStr = sysConfigService.getValue("member_fee_premium_original_monthly");
+                plan.put("originalYearly", origYearlyStr != null ? Integer.parseInt(origYearlyStr) : null);
+                plan.put("originalMonthly", origMonthlyStr != null ? Integer.parseInt(origMonthlyStr) : null);
+                plan.put("originalQuarterly", null);
+            } else {
+                plan.put("monthly", level.getPriceMonthly());
+                plan.put("quarterly", level.getPriceQuarterly());
+                plan.put("yearly", level.getPriceYearly());
+                // 其他等级无原价定义
+                plan.put("originalYearly", null);
+                plan.put("originalMonthly", null);
+                plan.put("originalQuarterly", null);
+            }
+```
+
+- [ ] **步骤 2：验证编译**
+
+运行：`cd cfc-backend && mvn clean compile`
+预期：`BUILD SUCCESS`
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-backend/src/main/java/com/etotem/cfc/controller/MembershipController.java
+git commit -m "feat: /api/membership/plans 返回原价字段(originalYearly/Monthly/Quarterly)"
+```
+
+---
+
+## 任务 3：前端 api.js createOrder 增加 couponId 透传
+
+**文件：**
+- 修改：`cfc-frontend/utils/api.js`（第 369-375 行 `createOrder`）
+
+- [ ] **步骤 1：修改 createOrder 增加 couponId 参数**
+
+```js
+export const createOrder = (levelCode, paymentType, period, couponId) => {
+	var data = { levelCode: levelCode, paymentType: paymentType }
+	if (period) {
+		data.period = period
+	}
+	if (couponId) {
+		data.couponId = couponId
+	}
+	return request('/api/membership/orders', 'POST', data)
+}
+```
+
+（保持现有调用 `createOrder(levelCode, 'pay', period)` 兼容，couponId 可选）
+
+- [ ] **步骤 2：语法校验**
+
+运行：`node -e "const fs=require('fs');const s=fs.readFileSync('cfc-frontend/utils/api.js','utf8');const m=s.match(/export const createOrder =[\s\S]*?\n}/);if(!m){console.error('createOrder not found');process.exit(1)};new Function(m[0].replace(/^export const /,'const ').replace(/^const /,'const '));console.log('createOrder syntax OK')"`
+预期：`createOrder syntax OK`
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-frontend/utils/api.js
+git commit -m "fix: createOrder 透传 couponId(会员优惠券此前未生效)"
+```
+
+---
+
+## 任务 4：改造 upgrade.vue（套餐选择页）
+
+**文件：**
+- 修改：`cfc-frontend/pages/membership/upgrade.vue`（整文件）
+
+**要点：** 移除优惠券选择 + 支付调用 + 支付结果轮询；底部主按钮改「下一步」跳转 pay；修复会员状态判断 bug（`m.memberLevel` 而非 `m.levelCode`）；价格区展示划线原价。
+
+- [ ] **步骤 1：改写模板 — 移除优惠券行，主按钮改「下一步」**
+
+模板中两处（开通卡片 + 续费卡片）的优惠券行删除，按钮改为：
+
+```html
+        <!-- 开通卡片 -->
+        <button class="btn-upgrade" @click="goNext">下一步</button>
+        ...
+        <!-- 续费卡片 -->
+        <button class="btn-upgrade btn-renew" @click="goNext">下一步</button>
+```
+
+删除整个 `coupon-row` 块（两处）和底部 `modal-mask`（Coupon Picker Bottom Sheet）整块。
+
+- [ ] **步骤 2：改写 script — 移除支付/优惠券逻辑，加 goNext 与划线原价**
+
+script 变更：
+1. 删除 import 中 `createOrder`、`getCouponList`、`requestVirtualPayment`、`nextOrder`
+2. data 中删除 `coupons`、`selectedCoupon`、`showCouponPicker`、`joinRules`（joinRules 保留，开通赠券仍展示）
+3. 删除 methods：`openCouponPicker`、`selectCoupon`、`removeCoupon`、`getCouponCondition`、`handleUpgrade`、`doUpgrade`、`pollOrderStatus`、`payInstallments`、`handleRenew`、`doRenew`
+4. 新增 `goNext`：
+
+```js
+    goNext: function() {
+      var levelCode = this.selectedLevel
+      var period = this.selectedPeriod
+      uni.navigateTo({ url: '/pages/membership/pay?levelCode=' + levelCode + '&period=' + period })
+    },
+```
+
+5. 新增划线原价 computed：
+
+```js
+  computed: {
+    visiblePeriods() { /* 保留现有 */ },
+    availableCoupons() { /* 删除此 computed */ }
+  },
+```
+
+在 `methods` 中新增原价查询方法（替代 `availableCoupons` 的位置）：
+
+```js
+    getOriginalPriceForPeriod: function(periodKey) {
+      var plan = null
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].levelCode === this.selectedLevel) {
+          plan = this.levels[i]
+          break
+        }
+      }
+      if (!plan) return null
+      if (periodKey === 'monthly') return plan.originalMonthly || null
+      if (periodKey === 'quarterly') return plan.originalQuarterly || null
+      if (periodKey === 'yearly') return plan.originalYearly || null
+      return null
+    },
+    showOriginalPrice: function(periodKey) {
+      var original = this.getOriginalPriceForPeriod(periodKey)
+      var current = this.getPriceForPeriod(periodKey)
+      if (!original || !current) return false
+      return original > current * 100
+    },
+```
+
+6. **修复会员状态判断 bug**：`loadData()` 中：
+
+```js
+        if (this.membership && this.membership.levelCode && this.membership.levelCode !== 'FREE') {
+```
+改为：
+```js
+        if (this.membership && this.membership.memberLevel && this.membership.memberLevel !== 'FREE') {
+```
+并同步下方 `this.selectedLevel = this.membership.levelCode` → `this.membership.memberLevel`，`this.currentLevelName` 取值逻辑不变（`m.memberLevel` 时用 levelName 映射或保留 '家庭会员'）。
+
+- [ ] **步骤 3：改写样式 — 划线原价样式**
+
+在样式区追加：
+
+```css
+/* ===== 划线原价 ===== */
+.period-original {
+  font-size: 20rpx;
+  color: #94A3B8;
+  text-decoration: line-through;
+  margin-top: 2rpx;
+}
+.price-original-line {
+  font-size: 26rpx;
+  color: #94A3B8;
+  text-decoration: line-through;
+  margin-right: 12rpx;
+}
+```
+
+- [ ] **步骤 4：模板价格区加划线原价**
+
+period-tab 内价格下方（`period-tab-price` 之后）加：
+
+```html
+            <text class="period-original" v-if="showOriginalPrice(p.key)">¥{{ getOriginalPriceForPeriod(p.key) / 100 }}</text>
+```
+
+升级价格大数字旁（`price-unit` 之前）加：
+
+```html
+          <text class="price-original-line" v-if="showOriginalPrice(selectedPeriod)">¥{{ getOriginalPriceForPeriod(selectedPeriod) / 100 }}</text>
+```
+
+- [ ] **步骤 5：语法校验**
+
+提取 script 块运行 `node --check`（用 node 脚本提取 `<script>` 与 `</script>` 之间的内容，写临时文件后 `node --check`）。
+预期：无语法错误。
+
+- [ ] **步骤 6：Commit**
+
+```bash
+git add cfc-frontend/pages/membership/upgrade.vue
+git commit -m "refactor: upgrade页移除支付/优惠券逻辑,改下一步跳转pay,修复会员状态判断bug,支持划线原价"
+```
+
+---
+
+## 任务 5：新增 pay.vue（订单确认页）
+
+**文件：**
+- 创建：`cfc-frontend/pages/membership/pay.vue`
+
+**要点：** 接收 levelCode/period 参数 → plans 取价（含原价）→ couponList 取券 → 展示明细 + 优惠券 Picker → createOrder(couponId) → 微信虚拟支付（拆单逐期）→ 跳转 result。
+
+- [ ] **步骤 1：创建 pay.vue 完整文件**
+
+```vue
+<template>
+  <view class="pay-page">
+    <scroll-view class="page" scroll-y>
+      <!-- 商品明细卡 -->
+      <view class="order-card">
+        <view class="order-header">
+          <text class="order-title">{{ levelName }} · {{ periodLabel }}</text>
+          <text class="order-sub">{{ levelCode }}</text>
+        </view>
+        <view class="price-row" v-if="showOriginal">
+          <text class="price-label">原价</text>
+          <text class="price-original">¥{{ originalPriceText }}</text>
+        </view>
+        <view class="price-row">
+          <text class="price-label">现价</text>
+          <text class="price-now">¥{{ priceText }}</text>
+        </view>
+        <view class="coupon-row" @click="openCouponPicker">
+          <text class="coupon-row-label">优惠券</text>
+          <text v-if="selectedCoupon" class="coupon-row-discount">-¥{{ couponDiscountText }} {{ selectedCoupon.name }}</text>
+          <text v-else class="coupon-row-placeholder">选择优惠券</text>
+          <text class="coupon-row-arrow">›</text>
+        </view>
+        <view class="divider"></view>
+        <view class="total-row">
+          <text class="total-label">实付</text>
+          <text class="total-amount">¥{{ finalPriceText }}</text>
+        </view>
+      </view>
+
+      <!-- 拆单提示卡 -->
+      <view class="split-card" v-if="totalPeriods > 1">
+        <text class="split-title">💡 本订单将分 {{ totalPeriods }} 期支付</text>
+        <text class="split-desc">每期 ¥{{ splitAmountText }}，全部支付完成后自动开通会员</text>
+      </view>
+
+      <!-- 支付进度（拆单逐期时显示） -->
+      <view class="progress-card" v-if="paying && totalPeriods > 1">
+        <text class="progress-text">第 {{ currentPeriod }} / {{ totalPeriods }} 期</text>
+      </view>
+    </scroll-view>
+
+    <!-- 底部固定支付栏 -->
+    <view class="pay-bar">
+      <button class="btn-pay" :loading="paying" :disabled="paying" @click="handlePay">
+        {{ paying ? '支付中…' : '立即支付 ¥' + finalPriceText }}
+      </button>
+    </view>
+
+    <!-- Coupon Picker Bottom Sheet -->
+    <view class="modal-mask" v-if="showCouponPicker" @click="showCouponPicker = false">
+      <view class="coupon-picker" @click.stop>
+        <view class="picker-header">
+          <text class="picker-title">选择优惠券</text>
+          <text class="picker-close" @click="showCouponPicker = false">关闭</text>
+        </view>
+        <scroll-view scroll-y class="picker-list">
+          <view
+            v-for="coupon in availableCoupons"
+            :key="coupon.id"
+            class="picker-item"
+            :class="selectedCoupon && selectedCoupon.id === coupon.id ? 'picker-item-active' : ''"
+            @click="selectCoupon(coupon)"
+          >
+            <view class="picker-item-left">
+              <text class="picker-item-value">{{ formatPrice(coupon.value) }}</text>
+            </view>
+            <view class="picker-item-right">
+              <text class="picker-item-name">{{ coupon.name }}</text>
+              <text class="picker-item-condition">{{ getCouponCondition(coupon.minSpend) }}</text>
+            </view>
+            <view class="picker-item-check" v-if="selectedCoupon && selectedCoupon.id === coupon.id">
+              <text>✓</text>
+            </view>
+          </view>
+          <view class="picker-empty" v-if="availableCoupons.length === 0">
+            <text>暂无可用优惠券</text>
+          </view>
+        </scroll-view>
+        <view class="picker-footer" v-if="selectedCoupon">
+          <button class="picker-btn-remove" @click="removeCoupon">不使用优惠券</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getMembershipPlans, getCouponList, createOrder, requestVirtualPayment, nextOrder } from '../../utils/api.js'
+
+export default {
+  data() {
+    return {
+      levelCode: 'FAMILY',
+      period: 'yearly',
+      levelName: '家庭会员',
+      periodLabel: '年度',
+      levels: [],
+      coupons: [],
+      selectedCoupon: null,
+      showCouponPicker: false,
+      originalPrice: null,
+      price: 0,
+      totalPeriods: 1,
+      currentPeriod: 1,
+      splitAmount: 0,
+      orderNo: null,
+      paying: false
+    }
+  },
+  computed: {
+    showOriginal: function() {
+      return this.originalPrice != null && this.originalPrice > this.price
+    },
+    priceText: function() {
+      return (this.price / 100).toFixed(2)
+    },
+    originalPriceText: function() {
+      if (this.originalPrice == null) return '0.00'
+      return (this.originalPrice / 100).toFixed(2)
+    },
+    couponDiscount: function() {
+      if (!this.selectedCoupon) return 0
+      if (this.selectedCoupon.type === 'DISCOUNT') {
+        var rate = this.selectedCoupon.discountRate || 100
+        return Math.round(this.price * (100 - rate) / 100)
+      }
+      return this.selectedCoupon.value || 0
+    },
+    couponDiscountText: function() {
+      return (this.couponDiscount / 100).toFixed(2)
+    },
+    finalPrice: function() {
+      return Math.max(0, this.price - this.couponDiscount)
+    },
+    finalPriceText: function() {
+      return (this.finalPrice / 100).toFixed(2)
+    },
+    splitAmountText: function() {
+      return (this.splitAmount / 100).toFixed(2)
+    },
+    availableCoupons: function() {
+      var self = this
+      return this.coupons.filter(function(c) {
+        if (c.status && c.status !== 'AVAILABLE') return false
+        if (c.applicableTo && c.applicableTo !== 'ALL' && c.applicableTo !== 'MEMBERSHIP') return false
+        return true
+      })
+    }
+  },
+  onLoad: function(options) {
+    this.levelCode = options.levelCode || 'FAMILY'
+    this.period = options.period || 'yearly'
+    this.periodLabel = this.getPeriodLabel(this.period)
+    this.loadPlans()
+    this.loadCoupons()
+  },
+  methods: {
+    getPeriodLabel: function(period) {
+      var map = { monthly: '月度', quarterly: '季度', yearly: '年度' }
+      return map[period] || '年度'
+    },
+    loadPlans: function() {
+      var self = this
+      getMembershipPlans().then(function(res) {
+        var levels = res.data || []
+        for (var i = 0; i < levels.length; i++) {
+          if (levels[i].levelCode === self.levelCode) {
+            self.levelName = levels[i].levelName || self.levelName
+            if (self.period === 'monthly') {
+              self.price = levels[i].monthly || 0
+              self.originalPrice = levels[i].originalMonthly || null
+            } else if (self.period === 'quarterly') {
+              self.price = levels[i].quarterly || 0
+              self.originalPrice = levels[i].originalQuarterly || null
+            } else {
+              self.price = levels[i].yearly || 0
+              self.originalPrice = levels[i].originalYearly || null
+            }
+            break
+          }
+        }
+      }).catch(function(e) {
+        uni.showToast({ title: '加载价格失败', icon: 'none' })
+        console.error('加载价格失败', e)
+      })
+    },
+    loadCoupons: function() {
+      var self = this
+      getCouponList().then(function(res) {
+        self.coupons = res.data || []
+      }).catch(function() {})
+    },
+    openCouponPicker: function() {
+      if (this.availableCoupons.length === 0 && !this.selectedCoupon) {
+        uni.showToast({ title: '暂无可用优惠券', icon: 'none' })
+        return
+      }
+      this.showCouponPicker = true
+    },
+    selectCoupon: function(coupon) {
+      this.selectedCoupon = coupon
+      this.showCouponPicker = false
+    },
+    removeCoupon: function() {
+      this.selectedCoupon = null
+      this.showCouponPicker = false
+    },
+    getCouponCondition: function(minSpend) {
+      if (!minSpend || minSpend <= 0) return '无门槛'
+      return '满' + (minSpend / 100).toFixed(2) + '元可用'
+    },
+    formatPrice: function(value) {
+      if (value == null) return '0.00'
+      return (value / 100).toFixed(2)
+    },
+    handlePay: function() {
+      var self = this
+      if (this.paying) return
+      this.paying = true
+      var couponId = this.selectedCoupon ? this.selectedCoupon.id : null
+      createOrder(this.levelCode, 'pay', this.period, couponId).then(function(res) {
+        var data = res.data || {}
+        if (data.orderInfo && data.sign) {
+          self.orderNo = data.orderNo || (data.orderInfo && data.orderInfo.outTradeNo)
+          self.totalPeriods = data.totalPeriods || 1
+          self.currentPeriod = data.currentPeriod || 1
+          self.splitAmount = data.orderInfo && data.orderInfo.goodsPrice ? data.orderInfo.goodsPrice : (self.finalPrice / self.totalPeriods)
+          self.payInstallments(data)
+        } else {
+          // testMode 或试用：模拟支付成功
+          self.orderNo = data.orderNo
+          uni.showToast({ title: '支付成功，开通中…', icon: 'none' })
+          setTimeout(function() {
+            self.paying = false
+            uni.redirectTo({ url: '/pages/membership/result?orderNo=' + (self.orderNo || '') + '&status=success' })
+          }, 800)
+        }
+      }).catch(function(e) {
+        self.paying = false
+        if (e.code === 46001) {
+          uni.showToast({ title: '该商品暂未开放购买', icon: 'none' })
+        } else {
+          uni.showToast({ title: e.message || '下单失败', icon: 'none' })
+        }
+      })
+    },
+    payInstallments: function(dto) {
+      var self = this
+      var current = dto.currentPeriod || 1
+      var total = dto.totalPeriods || 1
+      requestVirtualPayment(dto, {
+        success: function() {
+          if (current < total) {
+            uni.showToast({ title: '第' + current + '期支付成功', icon: 'none' })
+            nextOrder({ orderNo: dto.orderNo }).then(function(res) {
+              var nd = res.data
+              if (nd && nd.done) {
+                self.finishPay()
+              } else if (nd && nd.orderInfo && nd.sign) {
+                self.currentPeriod = nd.currentPeriod || 1
+                self.payInstallments(nd)
+              } else {
+                self.finishPay()
+              }
+            }).catch(function() {
+              self.finishPay()
+            })
+          } else {
+            self.finishPay()
+          }
+        },
+        fail: function(err) {
+          self.paying = false
+          var errCode = err && err.errCode
+          var msg = ''
+          if (errCode === -15007 || errCode === -15005) msg = '登录态已过期，请重新登录后支付'
+          else if (errCode === -15010) msg = '商品未发布，请联系客服'
+          else if (errCode === -15013) msg = '商品价格异常'
+          else if (errCode === -2) msg = '支付已取消'
+          else if (err && err.errMsg) msg = err.errMsg
+          var status = (errCode === -2 || errCode === -15007 || errCode === -15005) ? 'fail' : 'fail'
+          uni.redirectTo({ url: '/pages/membership/result?orderNo=' + (self.orderNo || '') + '&status=' + status })
+        }
+      })
+    },
+    finishPay: function() {
+      var self = this
+      uni.showToast({ title: '支付成功，开通中…', icon: 'none' })
+      setTimeout(function() {
+        self.paying = false
+        uni.redirectTo({ url: '/pages/membership/result?orderNo=' + (self.orderNo || '') + '&status=success' })
+      }, 800)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pay-page {
+  min-height: 100vh;
+  background: #FFF7ED;
+  padding-bottom: 160rpx;
+  box-sizing: border-box;
+}
+.page {
+  padding: 30rpx;
+}
+
+/* ===== 商品明细卡 ===== */
+.order-card {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  box-shadow: 0 4rpx 24rpx rgba(249, 115, 22, 0.08);
+}
+.order-header {
+  margin-bottom: 24rpx;
+}
+.order-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #1E293B;
+  display: block;
+}
+.order-sub {
+  font-size: 24rpx;
+  color: #94A3B8;
+  margin-top: 6rpx;
+  display: block;
+}
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.price-label {
+  font-size: 26rpx;
+  color: #64748B;
+}
+.price-original {
+  font-size: 28rpx;
+  color: #94A3B8;
+  text-decoration: line-through;
+}
+.price-now {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #F97316;
+}
+.coupon-row {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-top: 1rpx solid #f5f5f5;
+  margin-top: 16rpx;
+}
+.coupon-row:active {
+  opacity: 0.7;
+}
+.coupon-row-label {
+  font-size: 26rpx;
+  color: #666;
+  margin-right: 16rpx;
+}
+.coupon-row-discount {
+  flex: 1;
+  font-size: 26rpx;
+  color: #F97316;
+  font-weight: 600;
+  text-align: right;
+}
+.coupon-row-placeholder {
+  flex: 1;
+  font-size: 26rpx;
+  color: #ccc;
+  text-align: right;
+}
+.coupon-row-arrow {
+  font-size: 32rpx;
+  color: #ccc;
+  margin-left: 8rpx;
+}
+.divider {
+  height: 1rpx;
+  background: #F1F5F9;
+  margin: 16rpx 0;
+}
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.total-label {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1E293B;
+}
+.total-amount {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #F97316;
+}
+
+/* ===== 拆单提示 ===== */
+.split-card {
+  background: #FEF3C7;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  margin-top: 30rpx;
+}
+.split-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #92400E;
+  display: block;
+  margin-bottom: 8rpx;
+}
+.split-desc {
+  font-size: 24rpx;
+  color: #B45309;
+  display: block;
+}
+
+/* ===== 支付进度 ===== */
+.progress-card {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  margin-top: 20rpx;
+  text-align: center;
+}
+.progress-text {
+  font-size: 26rpx;
+  color: #F97316;
+  font-weight: 600;
+}
+
+/* ===== 底部支付栏 ===== */
+.pay-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #FFFFFF;
+  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+.btn-pay {
+  width: 100%;
+  height: 96rpx;
+  line-height: 96rpx;
+  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
+  color: #fff;
+  font-size: 34rpx;
+  font-weight: 600;
+  border-radius: 48rpx;
+  border: none;
+}
+.btn-pay::after {
+  border: none;
+}
+.btn-pay[disabled] {
+  opacity: 0.7;
+  color: #fff;
+}
+
+/* ===== Coupon Picker（复用 upgrade 样式） ===== */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 999;
+  display: flex;
+  align-items: flex-end;
+}
+.coupon-picker {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  width: 100%;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #eee;
+}
+.picker-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+}
+.picker-close {
+  font-size: 26rpx;
+  color: #999;
+}
+.picker-list {
+  max-height: 50vh;
+  padding: 0 20rpx;
+}
+.picker-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 16rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+.picker-item:active {
+  background: #fafafa;
+}
+.picker-item-active {
+  background: #FFF7ED;
+}
+.picker-item-left {
+  width: 120rpx;
+  text-align: center;
+  flex-shrink: 0;
+}
+.picker-item-value {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #F97316;
+}
+.picker-item-right {
+  flex: 1;
+  margin: 0 16rpx;
+}
+.picker-item-name {
+  font-size: 26rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 4rpx;
+}
+.picker-item-condition {
+  font-size: 22rpx;
+  color: #999;
+}
+.picker-item-check {
+  width: 40rpx;
+  height: 40rpx;
+  background: #F97316;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #fff;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.picker-empty {
+  text-align: center;
+  padding: 60rpx 0;
+  font-size: 26rpx;
+  color: #999;
+}
+.picker-footer {
+  padding: 20rpx;
+  border-top: 1rpx solid #eee;
+}
+.picker-btn-remove {
+  background: #f5f5f5;
+  color: #666;
+  font-size: 26rpx;
+  border-radius: 12rpx;
+  border: none;
+}
+.picker-btn-remove::after {
+  border: none;
+}
+</style>
+```
+
+- [ ] **步骤 2：语法校验**
+
+提取 script 块运行 `node --check`。
+预期：无语法错误。
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-frontend/pages/membership/pay.vue
+git commit -m "feat: 新增订单确认页 pay.vue(明细/优惠券/拆单提示/虚拟支付逐期)"
+```
+
+---
+
+## 任务 6：新增 result.vue（支付结果页）
+
+**文件：**
+- 创建：`cfc-frontend/pages/membership/result.vue`
+
+**要点：** 读 orderNo/status → 成功态轮询确认开通 + 展示赠券；失败态展示原因 + 重新支付/续付入口（拆单未付清调 nextOrder）。
+
+- [ ] **步骤 1：创建 result.vue 完整文件**
+
+```vue
+<template>
+  <view class="result-page">
+    <!-- 成功态 -->
+    <view class="result-body" v-if="status === 'success'">
+      <view class="result-icon success">
+        <text class="icon-text">✅</text>
+      </view>
+      <text class="result-title">开通成功</text>
+      <text class="result-sub">{{ levelName }} {{ levelCode }}</text>
+      <view class="info-card">
+        <view class="info-row">
+          <text class="info-label">有效期至</text>
+          <text class="info-value">{{ expireText }}</text>
+        </view>
+        <view class="info-row" v-if="giftCoupons.length > 0">
+          <text class="info-label">开通赠券</text>
+          <text class="info-value gift">{{ giftCouponsText }}</text>
+        </view>
+      </view>
+      <view class="btn-group">
+        <button class="btn-primary" @click="goBenefits">查看我的权益</button>
+        <button class="btn-secondary" @click="goHome">返回会员中心</button>
+      </view>
+    </view>
+
+    <!-- 失败态 -->
+    <view class="result-body" v-else>
+      <view class="result-icon fail">
+        <text class="icon-text">❌</text>
+      </view>
+      <text class="result-title">支付未完成</text>
+      <text class="result-sub">{{ failReason }}</text>
+      <view class="btn-group">
+        <button class="btn-primary" v-if="canContinue" @click="continuePay">继续支付</button>
+        <button class="btn-primary" v-else @click="retryPay">重新支付</button>
+        <button class="btn-secondary" @click="goUpgrade">返回套餐选择</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getMyMembership, getJoinCouponRules, nextOrder, requestVirtualPayment } from '../../utils/api.js'
+import { parseDate } from '../../utils/format.js'
+
+export default {
+  data() {
+    return {
+      orderNo: '',
+      status: 'success',
+      levelName: '会员',
+      levelCode: '',
+      expireText: '',
+      giftCoupons: [],
+      failReason: '支付未完成，请重试',
+      canContinue: false,
+      nextPayParams: null
+    }
+  },
+  computed: {
+    giftCouponsText: function() {
+      var self = this
+      return this.giftCoupons.map(function(r) {
+        return '「' + r.name + '」×' + (r.grantQuantity || 1)
+      }).join('、')
+    }
+  },
+  onLoad: function(options) {
+    this.orderNo = options.orderNo || ''
+    this.status = options.status || 'success'
+    if (this.status === 'success') {
+      this.loadSuccess()
+    } else {
+      this.loadFail()
+    }
+  },
+  methods: {
+    loadSuccess: function() {
+      var self = this
+      // 轮询确认开通
+      var times = 0
+      var timer = setInterval(function() {
+        times++
+        getMyMembership().then(function(res) {
+          var m = res.data || {}
+          var mem = m.membership
+          if (mem && mem.isActive) {
+            clearInterval(timer)
+            self.levelCode = mem.levelCode || ''
+            self.levelName = mem.levelName || self.levelName
+            self.expireText = self.formatDate(mem.endDate)
+            self.loadGiftCoupons()
+          } else if (times >= 8) {
+            clearInterval(timer)
+            self.loadGiftCoupons()
+          }
+        }).catch(function() {
+          if (times >= 8) {
+            clearInterval(timer)
+            self.loadGiftCoupons()
+          }
+        })
+      }, 1500)
+    },
+    loadGiftCoupons: function() {
+      var self = this
+      getJoinCouponRules().then(function(res) {
+        var rules = res.data || []
+        self.giftCoupons = rules.filter(function(r) {
+          return r.grantLevelCode === self.levelCode
+        })
+      }).catch(function() {})
+    },
+    loadFail: function() {
+      var self = this
+      if (!this.orderNo) {
+        this.failReason = '订单信息缺失'
+        return
+      }
+      // 尝试获取下一期支付参数（拆单未付清时可用）
+      nextOrder({ orderNo: this.orderNo }).then(function(res) {
+        var nd = res.data
+        if (nd && nd.done) {
+          self.failReason = '订单已全部支付，请稍后查看会员状态'
+          self.canContinue = false
+        } else if (nd && nd.orderInfo && nd.sign) {
+          self.canContinue = true
+          self.nextPayParams = nd
+          self.failReason = '第 ' + (nd.currentPeriod || 1) + ' 期尚未支付'
+        } else {
+          self.failReason = '支付未完成，请重试'
+          self.canContinue = false
+        }
+      }).catch(function() {
+        self.failReason = '支付未完成，请重试'
+      })
+    },
+    continuePay: function() {
+      var self = this
+      if (!this.nextPayParams) {
+        this.retryPay()
+        return
+      }
+      requestVirtualPayment(this.nextPayParams, {
+        success: function() {
+          uni.redirectTo({ url: '/pages/membership/result?orderNo=' + self.orderNo + '&status=success' })
+        },
+        fail: function(err) {
+          var errCode = err && err.errCode
+          if (errCode === -2) {
+            uni.showToast({ title: '支付已取消', icon: 'none' })
+          } else {
+            uni.showToast({ title: '支付未完成', icon: 'none' })
+          }
+        }
+      })
+    },
+    retryPay: function() {
+      uni.redirectTo({ url: '/pages/membership/upgrade' })
+    },
+    goBenefits: function() {
+      uni.redirectTo({ url: '/pages/membership/benefits' })
+    },
+    goHome: function() {
+      uni.switchTab({ url: '/pages/index/index' })
+    },
+    goUpgrade: function() {
+      uni.redirectTo({ url: '/pages/membership/upgrade' })
+    },
+    formatDate: function(date) {
+      if (!date) return ''
+      var d = parseDate(date)
+      if (!d) return ''
+      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.result-page {
+  min-height: 100vh;
+  background: #FFF7ED;
+  display: flex;
+  justify-content: center;
+  padding: 120rpx 30rpx 60rpx;
+  box-sizing: border-box;
+}
+.result-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.result-icon {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 32rpx;
+}
+.result-icon.success {
+  background: #D1FAE5;
+}
+.result-icon.fail {
+  background: #FEE2E2;
+}
+.icon-text {
+  font-size: 80rpx;
+}
+.result-title {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #1E293B;
+  display: block;
+  margin-bottom: 12rpx;
+}
+.result-sub {
+  font-size: 28rpx;
+  color: #64748B;
+  display: block;
+  margin-bottom: 48rpx;
+}
+.info-card {
+  width: 100%;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 24rpx rgba(249, 115, 22, 0.08);
+  margin-bottom: 60rpx;
+}
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+}
+.info-label {
+  font-size: 28rpx;
+  color: #64748B;
+}
+.info-value {
+  font-size: 28rpx;
+  color: #1E293B;
+  font-weight: 600;
+}
+.info-value.gift {
+  color: #F97316;
+}
+.btn-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.btn-primary {
+  width: 100%;
+  height: 96rpx;
+  line-height: 96rpx;
+  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 600;
+  border-radius: 48rpx;
+  border: none;
+  margin-bottom: 24rpx;
+}
+.btn-primary::after {
+  border: none;
+}
+.btn-secondary {
+  width: 100%;
+  height: 96rpx;
+  line-height: 96rpx;
+  background: #FFFFFF;
+  color: #F97316;
+  font-size: 32rpx;
+  font-weight: 600;
+  border-radius: 48rpx;
+  border: 2rpx solid #FED7AA;
+}
+.btn-secondary::after {
+  border: none;
+}
+</style>
+```
+
+- [ ] **步骤 2：语法校验**
+
+提取 script 块运行 `node --check`。
+预期：无语法错误。
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-frontend/pages/membership/result.vue
+git commit -m "feat: 新增支付结果页 result.vue(成功态+赠券/失败态+续付)"
+```
+
+---
+
+## 任务 7：pages.json 注册 pay、result 页面
+
+**文件：**
+- 修改：`cfc-frontend/pages.json`（`pages/membership` 分包，第 669-691 行）
+
+- [ ] **步骤 1：在 upgrade 页面注册后追加两页**
+
+```json
+    {
+      "root": "pages/membership",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "会员中心"
+          }
+        },
+        {
+          "path": "benefits",
+          "style": {
+            "navigationBarTitleText": "我的权益"
+          }
+        },
+        {
+          "path": "upgrade",
+          "style": {
+            "navigationBarTitleText": "开通会员"
+          }
+        },
+        {
+          "path": "pay",
+          "style": {
+            "navigationBarTitleText": "确认订单"
+          }
+        },
+        {
+          "path": "result",
+          "style": {
+            "navigationBarTitleText": "支付结果"
+          }
+        }
+      ]
+    },
+```
+
+- [ ] **步骤 2：JSON 语法校验**
+
+运行：`node -e "JSON.parse(require('fs').readFileSync('cfc-frontend/pages.json','utf8'));console.log('pages.json OK')"`
+预期：`pages.json OK`
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add cfc-frontend/pages.json
+git commit -m "feat: pages.json 注册会员 pay/result 页面"
+```
+
+---
+
+## 任务 8：整体验证与收尾
+
+- [ ] **步骤 1：后端编译验证**
+
+运行：`cd cfc-backend && mvn clean compile`
+预期：`BUILD SUCCESS`
+
+- [ ] **步骤 2：前端语法校验（三个改动页面 + api.js + pages.json）**
+
+依次对 `upgrade.vue`、`pay.vue`、`result.vue` 提取 script 块做 `node --check`；对 `pages.json` 做 JSON.parse。
+预期：全部无错误。
+
+- [ ] **步骤 3：自查设计文档覆盖度**
+
+对照 `docs/superpowers/specs/2026-08-09-membership-pay-upgrade-design.md` 第 6 节改动清单逐项确认：
+- [x] DatabaseInitializer 原价键（任务 1）
+- [x] MembershipController plans 原价字段（任务 2）
+- [x] api.js createOrder couponId（任务 3）
+- [x] upgrade.vue 改造（任务 4）
+- [x] pay.vue 新增（任务 5）
+- [x] result.vue 新增（任务 6）
+- [x] pages.json 注册（任务 7）
+
+- [ ] **步骤 4：最终 Commit（如有遗漏改动）**
+
+```bash
+git add -A cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java cfc-backend/src/main/java/com/etotem/cfc/controller/MembershipController.java cfc-frontend/utils/api.js cfc-frontend/pages/membership/ cfc-frontend/pages.json
+git status
+git commit -m "feat: 会员支付升级页面上线(upgrade→pay→result三段式+原价+优惠券修复)"
+```
+
+> 注意：`git add -A <paths>` 只添加列出的路径，不会带入工作区其他未提交改动（如他人 Product 相关修改）。提交前必须 `git diff --cached --stat` 核对仅含目标文件。
+
+---
+
+## 自检记录（编写时已执行）
+
+**1. 规格覆盖度：**
+- 设计第 3.1 sys_config 原价键 → 任务 1 ✅
+- 设计第 3.2 plans 接口原价字段 → 任务 2 ✅
+- 设计第 4.1 upgrade 改造（移除支付/优惠券、下一步、修 bug、划线原价）→ 任务 4 ✅
+- 设计第 4.2 pay.vue（明细/优惠券 Picker/拆单提示/支付调用）→ 任务 5 ✅
+- 设计第 4.3 result.vue（成功+赠券/失败+续付）→ 任务 6 ✅
+- 设计第 4.4 划线原价展示规则 → 任务 4 步骤 4 + 任务 5 步骤 1（showOriginal）✅
+- 设计第 6 改动清单 api.js couponId → 任务 3 ✅
+- pages.json 注册 → 任务 7 ✅
+
+**2. 占位符扫描：** 无「待定/TODO/后续实现」；所有步骤含完整代码；命令精确。
+
+**3. 类型一致性：**
+- `getOriginalPriceForPeriod` 返回分（int），比较用 `original > current * 100`（current 为元字符串 → 注意：`getPriceForPeriod` 返回 `(plan.yearly / 100).toFixed(0)` 是**元字符串**！showOriginalPrice 中 `current * 100` 会把字符串隐式转数字再乘——正确。但更稳妥：直接用 plan 原始分值比较。实现时可改为读取 plan 原始字段，见下方备注）
+- 备注：任务 4 步骤 2 的 `showOriginalPrice` 中 `current` 来自 `getPriceForPeriod()`（元字符串），`original > current * 100` 数学上等价于「原价分 > 现价分」✅；`getOriginalPriceForPeriod` 返回分，模板中 `getOriginalPriceForPeriod(p.key) / 100` 显示元 ✅
+- pay.vue：`price` 存分（从 `levels[i].yearly` 取，plans 接口返回分），`priceText = (price/100).toFixed(2)` ✅；`originalPrice` 存分，`showOriginal` 用 `originalPrice > price` 比较 ✅；`couponDiscount` 折扣券按现价比例、满减按 value（分）✅；`finalPrice = price - couponDiscount`（分）✅
+- `createOrder(levelCode, 'pay', period, couponId)` 与任务 3 签名一致 ✅
+- `requestVirtualPayment(dto)` 接收 VirtualPayParamsDTO（orderInfo/sign/signature/currentPeriod/totalPeriods）✅
+- `nextOrder({orderNo})` 返回 `{done}` 或新支付参数 ✅
+- result.vue `getJoinCouponRules()` 返回 `grantLevelCode/grantQuantity/name` ✅（与 upgrade.vue 现有用法一致）
+- `uni.redirectTo` 用于 result 返回，避免页面栈堆积 ✅
+
+**4. 小程序限制合规：** 无 `?.`、无 CSS Grid（全 flex）、`:key` 用 `coupon.id`（纯属性，无表达式）✅、日期用 `parseDate()` ✅、Vue 2 Options API ✅。