menduner-mall-uniapp/pages/order/invoice.vue

<!-- 订单详情 -->
<template>
  <s-layout title="发票详情" class="invoice-wrap" navbar="inner">
    <view
      class="invoice-heard ss-flex-col ss-row-right ss-col-center"
      :style="[
        {
          marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
          paddingTop: Number(statusBarHeight + 88) + 'rpx',
        },
      ]"
    >
      <view class="ss-flex ss-m-t-32 ss-m-b-32">
        <text
          class="sicon-warning-line"
          v-if="state.data.status === 'waiting' || state.data.status === 'unpaid'"
        ></text>
        <text class="sicon-check-line" v-if="state.data.status === 'finish'"></text>
        <view class="invoice-heard-title">{{ state.data.status_text }}</view>
      </view>
      <view class="ss-flex ss-m-b-52">
        <view class="ss-m-r-20 invoice-heard-desc">预计可开发票金额：</view>
        <view class="invoice-heard-price">￥{{ state.data.amount }}</view>
      </view>
    </view>
    <view class="invoice-content ss-flex-col ss-col-center">
      <view class="ss-m-t-50 ss-m-b-42 invoice-content-title">增值税电子普通发票</view>
      <view class="ss-flex ss-m-b-64">
        <view v-for="(item, index) in state.info" :key="item.title">
          <view class="log-icon ss-flex">
            <text class="sicon-circlecheck" v-if="statusNum >= index"></text>
            <text class="sicon-unchecked" v-else></text>
            <view
              v-if="state.info.length - 1 != index"
              class="line"
              :class="statusNum >= index ? 'activity-color' : ''"
            ></view>
          </view>
          <view class="log-title">{{ item.title }}</view>
        </view>
      </view>
      <view class="invoice-content-list ss-flex ss-row-between ss-col-top">
        <view class="">
          <view class="ss-flex">
            <view class="list-title">发票类型</view>
            <view class="list-desc">{{ state.data.type_text }}</view>
          </view>
          <view class="ss-flex">
            <view class="list-title">发票抬头</view>
            <view class="list-desc">{{ state.data.name }}</view>
          </view>
          <view class="ss-flex" v-if="state.data.type === 'company'">
            <view class="list-title">发票税号</view>
            <view class="list-desc">{{ state.data.tax_no }}</view>
          </view>
          <view class="ss-flex" v-if="state.data.status === 'finish'">
            <view class="list-title">实开金额</view>
            <view class="list-desc">￥{{ state.data.invoice_amount }}</view>
          </view>
          <view class="ss-flex" v-if="state.data.status === 'finish'">
            <view class="list-title">开票时间</view>
            <view class="list-desc">{{ state.data.finish_time }}</view>
          </view>
          <view class="ss-flex">
            <view class="list-title">申请时间</view>
            <view class="list-desc">{{ state.data.create_time }}</view>
          </view>
        </view>
        <view
          class="invoice-content-img ss-flex-col ss-col-center"
          v-if="state.data.status === 'finish'"
        >
          <su-image
            class="invoice-img"
            isPreview
            :previewList="state.jointImage"
            :current="0"
            :src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
            :height="110"
            mode="scaleToFill"
            v-if="state.jointImage[0].substr(-4) != '.pdf'"
          ></su-image>
          <!-- TODO: 发票为多个pdf时 -->
          <view v-if="state.jointImage[0].substr(-4) == '.pdf'" @tap="onInvoice">
            <image
              :src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
              class="invoice-img"
            ></image>
          </view>
          <view class="invoice-img-num">共{{ state.numImage }}张</view>
          <view class="invoice-img-title">点击预览发票</view>
        </view>
      </view>
    </view>
    <view class="invoice-order ss-m-t-20">
      <view class="goods-box" v-for="item in state.data.order_items" :key="item.id">
        <s-goods-item
          :img="item.goods_image"
          :title="item.goods_title"
          :skuText="item.goods_sku_text"
          :price="item.goods_price"
          :num="item.goods_num"
        />
      </view>
      <view class="invoice-order-list">
        <view class="ss-flex">
          <view class="list-title">订单状态</view>
          <view class="list-desc">{{ state.data.order?.status_text }}</view>
        </view>
        <view class="ss-flex">
          <view class="list-title">订单编号</view>
          <view class="list-desc">{{ state.data.order?.order_sn }}</view>
        </view>
        <view class="ss-flex">
          <view class="list-title">下单时间</view>
          <view class="list-desc">{{ state.data.order?.create_time }}</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';

  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  const headerBg = sheep.$url.css('/static/img/shop/order/invoice_bg.png');
  const state = reactive({
    info: [
      {
        title: '订单提交',
      },
      {
        title: '等待开票',
      },
      {
        title: '开票完成',
      },
    ],
    data: {},
    jointImage: [],
    numImage: 0,
  });
  const statusNum = computed(() => {
    if (state.data.status === 'finish') {
      return 2;
    } else if (state.data.status === 'waiting') {
      return 1;
    } else {
      return 0;
    }
  });
  function onInvoice() {
    // #ifdef H5
    window.open(state.jointImage);
    // #endif
    // #ifdef MP || APP-PLUS
    uni.downloadFile({
      url: state.jointImage[0],
      success: function (res) {
        var filePath = res.tempFilePath;
        uni.openDocument({
          filePath: filePath,
          showMenu: true,
          success: function (res) {
            console.log('打开文档成功');
          },
        });
      },
    });
    // #endif
  }
  async function getInvoiceDetail(id) {
    const { data } = await sheep.$api.order.invoice(id);
    state.data = data;
    state.data.download_urls?.forEach((i, index) => {
      state.numImage = index + 1;
      if (i.substr(-4) != '.pdf') {
        state.jointImage.push(sheep.$url.static(i));
      } else {
        state.jointImage.push(sheep.$url.static(i));
      }
    });
  }
  onLoad((options) => {
    getInvoiceDetail(options.invoiceId);
  });
