hcp_h5/src/views/invoice-information/detail.vue

<template>
  <div class="tax-page">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="应缴税信息"
      fixed
      placeholder
      safe-area-inset-top
      left-arrow
      @click-left="onBack"
    />

    <div class="page-content">
      <!-- 骨架屏 -->
      <div v-if="loading" class="skeleton">
        <div v-for="n in 4" :key="n" class="skeleton-card shimmer"></div>
      </div>

      <!-- 有数据 -->
      <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 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 amount--weak">
                  {{ item.deductionAmount ?? '-' }}
                </span>
              </div>

              <div class="tax-row">
                <span class="label">应纳税额</span>
                <span class="value amount--strong">
                  {{ item.originAmount ?? '-' }}
                </span>
              </div>
            </div>
          </transition>
        </div>
      </div>

      <!-- 无数据 -->
      <div v-else class="empty">您的税费明细生成中，请稍后再试</div>

      <div v-if="!loading && taxList.length" class="tax-notice" role="note">
        <van-icon name="info" class="tax-notice-icon" aria-hidden="true" />
        <span>税费为预估仅供参考，以税局核定、实际扣款为准。</span>
      </div>
    </div>

    <!-- 底部栏 -->
    <footer class="footer" v-if="!loading">
      <span>应补（退）税额</span>
      <span class="amount">¥ {{ totalAmount }}</span>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { showToast } from 'vant'
import { getInvoiceTaxApi } from '@/services/modules/invoiceInformation'
import type {
  PushRecordIdRequest,
  InvoiceTaxDetailResponse,
  InvoiceTaxDetailApiResponse,
  InvoiceTaxDetailItem,
} from '@/services/modules/invoiceInformation/type.d.ts'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()

const loading = ref(true)
const taxList = ref<(InvoiceTaxDetailItem & { open: boolean })[]>([])
const totalAmount = ref('0.00')

const params = reactive<PushRecordIdRequest>({
  pushRecordId: userStore.pushRecordId,
})

const toggle = (index: number) => {
  const item = taxList.value[index]
  if (!item) return
  item.open = !item.open
}

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) => ({
          ...item,
          open: true, // 默认展开
        }))
        totalAmount.value = res.data.totalAmount || '0.00'
      } else {
        taxList.value = []
        showToast('您的税费明细生成中，请稍后再试')
      }
    } else {
      taxList.value = []
      showToast(res?.msg || '您的税费明细生成中，请稍后再试')
    }
  } catch (err: any) {
    console.error('请求失败', err)
    showToast('您的税费明细生成中，请稍后再试')
    taxList.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getInvoiceTax()
})
</script>

<style lang="scss" scoped>
/* ================= 页面根 ================= */
.tax-page {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  height: 100%;
  background: #f6f7fb;
  font-size: 3.6vw;
  color: #333;

  /* 给 fixed footer 预留空间 */
  padding-bottom: calc(16vw + env(safe-area-inset-bottom));

  /* 内容区 */
  .page-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4vw;
  }
}

/* ================= 顶部 ================= */
.van-nav-bar {
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  font-weight: 600;
}

:deep(.van-icon-arrow-left) {
  color: #0072f8;
  font-size: 28px;
}

/* ================= 卡片 ================= */
.card {
  background: #fff;
  border-radius: 3vw;
  padding: 4vw;
  box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 4.2vw;
    font-weight: 600;
    margin-bottom: 3vw;
    padding-left: 2vw;
    border-left: 1vw solid #0072f8;
  }
}

.tax-notice {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  margin-top: 3vw;
  padding: 2.5vw 2vw;
  border-radius: 1.5vw;
  background: #fff8e8;
  color: #b5791f;
  font-size: 3.2vw;
  line-height: 1.6;

  .tax-notice-icon {
    flex-shrink: 0;
    color: #d99a2b;
    font-size: 4vw;
  }
}

/* ================= 税项 ================= */
.tax-item {
  border-top: 0.3vw solid #f0f0f0;

  .tax-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 0;
    font-size: 4vw;

    .tax-name {
      font-weight: 500;
      color: #222;
    }

    .tax-amount {
      display: flex;
      align-items: center;
      gap: 1vw;

      .arrow {
        font-size: 3.2vw;
        color: #bbb;
        transition: transform 0.3s ease;
      }
    }
  }

  .tax-detail {
    .tax-row {
      display: flex;
      justify-content: space-between;
      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: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 3vw 5vw;
  padding-bottom: calc(3vw + env(safe-area-inset-bottom));

  font-size: 4vw;
  border-top: 0.3vw solid #eee;

  .amount {
    color: #0072f8;
    font-weight: 600;
  }
}

/* ================= 空态 ================= */
.empty {
  text-align: center;
  padding: 20vw 0;
  color: #aaa;
  font-size: 3.8vw;
}
</style>