cfc/cfc-frontend/pages/shop/payment/payment.vue

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
    <scroll-view v-else scroll-y class="content">
      <!-- Header Section -->
      <view class="header-section">
        <text class="header-title">订单待支付</text>
        <text class="header-countdown" v-if="countdown > 0">
          支付剩余时间: {{ formatCountdown }}
        </text>
        <text class="header-cancelled" v-else>
          订单已取消
        </text>
      </view>

    <!-- Order Info Card -->
    <view class="section">
      <view class="info-row">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ orderNo }}</text>
      </view>
      <view class="info-row" v-if="pointsUsed > 0">
        <text class="info-label">积分抵扣</text>
        <text class="info-value points-value">-{{ formatPrice(pointsUsed) }} ({{ pointsUsed }}积分)</text>
      </view>
      <view class="info-row">
        <text class="info-label">订单金额</text>
        <text class="order-amount">{{ formatPriceWithSymbol(amount) }}</text>
      </view>
    </view>

      <!-- Payment Method -->
      <view class="section">
        <text class="section-title">支付方式</text>
        <view class="payment-method-row">
          <view class="payment-method-left">
            <text class="payment-icon">💳</text>
            <text class="payment-name">微信支付</text>
          </view>
          <text class="payment-checked">✓</text>
        </view>
      </view>

      <!-- Pay Button -->
      <view class="pay-section">
        <button
          :class="['pay-btn', (paying || countdown <= 0) ? 'disabled' : '']"
          :disabled="paying || countdown <= 0"
          @click="onPay"
        >
          {{ paying ? '支付中...' : '微信支付 ' + formatPriceWithSymbol(amount) }}
        </button>
        <text class="cancel-link" @click="onCancelOrder">取消订单</text>
      </view>

      <!-- Post-payment Upgrade Card -->
      <view v-if="showUpgradeCard" class="upgrade-card">
        <view class="upgrade-card-header">
          <text class="upgrade-card-icon">🎉</text>
          <text class="upgrade-card-title">支付成功！开通会员更划算</text>
        </view>
        <view class="upgrade-card-body">
          <view class="upgrade-benefit-row">
            <text class="upgrade-benefit-icon">✓</text>
            <text class="upgrade-benefit-text">全场商品享受会员专享价</text>
          </view>
          <view class="upgrade-benefit-row">
            <text class="upgrade-benefit-icon">✓</text>
            <text class="upgrade-benefit-text">不限次一对一成长咨询服务</text>
          </view>
          <view class="upgrade-benefit-row">
            <text class="upgrade-benefit-icon">✓</text>
            <text class="upgrade-benefit-text">专属家庭成长计划与测评报告</text>
          </view>
          <view class="upgrade-price-row">
            <text class="upgrade-price-label">仅需</text>
            <text class="upgrade-price-value">{{ formatPriceWithSymbol(familyYearlyPrice * 100) }}</text>
            <text class="upgrade-price-unit">/年</text>
            <text class="upgrade-price-original" v-if="familyYearlyPrice > 0">{{ formatPriceWithSymbol((familyYearlyPrice * 1.5 * 100).toFixed(0)) }}</text>
          </view>
        </view>
        <view class="upgrade-card-action">
          <button class="upgrade-btn" @click="goUpgrade">立即开通</button>
          <text class="upgrade-skip" @click="showUpgradeCard = false">暂不开通</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getMyMembership } from '@/utils/api.js'

