qmx_page_admin/src/views/create-order/components/order-detail-submodule/InvoiceInfo.vue

<template>
  <div class="invoice-info">
    <info-card title="开票概览">
      <div class="invoice-info-content">
        <div class="invoice-info-item">
          开票状态：部分开票
        </div>
        <div class="invoice-info-item">
          已开票金额：¥1,000.00
        </div>
        <div class="invoice-info-item">
          未开票金额：¥5,000.00
        </div>
      </div>
    </info-card>
    <info-card>
      <template #title>
        开票详情<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
      </template>
      <div class="invoice-info-detail">
        <el-table
        class="invoice-info-content-table"
        border
        :data="invoiceList"
        style="width: 1108px">
          <el-table-column
            prop="invoiceID"
            label="发票ID"
            width="160"
            align="center"
          />
          <el-table-column
            prop="invoiceCode"
            label="发票编号"
            width="160"
            align="center"
          />
          <el-table-column
            prop="associationOrderMoney"
            label="关联订单开票金额"
            width="160"
            align="center"
          />
          <el-table-column
            prop="invoiceStatus"
            label="发票状态"
            width="120"
            align="center"
          />
          <el-table-column
            prop="invoiceQrCode"
            width="188"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <div class="column-label-cell">
                <div class="column-label-cell-title">开票二维码</div>
                <div class="column-label-cell-tip">支持客户换开或查看发票</div>
              </div>
            </template>
            <template slot="default" slot-scope="scope">
              <span class="column-cell">{{ scope.row.invoiceQrCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="actionTime"
            label="操作时间"
          />
          <el-table-column
            prop="operator"
            label="操作人"
            width="160"
            align="center"
          />
        </el-table>
      </div>
    </info-card>
  </div>
</template>
<script>
import InfoCard from '../../ui/InfoCard.vue';
export default {
  name: 'InvoiceInfo',
  components: {
    InfoCard
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      invoiceList: [{
        invoiceID: '20231231',
        invoiceCode: '20231231',
        associationOrderMoney: '¥1,000.00',
        invoiceStatus: '已申请',
        invoiceQrCode: '查看',
        actionTime: '2023-12-31 13:21:32',
        operator: '张三'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.invoice-info {
  .invoice-info-content {
    display: flex;
    align-items: center;
    .invoice-info-item {
      min-width: 255px;
      margin-right: 32px;
      font-size: 14px;
      line-height: 22px;
      color: $gray_10;
    }
  }
  // margin-top: 20px;
  .invoice-info-content-table {
    border-radius: 4px;
    ::v-deep {
      .cell {
        text-align: center;
        font-size: 14px;
        color: $gray_10;
      }
      .has-gutter {
        th {
          background: #F9FAFB;
          .cell {
            padding: 0;
            color: #686868;
            font-weight: 400;
            .column-label-cell-tip {
              color: #2ABED1;
            }
          }
        }
      }
      .column-cell {
        color: $color_main;
        cursor: pointer;
      }
    }
  }
  .num-active {
    color: $color_main;
  }
}
</style>