cfc/cfc-frontend/pages/membership/pay.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>