minitest2.0 0.0.4 → 0.0.5

package/src/views/clearing-detail/index.vue

@@ -1,26 +1,617 @@
+<script setup lang="ts">
+import {
+  buildClearingDetailPayload,
+  queryClearingDetail,
+  type ClearingDetailRecord,
+} from '@/api/clearing-detail'
+import { useAppStore } from '@/stores/app'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'ClearingDetailPage' })
+
+type SummaryItem = {
+  label: string
+  value: string
+  icon: string
+}
+
+const appStore = useAppStore()
+const selectedDate = ref(appStore.systemWorkDate)
+const datePickerValue = ref(selectedDate.value.split('-'))
+const showDatePicker = ref(false)
+const minDate = new Date(2020, 0, 1)
+const maxDate = new Date(2030, 11, 31)
+
+const records = ref<ClearingDetailRecord[]>([])
+const querying = ref(false)
+const hasQueried = ref(false)
+const queryFailed = ref(false)
+
+const summaryItems = computed<SummaryItem[]>(() => [
+  { label: '场次数', value: String(records.value.length), icon: 'orders-o' },
+  { label: '进款合计', value: formatAmount(sumAmount('secreditLineAmt')), icon: 'gold-coin-o' },
+  { label: '出款合计', value: formatAmount(sumAmount('sedebtLineAmt')), icon: 'card' },
+])
+
+onMounted(() => {
+  void handleQuery({ showToast: false })
+})
+
+async function handleQuery(options: { showToast?: boolean } = {}) {
+  if (querying.value) return
+
+  if (!isValidDate(selectedDate.value)) {
+    showAppToast('请选择正确的清算日期')
+    return
+  }
+
+  querying.value = true
+  const payload = buildClearingDetailPayload({
+    queryDate: selectedDate.value,
+  })
+  console.log('[小额网银清算场次明细查询入参]', payload)
+
+  try {
+    const response = await queryClearingDetail(payload)
+    records.value = response.body.result || []
+    hasQueried.value = true
+    queryFailed.value = false
+
+    if (options.showToast !== false) {
+      showAppToast(`查询到 ${records.value.length} 条明细`)
+    }
+  } catch (error) {
+    console.error('[小额网银清算场次明细查询失败]', error)
+    records.value = []
+    hasQueried.value = true
+    queryFailed.value = true
+    showAppToast(getErrorMessage(error, '查询失败，请重试'))
+  } finally {
+    querying.value = false
+  }
+}
+
+function handleQueryClick() {
+  void handleQuery()
+}
+
+function confirmDate() {
+  selectedDate.value = datePickerValue.value.join('-')
+  showDatePicker.value = false
+}
+
+function openDatePicker() {
+  datePickerValue.value = selectedDate.value.split('-')
+  showDatePicker.value = true
+}
+
+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 formatSendTime(value?: string) {
+  const text = value?.trim()
+
+  if (!text) return '-'
+
+  const parsed = new Date(text)
+  if (!Number.isNaN(parsed.getTime())) {
+    return `${formatDatePart(parsed)} ${formatTimePart(parsed)}`
+  }
+
+  return text.replace('T', ' ')
+}
+
+function formatDatePart(value: Date) {
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+}
+
+function formatTimePart(value: Date) {
+  const hour = String(value.getHours()).padStart(2, '0')
+  const minute = String(value.getMinutes()).padStart(2, '0')
+  const second = String(value.getSeconds()).padStart(2, '0')
+
+  return `${hour}:${minute}:${second}`
+}
+
+function formatAmount(value?: string | number) {
+  const amount = typeof value === 'number' ? value : parseAmount(value)
+
+  if (!Number.isFinite(amount)) return '-'
+
+  return new Intl.NumberFormat('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount)
+}
+
+function formatBalance(record: ClearingDetailRecord) {
+  const direction = record.txnetgBalanceDirection?.trim()
+  const amountText = formatAmount(record.txnetgBalance)
+
+  if (amountText === '-') return amountText
+  if (!direction || amountText.startsWith('-') || amountText.startsWith('+')) return amountText
+
+  return `${direction}${amountText}`
+}
+
+function fieldText(value?: string) {
+  const text = value?.trim()
+
+  return text || '-'
+}
+
+function sumAmount(key: 'secreditLineAmt' | 'sedebtLineAmt') {
+  return records.value.reduce((sum, record) => {
+    const amount = parseAmount(record[key])
+
+    return Number.isFinite(amount) ? sum + amount : sum
+  }, 0)
+}
+
+function parseAmount(value?: string) {
+  if (!value?.trim()) return Number.NaN
+
+  return Number(value.replaceAll(',', ''))
+}
+
+function isValidDate(value: string) {
+  return /^\d{4}-\d{2}-\d{2}$/.test(value)
+}
+
+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="clearing-page">
+    <section class="query-panel" aria-label="清算场次查询条件">
+      <button class="date-row" type="button" @click="openDatePicker">
+        <span class="date-icon" aria-hidden="true"><van-icon name="calendar-o" /></span>
+        <span class="date-label">清算日期</span>
+        <span class="date-value">{{ selectedDate }}</span>
+        <van-icon class="date-arrow" name="arrow" />
+      </button>
     </section>
+
+    <section class="summary-grid" aria-label="清算汇总">
+      <div v-for="item in summaryItems" :key="item.label" class="summary-card">
+        <span class="summary-icon" aria-hidden="true"><van-icon :name="item.icon" /></span>
+        <span class="summary-label">{{ item.label }}</span>
+        <strong>{{ item.value }}</strong>
+      </div>
+    </section>
+
+    <section class="result-section" aria-label="清算场次明细">
+      <div class="section-title">
+        <span class="section-title-mark" aria-hidden="true"></span>
+        <h2>场次明细</h2>
+      </div>
+
+      <van-loading v-if="querying" class="loading-state" color="#f22f3a" size="24px">
+        加载中...
+      </van-loading>
+
+      <div v-else-if="records.length > 0" class="record-list">
+        <article
+          v-for="(record, index) in records"
+          :key="`${record.txnetgType || 'record'}-${index}`"
+          class="record-card"
+        >
+          <header class="record-head">
+            <span class="round-badge">场次 {{ fieldText(record.txnetgRnd) }}</span>
+            <span
+              class="direction-badge"
+              :class="{ negative: record.txnetgBalanceDirection === '-' }"
+            >
+              {{ fieldText(record.txnetgBalanceDirection) }}
+            </span>
+          </header>
+
+          <dl class="amount-grid">
+            <div>
+              <dt>进款</dt>
+              <dd>{{ formatAmount(record.secreditLineAmt) }}</dd>
+            </div>
+            <div>
+              <dt>出款</dt>
+              <dd>{{ formatAmount(record.sedebtLineAmt) }}</dd>
+            </div>
+            <div class="balance-cell">
+              <dt>轧差</dt>
+              <dd>{{ formatBalance(record) }}</dd>
+            </div>
+          </dl>
+
+          <dl class="meta-list">
+            <div>
+              <dt>轧差日期</dt>
+              <dd>{{ formatDate(record.txnetgDt) }}</dd>
+            </div>
+            <div>
+              <dt>时间</dt>
+              <dd>{{ formatSendTime(record.msgSendDt) }}</dd>
+            </div>
+            <div>
+              <dt>清算报文编号</dt>
+              <dd>{{ fieldText(record.txnetgType) }}</dd>
+            </div>
+          </dl>
+        </article>
+      </div>
+
+      <van-empty
+        v-else-if="hasQueried && !queryFailed"
+        image-size="72"
+        description="暂无清算场次明细"
+      />
+
+      <van-empty v-else-if="queryFailed" image-size="72" description="清算场次明细加载失败" />
+    </section>
+
+    <nav class="action-bar" aria-label="清算场次明细操作">
+      <button class="query-button" type="button" :disabled="querying" @click="handleQueryClick">
+        <van-icon name="search" />
+        <span>{{ querying ? '查询中' : '查询' }}</span>
+      </button>
+    </nav>
+
+    <van-popup v-model:show="showDatePicker" position="bottom" round safe-area-inset-bottom>
+      <van-date-picker
+        v-model="datePickerValue"
+        title="选择清算日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @cancel="showDatePicker = false"
+        @confirm="confirmDate"
+      />
+    </van-popup>
   </main>
 </template>
 
 <style scoped>
-.page {
+.clearing-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) + 86px);
+  color: #171b20;
+  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 52%, #ffffff 100%);
+  box-sizing: border-box;
 }
