minitest2.0 0.0.4 → 0.0.6

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

@@ -1,28 +1,440 @@
+<script setup lang="ts">
+import {
+  buildOpeningReserveEstimatePayload,
+  queryOpeningReserveEstimate,
+  type OpeningReserveEstimateBody,
+} from '@/api/opening-reserve-estimate'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'OpeningReserveEstimatePage' })
+
+type ResultItem = {
+  key: keyof OpeningReserveEstimateBody
+  label: string
+  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' },
+]
+
+const selectedUnit = computed(
+  () => amountUnits.find((unit) => unit.key === selectedUnitKey.value) || defaultAmountUnit,
+)
+
+const resultItems = computed(() =>
+  resultConfig.map((item) => ({
+    ...item,
+    label: `${item.label}（${selectedUnit.value.label}）`,
+    value: formatAmountByUnit(estimateDetail.value?.[item.key], selectedUnit.value),
+  })),
+)
+
+onMounted(() => {
+  void handleQuery({ showSuccessToast: false })
+})
+
+function handleRefresh() {
+  void handleQuery()
+}
+
+async function handleQuery(options: { showSuccessToast?: boolean } = {}) {
+  if (querying.value) return
+
+  querying.value = true
+  const payload = buildOpeningReserveEstimatePayload()
+  console.log('[日初备款数匡算入参]', payload)
+
+  try {
+    const response = await queryOpeningReserveEstimate(payload)
+    estimateDetail.value = response.body || {}
+    if (options.showSuccessToast !== false) {
+      showAppToast('刷新完成')
+    }
+  } catch (error) {
+    console.error('[日初备款数匡算失败]', error)
+    showAppToast(getErrorMessage(error, '查询失败，请重试'))
+  } finally {
+    querying.value = false
+  }
+}
+
+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 null
+
+  const normalizedText = text.replaceAll(',', '')
+
+  if (!/^[-+]?\d+(\.\d+)?$/.test(normalizedText)) {
+    return null
+  }
+
+  const isNegative = normalizedText.startsWith('-')
+  const unsignedText =
+    normalizedText.startsWith('-') || normalizedText.startsWith('+')
+      ? normalizedText.slice(1)
+      : normalizedText
+  const [rawInteger = '0', rawDecimal = ''] = unsignedText.split('.')
+  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 isNegative ? -cents : cents
+}
+
+function divideRounded(value: bigint, divisor: bigint) {
+  const isNegative = value < 0n
+  const absoluteValue = isNegative ? -value : value
+  let quotient = absoluteValue / divisor
+  const remainder = absoluteValue % divisor
+
+  if (remainder * 2n >= divisor) {
+    quotient += 1n
+  }
+
+  return isNegative ? -quotient : quotient
+}
+
+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, ',')
+
+  return `${isNegative ? '-' : ''}${groupedInteger}.${decimal}`
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+</script>
+
 <template>
-  <main class="page">
-    <section class="page-body">
-      <p class="placeholder">页面建设中…</p>
+  <main class="opening-reserve-page">
+    <section class="result-section" aria-label="日初备款数匡算查询结果">
+      <div class="section-heading">
+        <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">
+        <dl class="result-list">
+          <div v-for="item in resultItems" :key="item.key" class="result-row">
+            <dt>
+              <span class="result-icon" aria-hidden="true">
+                <van-icon :name="item.icon" />
+              </span>
+              <span class="result-label">{{ item.label }}</span>
+            </dt>
+            <dd>{{ item.value }}</dd>
+          </div>
+        </dl>
+      </div>
     </section>
+
+    <nav class="action-bar" aria-label="日初备款数匡算操作">
+      <button class="query-button" type="button" :disabled="querying" @click="handleRefresh">
+        <span>{{ querying ? '刷新中' : '刷新' }}</span>
+      </button>
+    </nav>
   </main>
 </template>
 
 <style scoped>
