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

<template>
  <view class="gorder-page">
    <view class="section-card">
      <text class="section-title">团报</text>
      <text class="card-desc">多人拼单同报一个班次，可填写企业开票信息</text>
      <button class="create-btn" @click="goCreate">发起团报</button>
    </view>

    <view class="section-card">
      <text class="section-title">我的团报单</text>
      <view v-if="loading" class="empty-tip">加载中…</view>
      <view v-else-if="list.length === 0" class="empty-tip">暂无团报单</view>
      <view v-else>
        <view class="order-item" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
          <view class="order-head">
            <text class="order-no">{{ item.groupNo }}</text>
            <text class="order-status" :class="item.status">{{ statusLabel(item.status) }}</text>
          </view>
          <text class="order-class">{{ item.className || ('班次' + item.classId) }}</text>
          <text class="order-meta">{{ item.memberCount }} 人 · 合计 ¥{{ fenToYuan(item.totalAmount) }}</text>
          <text class="order-time" v-if="item.createdAt">创建时间：{{ formatDateTime(item.createdAt) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      list: [],
      loading: false
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadMine()
  },
  methods: {
    fenToYuan: fenToYuan,
    formatDateTime: formatDateTime,
    loadMine() {
      var self = this
      self.loading = true
      getMyGroupOrders().then(function(resp) {
        self.list = resp.data || []
      }).catch(function() {
        uni.showToast({ title: '加载团报单失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    statusLabel(status) {
      var map = { pending: '待支付', paid: '已支付', closed: '已关闭' }
      return map[status] || status || '未知'
    },
    goCreate() {
      uni.navigateTo({ url: '/pages/group-order/create' })
    },
    goDetail(id) {
      uni.navigateTo({ url: '/pages/group-order/detail?id=' + id })
    }
  }
}
</script>

<style scoped>
.gorder-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: #1E293B; margin-bottom: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 24rpx; }
.empty-tip { font-size: 26rpx; color: #94A3B8; padding: 32rpx 0; text-align: center; }
.create-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: #F97316; color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; }
.create-btn:active { opacity: 0.85; }
.order-item { padding: 24rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.order-item:last-child { border-bottom: none; }
.order-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx; }
.order-no { font-size: 26rpx; color: #475569; font-weight: 500; }
.order-status { font-size: 24rpx; font-weight: 600; }
.order-status.pending { color: #F97316; }
.order-status.paid { color: #22C55E; }
.order-status.closed { color: #94A3B8; }
.order-class { display: block; font-size: 28rpx; color: #1E293B; font-weight: 600; margin-bottom: 6rpx; }
.order-meta { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 6rpx; }
.order-time { display: block; font-size: 24rpx; color: #94A3B8; }
</style>