实现V4 Payment附件预览前端

client/src/components/reservation/ReservationV4TaskCardSection.vue

@@ -45,17 +45,24 @@
       :hotel-id="hotelId"
       @update:model-value="emit('update:modelValue', $event)"
     />
-    <ReservationV4TaskCardFieldRenderer
-      v-else
-      class="task-card-section__fields"
-      :fields="card.fields"
-      :model-value="modelValue"
-      :read-only="readOnly"
-      :editable-keys="editableKeys"
-      :validation-errors="validationErrors"
-      :hotel-id="hotelId"
-      @update:model-value="emit('update:modelValue', $event)"
-    />
+    <template v-else>
+      <ReservationV4PaymentAttachmentPreview
+        v-if="isPaymentCard"
+        :card="card"
+        :source-message-id="sourceMessageId"
+      />
+      <ReservationV4TaskCardFieldRenderer
+        v-else
+        class="task-card-section__fields"
+        :fields="visibleFields"
+        :model-value="modelValue"
+        :read-only="readOnly"
+        :editable-keys="editableKeys"
+        :validation-errors="validationErrors"
+        :hotel-id="hotelId"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </template>
 
     <details
       v-if="!isRoomInformationCard && safePayloadRows.length"
@@ -164,6 +171,7 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import ReservationV4PaymentAttachmentPreview from '@/components/reservation/ReservationV4PaymentAttachmentPreview.vue'
 import ReservationV4RoomInformationCard from '@/components/reservation/ReservationV4RoomInformationCard.vue'
 import ReservationV4TaskCardFieldRenderer from '@/components/reservation/ReservationV4TaskCardFieldRenderer.vue'
 import type { ReservationRecord, ReservationV4TaskCardResult } from '@/types/reservation'
@@ -187,6 +195,7 @@ const props = withDefaults(defineProps<{
   validationErrors?: Record<string, string>
   hotelId?: string
   orderTaskId?: string | null
+  sourceMessageId?: string | null
   actionErrors?: string[]
   successMessage?: string
   reviewForm?: ReviewForm
@@ -198,6 +207,7 @@ const props = withDefaults(defineProps<{
   validationErrors: () => ({}),
   hotelId: undefined,
   orderTaskId: null,
+  sourceMessageId: null,
   actionErrors: () => [],
   successMessage: '',
   reviewForm: () => ({
@@ -216,6 +226,12 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const isRoomInformationCard = computed(() => props.card.card_type === 'ROOM_INFORMATION')
+const isPaymentCard = computed(() => props.card.card_type === 'PAYMENT')
+const visibleFields = computed(() =>
+  isPaymentCard.value
+    ? props.card.fields.filter((field) => !isPaymentAttachmentIdField(field))
+    : props.card.fields,
+)
 
 const availabilityReason = computed(() => {
   return props.card.availability.readonly_reason_message ??
@@ -248,6 +264,11 @@ function updateReviewForm(field: keyof ReviewForm, event: Event): void {
     [field]: target.value,
   })
 }
+
+function isPaymentAttachmentIdField(field: ReservationV4TaskCardResult['fields'][number]): boolean {
+  const normalizedKey = `${field.field_pointer || ''} ${field.field_path || ''}`.toLowerCase()
+  return normalizedKey.includes('attachment_ids')
+}
 </script>
 
 <style scoped>