-.page {
+.opening-reserve-page {
+  width: 100%;
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  padding: 0 11px;
-  background: #f7f8fa;
+  padding: 31px 15px calc(env(safe-area-inset-bottom, 0px) + 94px);
+  color: #171b20;
+  background: #ffffff;
+  box-sizing: border-box;
 }
 
-.page-body {
-  padding: 24px 0;
+button {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
 }
 
-.placeholder {
-  padding-top: 120px;
-  color: #969799;
+.result-section {
+  display: block;
+}
+
+.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;
+  flex: 0 0 7px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ff3b44 0%, #ff1f2d 100%);
+  box-shadow: 0 6px 12px rgba(255, 39, 48, 0.22);
+}
+
+.section-heading h2 {
+  margin: 0 0 0 13px;
+  color: #151922;
+  font-size: 20px;
+  font-weight: 760;
+  line-height: 1.2;
+  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;
+}
+
+.result-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.result-row {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-items: center;
+  min-height: 74px;
+  padding: 13px 16px;
+  column-gap: 13px;
+  border: 1px solid #ffd9dd;
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 252, 252, 0.97) 100%), #ffffff;
+  box-shadow: 0 7px 18px rgba(255, 43, 50, 0.06);
+  box-sizing: border-box;
+}
+
+.result-row dt {
+  display: contents;
+  margin: 0;
+}
+
+.result-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-row: 1 / 3;
+  grid-column: 1;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  color: #f52932;
+  font-size: 19px;
+  background:
+    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%),
+    linear-gradient(135deg, #fff2f3 0%, #ffe6e9 100%);
+}
+
+.result-label {
+  grid-row: 1;
+  grid-column: 2;
+  align-self: end;
+  min-width: 0;
+  margin: 0 0 5px;
+  color: #20242d;
   font-size: 14px;
-  text-align: center;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.result-row dd {
+  grid-row: 2;
+  grid-column: 2;
+  align-self: start;
+  min-width: 0;
+  margin: 0;
+  color: #f20f19;
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1.28;
+  text-align: left;
+  overflow-wrap: anywhere;
+  letter-spacing: 0;
+}
+
+.action-bar {
+  position: fixed;
+  right: 0;
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
+  left: 50%;
+  z-index: 10;
+  width: 100%;
+  max-width: 750px;
+  padding: 0 15px;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.query-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  border-radius: 14px;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 680;
+  line-height: 1;
+  background: linear-gradient(135deg, #ff3d43 0%, #ff1825 100%);
+  box-shadow:
+    0 13px 24px rgba(255, 35, 43, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.28);
+  pointer-events: auto;
+}
+
+.query-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+@media (max-width: 360px) {
+  .opening-reserve-page {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+
+  .result-row {
+    grid-template-columns: 32px minmax(0, 1fr);
+    min-height: 70px;
+    padding: 12px 14px;
+    column-gap: 12px;
+  }
+
+  .result-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 18px;
+  }
+
+  .result-label {
+    font-size: 13px;
+  }
+
+  .result-row dd {
+    font-size: 16px;
+  }
 }
 </style>

package/src/views/pbc-position/index.vue

@@ -9,30 +9,50 @@ import { showAppToast } from '@/utils/toast'
 
 defineOptions({ name: 'PbcPositionPage' })
 
+/** 页面信息行的展示模型，icon 对应 Vant Icon 的图标名称。 */
 type PositionItem = {
+  /** 字段中文名，直接渲染到左侧标题。 */
   label: string
+  /** 字段展示值，接口空值统一转换为占位符。 */
   value: string
+  /** Vant Icon 名称，用于增强字段识别度。 */
   icon: string
+  /** 是否按关键金额样式突出展示。 */
   highlight?: boolean
 }
 
+/** 页面按业务含义分组展示字段，避免模板中直接堆业务判断。 */
 type PositionSection = {
+  /** 分组唯一标识，用于 v-for key。 */
   key: string
+  /** 当前分组下的信息行。 */
   items: PositionItem[]
 }
 
+/** 当前申请或最终查询到的人行头寸余额明细。 */
 const balanceDetail = ref<PbcPositionBalance | null>(null)
+/** “发送”按钮加载态，防止重复发起申请。 */
 const sending = ref(false)
+/** “查询”按钮加载态，防止查询链路重复执行。 */
 const querying = ref(false)
 
+/** 任一交易进行中时禁用底部操作按钮。 */
 const actionDisabled = computed(() => sending.value || querying.value)
+/** 发送交易返回的申请平台流水号；存在该值时才展示“查询”按钮。 */
 const requestRefNo = computed(() => balanceDetail.value?.requestRefNo || '')
 
+/**
+ * 将接口明细转换为页面展示分组。
+ *
+ * 发送成功但尚未查询时，balanceDetail 只包含申请流水号；其余字段会显示
+ * 占位符。查询成功后，列表字段和明细字段合并进同一个对象并刷新展示。
+ */
 const positionSections = computed<PositionSection[]>(() => {
   const detail = balanceDetail.value
 
   return [
     {
+      // 基础信息：流水号、账号、更新时间等用于定位本次查询结果的字段。
       key: 'basic',
       items: [
         { label: '清算账户账号', value: fieldText(detail?.settleBankNo), icon: 'manager' },
@@ -47,6 +67,7 @@ const positionSections = computed<PositionSection[]>(() => {
       ],
     },
     {
+      // 余额信息：接口返回单位为元，页面统一换算为亿元展示。
       key: 'balance',
       items: [
         {
@@ -64,6 +85,7 @@ const positionSections = computed<PositionSection[]>(() => {
       ],
     },
     {
+      // 排队和辖内非清算账户信息：由明细交易补充返回。
       key: 'queue',
       items: [
         {
@@ -87,7 +109,14 @@ const positionSections = computed<PositionSection[]>(() => {
   ]
 })
 
+/**
+ * 发起人行头寸余额查询申请。
+ *
+ * 成功后仅能得到申请平台流水号，页面先保存该流水号并展示“查询”按钮；
+ * 最终余额数据需要用户继续点击“查询”触发列表加明细的组合查询。
+ */
 async function handleSend() {
+  // 交易进行中直接忽略重复点击，避免产生多笔申请或状态交叉覆盖。
   if (actionDisabled.value) return
 
   sending.value = true
@@ -98,6 +127,7 @@ async function handleSend() {
     const response = await sendPbcPositionRequest(payload)
     const refNo = response.body.refNo || ''
 
+    // 保存申请流水号作为下一步查询条件，同时让页面立即展示当前编号。
     balanceDetail.value = {
       requestRefNo: refNo,
       refNo,
@@ -111,7 +141,14 @@ async function handleSend() {
   }
 }
 
+/**
+ * 根据发送返回的申请平台流水号查询人行头寸余额。
+ *
+ * queryPbcPositionBalance 内部会先查候选列表，再逐条查询明细并匹配
+ * requestRefNo；页面只负责校验是否已有申请编号和维护加载态。
+ */
 async function handleQuery() {
+  // 和发送共用禁用条件，避免发送、查询两个异步流程并发写入页面状态。
   if (actionDisabled.value) return
 
   if (!requestRefNo.value) {
@@ -136,11 +173,18 @@ async function handleQuery() {
   }
 }
 
+/** 将接口字符串字段标准化为可展示文本，空值统一显示占位符。 */
 function fieldText(value?: string) {
   const text = value?.trim()
   return text || '-'
 }
 
+/**
+ * 将接口返回的元级金额转换为亿元文本。
+ *
+ * 后端金额字段可能带千分位逗号；转换前先移除逗号，非法数字或空值
+ * 都按占位符展示，避免页面出现 NaN。
+ */
 function formatYuanToBillionText(value?: string) {
   if (!value?.trim()) return '-'
 
@@ -153,6 +197,7 @@ function formatYuanToBillionText(value?: string) {
   }).format(amount / 100000000)
 }
 
+/** 从异常对象中提取可读错误信息，兜底展示当前操作的默认失败文案。 */
 function getErrorMessage(error: unknown, fallback: string) {
   return error instanceof Error && error.message ? error.message : fallback
 }
@@ -160,6 +205,7 @@ function getErrorMessage(error: unknown, fallback: string) {
 
 <template>
   <main class="pbc-page">
+    <!-- 余额信息区：发送前显示占位符，查询成功后展示真实余额和明细字段。 -->
     <section class="balance-card" aria-label="人行头寸余额">
       <div v-for="section in positionSections" :key="section.key" class="info-section">
         <dl class="info-list">
@@ -176,7 +222,8 @@ function getErrorMessage(error: unknown, fallback: string) {
       </div>
     </section>
 
-    <nav class="action-bar" aria-label="人行头寸操作">
+    <!-- 底部操作区：未获得申请流水号时只展示“发送”，发送成功后再展示“查询”。 -->
+    <nav class="action-bar" :class="{ 'single-action': !requestRefNo }" aria-label="人行头寸操作">
       <button
         class="action-btn send-btn"
         type="button"
@@ -186,6 +233,7 @@ function getErrorMessage(error: unknown, fallback: string) {
         <span>{{ sending ? '发送中' : '发送' }}</span>
       </button>
       <button
+        v-if="requestRefNo"
         class="action-btn query-btn"
         type="button"
         :disabled="actionDisabled"
@@ -198,6 +246,7 @@ function getErrorMessage(error: unknown, fallback: string) {
 </template>
 
 <style scoped>
+/* 页面主体宽度与移动端安全区留白，适配 750px 设计稿容器。 */
 .pbc-page {
   width: 100%;
   max-width: 750px;
@@ -208,6 +257,7 @@ function getErrorMessage(error: unknown, fallback: string) {
   box-sizing: border-box;
 }
 
+/* 重置原生按钮样式，避免不同终端默认外观影响底部操作按钮。 */
 button {
   border: 0;
   padding: 0;
@@ -216,6 +266,7 @@ button {
   appearance: none;
 }
 
+/* 信息卡片承载全部余额字段，多个业务分组用浅色分隔条区分。 */
 .balance-card {
   overflow: hidden;
   margin: 17px 13px 0;
@@ -229,6 +280,7 @@ button {
   border-top: 8px solid #f7f7f8;
 }
 
+/* 字段列表使用 dl 语义结构，dt 为字段名，dd 为字段值。 */
 .info-list {
   margin: 0;
   padding: 8px 13px;
@@ -246,6 +298,7 @@ button {
   border-top: 1px solid #edf0f2;
 }
 
+/* 字段图标和标题保持左侧固定结构，右侧值按内容宽度右对齐。 */
 .info-row dt {
   display: flex;
   align-items: center;
@@ -288,6 +341,7 @@ button {
   white-space: nowrap;
 }
 
+/* 关键余额金额使用更高权重，便于柜员快速定位清算账户余额。 */
 .info-row dd.highlight {
   color: #c91b20;
   font-size: 22px;
@@ -295,6 +349,7 @@ button {
   letter-spacing: 0;
 }
 
+/* 固定底部操作栏，pointer-events 只开放给按钮，避免遮挡页面其他区域点击。 */
 .action-bar {
   position: fixed;
   right: 0;
@@ -312,6 +367,12 @@ button {
   pointer-events: none;
 }
 
+/* 未获取申请流水号时只有一个发送按钮，按钮占满整行。 */
+.action-bar.single-action {
+  grid-template-columns: 1fr;
+}
+
+/* 发送和查询按钮共享基础尺寸，具体颜色由各自业务类控制。 */
 .action-btn {
   display: inline-flex;
   align-items: center;
@@ -329,6 +390,7 @@ button {
   opacity: 0.68;
 }
 
+/* 发送是主操作，使用实心红色按钮。 */
 .send-btn {
   color: #ffffff;
   background: linear-gradient(135deg, #ff3338 0%, #ff232b 100%);
@@ -337,6 +399,7 @@ button {
     inset 0 1px 0 rgba(255, 255, 255, 0.22);
 }
 
+/* 查询是发送后的次级操作，使用描边按钮以弱化视觉层级。 */
 .query-btn {
   border: 1px solid #ff3038;
   color: #ef252d;
@@ -344,6 +407,7 @@ button {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
+/* 窄屏下压缩字段和值字号，避免长字段名与金额互相挤压。 */
 @media (max-width: 350px) {
   .field-label,
   .info-row dd {