cfc/cfc-frontend/pages/activity/order-pay/order-pay.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">
          <text class="info-label">订单金额</text>
          <text class="order-amount">¥{{ formatAmount(totalAmount) }}</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 ? '支付中...' : '微信支付 ¥' + formatAmount(totalAmount) }}
        </button>
        <text class="cancel-link" @click="onCancelPay">暂不支付</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { payActivityOrder, handleActivityOrderSuccess } from '@/utils/api.js'

export default {
  data() {
    return {
      orderNo: '',
      totalAmount: 0,
      activityId: null,
      countdown: 900,
      paying: false,
      loading: false,
      timer: null
    }
  },
  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) {
    if (options.orderNo) {
      this.orderNo = options.orderNo
    }
    if (options.totalAmount) {
      this.totalAmount = parseFloat(options.totalAmount)
    }
    if (options.activityId) {
      this.activityId = options.activityId
    }
    this.startCountdown()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    formatAmount: function(val) {
      var num = parseFloat(val) || 0
      return (num / 100).toFixed(2)
    },
    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
      payActivityOrder(this.orderNo).then(function(res) {
        that.paying = false
        if (res && res.code === 200 && res.data && res.data.wechatPayParams) {
          var params = res.data.wechatPayParams
          uni.requestPayment({
            timeStamp: params.timeStamp,
            nonceStr: params.nonceStr,
            package: params.package,
            signType: params.signType || 'RSA',
            paySign: params.paySign,
            success: function() {
              handleActivityOrderSuccess(that.orderNo).then(function() {
                uni.showToast({ title: '支付成功', icon: 'success' })
                setTimeout(function() {
                  that.backToDetail(true)
                }, 1500)
              }).catch(function() {
                uni.showToast({ title: '支付成功', icon: 'success' })
                setTimeout(function() {
                  that.backToDetail(true)
                }, 1500)
              })
            },
            fail: function() {
              uni.showToast({ title: '支付失败', icon: 'none' })
            }
          })
        } else {
          uni.showToast({ title: (res && res.message) || '获取支付参数失败', icon: 'none' })
        }
      }).catch(function() {
        that.paying = false
        uni.showToast({ title: '网络请求失败', icon: 'none' })
      })
    },
    onCancelPay() {
      this.backToDetail(false)
    },
    backToDetail(refresh) {
      if (this.activityId) {
        uni.redirectTo({
          url: '/pages/activity/activity-detail/activity-detail?id=' + this.activityId + (refresh ? '&paid=1' : '')
        })
      } else {
        uni.navigateBack()
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F5F7FA;
}

.loading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #94A3B8;
}

.content {
  height: 100vh;
  box-sizing: border-box;
}

.header-section {
  background: #F97316;
  padding: 48rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.header-countdown {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #FFEDD5;
}

.header-cancelled {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #FFEDD5;
}

.section {
  background: #fff;
  border-radius: 16rpx;
  margin: 24rpx;
  padding: 28rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
}

.info-label {
  font-size: 26rpx;
  color: #64748B;
}

.info-value {
  font-size: 26rpx;
  color: #1E293B;
  max-width: 400rpx;
  word-break: break-all;
  text-align: right;
}

.order-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
}

.payment-method-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
}

.payment-method-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.payment-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.payment-name {
  font-size: 28rpx;
  color: #1E293B;
}

.payment-checked {
  font-size: 28rpx;
  color: #10B981;
}

.pay-section {
  margin: 48rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pay-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-btn.disabled {
  background: #CBD5E1;
}

.cancel-link {
  margin-top: 24rpx;
  font-size: 26rpx;
  color: #94A3B8;
}
</style>