feat(jd-order): 优化订单管理功能并增强数据展示

- 在 Cookie 详情中添加复制 Cookie ID 和 Cookie 内容的功能 - 增加显示连续失败次数、暂停解除时间及更新时间字段 - 更新订单列表，支持展示支付链接、支付完成时间等新字段 - 添加“已异常”订单状态及相关样式和筛选选项 - 调整表格列宽与滚动宽度以适应新增内容 - 修复订单详情中部分字段缺失时的展示问题 - 使用枚举类型替换硬编码字符串传递订单类型参数 - 为京东订单号、内部订单号等字段添加复制功能 - 引入工具提示以提升长文本显示体验
2025-10-13 18:04:14 +08:00
parent da6df68b71
commit cbae20fef8
5 changed files with 172 additions and 35 deletions
--- a/src/views/jd-order/components/order-history-drawer.vue
+++ b/src/views/jd-order/components/order-history-drawer.vue
@@ -95,13 +95,11 @@
 </template>

 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { Message } from '@arco-design/web-vue';
 import { jdHistoryClient } from '@/api';
-import type {
-  KamiApiJdCookieV1OrderHistoryInfo,
-  ApiJdCookieHistoryOrderGetOrderTypeEnum
-} from '@/api/generated';
+import type { KamiApiJdCookieV1OrderHistoryInfo } from '@/api/generated';
+import { ApiJdCookieHistoryOrderGetOrderTypeEnum } from '@/api/generated';

 interface Props {
  visible: boolean;
--- a/src/views/jd-order/cookie/components/cookie-detail.vue
+++ b/src/views/jd-order/cookie/components/cookie-detail.vue
@@ -8,7 +8,9 @@
  >
    <a-descriptions v-if="cookieDetail" :column="2" bordered size="small">
      <a-descriptions-item label="Cookie ID">
-        {{ cookieDetail.cookieId }}
+        <a-typography-text copyable>
+          {{ cookieDetail.cookieId }}
+        </a-typography-text>
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag v-if="cookieDetail.status === 1" color="green">正常</a-tag>
@@ -16,21 +18,36 @@
        <a-tag v-else-if="cookieDetail.status === 3" color="red">失效</a-tag>
        <a-tag v-else color="gray">未知</a-tag>
      </a-descriptions-item>
-      <a-descriptions-item label="账户昵称">
+      <a-descriptions-item label="账户名称">
        {{ cookieDetail.accountName || '-' }}
      </a-descriptions-item>
+      <a-descriptions-item label="连续失败次数">
+        <a-tag
+          v-if="cookieDetail.failureCount && cookieDetail.failureCount > 0"
+          color="red"
+        >
+          {{ cookieDetail.failureCount }}次
+        </a-tag>
+        <a-tag v-else color="green">0次</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="最后使用时间">
+        {{ cookieDetail.lastUsedAt || '-' }}
+      </a-descriptions-item>
+      <a-descriptions-item label="暂停解除时间">
+        {{ cookieDetail.suspendUntil || '-' }}
+      </a-descriptions-item>
      <a-descriptions-item label="创建时间">
        {{ cookieDetail.createdAt || '-' }}
      </a-descriptions-item>
-      <a-descriptions-item label="最后使用时间">
-        {{ cookieDetail.lastUsedAt || '-' }}
+      <a-descriptions-item label="更新时间">
+        {{ cookieDetail.updatedAt || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">
        {{ cookieDetail.remark || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="Cookie内容" :span="2">
-        <a-typography-text class="cookie-content">
-          {{ props.cookieId }}
+        <a-typography-text class="cookie-content" copyable>
+          {{ cookieDetail.cookieValue || '-' }}
        </a-typography-text>
      </a-descriptions-item>
    </a-descriptions>
--- a/src/views/jd-order/cookie/index.vue
+++ b/src/views/jd-order/cookie/index.vue
@@ -81,7 +81,7 @@
        }"
        :columns="columns"
        :data="renderData"
-        :scroll="{ x: 1200 }"
+        :scroll="{ x: 1400 }"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
@@ -195,13 +195,13 @@ const columns: TableColumnData[] = [
      return rowIndex + 1 + (pagination.current - 1) * pagination.pageSize;
    }
  },
-  // {
-  //   title: 'Cookie ID',
-  //   dataIndex: 'cookieId',
-  //   width: 200,
-  //   ellipsis: true,
-  //   tooltip: true
-  // },
+  {
+    title: 'Cookie ID',
+    dataIndex: 'cookieId',
+    width: 200,
+    ellipsis: true,
+    tooltip: true
+  },
  {
    title: '账户名称',
    dataIndex: 'accountName',
@@ -235,6 +235,11 @@ const columns: TableColumnData[] = [
    dataIndex: 'createdAt',
    width: 180
  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatedAt',
+    width: 180
+  },
  {
    title: '备注',
    dataIndex: 'remark',
--- a/src/views/jd-order/jd-orders/index.vue
+++ b/src/views/jd-order/jd-orders/index.vue
@@ -30,6 +30,7 @@
                    <a-option :value="2">已支付</a-option>
                    <a-option :value="3">已过期</a-option>
                    <a-option :value="4">已取消</a-option>
+                    <a-option :value="5">已异常</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
@@ -76,7 +77,7 @@
        }"
        :columns="columns"
        :data="renderData"
-        :scroll="{ x: 1200 }"
+        :scroll="{ x: 1800 }"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
@@ -85,6 +86,7 @@
          <a-tag v-else-if="record.status === 2" color="green">已支付</a-tag>
          <a-tag v-else-if="record.status === 3" color="red">已过期</a-tag>
          <a-tag v-else-if="record.status === 4" color="gray">已取消</a-tag>
+          <a-tag v-else-if="record.status === 5" color="purple">已异常</a-tag>
          <a-tag v-else color="gray">未知</a-tag>
        </template>
        <template #amount="{ record }">
@@ -92,6 +94,27 @@
            ¥{{ record.amount?.toFixed(2) || '0.00' }}
          </span>
        </template>
+        <template #wxPayUrl="{ record }">
+          <a-space>
+            <a-link
+              v-if="record.wxPayUrl"
+              :href="record.wxPayUrl"
+              target="_blank"
+              type="primary"
+            >
+              <template #icon>
+                <icon-link />
+              </template>
+              <a-tooltip :content="record.wxPayUrl" position="top">
+                <span>
+                  {{ record.wxPayUrl.slice(0, 20)
+                  }}{{ record.wxPayUrl.length > 20 ? '...' : '' }}
+                </span>
+              </a-tooltip>
+            </a-link>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
+          </a-space>
+        </template>
        <template #operations="{ record }">
          <a-space size="small">
            <a-tooltip content="查看详情">
@@ -123,13 +146,31 @@
      <div v-if="currentOrder" class="order-detail">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="京东订单号">
-            {{ currentOrder.jdOrderId }}
+            <a-typography-text v-if="currentOrder.jdOrderId" copyable>
+              {{ currentOrder.jdOrderId }}
+            </a-typography-text>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
          </a-descriptions-item>
          <a-descriptions-item label="内部订单号">
-            {{ currentOrder.orderId }}
+            <a-typography-text v-if="currentOrder.orderId" copyable>
+              {{ currentOrder.orderId }}
+            </a-typography-text>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item label="支付ID">
+            <a-typography-text v-if="currentOrder.payId" copyable>
+              {{ currentOrder.payId }}
+            </a-typography-text>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item label="Cookie ID">
+            <a-typography-text v-if="currentOrder.cookieId" copyable>
+              {{ currentOrder.cookieId }}
+            </a-typography-text>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
          </a-descriptions-item>
          <a-descriptions-item label="商品品类">
-            {{ currentOrder.category }}
+            {{ currentOrder.category || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="订单金额">
            <span class="arco-text-primary">
@@ -141,14 +182,41 @@
              {{ getStatusText(currentOrder.status) }}
            </a-tag>
          </a-descriptions-item>
-          <a-descriptions-item label="支付时间">
+          <a-descriptions-item label="支付链接">
+            <a-space v-if="currentOrder.wxPayUrl">
+              <a-link
+                :href="currentOrder.wxPayUrl"
+                target="_blank"
+                type="primary"
+              >
+                <template #icon>
+                  <icon-link />
+                </template>
+                打开支付链接
+              </a-link>
+            </a-space>
+            <a-typography-text v-else type="secondary">无</a-typography-text>
+          </a-descriptions-item>
+          <a-descriptions-item label="支付链接过期时间">
+            {{ currentOrder.wxPayExpireAt || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="当前关联订单ID">
+            {{ currentOrder.currentOrderId || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="支付完成时间">
            {{ currentOrder.paidAt || '-' }}
          </a-descriptions-item>
+          <a-descriptions-item label="订单过期时间">
+            {{ currentOrder.orderExpireAt || '-' }}
+          </a-descriptions-item>
+          <a-descriptions-item label="卡密提取时间">
+            {{ currentOrder.cardExtractedAt || '-' }}
+          </a-descriptions-item>
          <a-descriptions-item label="创建时间">
-            {{ currentOrder.createdAt }}
+            {{ currentOrder.createdAt || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="更新时间">
-            {{ currentOrder.updatedAt }}
+            {{ currentOrder.updatedAt || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
@@ -158,7 +226,7 @@
    <order-history-drawer
      v-model:visible="historyVisible"
      :order-id="currentOrderId"
-      order-type="jd"
+      :order-type="ApiJdCookieHistoryOrderGetOrderTypeEnum.Jd"
    />
  </div>
 </template>
@@ -171,6 +239,7 @@ import useLoading from '@/hooks/loading';
 import { Pagination } from '@/types/global';
 import { jdOrderClient } from '@/api';
 import type { KamiApiJdCookieV1JdOrderInfo } from '@/api/generated';
+import { ApiJdCookieHistoryOrderGetOrderTypeEnum } from '@/api/generated';
 import OrderHistoryDrawer from '../components/order-history-drawer.vue';

 const { loading, setLoading } = useLoading(true);
@@ -231,14 +300,28 @@ const columns: TableColumnData[] = [
  {
    title: '内部订单号',
    dataIndex: 'orderId',
-    width: 180,
+    width: 160,
+    ellipsis: true,
+    tooltip: true
+  },
+  {
+    title: '支付ID',
+    dataIndex: 'payId',
+    width: 140,
+    ellipsis: true,
+    tooltip: true
+  },
+  {
+    title: 'Cookie ID',
+    dataIndex: 'cookieId',
+    width: 120,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '商品品类',
    dataIndex: 'category',
-    width: 150,
+    width: 120,
    ellipsis: true,
    tooltip: true
  },
@@ -246,7 +329,7 @@ const columns: TableColumnData[] = [
    title: '订单金额',
    dataIndex: 'amount',
    slotName: 'amount',
-    width: 120
+    width: 100
  },
  {
    title: '订单状态',
@@ -254,10 +337,36 @@ const columns: TableColumnData[] = [
    slotName: 'status',
    width: 100
  },
+  {
+    title: '支付链接',
+    dataIndex: 'wxPayUrl',
+    slotName: 'wxPayUrl',
+    width: 120
+  },
+  {
+    title: '支付完成时间',
+    dataIndex: 'paidAt',
+    width: 160
+  },
+  {
+    title: '订单过期时间',
+    dataIndex: 'orderExpireAt',
+    width: 160
+  },
+  {
+    title: '卡密提取时间',
+    dataIndex: 'cardExtractedAt',
+    width: 160
+  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
-    width: 180
+    width: 160
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatedAt',
+    width: 160
  },
  {
    title: '操作',
@@ -382,7 +491,8 @@ const getStatusColor = (status: number): string => {
    1: 'orange', // 待支付
    2: 'green', // 已支付
    3: 'red', // 已过期
-    4: 'gray' // 已取消
+    4: 'gray', // 已取消
+    5: 'purple' // 已异常
  };
  return colors[status] || 'gray';
 };
@@ -393,7 +503,8 @@ const getStatusText = (status: number): string => {
    1: '待支付',
    2: '已支付',
    3: '已过期',
-    4: '已取消'
+    4: '已取消',
+    5: '已异常'
  };
  return statusMap[status] || '未知';
 };
--- a/src/views/jd-order/order/index.vue
+++ b/src/views/jd-order/order/index.vue
@@ -102,7 +102,12 @@
              <template #icon>
                <icon-link />
              </template>
-              支付链接
+              <a-tooltip :content="record.wxPayUrl" position="top">
+                <span>
+                  {{ record.wxPayUrl.slice(0, 20)
+                  }}{{ record.wxPayUrl.length > 20 ? '...' : '' }}
+                </span>
+              </a-tooltip>
            </a-link>
            <a-typography-text v-else type="secondary">无</a-typography-text>
          </a-space>
@@ -147,7 +152,7 @@
    <order-history-drawer
      v-model:visible="historyVisible"
      :order-id="currentOrderId"
-      order-type="user"
+      :order-type="ApiJdCookieHistoryOrderGetOrderTypeEnum.User"
    />
  </div>
 </template>
@@ -163,6 +168,7 @@ import type {
  KamiApiJdCookieV1ListOrderRes,
  KamiApiJdCookieV1OrderInfo
 } from '@/api/generated';
+import { ApiJdCookieHistoryOrderGetOrderTypeEnum } from '@/api/generated';
 import OrderDetail from './components/order-detail.vue';
 import OrderHistoryDrawer from '../components/order-history-drawer.vue';