charge-java/charge-front/src/pages-common/invoice/invoice.vue

<template>
  <view class="page">
    <view class="block">
      <view
        class="flex-align-center"
        :style="{ marginTop: index === 0 ? 0 : '40rpx' }"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="fs-32 lh-48 color-999" style="width: 192rpx">{{
          item.label
        }}</view>
        <view class="fs-28 lh-48 color-000" v-if="index === 7">
          <text style="color: rgba(255, 153, 0, 1)">{{ item.value }}</text>
          <text style="margin-left: 2px">元</text>
        </view>
        <view class="fs-28 lh-48 color-000" v-else>{{ item.value }}</view>
      </view>
    </view>
    <view class="block pt-40 pb-40 pl-30 pr-30 flex mt-30" v-if="email">
      <view class="fs-32 lh-48 color-999" style="width: 192rpx">电子邮箱</view>
      <view class="fs-28 lh-48 color-000">{{ email }}</view>
    </view>
    <view class="block pt-40 pb-40 pl-30 pr-30 flex mt-30">
      <view class="fs-32 lh-48 color-999" style="width: 192rpx">电子发票</view>
      <view class="fs-28 color-theme" @click="openInvoice('pdf')" v-if="pdfUrl">PDF版</view>
      <view class="fs-28 color-999" v-else>暂无</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { fetchInvoiceList, fetchInvoicePDF } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const openInvoiceId = ref();
const email = ref();
const pdfUrl = ref("");
const list = ref([
  { label: "公司名称", value: "" },
  { label: "公司税号", value: "" },
  { label: "注册地址", value: "" },
  { label: "注册电话", value: "" },
  { label: "开户银行", value: "" },
  { label: "银行账号", value: "" },
  { label: "备注", value: "" },
  { label: "发票金额", value: "" },
  { label: "申请时间", value: "" },
]);

onLoad((options: any) => {
  uni.showLoading({ title: "加载中" });
  fetchInvoiceList()
    .then((res) => {
      uni.hideLoading();
      const fd = res.findIndex((item: any) => {
        if (item.orderDetails && item.orderDetails.length) {
          return item.orderDetails.some(
            (order: any) => order.startChargeSeq === options.id
          );
        }
        return false;
      });
      if (fd >= 0) {
        list.value[0].value = res[fd].invoiceTitle || "-";
        list.value[1].value = res[fd].taxId || "-";
        list.value[2].value = res[fd].address || "-";
        list.value[3].value = res[fd].phone || res[fd].telephone || "-";
        list.value[4].value = res[fd].bankName || "-";
        list.value[5].value = res[fd].bankAccount || "-";
        list.value[6].value = res[fd].remark || "-";
        list.value[7].value = `${(Number(res[fd].invoiceAmount) / 100).toFixed(2)}`;
        list.value[8].value = res[fd].createTime || "-";
        openInvoiceId.value = res[fd].id;
        email.value = res[fd].email || "";
        return;
      }
      return Promise.reject({ errMsg: "找不到发票数据" });
    })
    .catch((err) => {
      uni.hideLoading();
      uni.showModal({ content: `${err.errMsg},请重试` });
    });
});

const openInvoice = (type: string) => {
  uni.showLoading({ title: "加载中" });
  fetchInvoicePDF(openInvoiceId.value)
    .then((res: any) => {
      uni.hideLoading();
      const urls = res.downloadUrls || res;
      const fileUrl = type === "pdf" ? (urls.invoiceUrl || urls.downloadUrl) : urls.ofdUrl;

      if (!fileUrl) {
        uni.showToast({ title: "暂无发票文件", icon: "none" });
        return;
      }

      uni.downloadFile({
        url: fileUrl,
        success: (downloadRes) => {
          uni.openDocument({
            filePath: downloadRes.tempFilePath,
            showMenu: true,
            fail(err: any) {
              uni.showModal({ content: `打开失败: ${err.errMsg}` });
            },
          });
        },
        fail(err: any) {
          uni.showModal({ content: `下载失败: ${err.errMsg}` });
        },
      });
    })
    .catch(() => {
      uni.hideLoading();
      uni.showToast({ title: "获取发票失败", icon: "none" });
    });
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #f6f7fa;
  padding: 20rpx;
}
.block {
  border-radius: 20rpx;
  background: #fff;
  padding: 30rpx;
}
</style>