api订单处理

src/views/apihub/apiorder/ApiOrderDetail.vue

+<template>
+  <el-dialog title="订单详情" v-model="visible" width="700px">
+    <el-descriptions :column="2" border v-loading="loading">
+      <el-descriptions-item label="订单编号">{{ detailData.orderNo }}</el-descriptions-item>
+      <el-descriptions-item label="用户手机号">{{ detailData.userMobile || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="用户昵称">{{ detailData.userNickname || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="订单状态">{{ orderStatusText(detailData.status) }}</el-descriptions-item>
+      <el-descriptions-item label="API应用">{{ detailData.apiName }}</el-descriptions-item>
+      <el-descriptions-item label="套餐名称">{{ detailData.packageName }}</el-descriptions-item>
+      <el-descriptions-item label="订单金额">
+        {{ detailData.costPrice ? (detailData.costPrice / 100).toFixed(2) + '元' : '-' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="开票状态">{{ invoiceStatusText(detailData.invoiceStatus) }}</el-descriptions-item>
+      <el-descriptions-item label="支付时间">{{ formatDate(detailData.payTime) }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">{{ formatDate(detailData.createTime) }}</el-descriptions-item>
+      <el-descriptions-item label="取消时间">{{ formatDate(detailData.cancelTime) }}</el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ApiOrderApi } from '@/api/apihub/apiorder'
+
+const visible = ref(false)
+const loading = ref(false)
+const detailData = ref<any>({})
+
+const formatDate = (date: string) => {
+  if (!date) return '-'
+  const d = new Date(date)
+  if (isNaN(d.getTime())) return date
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+const orderStatusText = (status: number) => {
+  const map: Record<number, string> = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款' }
+  return map[status] ?? '-'
+}
+
+const invoiceStatusText = (status: number) => {
+  const map: Record<number, string> = { 0: '未开票', 1: '开票中', 2: '已开票' }
+  return map[status] ?? '-'
+}
+
+const open = async (id: number) => {
+  visible.value = true
+  loading.value = true
+  try {
+    const data = await ApiOrderApi.getApiOrder(id)
+    detailData.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+defineExpose({ open })
+</script>

src/views/apihub/apiorder/OrderIssueInvoiceForm.vue

 <template>
   <Dialog v-model="dialogVisible" title="上传发票" width="45%">
-    <el-form-item label="发票地址" prop="invoiceUrl">
-      <UploadImg v-model="formData.invoiceUrl" />
-      <p class="upload-tips">
-        请上传 大小不超过 <span class="red-text">5MB</span> 格式为
-        <span class="red-text">pdf</span>
-        的文件
-      </p>
-    </el-form-item>
+    <el-form ref="formRef" :model="formData" label-width="100px">
+      <el-form-item label="发票地址" prop="invoiceUrl">
+        <UploadFile v-model="formData.invoiceUrl" :file-type="['pdf']" :limit="1" />
+        <p class="upload-tips">
+          请上传 大小不超过 <span class="red-text">5MB</span> 格式为
+          <span class="red-text">pdf</span>
+          的文件
+        </p>
+      </el-form-item>
+    </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -17,6 +19,7 @@
 
 <script setup lang="ts">
   import {ApiOrderApi} from "@/api/apihub/apiorder";
+  import { UploadFile } from '@/components/UploadFile';
   const { t } = useI18n() // 国际化
   const message = useMessage() // 消息弹窗
 
@@ -75,5 +78,12 @@
 
 
 <style scoped lang="scss">
-
+.red-text {
+  color: red;
+}
+.upload-tips {
+  font-size: 12px;
+  color: #666;
+  margin-top: 5px;
+}
 </style>