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">
          <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>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      orderNo: '',
      amount: 0,
      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.amount) {
      this.amount = parseFloat(options.amount)
    }
    this.startCountdown()
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    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 params = res.data.data && res.data.data.wechatPayParams
            if (params) {
              uni.requestPayment({
                timeStamp: params.timeStamp,
                nonceStr: params.nonceStr,
                package: params.package,
                signType: params.signType || 'RSA',
                paySign: params.paySign,
                success: function() {
                  uni.showToast({ title: '支付成功', icon: 'success' })
                  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 scoped>
.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;
}
</style>