minitest2.0 0.0.0

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

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import {
+  buildPbcPositionSendPayload,
+  queryPbcPositionBalance,
+  sendPbcPositionRequest,
+  type PbcPositionBalance,
+} from '@/api/pbc-position'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'PbcPositionPage' })
+
+type PositionItem = {
+  label: string
+  value: string
+  icon: string
+  highlight?: boolean
+}
+
+type PositionSection = {
+  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 || '')
+
+const positionSections = computed<PositionSection[]>(() => {
+  const detail = balanceDetail.value
+
+  return [
+    {
+      key: 'basic',
+      items: [
+        { label: '清算账户账号', value: fieldText(detail?.settleBankNo), icon: 'manager' },
+        { label: '更新时间', value: fieldText(detail?.updateTime), icon: 'clock' },
+        {
+          label: '申请平台流水号',
+          value: fieldText(detail?.refNo || detail?.requestRefNo),
+          icon: 'description',
+        },
+        { label: '清算账户行号', value: fieldText(detail?.settleBankNo), icon: 'hotel-o' },
+        { label: '应答平台流水号', value: fieldText(detail?.resRefNo), icon: 'cluster' },
+      ],
+    },
+    {
+      key: 'balance',
+      items: [
+        {
+          label: '清算账户余额(亿元)',
+          value: formatYuanToBillionText(detail?.settleBal),
+          icon: 'balance-o',
+          highlight: true,
+        },
+        { label: '可用头寸(亿元)', value: formatYuanToBillionText(detail?.avaAmt), icon: 'card' },
+        {
+          label: '预期头寸(亿元)',
+          value: formatYuanToBillionText(detail?.expectAmt),
+          icon: 'chart-trending-o',
+        },
+      ],
+    },
+    {
+      key: 'queue',
+      items: [
+        {
+          label: '排队借记总金额(亿元)',
+          value: formatYuanToBillionText(detail?.lineDrAmt),
+          icon: 'gold-coin-o',
+        },
+        {
+          label: '排队贷记总金额(亿元)',
+          value: formatYuanToBillionText(detail?.lineCrAmt),
+          icon: 'card',
+        },
+        { label: '所辖非清算账户数', value: fieldText(detail?.subAcctNumber), icon: 'friends' },
+        {
+          label: '所辖非清算总余额(亿元)',
+          value: formatYuanToBillionText(detail?.subAcctAmt),
+          icon: 'paid',
+        },
+      ],
+    },
+  ]
+})
+
+async function handleSend() {
+  if (actionDisabled.value) return
+
+  sending.value = true
+  const payload = buildPbcPositionSendPayload()
+  console.log('[人行头寸余额发送入参]', payload)
+
+  try {
+    const response = await sendPbcPositionRequest(payload)
+    const refNo = response.body.refNo || ''
+
+    balanceDetail.value = {
+      requestRefNo: refNo,
+      refNo,
+    }
+    showAppToast(refNo ? `发送成功：${refNo}` : '发送成功')
+  } catch (error) {
+    console.error('[人行头寸余额发送失败]', error)
+    showAppToast(getErrorMessage(error, '发送失败，请重试'))
+  } finally {
+    sending.value = false
+  }
+}
+
+async function handleQuery() {
+  if (actionDisabled.value) return
+
+  if (!requestRefNo.value) {
+    showDialog({
+      title: '提示',
+      message: '请先点击发送获取编号',
+      confirmButtonText: '知道了',
+    })
+    return
+  }
+
+  querying.value = true
+
+  try {
+    balanceDetail.value = await queryPbcPositionBalance(requestRefNo.value)
+    showAppToast('查询完成')
+  } catch (error) {
+    console.error('[人行头寸余额查询失败]', error)
+    showAppToast(getErrorMessage(error, '查询失败，请重试'))
+  } finally {
+    querying.value = false
+  }
+}
+
+function fieldText(value?: string) {
+  const text = value?.trim()
+  return text || '-'
+}
+
+function formatYuanToBillionText(value?: string) {
+  if (!value?.trim()) return '-'
+
+  const amount = Number(value.replaceAll(',', ''))
+  if (!Number.isFinite(amount)) return '-'
+
+  return new Intl.NumberFormat('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount / 100000000)
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+</script>
+
+<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">
+          <div v-for="item in section.items" :key="`${section.key}-${item.label}`" class="info-row">
+            <dt>
+              <span class="field-icon" aria-hidden="true">
+                <van-icon :name="item.icon" />
+              </span>
+              <span class="field-label">{{ item.label }}</span>
+            </dt>
+            <dd :class="{ highlight: item.highlight }">{{ item.value }}</dd>
+          </div>
+        </dl>
+      </div>
+    </section>
+
+    <nav class="action-bar" aria-label="人行头寸操作">
+      <button
+        class="action-btn send-btn"
+        type="button"
+        :disabled="actionDisabled"
+        @click="handleSend"
+      >
+        <span>{{ sending ? '发送中' : '发送' }}</span>
+      </button>
+      <button
+        class="action-btn query-btn"
+        type="button"
+        :disabled="actionDisabled"
+        @click="handleQuery"
+      >
+        <span>{{ querying ? '查询中' : '查询' }}</span>
+      </button>
+    </nav>
+  </main>
+</template>
+
+<style scoped>
+.pbc-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
+  color: #181d28;
+  box-sizing: border-box;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+}
+
+.balance-card {
+  overflow: hidden;
+  margin: 17px 13px 0;
+  border: 1px solid #edf0f4;
+  border-radius: 19px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 8px 24px rgba(32, 38, 55, 0.06);
+}
+
+.info-section + .info-section {
+  border-top: 8px solid #f7f7f8;
+}
+
+.info-list {
+  margin: 0;
+  padding: 8px 13px;
+}
+
+.info-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 37px;
+  column-gap: 10px;
+}
+
+.info-row + .info-row {
+  border-top: 1px solid #edf0f2;
+}
+
+.info-row dt {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+}
+
+.field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex: 0 0 26px;
+  border-radius: 7px;
+  color: #ef252d;
+  font-size: 18px;
+  background: linear-gradient(135deg, #fff1f2 0%, #ffe8ea 100%);
+  box-shadow: 0 4px 11px rgba(236, 42, 50, 0.1);
+}
+
+.field-label {
+  overflow: hidden;
+  margin-left: 14px;
+  color: #202532;
+  font-size: 14px;
+  font-weight: 520;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.info-row dd {
+  margin: 0;
+  color: #1a1f2a;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.info-row dd.highlight {
+  color: #c91b20;
+  font-size: 22px;
+  font-weight: 760;
+  letter-spacing: 0;
+}
+
+.action-bar {
+  position: fixed;
+  right: 0;
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
+  left: 50%;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 19px;
+  width: 100%;
+  max-width: 750px;
+  padding: 0 13px;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+  border-radius: 24px;
+  font-size: 18px;
+  font-weight: 580;
+  line-height: 1;
+  pointer-events: auto;
+}
+
+.action-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.send-btn {
+  color: #ffffff;
+  background: linear-gradient(135deg, #ff3338 0%, #ff232b 100%);
+  box-shadow:
+    0 12px 22px rgba(255, 44, 50, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+}
+
+.query-btn {
+  border: 1px solid #ff3038;
+  color: #ef252d;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+@media (max-width: 350px) {
+  .field-label,
+  .info-row dd {
+    font-size: 13px;
+  }
+
+  .info-row dd.highlight {
+    font-size: 19px;
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const router = useRouter()
+
+const estimateItems = [
+  {
+    title: '头寸匡算报表',
+    route: '/position-estimate/report',
+    image: `${import.meta.env.BASE_URL}images/position-estimate-report.png`,
+  },
+  {
+    title: '日初备款数匡算',
+    route: '/position-estimate/opening-reserve',
+    image: `${import.meta.env.BASE_URL}images/opening-reserve-estimate.png`,
+  },
+]
+</script>
+
+<template>
+  <main class="page">
+    <section class="nav-list" aria-label="头寸匡算功能导航">
+      <button
+        v-for="item in estimateItems"
+        :key="item.route"
+        class="nav-item"
+        type="button"
+        :aria-label="item.title"
+        @click="router.push(item.route)"
+      >
+        <img class="nav-image" :src="item.image" :alt="item.title" />
+      </button>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 42px 26px 24px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.nav-list {
+  display: flex;
+  flex-direction: column;
+  gap: 34px;
+}
+
+.nav-item {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: 18px;
+  background: transparent;
+  appearance: none;
+}
+
+.nav-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+</style>

package/src/views/position-estimate-report/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <main class="page">
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+
+.page-body {
+  padding: 24px 0;
+}
+
+.placeholder {
+  padding-top: 120px;
+  color: #969799;
+  font-size: 14px;
+  text-align: center;
+}
+</style>