minitest2.0 0.0.5 → 0.0.7

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>

package/src/views/opening-reserve-estimate/index.vue

@@ -14,22 +14,46 @@ type ResultItem = {
   icon: string
 }
 
+type AmountUnitKey = 'hundredMillion' | 'tenMillion' | 'million' | 'tenThousand' | 'yuan'
+
+type AmountUnit = {
+  key: AmountUnitKey
+  label: string
+  divisor: bigint
+}
+
 const estimateDetail = ref<OpeningReserveEstimateBody | null>(null)
 const querying = ref(false)
+const selectedUnitKey = ref<AmountUnitKey>('yuan')
+
+const defaultAmountUnit: AmountUnit = { key: 'yuan', label: '元', divisor: 1n }
+
+const amountUnits: AmountUnit[] = [
+  { key: 'hundredMillion', label: '亿元', divisor: 100000000n },
+  { key: 'tenMillion', label: '千万元', divisor: 10000000n },
+  { key: 'million', label: '百万元', divisor: 1000000n },
+  { key: 'tenThousand', label: '万元', divisor: 10000n },
+  defaultAmountUnit,
+]
 
 const resultConfig: ResultItem[] = [
-  { key: 'rhAmt', label: '人行时点头寸（元）', icon: 'balance-o' },
-  { key: 'unverifyAmtOut', label: '预报未核销支出（元）', icon: 'card' },
-  { key: 'unverifyAmtIn', label: '预报未核销收入（元）', icon: 'gold-coin-o' },
-  { key: 'pdAmt', label: '总分行铺底资金之和（元）', icon: 'paid' },
-  { key: 'fzAmt', label: '法定准备金（元）', icon: 'shield-o' },
-  { key: 'preAmt', label: '日初备款（元）', icon: 'chart-trending-o' },
+  { key: 'rhAmt', label: '人行时点头寸', icon: 'balance-o' },
+  { key: 'unverifyAmtOut', label: '预报未核销支出', icon: 'card' },
+  { key: 'unverifyAmtIn', label: '预报未核销收入', icon: 'gold-coin-o' },
+  { key: 'pdAmt', label: '总分行铺底资金之和', icon: 'paid' },
+  { key: 'fzAmt', label: '法定准备金', icon: 'shield-o' },
+  { key: 'preAmt', label: '日初备款', icon: 'chart-trending-o' },
 ]
 
+const selectedUnit = computed(
+  () => amountUnits.find((unit) => unit.key === selectedUnitKey.value) || defaultAmountUnit,
+)
+
 const resultItems = computed(() =>
   resultConfig.map((item) => ({
     ...item,
-    value: formatYuanAmount(estimateDetail.value?.[item.key]),
+    label: `${item.label}（${selectedUnit.value.label}）`,
+    value: formatAmountByUnit(estimateDetail.value?.[item.key], selectedUnit.value),
   })),
 )
 
@@ -62,64 +86,65 @@ async function handleQuery(options: { showSuccessToast?: boolean } = {}) {
   }
 }
 
