parking_h5_all/pages/invoiceModule/invoiceDetails/invoiceDetails.vue

<!-- 发票详情 -->
<template>
  <view class="details u-skeleton">
    <!-- 发票信息 -->
    <view class="details-invoice">
      <view class="details-invoice-title">发票信息</view>
      <view class="details-invoice-list">
        <view class="details-invoice-list-item u-skeleton-fillet">
          <view class="details-invoice-list-item-label">抬头类型：</view>
          <view class="details-invoice-list-item-content">{{ formatInvoiceType(invoiceInfo.invoType) }}</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet">
          <view class="details-invoice-list-item-label">抬头名称：</view>
          <view class="details-invoice-list-item-content">{{ invoiceInfo.invoName }}</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet" v-if="invoiceInfo.invoType === 1 && invoiceInfo.invoCode">
          <view class="details-invoice-list-item-label">企业税号：</view>
          <view class="details-invoice-list-item-content">{{ invoiceInfo.invoCode }}</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet">
          <view class="details-invoice-list-item-label">发票状态：</view>
          <view class="details-invoice-list-item-content" :class="formatStatusType(invoiceInfo.status)">{{ formatStatus(invoiceInfo.status) }}</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet">
          <view class="details-invoice-list-item-label">申请时间：</view>
          <view class="details-invoice-list-item-content">{{ invoiceInfo.askTime }}</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet">
          <view class="details-invoice-list-item-label">更多内容：</view>
          <view class="details-invoice-list-item-content view-text" @click="viewMore">查看</view>
        </view>
        <view class="details-invoice-list-item u-skeleton-fillet" v-if="invoiceInfo.status === 2">
          <view class="details-invoice-list-item-label">失败原因：</view>
          <view class="details-invoice-list-item-content">{{ invoiceInfo.remark }}</view>
        </view>
        <view class="details-invoice-list-item bottom-top view-btn" v-if="invoiceInfo.status === 1">
          <text @click="viewPdf">查看电子发票</text>
        </view>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="details-order u-skeleton-fillet" v-if="invoiceInfo.orderInvoExes && invoiceInfo.orderInvoExes.length">
      <view class="details-order-title">订单信息：共{{ invoiceInfo.orderInvoExes.length }}个订单</view>
      <view class="details-order-list">
        <view class="details-order-list-item" v-for="(item, index) in invoiceInfo.orderInvoExes" :key="index">
          <view class="details-order-list-item-left">
            <view class="money">￥{{ item.amount }}</view>
            <view>{{ item.name || '-' }}</view>
            <view class="time">{{ item.payTime || '-' }}</view>
          </view>
          <view class="details-order-list-item-right">{{ item.vehicleNo || '-' }}</view>
        </view>
      </view>
    </view>
    <!--引用组件-->
    <u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
    <!-- 查看更多弹框 -->
    <u-popup v-model="viewMorePop.show" mode="center" width="600" border-radius="14" :closeable="true">
      <view class="details-pop">
        <view class="details-pop-title">更多内容</view>
        <view class="details-pop-list">
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">开户银行：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.openBank || '-' }}</view>
          </view>
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">银行账号：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.numBank || '-' }}</view>
          </view>
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">抬头地址：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.mapCom || '-' }}</view>
          </view>
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">企业电话：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.phoneCom || '-' }}</view>
          </view>
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">电子邮箱：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.invoMail || '-' }}</view>
          </view>
          <view class="details-pop-list-item">
            <view class="details-pop-list-item-label">手机号码：</view>
            <view class="details-pop-list-item-content">{{ invoiceInfo.invoPhone || '-' }}</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      invoiceInfo: {},
      chooseRecords: {
        show: false,
        list: []
      },
      invoiceStatusList: [],
      viewMorePop: {
        show: false
      },
      skeletonLoading: false
    };
  },
  onLoad(options) {
    const { id, orderType } = options;
    if (id) {
      this.getDict();
      this.getInvoiceDetails(id);
    }
  },
  methods: {
    /**
     * @description: 获取字典
     * @return {*}
     */
    async getDict() {
      // 发票类型
      const typeRes = await this.$u.api.getDictApi({ type: 'invoice_type' });
      if (typeRes.code === 200) {
        this.chooseRecords.list = typeRes.data;
      }
      // 开票状态
      const statusRes = await this.$u.api.getDictApi({ type: 'invoice_status' });
      if (statusRes.code === 200) {
        this.invoiceStatusList = statusRes.data;
      }
    },
    /**
     * @description: 获取发票详情
     * @param {*} id
     * @return {*}
     */
    async getInvoiceDetails(id) {
      try {
        this.skeletonLoading = true;
        const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceDetailsApi({ id });
        if (code === 200) {
          this.invoiceInfo = data;
        }
      } catch (error) {
      } finally {
        this.skeletonLoading = false;
      }
    },
    /**
     * @description: 预览图片
     * @param {*} url
     * @return {*}
     */
    previewImage(url) {
      uni.previewImage({
        urls: [url]
      });
    },
    viewPdf() {
      this.$u.route({
        url: '/pages/previewPdf/previewPdf',
        params: {
          fileUrl: this.invoiceInfo.fileUrl
        }
      });
    },
    viewMore() {
      this.viewMorePop.show = true;
    },
    /**
     * @description: 初始化状态
     * @param {*} val
     * @return {*}
     */
    formatStatus(val) {
      if (!val && val !== 0) return;
      if (this.invoiceStatusList.length) return this.invoiceStatusList.find((v) => Number(v.dictValue) === Number(val)).dictLabel;
    },
    /**
     * @description: 初始化状态按钮样式
     * @param {*} val
     * @return {*}
     */
    formatStatusType(val) {
      const statusTypeObj = {
        0: 'info',
        1: 'primary',
        2: 'error'
      };
      return statusTypeObj[val];
    },
    /**
     * @description: 初始化发票类型
     * @param {*} val
     * @return {*}
     */
    formatInvoiceType(val) {
      if (!val) return;
      if (this.chooseRecords.list.length) return this.chooseRecords.list.find((item) => Number(item.dictValue) === Number(val)).dictLabel;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './invoiceDetails.scss';
</style>