ui_template/src/view/OrdersView.vue

<template>
  <div class="orders-page">
    <div class="filter-bar">
      <el-radio-group v-model="activeFilter" @change="doFilter">
        <el-radio-button value="all">全部</el-radio-button>
        <el-radio-button value="unpaid">未支付</el-radio-button>
        <el-radio-button value="cancelled">已取消</el-radio-button>
        <el-radio-button value="completed">已完成</el-radio-button>
      </el-radio-group>
    </div>

    <div v-loading="orderStore.loading" class="order-list">
      <div v-for="order in orderStore.orders" :key="order.id" class="order-card">
        <div class="order-top">
          <span class="order-title">{{ order.postTitle }}</span>
          <el-tag :type="statusType(order.status)" size="small">{{ order.status }}</el-tag>
        </div>
        <div class="order-meta">
          <span>{{ order.expertName }}</span>
          <span class="order-amount">¥{{ order.amount }}</span>
        </div>
        <div class="order-bottom">
          <span class="order-time">{{ order.createTime }}</span>
          <el-button v-if="order.status === '未支付'" size="small" type="primary">去支付</el-button>
        </div>
      </div>
      <EmptyState v-if="!orderStore.loading && orderStore.orders.length === 0" description="暂无订单" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useOrderStore } from '../store'
import EmptyState from '../components/EmptyState.vue'

const orderStore = useOrderStore()
const activeFilter = ref('all')

function doFilter() {
  orderStore.fetchOrders(activeFilter.value)
}

function statusType(status: string): string {
  if (status === 'completed') return 'success'
  if (status === 'unpaid') return 'warning'
  if (status === 'cancelled') return 'info'
  return ''
}

onMounted(() => {
  orderStore.fetchOrders()
})
</script>

<style scoped>
.orders-page {
  padding: 0;
}
.filter-bar {
  padding: 12px 16px;
  overflow-x: auto;
}
.order-list {
  padding: 0 16px;
}
.order-card {
  background: var(--color-card, #fff);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.order-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.order-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary, #999);
  margin-bottom: 6px;
}
.order-amount {
  color: var(--color-primary, #db2777);
  font-weight: 600;
}
.order-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-time {
  font-size: 12px;
  color: var(--color-text-secondary, #999);
}
</style>