应缴税信息 新增 滞纳金

src/services/modules/invoiceInformation/type.d.ts

@@ -20,6 +20,7 @@ export interface PushRecordIdRequest {
 export interface InvoiceTaxDetailResponse {
   detailItems?: InvoiceTaxDetailItem[]
   totalAmount?: string
+  totalLateFee?: string
   totalAmountDisplay?: string
   [property: string]: any
 }

src/views/invoice-information/detail.vue

@@ -19,34 +19,44 @@
       <!-- 有数据 -->
       <div v-else-if="taxList.length" class="card">
         <h3 class="card-title">应纳税费信息</h3>
-
         <div v-for="(item, index) in taxList" :key="index" class="tax-item">
           <div class="tax-header" @click="toggle(index)">
-            <div class="tax-name">{{ item.taxName || '未知税种' }}</div>
-            <div class="tax-amount">
-              {{ item.amount || '0.00' }}
-              <van-icon
-                :name="item.open ? 'arrow-up' : 'arrow-down'"
-                class="arrow"
-                :style="{ transform: item.open ? 'rotate(180deg)' : 'rotate(0deg)' }"
-              />
+            <div class="tax-name">{{ item.taxName ?? '未知税种' }}</div>
+
+            <div class="tax-amount amount--weak">
+              {{ item.amount ?? '0.00' }}
+              <van-icon :name="item.open ? 'arrow-up' : 'arrow-down'" class="arrow" />
             </div>
           </div>
 
-          <!-- 展开详情 -->
           <transition name="expand">
             <div v-show="item.open" class="tax-detail">
               <div class="tax-row">
-                <span class="label">应纳税额</span>
-                <span class="value">{{ item.originAmount || '-' }}</span>
+                <span class="label">减免税额</span>
+                <span class="value amount--weak">
+                  {{ item.deductionAmount ?? '-' }}
+                </span>
               </div>
+
               <div class="tax-row">
-                <span class="label">减免税额</span>
-                <span class="value">{{ item.deductionAmount || '-' }}</span>
+                <span class="label">应纳税额</span>
+                <span class="value amount--strong">
+                  {{ item.originAmount ?? '-' }}
+                </span>
               </div>
             </div>
           </transition>
         </div>
+
+        <!-- 滞纳金 -->
+        <div class="tax-item">
+          <div class="tax-header">
+            <div class="tax-name">滞纳金</div>
+            <div class="tax-amount amount--strong">
+              {{ invoiceTaxInfo.value?.totalLateFee ?? '0.00' }}
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- 无数据 -->
@@ -67,6 +77,7 @@ import { showToast } from 'vant'
 import { getInvoiceTaxApi } from '@/services/modules/invoiceInformation'
 import type {
   PushRecordIdRequest,
+  InvoiceTaxDetailResponse,
   InvoiceTaxDetailApiResponse,
   InvoiceTaxDetailItem,
 } from '@/services/modules/invoiceInformation/type.d.ts'
@@ -90,11 +101,14 @@ const toggle = (index: number) => {
 
 const onBack = () => history.back()
 
+const invoiceTaxInfo = ref<InvoiceTaxDetailResponse>({})
+
 const getInvoiceTax = async () => {
   loading.value = true
   try {
     const res: InvoiceTaxDetailApiResponse = await getInvoiceTaxApi(params)
     if ((res.code === 0 || res.code === '0') && res.data) {
+      invoiceTaxInfo.value = res.data
       const detailItems: InvoiceTaxDetailItem[] = res.data.detailItems ?? []
       if (detailItems.length > 0) {
         taxList.value = detailItems.map((item: InvoiceTaxDetailItem) => ({
@@ -128,58 +142,32 @@ onMounted(() => {
 .tax-page {
   display: flex;
   flex-direction: column;
-  height: 100vh; // 避免内容撑高导致页面滚动
+  height: 100vh;
   background: #f6f7fb;
   font-size: 3.6vw;
   color: #333;
-  overflow: hidden; // 去除外层滚动条
+  overflow: hidden;
+
+  .page-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4vw;
+  }
 }
 
+/* 顶部 */
 .van-nav-bar {
-  background-color: #fff;
+  background: #fff;
   border-bottom: 1px solid #f2f2f2;
   font-weight: 600;
 }
 
-// 修改左侧返回图标颜色
 :deep(.van-icon-arrow-left) {
   color: #0072f8;
   font-size: 28px;
 }
 
-// 中间内容区域：允许内部滚动
-.page-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4vw;
-  box-sizing: border-box;
-}
-
-// 骨架屏
-.skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 3vw;
-
-  .skeleton-card {
-    height: 22vw;
-    background: linear-gradient(90deg, #eee 25%, #f8f8f8 50%, #eee 75%);
-    background-size: 200% 100%;
-    border-radius: 3vw;
-    animation: shimmer 1.5s infinite linear;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-// 卡片
+/* 卡片 */
 .card {
   background: #fff;
   border-radius: 3vw;
@@ -187,19 +175,17 @@ onMounted(() => {
   box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.05);
 
   .card-title {
-    font-weight: 600;
     font-size: 4.2vw;
+    font-weight: 600;
     margin-bottom: 3vw;
-    border-left: 1vw solid #0072f8;
     padding-left: 2vw;
+    border-left: 1vw solid #0072f8;
   }
 }
 
-// 税项
+/* ================= 税项 ================= */
 .tax-item {
-  + .tax-item {
-    border-top: 0.3vw solid #f0f0f0;
-  }
+  border-top: 0.3vw solid #f0f0f0;
 
   .tax-header {
     display: flex;
@@ -207,68 +193,79 @@ onMounted(() => {
     align-items: center;
     padding: 3vw 0;
     font-size: 4vw;
-    color: #222;
-    cursor: pointer;
+
+    .tax-name {
+      font-weight: 500;
+      color: #222;
+    }
 
     .tax-amount {
       display: flex;
       align-items: center;
       gap: 1vw;
-      font-weight: 600;
 
       .arrow {
         font-size: 3.2vw;
-        color: #999;
+        color: #bbb;
         transition: transform 0.3s ease;
       }
     }
   }
 
   .tax-detail {
-    overflow: hidden;
-
     .tax-row {
       display: flex;
       justify-content: space-between;
-      color: #999;
-      font-size: 3.4vw;
       padding: 1.5vw 0 1.5vw 2vw;
+      font-size: 3.4vw;
+      color: #999;
     }
   }
+
+  /* 金额语义 */
+  .amount--weak {
+    color: #999;
+    font-weight: 400;
+  }
+
+  .amount--strong {
+    color: #222;
+    font-weight: 600;
+  }
 }
 
-// 动画
+/* 展开动画 */
 .expand-enter-active,
 .expand-leave-active {
   transition:
     max-height 0.35s ease,
     opacity 0.3s ease;
 }
+
 .expand-enter-from,
 .expand-leave-to {
   max-height: 0;
   opacity: 0;
 }
+
 .expand-enter-to,
 .expand-leave-from {
   max-height: 200vw;
   opacity: 1;
 }
 
-// 底部栏
+/* 底部 */
 .footer {
-  position: sticky; // 保持底部固定
+  position: sticky;
   bottom: 0;
   z-index: 10;
   background: #fff;
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
   padding: 3vw 5vw;
   font-size: 4vw;
   border-top: 0.3vw solid #eee;
-  box-sizing: border-box;
-  // iPhone 底部安全区
   padding-bottom: calc(3vw + env(safe-area-inset-bottom));
 
   .amount {
@@ -277,11 +274,11 @@ onMounted(() => {
   }
 }
 
-// 空数据
+/* 空态 */
 .empty {
   text-align: center;
-  color: #aaa;
   padding: 20vw 0;
+  color: #aaa;
   font-size: 3.8vw;
 }
 </style>