-function formatYuanAmount(value?: string) {
+function formatAmountByUnit(value: string | undefined, unit: AmountUnit) {
+  const cents = parseYuanToCents(value)
+
+  if (cents === null) return '-'
+
+  return formatMinorAmount(divideRounded(cents, unit.divisor))
+}
+
+function parseYuanToCents(value?: string) {
   const text = value?.trim()
 
-  if (!text) return '-'
+  if (!text) return null
 
   const normalizedText = text.replaceAll(',', '')
 
   if (!/^[-+]?\d+(\.\d+)?$/.test(normalizedText)) {
-    return '-'
+    return null
   }
 
-  const sign = normalizedText.startsWith('-') ? '-' : ''
+  const isNegative = normalizedText.startsWith('-')
   const unsignedText =
     normalizedText.startsWith('-') || normalizedText.startsWith('+')
       ? normalizedText.slice(1)
       : normalizedText
   const [rawInteger = '0', rawDecimal = ''] = unsignedText.split('.')
-  let integer = rawInteger.replace(/^0+(?=\d)/, '') || '0'
-  let decimal = `${rawDecimal}00`.slice(0, 2)
-
-  if (Number(rawDecimal[2] || '0') >= 5) {
-    const roundedAmount = addOneCent(integer, decimal)
-    integer = roundedAmount.integer
-    decimal = roundedAmount.decimal
+  const integer = rawInteger.replace(/^0+(?=\d)/, '') || '0'
+  const decimalText = `${rawDecimal}000`
+  const decimal = decimalText.slice(0, 2)
+  const needsRound = Number(decimalText[2]) >= 5
+  let cents = BigInt(integer) * 100n + BigInt(decimal)
+
+  if (needsRound) {
+    cents += 1n
   }
 
-  return `${sign}${integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${decimal}`
+  return isNegative ? -cents : cents
 }
 
-function addOneCent(integer: string, decimal: string) {
-  const centAmount = Number(decimal) + 1
+function divideRounded(value: bigint, divisor: bigint) {
+  const isNegative = value < 0n
+  const absoluteValue = isNegative ? -value : value
+  let quotient = absoluteValue / divisor
+  const remainder = absoluteValue % divisor
 
-  if (centAmount < 100) {
-    return {
-      integer,
-      decimal: String(centAmount).padStart(2, '0'),
-    }
+  if (remainder * 2n >= divisor) {
+    quotient += 1n
   }
 
-  return {
-    integer: incrementIntegerText(integer),
-    decimal: '00',
-  }
+  return isNegative ? -quotient : quotient
 }
 
-function incrementIntegerText(value: string) {
-  const digits = value.split('')
+function formatMinorAmount(value: bigint) {
+  const isNegative = value < 0n
+  const absoluteValue = isNegative ? -value : value
+  const integer = absoluteValue / 100n
+  const decimal = String(absoluteValue % 100n).padStart(2, '0')
+  const groupedInteger = integer.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
-  for (let index = digits.length - 1; index >= 0; index -= 1) {
-    if (digits[index] !== '9') {
-      digits[index] = String(Number(digits[index]) + 1)
-      return digits.join('')
-    }
-
-    digits[index] = '0'
-  }
-
-  return `1${digits.join('')}`
+  return `${isNegative ? '-' : ''}${groupedInteger}.${decimal}`
 }
 
 function getErrorMessage(error: unknown, fallback: string) {
@@ -131,8 +156,21 @@ function getErrorMessage(error: unknown, fallback: string) {
   <main class="opening-reserve-page">
     <section class="result-section" aria-label="日初备款数匡算查询结果">
       <div class="section-heading">
-        <span class="section-heading__mark" aria-hidden="true"></span>
-        <h2>查询结果</h2>
+        <div class="section-heading__title">
+          <span class="section-heading__mark" aria-hidden="true"></span>
+          <h2>查询结果</h2>
+        </div>
+
+        <label class="unit-switch">
+          <span>单位</span>
+          <em>{{ selectedUnit.label }}</em>
+          <select v-model="selectedUnitKey" aria-label="选择金额单位">
+            <option v-for="unit in amountUnits" :key="unit.key" :value="unit.key">
+              {{ unit.label }}
+            </option>
+          </select>
+          <van-icon name="arrow-down" aria-hidden="true" />
+        </label>
       </div>
 
       <div class="result-stack">
@@ -185,9 +223,17 @@ button {
 .section-heading {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   margin-bottom: 21px;
 }
 
+.section-heading__title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
 .section-heading__mark {
   width: 7px;
   height: 24px;
@@ -206,6 +252,51 @@ button {
   letter-spacing: 0;
 }
 
+.unit-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 28px 0 11px;
+  border: 1px solid #ffd5da;
+  border-radius: 999px;
+  color: #ef252d;
+  font-size: 12px;
+  font-weight: 560;
+  line-height: 1;
+  background: #fff7f8;
+  box-shadow: 0 5px 14px rgba(255, 43, 50, 0.08);
+  box-sizing: border-box;
+}
+
+.unit-switch span {
+  margin-right: 4px;
+  color: #8c8f98;
+  font-weight: 500;
+}
+
+.unit-switch em {
+  font-style: normal;
+}
+
+.unit-switch select {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.unit-switch :deep(.van-icon) {
+  position: absolute;
+  right: 10px;
+  color: #ef252d;
+  font-size: 12px;
+  pointer-events: none;
+}
+
 .result-stack {
   display: block;
 }