export default {
  data() {
    return {
      orderNo: '',
      amount: 0,
      countdown: 900,
      paying: false,
      loading: false,
      timer: null,
      pointsUsed: 0,
      isMember: false,
      showUpgradeCard: false,
      familyYearlyPrice: '365'
    }
  },
  computed: {
    formatCountdown() {
      var min = Math.floor(this.countdown / 60)
      var sec = this.countdown % 60
      return String(min).padStart(2, '0') + ':' + String(sec).padStart(2, '0')
    }
  },
  onLoad(options) {
    this.checkMemberStatus()
    this.checkMembershipLevels()
    if (options.orderNo) {
      this.orderNo = options.orderNo
    }
    if (options.amount) {
      this.amount = parseFloat(options.amount)
    }
    if (options.pointsUsed) {
      this.pointsUsed = parseInt(options.pointsUsed)
    }
    this.startCountdown()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    checkMemberStatus() {
      var that = this
      getMyMembership().then(function(res) {
        if (res.data && res.data.memberLevel) {
          that.isMember = res.data.memberLevel !== 'FREE'
        }
      }).catch(function() {})
    },
    checkMembershipLevels() {
      var that = this
      uni.request({
        url: config.api('/api/membership/levels'),
        method: 'POST',
        header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            var levels = res.data.data
            for (var i = 0; i < levels.length; i++) {
              if (levels[i].levelCode === 'FAMILY' && levels[i].priceYearly > 0) {
                that.familyYearlyPrice = (levels[i].priceYearly / 100).toFixed(0)
                break
              }
            }
          }
        }
      })
    },
    handlePaymentSuccess() {
      var that = this
      if (!this.isMember) {
        setTimeout(function() {
          that.showUpgradeCard = true
        }, 2000)
      }
    },
    goUpgrade() {
      uni.navigateTo({ url: '/pages/membership/upgrade' })
    },
    startCountdown() {
      var that = this
      this.timer = setInterval(function() {
        if (that.countdown > 0) {
          that.countdown = that.countdown - 1
        } else {
          if (that.timer) {
            clearInterval(that.timer)
            that.timer = null
          }
        }
      }, 1000)
    },
    onPay() {
      if (this.countdown <= 0) {
        uni.showToast({ title: '订单已取消，无法支付', icon: 'none' })
        return
      }
      this.paying = true
      var that = this
      uni.request({
        url: config.api('/api/product/order/pay'),
        method: 'POST',
        data: { orderNo: this.orderNo },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.paying = false
          if (res.data && res.data.code === 200) {
            var data = res.data.data
            if (data.noMoneyPayment) {
              // Points fully covered the order, no WeChat needed
              uni.request({
                url: config.api('/api/product/order/handlePaymentSuccess'),
                method: 'POST',
                data: { orderNo: that.orderNo },
                header: {
                  'Content-Type': 'application/json',
                  'Authorization': 'Bearer ' + uni.getStorageSync('token')
                },
                success: function(payRes) {
                  if (payRes.data && payRes.data.code === 200) {
                    uni.showToast({ title: '支付成功', icon: 'success' })
                    that.handlePaymentSuccess()
                    setTimeout(function() {
                      uni.redirectTo({
                        url: '/pages/shop/order-list/order-list?tab=paid'
                      })
                    }, 1500)
                  } else {
                    uni.showToast({ title: payRes.data.message || '处理失败', icon: 'none' })
                  }
                },
                fail: function() {
                  uni.showToast({ title: '网络请求失败', icon: 'none' })
                }
              })
            } else if (data.wechatPayParams) {
              var params = data.wechatPayParams
              uni.requestPayment({
                timeStamp: params.timeStamp,
                nonceStr: params.nonceStr,
                package: params.package,
                signType: params.signType || 'RSA',
                paySign: params.paySign,
                success: function() {
                  // Notify backend to update order status
                  uni.request({
                    url: config.api('/api/product/order/handlePaymentSuccess'),
                    method: 'POST',
                    data: { orderNo: that.orderNo },
                    header: {
                      'Content-Type': 'application/json',
                      'Authorization': 'Bearer ' + uni.getStorageSync('token')
                    }
                  })
                  uni.showToast({ title: '支付成功', icon: 'success' })
                  that.handlePaymentSuccess()
                  setTimeout(function() {
                    uni.redirectTo({
                      url: '/pages/shop/order-list/order-list?tab=paid'
                    })
                  }, 1500)
                },
                fail: function() {
                  uni.showToast({ title: '支付失败', icon: 'none' })
                }
              })
            } else {
              uni.showToast({ title: '获取支付参数失败', icon: 'none' })
            }
          } else {
            uni.showToast({ title: res.data.message || '支付失败', icon: 'none' })
          }
        },
        fail: function() {
          that.paying = false
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    },
    onCancelOrder() {
      var that = this
      uni.showModal({
        title: '确认取消',
        content: '确定取消该订单吗？',
        success: function(confirm) {
          if (confirm.confirm) {
            uni.request({
              url: config.api('/api/product/order/cancel'),
              method: 'POST',
              data: { orderNo: that.orderNo },
              header: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + uni.getStorageSync('token')
              },
              success: function(res) {
                if (res.data && res.data.code === 200) {
                  uni.showToast({ title: '订单已取消', icon: 'success' })
                  setTimeout(function() {
                    uni.navigateBack()
                  }, 1500)
                } else {
                  uni.showToast({ title: res.data.message || '取消失败', icon: 'none' })
                }
              }
            })
          }
        }
      })
    },
    formatPrice(price) {
      if (price === null || price === undefined) return '0.00'
      return (Number(price) / 100).toFixed(2)
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
.loading-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #999;
}
.content {
  height: calc(100vh - 120rpx);
}
.header-section {
  background: linear-gradient(135deg, #F97316, #FB923C);
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}
.header-countdown {
  font-size: 26rpx;
  color: rgba(255,255,255,0.9);
}
.header-cancelled {
  font-size: 26rpx;
  color: rgba(255,255,255,0.7);
}
.section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
.order-amount {
  font-size: 40rpx;
  color: #F97316;
  font-weight: bold;
}
.payment-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 0;
}
.payment-method-left {
  display: flex;
  align-items: center;
}
.payment-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}
.payment-name {
  font-size: 28rpx;
  color: #333;
}
.payment-checked {
  font-size: 32rpx;
  color: #52c41a;
  font-weight: bold;
}
.pay-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
}
.pay-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 44rpx;
  border: none;
  text-align: center;
}
.pay-btn::after {
  border: none;
}
.pay-btn.disabled {
  background: #ddd;
  color: #999;
}
  .cancel-link {
    margin-top: 24rpx;
    font-size: 26rpx;
    color: #999;
    text-decoration: underline;
    padding: 10rpx;
  }
  .points-value {
    color: #F97316;
  }

  /* Upgrade Card */
  .upgrade-card {
    margin: 30rpx 20rpx;
    background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
    border-radius: 20rpx;
    padding: 30rpx;
    border: 2rpx solid #FED7AA;
    animation: fadeInUp 0.5s ease;
  }
  .upgrade-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  .upgrade-card-icon {
    font-size: 40rpx;
    margin-right: 12rpx;
  }
  .upgrade-card-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }
  .upgrade-card-body {
    margin-bottom: 24rpx;
  }
  .upgrade-benefit-row {
    display: flex;
    align-items: center;
    padding: 8rpx 0;
  }
  .upgrade-benefit-icon {
    font-size: 24rpx;
    color: #22C55E;
    margin-right: 12rpx;
    font-weight: bold;
  }
  .upgrade-benefit-text {
    font-size: 26rpx;
    color: #666;
  }
  .upgrade-price-row {
    display: flex;
    align-items: baseline;
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #FED7AA;
  }
  .upgrade-price-label {
    font-size: 26rpx;
    color: #999;
    margin-right: 8rpx;
  }
  .upgrade-price-value {
    font-size: 48rpx;
    font-weight: bold;
    color: #F97316;
  }
  .upgrade-price-unit {
    font-size: 24rpx;
    color: #999;
    margin-left: 6rpx;
  }
  .upgrade-price-original {
    font-size: 24rpx;
    color: #ccc;
    text-decoration: line-through;
    margin-left: 12rpx;
  }
  .upgrade-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .upgrade-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(135deg, #F97316, #FB923C);
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
    border: none;
    text-align: center;
  }
  .upgrade-btn::after {
    border: none;
  }
  .upgrade-skip {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #999;
    padding: 8rpx;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>