minitest2.0 0.0.3 → 0.0.5

package/src/views/net-debit/index.vue

@@ -1,26 +1,516 @@
+<script setup lang="ts">
+import {
+  buildNetDebitQueryPayload,
+  buildNetDebitSendPayload,
+  queryNetDebitQuota,
+  sendNetDebitRequest,
+  type NetDebitQuotaDetail,
+} from '@/api/net-debit'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'NetDebitPage' })
+
+type QuotaMetric = {
+  key: string
+  label: string
+  value: string
+  icon: string
+  primary?: boolean
+}
+
+type QuotaItem = {
+  label: string
+  value: string
+  icon: string
+}
+
+type QuotaSection = {
+  key: string
+  title: string
+  items: QuotaItem[]
+}
+
+const quotaDetail = ref<NetDebitQuotaDetail | null>(null)
+const sending = ref(false)
+const querying = ref(false)
+
+const actionDisabled = computed(() => sending.value || querying.value)
+const requestRefNo = computed(() => quotaDetail.value?.requestRefNo || quotaDetail.value?.refNo || '')
+
+const quotaMetrics = computed<QuotaMetric[]>(() => {
+  const detail = quotaDetail.value
+
+  return [
+    {
+      key: 'currentAvailableDrAmt',
+      label: '可用净借记限额(亿元)',
+      value: formatYuanToBillionText(detail?.currentAvailableDrAmt),
+      icon: 'balance-o',
+      primary: true,
+    },
+    {
+      key: 'availableDrAmt',
+      label: '净借记限额(亿元)',
+      value: formatYuanToBillionText(detail?.availableDrAmt),
+      icon: 'gold-coin-o',
+    },
+    {
+      key: 'creditAmt',
+      label: '授信额度(亿元)',
+      value: formatYuanToBillionText(detail?.creditAmt),
+      icon: 'card',
+    },
+  ]
+})
+
+const quotaSections = computed<QuotaSection[]>(() => {
+  const detail = quotaDetail.value
+
+  return [
+    {
+      key: 'quota',
+      title: '额度信息',
+      items: [
+        {
+          label: '质押额度(亿元)',
+          value: formatYuanToBillionText(detail?.impawnLimit),
+          icon: 'paid',
+        },
+        {
+          label: '圈存资金(亿元)',
+          value: formatYuanToBillionText(detail?.encloseAmt),
+          icon: 'balance-list-o',
+        },
+      ],
+    },
+    {
+      key: 'status',
+      title: '处理状态',
+      items: [
+        { label: '查询处理状态', value: fieldText(detail?.busiStatus), icon: 'passed' },
+        { label: '业务处理状态', value: fieldText(detail?.status), icon: 'notes-o' },
+        { label: '委托日期', value: formatDate(detail?.consignDate), icon: 'clock' },
+        { label: '应答委托日期', value: formatDate(detail?.responseDate), icon: 'clock-o' },
+      ],
+    },
+    {
+      key: 'message',
+      title: '报文信息',
+      items: [
+        {
+          label: '平台流水号',
+          value: fieldText(detail?.refNo || detail?.requestRefNo),
+          icon: 'description',
+        },
+        { label: '报文标识号', value: fieldText(detail?.msgRefNo), icon: 'cluster' },
+        { label: '应答报文序号', value: fieldText(detail?.responseNo), icon: 'orders-o' },
+        { label: '被查询行行号', value: fieldText(detail?.rcvBankCode), icon: 'hotel-o' },
+        { label: '被查询清算行行号', value: fieldText(detail?.settleBankCode), icon: 'hotel-o' },
+      ],
+    },
+  ]
+})
+
+async function handleSend() {
+  if (actionDisabled.value) return
+
+  sending.value = true
+  const payload = buildNetDebitSendPayload()
+  console.log('[净借记可用额度发送入参]', payload)
+
+  try {
+    const response = await sendNetDebitRequest(payload)
+    const refNo = response.body.refNo || ''
+
+    quotaDetail.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
+
+  const msgId = requestRefNo.value
+  if (!msgId) {
+    showDialog({
+      title: '提示',
+      message: '请先点击发送获取编号',
+      confirmButtonText: '知道了',
+    })
+    return
+  }
+
+  querying.value = true
+  const payload = buildNetDebitQueryPayload(msgId)
+  console.log('[净借记可用额度查询入参]', payload)
+
+  try {
+    const response = await queryNetDebitQuota(payload)
+
+    quotaDetail.value = {
+      ...response.body,
+      requestRefNo: msgId,
+      refNo: response.body.refNo || msgId,
+    }
+    showAppToast('查询完成')
+  } catch (error) {
+    console.error('[净借记可用额度查询失败]', error)
+    showAppToast(getErrorMessage(error, '查询失败，请重试'))
+  } finally {
+    querying.value = false
+  }
+}
+
+function fieldText(value?: string) {
+  const text = value?.trim()
+
+  return text || '-'
+}
+
+function formatDate(value?: string) {
+  const text = value?.trim()
+
+  if (!text) return '-'
+
+  const compactDate = text.match(/^(\d{4})(\d{2})(\d{2})$/)
+  if (compactDate) {
+    return `${compactDate[1]}-${compactDate[2]}-${compactDate[3]}`
+  }
+
+  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="page">
-    <section class="page-body">
-      <p class="placeholder">页面建设中…</p>
+  <main class="net-debit-page">
+    <section class="summary-strip" aria-label="净借记额度汇总">
+      <article
+        v-for="metric in quotaMetrics"
+        :key="metric.key"
+        class="quota-metric"
+        :class="{ primary: metric.primary }"
+      >
+        <span class="metric-icon" aria-hidden="true"><van-icon :name="metric.icon" /></span>
+        <span class="metric-label">{{ metric.label }}</span>
+        <strong>{{ metric.value }}</strong>
+      </article>
+    </section>
+
+    <nav class="action-bar" :class="{ 'single-action': !requestRefNo }" aria-label="净借记额度操作">
+      <button
+        class="action-btn send-btn"
+        type="button"
+        :disabled="actionDisabled"
+        @click="handleSend"
+      >
+        <van-icon name="description" />
+        <span>{{ sending ? '发送中' : '发送' }}</span>
+      </button>
+      <button
+        v-if="requestRefNo"
+        class="action-btn query-btn"
+        type="button"
+        :disabled="actionDisabled"
+        @click="handleQuery"
+      >
+        <van-icon name="search" />
+        <span>{{ querying ? '查询中' : '查询' }}</span>
+      </button>
+    </nav>
+
+    <section class="detail-panel" aria-label="净借记额度明细">
+      <section v-for="section in quotaSections" :key="section.key" class="detail-section">
+        <header class="section-title">
+          <span class="section-title-mark" aria-hidden="true"></span>
+          <h2>{{ section.title }}</h2>
+        </header>
+
+        <dl class="detail-list">
+          <div v-for="item in section.items" :key="`${section.key}-${item.label}`" class="detail-row">
+            <dt>
+              <span class="field-icon" aria-hidden="true">
+                <van-icon :name="item.icon" />
+              </span>
+              <span class="field-label">{{ item.label }}</span>
+            </dt>
+            <dd>{{ item.value }}</dd>
+          </div>
+        </dl>
+      </section>
     </section>
   </main>
 </template>
 
 <style scoped>
-.page {
+.net-debit-page {
+  width: 100%;
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  padding: 0 11px;
-  background: #f7f8fa;
+  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 16px);
+  color: #171b20;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 48%, #ffffff 100%);
+  box-sizing: border-box;
 }
-.page-body {
-  padding: 24px 0;
+
+button {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+}
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.quota-metric {
+  display: grid;
+  grid-template-rows: 28px auto minmax(24px, auto);
+  min-width: 0;
+  min-height: 104px;
+  padding: 12px 10px 11px;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 22px rgba(34, 40, 56, 0.05);
+  box-sizing: border-box;
+}
+
+.quota-metric.primary {
+  grid-column: 1 / -1;
+  min-height: 112px;
+  border-color: #ffdcdf;
+  background: linear-gradient(135deg, #ffffff 0%, #fff5f6 100%);
+}
+
+.metric-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: #ef252d;
+  font-size: 17px;
+  background: #fff0f2;
 }
-.placeholder {
-  text-align: center;
-  color: #969799;
+
+.metric-label {
+  min-width: 0;
+  margin-top: 9px;
+  color: #727a88;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.quota-metric strong {
+  min-width: 0;
+  margin-top: 6px;
+  color: #171b20;
+  font-size: 16px;
+  font-weight: 760;
+  line-height: 1.18;
+  overflow-wrap: anywhere;
+}
+
+.quota-metric.primary strong {
+  color: #c91b20;
+  font-size: 30px;
+  line-height: 1.08;
+}
+
+.detail-panel {
+  margin-top: 12px;
+}
+
+.detail-section {
+  overflow: hidden;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(30, 36, 52, 0.05);
+}
+
+.detail-section + .detail-section {
+  margin-top: 10px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 13px;
+  border-bottom: 1px solid #edf0f2;
+}
+
+.section-title-mark {
+  width: 5px;
+  height: 16px;
+  border-radius: 8px;
+  background: #f22f3a;
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1;
+}
+
+.detail-list {
+  margin: 0;
+  padding: 4px 13px;
+}
+
+.detail-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
+  align-items: center;
+  min-height: 42px;
+  column-gap: 10px;
+}
+
+.detail-row + .detail-row {
+  border-top: 1px solid #f1f2f4;
+}
+
+.detail-row dt {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+}
+
+.field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  border-radius: 8px;
+  color: #ef252d;
+  font-size: 17px;
+  background: #fff0f2;
+}
+
+.field-label {
+  min-width: 0;
+  margin-left: 10px;
+  color: #202532;
   font-size: 14px;
-  padding-top: 120px;
+  font-weight: 560;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.detail-row dd {
+  min-width: 0;
+  margin: 0;
+  color: #202532;
+  font-size: 14px;
+  font-weight: 580;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.action-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 13px;
+  margin-top: 10px;
+}
+
+.action-bar.single-action {
+  grid-template-columns: 1fr;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 44px;
+  border-radius: 22px;
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.action-btn .van-icon {
+  font-size: 18px;
+}
+
+.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) {
+  .quota-metric {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+  .quota-metric.primary strong {
+    font-size: 26px;
+  }
+
+  .quota-metric strong,
+  .field-label,
+  .detail-row dd {
+    font-size: 13px;
+  }
+
+  .detail-row {
+    grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
+  }
 }
 </style>