template-parking-h5/src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingInvoice.vue

<template>
  <scroll-view class="scroll-Y" scroll-y>
    <div class="part top">
      <div class="part-item lines header">
        <span class="part-item-key">抬头</span>
        <div class="part-item-value invoiceTitleName" @click="showHeader">
          {{ order.invoiceTitle.titleName || 'order' }}
          <van-icon name="arrow" size="10" color="#D8DAE0" />
        </div>
      </div>
      <div class="part-item">
        <span class="part-item-key">开票订单号</span>
        <span class="part-item-value">{{ order.invoiceOrderNo }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">发票类型</span>
        <span class="part-item-value">增值税普通发票</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">开票日期</span>
        <span class="part-item-value">{{
          order.invoiceDate ? order.invoiceDate : '-'
        }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">发票号码</span>
        <span class="part-item-value">{{
          order.invoiceNumber ? order.invoiceNumber : '-'
        }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">发票代码</span>
        <span class="part-item-value">{{
          order.invoiceCode ? order.invoiceCode : '-'
        }}</span>
      </div>
      <div class="part-item">
        <span class="part-item-key">备注</span>
        <span class="part-item-value">{{ order.remark }}</span>
      </div>
    </div>
    <div class="part middle">
      <div class="part-item">
        <span class="part-item-key">总金额</span>
        <span class="part-item-value"
          ><span class="purple">¥{{ order.invoiceTotalAmount }}</span></span
        >
      </div>
      <div class="part-item">
        <span class="part-item-key"
          >共<span class="purple-order">{{ order.totalOrderCount }}笔</span
          >缴费记录</span
        >
        <div class="part-item-value" @click="gotoRecordDetail">
          <span>查看详情</span>
          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="btn" @click="showInvoiceDetail">查看发票</div>
    </div>
  </scroll-view>
</template>

<script>
import parkingInvoiceJs from '../../../mixins/parkingReceipt/parkingInvoice';

export default {
  mixins: [parkingInvoiceJs],
};
</script>

<style lang="less" scoped>

.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
  padding: 20px;
  box-sizing: border-box;

  .part {
    padding: 0 30px;
    border-radius: 20px;
    background: #fafbff;
    border-radius: 4px;
    border: 1px solid #d8dae0;

    .part-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      box-sizing: border-box;

      .part-item-key {
        font-size: 30px;
        font-weight: 400;
        color: #999999;
        line-height: 42px;
      }

      .part-item-value {
        color: #6f6f70;
        text-align: right;
        display: flex;
        align-items: center;
        &.invoiceTitleName {
          font-size: 30px;
          font-weight: 400;
          color: #333333;
          line-height: 42px;
        }
        > img {
          width: 30px;
        }
      }
    }

    .tab-title {
      color: #676767;
      padding: 30px 0px;
    }

    .lines {
      border-bottom: 2px solid #ececec;
    }

    .invoice-more {
      padding-bottom: 8px;
    }
  }

  .top {
    padding-top: 20px;
  }

  .middle {
    margin: 20px 0;

    > .part-item {
      // background-color: #ffffff;
    }

    .purple {
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      line-height: 42px;
    }
    .purple-order {
      color: #064c8a;
    }
  }

  .footer {
    padding-top: 20px;
    .btn {
      // margin: 20px 60px;
      text-align: center;
      // padding: 20px 0;
      height: 90px;
      line-height: 90px;
      background: #064c8a;
      border-radius: 45px;
      font-size: 34px;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
</style>