完善按钮和详情权限

src/views/order-management/order-list/detail.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="order-detail-page">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">订单详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 订单项列表 -->
+      <div
+        v-if="detailData && detailData.items && detailData.items.length > 0"
+        class="order-items-section"
+      >
+        <h3 class="section-title">订单项列表</h3>
+        <ElTable :data="detailData.items" border style="margin-top: 10px">
+          <ElTableColumn prop="package_name" label="套餐名称" min-width="150" />
+          <ElTableColumn prop="quantity" label="数量" width="100" />
+          <ElTableColumn prop="unit_price" label="单价" width="120">
+            <template #default="{ row }">
+              {{ formatCurrency(row.unit_price) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="amount" label="金额" width="120">
+            <template #default="{ row }">
+              {{ formatCurrency(row.amount) }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import { useI18n } from 'vue-i18n'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { OrderService } from '@/api/modules'
+  import type { Order } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'OrderDetail' })
+
+  const { t } = useI18n()
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<Order | null>(null)
+
+  // 格式化货币 - 将分转换为元
+  const formatCurrency = (amount: number): string => {
+    return `¥${(amount / 100).toFixed(2)}`
+  }
+
+  // 获取订单类型文本
+  const getOrderTypeText = (type: string): string => {
+    return type === 'single_card'
+      ? t('orderManagement.orderType.singleCard')
+      : t('orderManagement.orderType.device')
+  }
+
+  // 获取买家类型文本
+  const getBuyerTypeText = (type: string): string => {
+    return type === 'personal'
+      ? t('orderManagement.buyerType.personal')
+      : t('orderManagement.buyerType.agent')
+  }
+
+  // 获取支付方式文本
+  const getPaymentMethodText = (method: string): string => {
+    const methodMap: Record<string, string> = {
+      wallet: t('orderManagement.paymentMethod.wallet'),
+      wechat: t('orderManagement.paymentMethod.wechat'),
+      alipay: t('orderManagement.paymentMethod.alipay')
+    }
+    return methodMap[method] || method
+  }
+
+  // 获取佣金状态文本
+  const getCommissionStatusText = (status: number): string => {
+    const statusMap: Record<number, string> = {
+      0: t('orderManagement.commissionStatus.notApplicable'),
+      1: t('orderManagement.commissionStatus.pending'),
+      2: t('orderManagement.commissionStatus.settled')
+    }
+    return statusMap[status] || '-'
+  }
+
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: t('orderManagement.table.orderNo'), prop: 'order_no' },
+        {
+          label: t('orderManagement.table.orderType'),
+          formatter: (_, data) => getOrderTypeText(data.order_type)
+        },
+        {
+          label: t('orderManagement.table.paymentStatus'),
+          formatter: (_, data) => data.payment_status_text || '-'
+        },
+        {
+          label: t('orderManagement.table.totalAmount'),
+          prop: 'total_amount',
+          formatter: (value) => formatCurrency(value)
+        },
+        {
+          label: 'IoT卡ID',
+          prop: 'iot_card_id',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: t('orderManagement.table.buyerType'),
+          formatter: (_, data) => data.buyer_type ? getBuyerTypeText(data.buyer_type) : '-'
+        },
+        {
+          label: '买家ID',
+          prop: 'buyer_id',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '代付订单',
+          formatter: (_, data) => data.is_purchase_on_behalf ? '是' : '否'
+        },
+        {
+          label: t('orderManagement.table.commissionStatus'),
+          formatter: (_, data) => getCommissionStatusText(data.commission_status)
+        },
+        {
+          label: '佣金配置版本',
+          prop: 'commission_config_version'
+        },
+        {
+          label: t('orderManagement.table.createdAt'),
+          prop: 'created_at',
+          formatter: (value) => formatDateTime(value)
+        },
+        {
+          label: t('orderManagement.table.updatedAt'),
+          prop: 'updated_at',
+          formatter: (value) => formatDateTime(value)
+        }
+      ]
+    }
+  ]
+
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await OrderService.getOrderById(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取订单详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .order-detail-page {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .order-items-section {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid var(--el-border-color-lighter);
+
+    .section-title {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>

src/views/order-management/order-list/index.vue

@@ -273,6 +273,7 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { useI18n } from 'vue-i18n'
+  import { useRouter } from 'vue-router'
   import { OrderService, CardService, DeviceService, PackageManageService } from '@/api/modules'
   import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
@@ -296,10 +297,12 @@
   import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
   import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
   import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'
 
   defineOptions({ name: 'OrderList' })
 
   const { t } = useI18n()
+  const router = useRouter()
   const { hasAuth } = useAuth()
 
   const loading = ref(false)
@@ -855,16 +858,10 @@
   }
 
   // 查看订单详情
-  const showOrderDetail = async (row: Order) => {
-    try {
-      const res = await OrderService.getOrderById(row.id)
-      if (res.code === 0) {
-        currentOrder.value = res.data
-        detailDialogVisible.value = true
-      }
-    } catch (error) {
-      console.error(error)
-    }
+  const showOrderDetail = (row: Order) => {
+    router.push({
+      path: `${RoutesAlias.OrderList}/detail/${row.id}`
+    })
   }
 
   // 取消订单
@@ -904,10 +901,15 @@
 
     const items: MenuItemType[] = []
 
-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('orders:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }
 
-    // 只有待支付和已支付的订单可以取消
-    if (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) {
+    // 只有待支付和已支付的订单可以删除
+    if (
+      (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) &&
+      hasAuth('orders:delete')
+    ) {
       items.push({ key: 'cancel', label: '删除' })
     }