</script>

<style lang="scss" scoped>
  .invoice-heard {
    width: 100%;
    box-sizing: border-box;
    background: v-bind(headerBg) no-repeat,
      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    background-size: 750rpx 100%;
    .sicon-warning-line {
      color: #fff;
      font-size: 34rpx;
    }
    .sicon-check-line {
      color: #fff;
      font-size: 34rpx;
    }
    .invoice-heard-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #ffffff;
      margin-left: 8rpx;
      line-height: normal;
    }
    .invoice-heard-desc {
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
    .invoice-heard-price {
      font-size: 28rpx;
      font-family: OPPOSANS;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .invoice-content {
    width: 100%;
    position: relative;
    z-index: 3;
    background: #ffffff;
    border-radius: 20rpx;
    margin-top: -16rpx;
    .invoice-content-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }
    .log-icon {
      .sicon-unchecked {
        color: #c2bec2;
        font-size: 44rpx;
      }
      .sicon-circlecheck {
        color: #e60a00;
        font-size: 44rpx;
      }
      .line {
        width: 158rpx;
        height: 6rpx;
        background: #f2f2f2;
        border: 2rpx solid #ffffff;
      }
      .activity-color {
        background: #e60a00;
      }
    }
    .log-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      margin-left: -26rpx;
      margin-top: 30rpx;
    }
    .invoice-content-list {
      width: 100%;
      padding: 0 46rpx 0 30rpx;
      box-sizing: border-box;
    }
    .list-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
      margin-right: 44rpx;
      margin-bottom: 36rpx;
    }
    .list-desc {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 36rpx;
    }
    .invoice-img {
      width: 200rpx;
      height: 110rpx;
    }
    .invoice-img-num {
      width: 216rpx;
      height: 40rpx;
      background: rgba(#000000, 0.45);
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      margin-top: -30rpx;
      z-index: 1;
    }
    .invoice-img-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .invoice-order {
    width: 100%;
    padding-top: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
  }
  .goods-box {
    border-bottom: 2rpx solid #dfdfdf;
  }
  .invoice-order-list {
    padding: 40rpx 24rpx 0 24rpx;
    .list-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
      margin-right: 44rpx;
      margin-bottom: 36rpx;
    }
    .list-desc {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 36rpx;
    }
  }
</style>