caremate/train-frontend/pages/group-order/detail.vue

<template>
  <view class="form-page">
    <view class="section-card" v-if="detail">
      <text class="section-title">团报详情</text>
      <view class="info-row">
        <text class="info-label">团报单号</text>
        <text class="info-value">{{ detail.groupNo }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">班次</text>
        <text class="info-value">{{ detail.className || ('班次' + detail.classId) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">人数</text>
        <text class="info-value">{{ detail.memberCount }} 人</text>
      </view>
      <view class="info-row">
        <text class="info-label">单价</text>
        <text class="info-value">¥{{ fenToYuan(detail.unitAmount) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">总金额</text>
        <text class="info-value amount">¥{{ fenToYuan(detail.totalAmount) }}</text>
      </view>
      <view class="info-row" v-if="detail.invoiceTitle">
        <text class="info-label">发票抬头</text>
        <text class="info-value">{{ detail.invoiceTitle }}（{{ detail.invoiceType }}）</text>
      </view>
      <view class="info-row" v-if="detail.payTime">
        <text class="info-label">支付时间</text>
        <text class="info-value">{{ formatDateTime(detail.payTime) }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">状态</text>
        <text class="info-value" :class="detail.status">{{ statusLabel(detail.status) }}</text>
      </view>

      <view v-if="detail.status === 'pending'" class="pay-area">
        <button class="pay-btn" :loading="paying" :disabled="paying" @click="handlePay">立即支付（¥{{ fenToYuan(detail.totalAmount) }}）</button>
        <view class="pay-tip">测试环境将模拟支付成功，支付后为每位成员生成报名单</view>
      </view>
      <view v-else-if="detail.status === 'paid'" class="paid-tip">✓ 已支付，全部成员报名单已生成</view>
    </view>

    <view class="section-card" v-if="members">
      <text class="section-title">成员名单</text>
      <view class="member-item" v-for="m in members" :key="m.id">
        <view class="member-info">
          <text class="member-name">{{ m.name }}</text>
          <text class="member-phone">{{ m.phone }}</text>
        </view>
        <text class="member-status" :class="m.status">{{ m.status === 'paid' ? '已入账' : '待支付' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getGroupOrderDetail, payGroupOrder } from '@/utils/api.js'
import { fenToYuan, formatDateTime } from '@/utils/format.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      id: '',
      detail: null,
      members: [],
      paying: false
    }
  },
  onLoad(options) {
    if (!guardPage()) return
    this.id = options && options.id ? options.id : ''
    if (!this.id) {
      uni.showToast({ title: '缺少团报单ID', icon: 'none' })
      setTimeout(function() {
        uni.navigateBack({ delta: 1 })
      }, 1500)
      return
    }
    this.loadDetail()
  },
  methods: {
    fenToYuan: fenToYuan,
    formatDateTime: formatDateTime,
    loadDetail() {
      var self = this
      getGroupOrderDetail({ id: self.id }).then(function(resp) {
        var data = resp.data || {}
        self.detail = data
        self.members = data.members || []
      }).catch(function(err) {
        uni.showToast({ title: (err && err.message) || '加载失败', icon: 'none' })
      })
    },
    statusLabel(status) {
      var map = { pending: '待支付', paid: '已支付', closed: '已关闭' }
      return map[status] || status || '未知'
    },
    handlePay() {
      var self = this
      if (self.paying) return
      self.paying = true
      uni.showLoading({ title: '团报支付中…' })
      payGroupOrder({ id: self.id }).then(function(resp) {
        var data = resp.data || {}
        uni.hideLoading()
        if (data.status === 'paid') {
          uni.showToast({ title: '支付成功', icon: 'success' })
          setTimeout(function() {
            self.loadDetail()
          }, 1000)
        } else {
          uni.showToast({ title: '订单已创建，请稍候查询', icon: 'none' })
        }
      }).catch(function(err) {
        uni.hideLoading()
        uni.showToast({ title: (err && err.message) || '支付失败', icon: 'none' })
      }).finally(function() {
        self.paying = false
      })
    }
  }
}
</script>

<style scoped>
.form-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #2A2326; margin-bottom: 16rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 14rpx 0; border-bottom: 1rpx solid #F8FAFC; }
.info-label { font-size: 26rpx; color: #5A4F4B; }
.info-value { font-size: 28rpx; color: #2A2326; font-weight: 500; }
.info-value.amount { color: #FC7A57; font-weight: 700; font-size: 32rpx; }
.info-value.pending { color: #FC7A57; }
.info-value.paid { color: #22C55E; }
.info-value.closed { color: #94877F; }
.pay-area { margin-top: 32rpx; }
.pay-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #FC7A57; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; }
.pay-btn:active { opacity: 0.85; }
.pay-tip { font-size: 24rpx; color: #94877F; text-align: center; margin-top: 16rpx; }
.paid-tip { font-size: 26rpx; color: #22C55E; text-align: center; padding: 16rpx 0; }
.member-item { display: flex; align-items: center; justify-content: space-between; padding: 16rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.member-item:last-child { border-bottom: none; }
.member-info { display: flex; align-items: center; }
.member-name { font-size: 28rpx; color: #2A2326; font-weight: 500; margin-right: 24rpx; }
.member-phone { font-size: 26rpx; color: #5A4F4B; }
.member-status { font-size: 24rpx; font-weight: 600; }
.member-status.paid { color: #22C55E; }
.member-status.pending { color: #FC7A57; }
</style>