cfc/cfc-frontend/pages/teacher/orders.vue

<template>
  <view class="container">
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-value">{{ formatPriceWithSymbol(stats.orderRevenue) }}</text>
        <text class="stat-label">订单收入</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ formatPriceWithSymbol(stats.pendingAmount) }}</text>
        <text class="stat-label">待到账</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ formatPriceWithSymbol(stats.actualCommission) }}</text>
        <text class="stat-label">实际佣金</text>
      </view>
    </view>

    <view class="orders-section">
      <text class="section-title">订单记录</text>
      <view class="order-list">
        <view class="order-item" v-for="order in orders" :key="order.id">
          <view class="order-header">
            <text class="order-no">{{ order.orderNo }}</text>
            <text class="order-status" :class="order.status">{{ order.statusText }}</text>
          </view>
          <view class="order-body">
            <view class="order-info">
              <text class="family-name">{{ order.familyName }}</text>
              <text class="package-name">{{ order.packageName }}</text>
            </view>
            <view class="order-amount">
              <text class="amount">{{ formatPriceWithSymbol(order.amount) }}</text>
            </view>
          </view>
          <view class="order-footer">
            <text class="order-time">{{ order.createdAt }}</text>
          </view>
        </view>
        <view class="empty-tip" v-if="orders.length === 0">
          <text>暂无订单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getGuideOrders, getOrderStats } from '../../utils/api.js'

export default {
  data() {
    return {
      orders: [],
      stats: {
        orderRevenue: 0,
        pendingAmount: 0,
        actualCommission: 0
      }
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const [ordersRes, statsRes] = await Promise.all([
          getGuideOrders(),
          getOrderStats()
        ])
        if (ordersRes.data) {
          this.orders = ordersRes.data
        }
        if (statsRes.data) {
          this.stats = statsRes.data
        }
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.stats-section {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

.orders-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.order-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.order-no {
  font-size: 24rpx;
  color: #999;
}

.order-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.order-status.completed {
  background: #f0f9eb;
  color: #67C23A;
}

.order-status.pending {
  background: #fdf6ec;
  color: #E6A23C;
}

.order-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.family-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}

.package-name {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

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

.order-time {
  font-size: 24rpx;
  color: #999;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
}
</style>