fix: 订单详情支付凭证, 退款

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

@@ -60,13 +60,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue'
+  import { h, onMounted, ref } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { ElCard, ElButton, ElIcon, ElMessage, ElTable, ElTableColumn } from 'element-plus'
+  import { ElButton, ElCard, ElIcon, ElImage, ElMessage, ElTable, ElTableColumn } from 'element-plus'
   import { ArrowLeft, Loading } from '@element-plus/icons-vue'
   import DetailPage from '@/components/common/DetailPage.vue'
   import type { DetailSection } from '@/components/common/DetailPage.vue'
-  import { OrderService } from '@/api/modules'
+  import { OrderService, StorageService } from '@/api/modules'
   import type {
     Order,
     OrderCommissionResult,
@@ -74,15 +74,18 @@
     OrderOperatorType,
     OrderPaymentMethod
   } from '@/types/api'
+  import { useAuth } from '@/composables/useAuth'
   import { formatDateTime } from '@/utils/business/format'
 
   defineOptions({ name: 'OrderDetail' })
 
   const route = useRoute()
   const router = useRouter()
+  const { hasAuth } = useAuth()
 
   const loading = ref(false)
   const detailData = ref<Order | null>(null)
+  const paymentVoucherUrl = ref('')
 
   // 格式化货币 - 将分转换为元
   const formatCurrency = (amount: number): string => {
@@ -160,6 +163,17 @@
     return roleMap[role] || role
   }
 
+  const loadPaymentVoucherUrl = async (fileKey?: string) => {
+    paymentVoucherUrl.value = ''
+    if (!fileKey || !hasAuth('orders:view_payment_voucher')) return
+
+    try {
+      paymentVoucherUrl.value = await StorageService.getDownloadUrl(fileKey)
+    } catch (error) {
+      console.error('Get payment voucher failed:', error)
+    }
+  }
+
   // 详情页配置
   const detailSections: DetailSection[] = [
     {
@@ -185,6 +199,31 @@
           formatter: (value) =>
             value !== undefined && value !== null ? formatCurrency(value) : '-'
         },
+        {
+          label: '支付凭证',
+          fullWidth: true,
+          render: (data) => {
+            if (!data.payment_voucher_key || !hasAuth('orders:view_payment_voucher')) {
+              return h('span', '-')
+            }
+
+            if (!paymentVoucherUrl.value) {
+              return h('span', '加载中...')
+            }
+
+            return h(ElImage, {
+              src: paymentVoucherUrl.value,
+              previewSrcList: [paymentVoucherUrl.value],
+              fit: 'cover',
+              style: {
+                width: '120px',
+                height: '120px',
+                borderRadius: '8px',
+                border: '1px solid var(--el-border-color-light)'
+              }
+            })
+          }
+        },
         {
           label: '买家类型',
           formatter: (_, data) => (data.buyer_type ? getBuyerTypeText(data.buyer_type) : '-')
@@ -311,6 +350,7 @@
       const res = await OrderService.getOrderById(id)
       if (res.code === 0) {
         detailData.value = res.data
+        await loadPaymentVoucherUrl(res.data.payment_voucher_key)
       }
     } catch (error) {
       console.error(error)