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

<template>
  <div class="invoice-page">
    <!-- 顶部导航 -->
    <van-nav-bar title="自然人开票" fixed placeholder />

    <div class="page-content">
      <!-- 骨架屏：加载中显示 -->
      <template v-if="loading">
        <div class="card" v-for="i in 4" :key="i">
          <div class="card-header">
            <div class="dot-skeleton"></div>
            <div class="title-skeleton"></div>
          </div>

          <div class="card-body">
            <div class="info-skeleton" v-for="j in 3" :key="j">
              <div class="label-skeleton"></div>
              <div class="value-skeleton"></div>
            </div>
          </div>
        </div>
      </template>

      <!-- 加载完成后显示真实内容 -->
      <template v-else>
        <div class="card">
          <StepProgress :activeStep="1" />
        </div>
        <!-- 卡片：申请人信息 -->
        <div class="card">
          <div class="card-header">
            <span class="dot"></span>
            <span class="title">申请人信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">姓名</span>
              <span class="value">{{ invoiceInfo?.sellerName }}</span>
            </div>
            <div class="info-item">
              <span class="label">身份证号</span>
              <span class="value">{{ invoiceInfo?.sellerId }}</span>
            </div>
          </div>
        </div>

        <!-- 发票抬头 -->
        <div class="card">
          <div class="card-header">
            <span class="dot"></span>
            <span class="title">发票抬头</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">公司名称</span>
              <span class="value">{{ invoiceInfo?.buyerName }}</span>
            </div>
            <div class="info-item">
              <span class="label">统一信用代码</span>
              <span class="value">{{ invoiceInfo?.buyerId }}</span>
            </div>
          </div>
        </div>

        <!-- 发票信息 -->
        <div class="card">
          <div class="card-header">
            <span class="dot"></span>
            <span class="title">发票信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">应税发生地</span>
              <span class="value">{{
                invoiceInfo?.province + ' ' + invoiceInfo?.city + ' ' + invoiceInfo?.district
              }}</span>
            </div>
            <div class="info-item">
              <span class="label">发票类别</span>
              <span class="value">{{ invoiceInfo?.category }}</span>
            </div>
            <div class="info-item">
              <span class="label">税前金额</span>
              <span class="value highlight">505.00</span>
            </div>
          </div>
        </div>

        <!-- 缴税信息 -->
        <div class="card">
          <div class="card-header">
            <span class="dot"></span>
            <span class="title">缴税信息</span>
          </div>
          <div class="card-body">
            <div class="info-item">
              <span class="label">应缴税信息</span>
              <span class="value link" @click="toDetail">查看详情 ></span>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 底部操作按钮 -->
    <div class="bottom-bar">
      <van-button
        type="primary"
        block
        round
        color="linear-gradient(90deg, #ff7a00, #ffa94d)"
        class="next-btn"
        @click="nextBtn"
      >
        下一步
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { getConfirmInvoiceInfoApi, getStatusApi } from '@/services/modules/invoiceInformation'
import type { InvoiceOrderIdRequest } from '@/services/modules/invoiceInformation/type.d.ts'
import { reactive, onMounted, ref } from 'vue'
import StepProgress from '@/components/StepProgress.vue'

const router = useRouter()
const loading = ref(true)
const invoiceInfo = ref<any>({})

const params = reactive<InvoiceOrderIdRequest>({
  invoiceOrderId: '12345',
})

const getConfirmInvoiceInfo = async () => {
  try {
    loading.value = true
    const res = await getConfirmInvoiceInfoApi(params)
    if (res.code === 0) {
      invoiceInfo.value = res.data
    }
  } catch (err) {
    console.error('获取发票信息失败', err)
  } finally {
    loading.value = false
  }
}

const nextBtn = async () => {
  const res = await getStatusApi(params)
  if (res.code === 0) {
    // 当前账户没有身份照片，跳转上传证件页面
    if (!res.data.isIdImgReady) {
      router.push({
        path: '/identity-upload',
      })
    }
  }
}

const toDetail = () => {
  router.push({
    path: '/invoice-information/detail',
  })
}
onMounted(() => {
  getConfirmInvoiceInfo()
})
</script>

<style scoped lang="scss">
.invoice-page {
  background: #f5f6f8;
  min-height: 100dvh;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  font-size: 3.8vw;

  .page-content {
    padding: 4vw 3.5vw;
    padding-bottom: 15vw;

    /* ---------- 卡片通用样式 ---------- */
    .card {
      background: #fff;
      border-radius: 14px;
      margin-bottom: 5vw;
      padding: 4vw 3.5vw;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;

      /* ---------- 骨架屏 Header ---------- */
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 3vw;

        .dot {
          width: 6px;
          height: 28px;
          background: #ff7a00;
          border-radius: 4px;
          margin-right: 2vw;
        }

        .dot-skeleton {
          width: 6px;
          height: 28px;
          border-radius: 4px;
          margin-right: 2vw;
          background: linear-gradient(90deg, #f2f2f2 25%, #e4e4e4 50%, #f2f2f2 75%);
          background-size: 200% 100%;
          animation: skeleton-loading 1.2s ease-in-out infinite;
        }

        .title {
          font-size: 4vw;
          font-weight: 600;
          color: #333;
        }

        .title-skeleton {
          flex: 1;
          height: 22px;
          border-radius: 6px;
          background: linear-gradient(90deg, #f2f2f2 25%, #e4e4e4 50%, #f2f2f2 75%);
          background-size: 200% 100%;
          animation: skeleton-loading 1.2s ease-in-out infinite;
        }
      }

      /* ---------- 骨架屏 Body ---------- */
      .card-body {
        display: flex;
        flex-direction: column;
        gap: 3vw; // 🟢 关键间距：解决挤在一起的问题

        .info-skeleton {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 4vw;

          .label-skeleton {
            flex: 0 0 30%;
            height: 18px;
            border-radius: 6px;
            background: linear-gradient(90deg, #f2f2f2 25%, #e4e4e4 50%, #f2f2f2 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.2s ease-in-out infinite;
          }

          .value-skeleton {
            flex: 1;
            height: 18px;
            border-radius: 6px;
            background: linear-gradient(90deg, #f2f2f2 25%, #e4e4e4 50%, #f2f2f2 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.2s ease-in-out infinite;
          }
        }

        /* 真实内容样式 */
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          font-size: 3.8vw;
          color: #555;
          line-height: 1.6;

          .label {
            flex: 0 0 28vw;
            color: #888;
          }

          .value {
            flex: 1;
            text-align: right;
            color: #222;
            word-break: break-all;
          }

          .highlight {
            color: #ff7a00;
            font-weight: 600;
          }

          .link {
            color: #ff7a00;
            cursor: pointer;
            font-weight: 500;
          }
        }
      }
    }
  }

  /* ---------- 底部按钮 ---------- */
  .bottom-bar {
    position: fixed;
    bottom: 4vw;
    left: 0;
    right: 0;
    width: 100%;

    .next-btn {
      font-size: 4.2vw;
      width: 90%;
      margin: 0 auto;
      height: 12vw;
      box-shadow: 0 4px 10px rgba(255, 128, 54, 0.25);
    }
  }

  /* ---------- 骨架屏动画 ---------- */
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}
</style>