-.page-body {
-  padding: 24px 0;
+
+button {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
 }
-.placeholder {
-  text-align: center;
-  color: #969799;
+
+.query-panel {
+  overflow: hidden;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 22px rgba(34, 40, 56, 0.05);
+}
+
+.date-row {
+  display: grid;
+  grid-template-columns: 34px auto minmax(0, 1fr) 18px;
+  align-items: center;
+  width: 100%;
+  min-height: 54px;
+  padding: 0 14px;
+  column-gap: 10px;
+  color: #151922;
+  text-align: left;
+}
+
+.date-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  color: #ef252d;
+  font-size: 19px;
+  background: #fff0f2;
+}
+
+.date-label {
+  color: #202532;
   font-size: 14px;
-  padding-top: 120px;
+  font-weight: 620;
+}
+
+.date-value {
+  justify-self: end;
+  color: #323846;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.date-arrow {
+  justify-self: end;
+  color: #b3b7c2;
+  font-size: 15px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.summary-card {
+  display: grid;
+  grid-template-rows: 24px auto auto;
+  min-width: 0;
+  min-height: 92px;
+  padding: 11px 9px 10px;
+  border: 1px solid #ffe0e3;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 6px 16px rgba(255, 50, 62, 0.04);
+  box-sizing: border-box;
+}
+
+.summary-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  color: #f02b35;
+  font-size: 16px;
+  background: #fff2f3;
+}
+
+.summary-label {
+  margin-top: 7px;
+  color: #7b8290;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.summary-card strong {
+  min-width: 0;
+  margin-top: 5px;
+  color: #171b20;
+  font-size: 14px;
+  font-weight: 760;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.result-section {
+  margin-top: 17px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.section-title-mark {
+  width: 5px;
+  height: 16px;
+  border-radius: 8px;
+  background: #f22f3a;
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 16px;
+  font-weight: 720;
+  line-height: 1;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 52px 0;
+}
+
+.record-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.record-card {
+  padding: 13px;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(30, 36, 52, 0.055);
+}
+
+.record-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.round-badge,
+.direction-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 13px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.round-badge {
+  color: #ef252d;
+  background: #fff1f2;
+}
+
+.direction-badge {
+  min-width: 26px;
+  padding: 0 8px;
+  color: #0c8c61;
+  background: #eaf8f2;
+}
+
+.direction-badge.negative {
+  color: #d3212a;
+  background: #fff0f2;
+}
+
+.amount-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin: 12px 0 0;
+  padding: 0;
+}
+
+.amount-grid div {
+  min-width: 0;
+  padding: 10px 8px;
+  border-radius: 8px;
+  background: #f8f9fb;
+}
+
+.amount-grid dt,
+.meta-list dt {
+  margin: 0;
+  color: #7b8290;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.amount-grid dd {
+  min-width: 0;
+  margin: 6px 0 0;
+  color: #171b20;
+  font-size: 15px;
+  font-weight: 720;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.amount-grid .balance-cell {
+  background: #fff5f6;
+}
+
+.amount-grid .balance-cell dd {
+  color: #d3212a;
+}
+
+.meta-list {
+  margin: 12px 0 0;
+  padding: 0;
+  border-top: 1px solid #edf0f2;
+}
+
+.meta-list div {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  align-items: center;
+  min-height: 34px;
+  column-gap: 10px;
+}
+
+.meta-list div + div {
+  border-top: 1px solid #f1f2f4;
+}
+
+.meta-list dd {
+  min-width: 0;
+  margin: 0;
+  color: #242a36;
+  font-size: 13px;
+  font-weight: 520;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.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 13px;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.query-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: 100%;
+  height: 44px;
+  border-radius: 22px;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 650;
+  line-height: 1;
+  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);
+  pointer-events: auto;
+}
+
+.query-button .van-icon {
+  font-size: 18px;
+}
+
+.query-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+@media (max-width: 350px) {
+  .summary-card {
+    padding-right: 7px;
+    padding-left: 7px;
+  }
+
+  .summary-card strong,
+  .amount-grid dd {
+    font-size: 13px;
+  }
+
+  .meta-list div {
+    grid-template-columns: 82px minmax(0, 1fr);
+  }
 }
 </style>