minitest2.0 0.0.6 → 0.0.8

package/src/views/foreign/position/detail/index.vue

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import {
+  buildForeignForecastDetailPayload,
+  queryForeignForecastDetail,
+  type ForeignForecastDetailRecord,
+} from '@/api/foreign-position'
+import {
+  formatForeignForecastAmountText,
+  formatForeignForecastAmountYuanText,
+  formatForeignForecastDate,
+  resolveForeignBusinessType,
+  resolveForeignCurrency,
+  resolveForeignStatus,
+} from '@/utils/foreign-forecast'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'ForeignPositionDetailPage' })
+
+type DetailField = {
+  label: string
+  value: string
+}
+
+type DetailSection = {
+  title: string
+  fields: DetailField[]
+}
+
+const route = useRoute()
+const router = useRouter()
+
+const predRefNo = computed(() => String(route.params.predRefNo || ''))
+const detail = ref<ForeignForecastDetailRecord>()
+const loading = ref(false)
+const loadError = ref(false)
+const currencyValue = computed(() => getRecordCurrency(detail.value))
+const currencyOption = computed(() => resolveForeignCurrency(currencyValue.value))
+const statusOption = computed(() => resolveForeignStatus(detail.value?.predStatus))
+const heroAmount = computed(() =>
+  formatForeignForecastAmountText(detail.value?.predAmt, currencyValue.value),
+)
+const heroAmountYuan = computed(() => formatForeignForecastAmountYuanText(detail.value?.predAmt))
+const heroDate = computed(() => formatForeignForecastDate(detail.value?.tranDate))
+
+const detailSections = computed<DetailSection[]>(() => {
+  const item = detail.value
+
+  if (!item) return []
+
+  return [
+    {
+      title: '基础信息',
+      fields: [
+        { label: '预报流水号', value: fieldText(item.predRefNo) },
+        { label: '交易日期', value: formatForeignForecastDate(item.tranDate) },
+        { label: '预报日期', value: formatForeignForecastDate(item.predDate) },
+        { label: '预报状态', value: statusOption.value.label },
+        { label: '核销状态', value: fieldText(item.verifyStatus) },
+        { label: '额度标志', value: fieldText(item.eduFlag) },
+      ],
+    },
+    {
+      title: '机构与人员',
+      fields: [
+        { label: '预报机构', value: fieldText(item.predBranchName || item.predBranch) },
+        { label: '预报机构代码', value: fieldText(item.predBranch) },
+        { label: '预报人员编号', value: fieldText(item.predCode) },
+        { label: '预报人员姓名', value: fieldText(item.predName) },
+        { label: '落地机构名称', value: fieldText(item.groundBranch) },
+        { label: '落地机构代码', value: fieldText(item.groundBranchCode) },
+      ],
+    },
+    {
+      title: '业务与币种',
+      fields: [
+        { label: '币种', value: currencyOption.value.label },
+        { label: '业务类型', value: resolveForeignBusinessType(item.busiType) },
+        { label: '客户名称', value: fieldText(item.clientName) },
+        { label: '交易对手名称', value: fieldText(item.competName) },
+        { label: '交易对手账号', value: fieldText(item.competAcct) },
+        {
+          label: '清算行 SWIFT',
+          value: fieldText(item.bankSwift || item.swiftCode || item.bicCode),
+        },
+        { label: '标准名称', value: fieldText(item.standardName) },
+        { label: '用途', value: fieldText(item.purpose) },
+        { label: '备注', value: fieldText(item.remark) },
+      ],
+    },
+    {
+      title: '支付与金额',
+      fields: [
+        {
+          label: '预报金额',
+          value: formatForeignForecastAmountText(item.predAmt, currencyValue.value),
+        },
+        {
+          label: '已核销金额',
+          value: formatForeignForecastAmountText(item.verifyAmt, currencyValue.value),
+        },
+        { label: '支付渠道', value: fieldText(item.payChannel) },
+        { label: '收支方向', value: fieldText(item.payDirec) },
+      ],
+    },
+    {
+      title: '票据与联系',
+      fields: [
+        { label: '出票日', value: formatForeignForecastDate(item.billDate) },
+        { label: '票号', value: fieldText(item.billNo) },
+        { label: '联系人', value: fieldText(item.linkMan) },
+        { label: '联系电话', value: fieldText(item.phoneNo) },
+      ],
+    },
+  ]
+})
+
+onMounted(() => {
+  loadDetail()
+})
+
+async function loadDetail() {
+  if (!predRefNo.value) {
+    loadError.value = true
+    return
+  }
+
+  loading.value = true
+  loadError.value = false
+
+  const payload = buildForeignForecastDetailPayload(predRefNo.value)
+  console.log('[外币预报详情入参]', payload)
+
+  try {
+    const response = await queryForeignForecastDetail(payload)
+    detail.value = response.body
+  } catch (error) {
+    console.error('[外币预报详情加载失败]', error)
+    loadError.value = true
+    showAppToast('详情加载失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+function getRecordCurrency(record?: ForeignForecastDetailRecord) {
+  return (
+    record?.ccy ||
+    record?.currency ||
+    record?.currencyCode ||
+    record?.currCode ||
+    record?.curType ||
+    record?.tranCcy ||
+    ''
+  )
+    .trim()
+    .toUpperCase()
+}
+
+function fieldText(value?: string) {
+  const text = value?.trim()
+  return text || '-'
+}
+</script>
+
+<template>
+  <main class="detail-page">
+    <section v-if="loading" class="state-section">
+      <van-loading vertical>加载中...</van-loading>
+    </section>
+
+    <template v-else-if="detail">
+      <section class="hero-card" aria-label="外币预报详情概要">
+        <div class="hero-topline">
+          <span class="status-tag" :class="statusOption.className">{{ statusOption.label }}</span>
+          <span class="hero-date">{{ heroDate }}</span>
+        </div>
+        <strong>{{ heroAmount }}</strong>
+        <span v-if="heroAmountYuan !== '-'" class="hero-amount-yuan">{{ heroAmountYuan }}</span>
+        <p>{{ detail.predRefNo || predRefNo }}</p>
+      </section>
+
+      <section
+        v-for="section in detailSections"
+        :key="section.title"
+        class="detail-card"
+        :aria-label="section.title"
+      >
+        <h2>{{ section.title }}</h2>
+        <dl class="detail-list">
+          <div v-for="field in section.fields" :key="`${section.title}-${field.label}`">
+            <dt>{{ field.label }}</dt>
+            <dd>{{ field.value }}</dd>
+          </div>
+        </dl>
+      </section>
+    </template>
+
+    <van-empty v-else image="error" :description="loadError ? '详情加载失败' : '详情不存在'">
+      <van-button v-if="loadError" round type="danger" @click="loadDetail">重试</van-button>
+      <van-button v-else round type="danger" @click="router.replace('/foreign-position')">
+        返回列表
+      </van-button>
+    </van-empty>
+  </main>
+</template>
+
+<style scoped>
+.detail-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 24px);
+  color: #080d1f;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(255, 242, 243, 0.92), transparent 118px),
+    linear-gradient(180deg, #ffffff 0%, #fbfcfd 54%, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  appearance: none;
+}
+
+.state-section {
+  display: flex;
+  justify-content: center;
+  padding-top: 120px;
+}
+
+.hero-card {
+  margin-top: 15px;
+  border-radius: 13px;
+  padding: 16px;
+  color: #ffffff;
+  background: linear-gradient(135deg, #f22f3d 0%, #ff5660 100%);
+  box-shadow: 0 13px 28px rgba(244, 29, 48, 0.18);
+}
+
+.hero-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.hero-card strong {
+  display: block;
+  margin-top: 18px;
+  font-size: 27px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.hero-amount-yuan {
+  display: block;
+  margin-top: 7px;
+  overflow-wrap: anywhere;
+  color: rgba(255, 255, 255, 0.74);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.hero-card p {
+  overflow: hidden;
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 12px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hero-date {
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.detail-card {
+  margin-top: 10px;
+  border-radius: 13px;
+  padding: 15px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 7px 22px rgba(21, 28, 45, 0.055);
+}
+
+.detail-card h2 {
+  margin: 0;
+  color: #111728;
+  font-size: 15px;
+  font-weight: 760;
+  line-height: 1.2;
+}
+
+.detail-list {
+  margin: 12px 0 0;
+}
+
+.detail-list div {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid #eef0f4;
+}
+
+.detail-list div:first-child {
+  border-top: 0;
+}
+
+.detail-list dt,
+.detail-list dd {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.42;
+}
+
+.detail-list dt {
+  color: #7f8798;
+}
+
+.detail-list dd {
+  overflow-wrap: anywhere;
+  color: #151827;
+  font-weight: 650;
+  text-align: right;
+}
+
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.status-tag-confirmed {
+  border-color: #d8e1ee;
+  color: #687083;
+  background: #ffffff;
+}
+
+.status-tag-pending {
+  border-color: #ffd99a;
+  color: #a05a00;
+  background: #fff4d8;
+}
+
+.status-tag-cancelled {
+  border-color: #d6dbe3;
+  color: #687083;
+  background: #f3f5f8;
+}
+
+.status-tag-verified {
+  border-color: #b7ebc9;
+  color: #0b8f3a;
+  background: #e4f8eb;
+}
+
+.status-tag-rejected {
+  border-color: #ffc0cb;
+  color: #bf2549;
+  background: #ffe8ed;
+}
+
+.status-tag-unknown {
+  border-color: #d6dbe3;
+  color: #687083;
+  background: #f3f5f8;
+}
+
+@media (max-width: 340px) {
+  .detail-list div {
+    grid-template-columns: 84px minmax(0, 1fr);
+    gap: 8px;
+  }
+}
+</style>