feat: 新增订单确认页 pay.vue(明细/优惠券/拆单提示/虚拟支付逐期)

cfc-frontend/pages/membership/pay.vue

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