1.添加发票接口调用

src/views/myOrder/components/invoiceSimpleItem.vue

 <template>
   <div class="invoice-simple-content" @click="onItemClick">
-    <div class="invoice-company">
-      {{item.company}}
-    </div>
-    <div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>{{moneyFormat(item.ivMoney)}}</span></span></div>
-    <div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">{{item.ivNo}}</span></div>
-    <div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">{{item.ivDate}}</span></div>
+<!--    <div class="invoice-company">-->
+<!--      {{item.company}}-->
+<!--    </div>-->
+<!--    <div class="invoice-info"><span class="info-key">发票号:</span><span class="info-value">{{item.invoiceNo}}</span></div>-->
+<!--    <div class="invoice-info"><span class="info-key">发票日期:</span><span class="info-value">{{item.invoiceDate}}</span></div>-->
+<!--    <div class="invoice-info"><span class="info-key">发票金额:</span><span class="info-value">¥<span>{{moneyFormat(item.totalTaxAmount)}}</span></span></div>-->
+    <div class="invoice-info">发票号:<span>{{item.invoiceNo}}</span></div>
+    <div class="invoice-info">发票日期:<span>{{item.invoiceDate}}</span></div>
+    <div class="invoice-info">发票金额:<span class="inv-money">¥{{moneyFormat(item.totalTaxAmount)}}</span></div>
   </div>
 </template>
 
@@ -18,10 +21,10 @@ export default {
       type: Object,
       default: () => {
         return {
-          company: '上药控股新药分公司',
-          ivMoney: '388111133',
-          ivNo: '123456123456',
-          ivDate: '2021-03-11'
+          company: '',
+          totalTaxAmount: '',
+          invoiceNo: '',
+          invoiceDate: ''
         }
       }
     }
@@ -51,26 +54,34 @@ export default {
     display: inline-block;
   }
   .invoice-info {
-    margin-top: 5px;
-    .info-key {
-      font-weight: 400;
-      font-style: normal;
-      font-size: 12px;
-      color: #555555;
-      text-align: right;
-      width: 53px;
-      display: inline-block;
+    margin: 4px 0;
+    span {
+      margin-left: 8px;
     }
-    .info-value {
-      margin-left:20px;
-      font-size: 12px;
-      color: #555555;
-      span {
-        color:#D9001B;
-        font-size: 14px;
-        margin-left:6px;
-      }
+    .inv-money {
+      font-size:15px;
+      font-weight:bold
     }
+    //margin-top: 5px;
+    //.info-key {
+    //  font-weight: 400;
+    //  font-style: normal;
+    //  font-size: 12px;
+    //  color: #555555;
+    //  text-align: right;
+    //  width: 53px;
+    //  display: inline-block;
+    //}
+    //.info-value {
+    //  margin-left:20px;
+    //  font-size: 12px;
+    //  color: #555555;
+    //  span {
+    //    color:#D9001B;
+    //    font-size: 14px;
+    //    margin-left:6px;
+    //  }
+    //}
   }
 }
 </style>

src/views/myOrder/detail/orderDetail.vue

@@ -13,10 +13,10 @@
         <van-icon name="orders-o" class="order-icon info-icon"/>
         <div class="info-text">
           <div style="display: flex">
-            <span class="order-code">{{detailData.orderNo}}</span>
+            <span class="order-code">{{ detailData.orderNo }}</span>
             <span class="order-copy"><van-icon :name="icons.copy"/>复制</span>
           </div>
-          下单时间: {{detailData.orderDate}}
+          下单时间: {{ detailData.orderDate }}
         </div>
       </div>
       <div class="info-state">
@@ -46,8 +46,8 @@
       <div class="location-content">
         <van-icon name="location-o" class="order-icon location-icon"/>
         <div class="location-text">
-          <div class="location-client">{{detailData.clientName}}</div>
-          <div class="location-receive">{{detailData.shippingAdress}}</div>
+          <div class="location-client">{{ detailData.clientName }}</div>
+          <div class="location-receive">{{ detailData.shippingAdress }}</div>
         </div>
       </div>
     </div>
@@ -61,13 +61,16 @@
       <goods-simple-item v-for="item in detailData.goodsInfos" :key="item.goodsId" :item="item"/>
     </div>
     <!-- 订单发票信息 -->
-    <div class="order-common order-invoice">
-      <div class="invoice-all" @click="openPager('orderInvoice')">
-        <span class="all-title">发票信息</span>
-        全部
+    <div>
+      <div class="goods-all" @click="openPager('orderInvoice')">
+        <span class="all-title">发票信息 ({{invoiceData.total}})</span>
+        <span class="title-more">更多</span>
         <van-icon class="title-arrow" name="arrow"/>
       </div>
-      <invoice-simple-item  @itemClick="openPager('orderInvoiecDetail')"/>
+      <div class="order-common">
+        <invoice-simple-item v-for="item in invoiceData.invoiceList" :item="item" :key="item.invoiceNo"
+                             @itemClick="openPager('orderInvoiecDetail')"/>
+      </div>
     </div>
   </div>
 </template>
@@ -77,7 +80,7 @@ import OrderStateItem from '../components/orderStateItem'
 import OrderState from '../components/orderState'
 import GoodsSimpleItem from '../components/goodsSimpleItem'
 import InvoiceSimpleItem from '../components/invoiceSimpleItem'
-import {getMyOrderList, getDeliveryOrder} from '@/api/myOrder'
+import {getMyOrderList, getDeliveryOrder, getOrderInvoiceList} from '@/api/myOrder'
 
 export default {
   name: 'orderDetail',
@@ -85,6 +88,7 @@ export default {
   data() {
     return {
       detailData: {},
+      invoiceData: {},
       icons: {
         inDelivery: require('@/assets/img/u546.svg'),
         copy: require('@/assets/img/u533.svg')
@@ -111,6 +115,7 @@ export default {
   },
   mounted() {
     this.getOrderDetail()
+    this.getInvoiceDetail()
   },
   destroyed() {
   },
@@ -174,6 +179,44 @@ export default {
       // }).catch(err => {
       //   console.log(err)
       // })
+    },
+    getInvoiceDetail() {
+      let params = {
+        'clientID': [],
+        'endDate': '',
+        'goodsCode': '',
+        'goodsDesc': '',
+        'goodsId': '',
+        'goodsName': '',
+        'goodsSpec': '',
+        'invoiceCode': '',
+        'invoiceDate': '',
+        'invoiceFullNo': '',
+        'invoiceNo': '',
+        'isTwoTicket': '',
+        'manufacturer': '',
+        'mdmClientCode': '',
+        'mdmGoodsCode': '',
+        'order': '',
+        'orderId': '',
+        'orderNo': '301202103160009', // this.$route.query.orderNo,
+        'pageNum': 1,
+        'pageSize': 3,
+        'sort': '',
+        'sourceDb': 'SHYY', // this.$route.query.sourceDb,
+        'startDate': '',
+        'supplierId': []
+      }
+      getOrderInvoiceList(params).then(res => {
+        if (res.code === 200 && res.data && res.data.code === '00000' &&
+          res.data.entity && res.data.entity.invoiceList && res.data.entity.invoiceList.length > 0) {
+          this.invoiceData = res.data.entity
+        } else {
+          console.log('请求失败')
+        }
+      }).catch(err => {
+        console.log(err)
+      })
     }
   }
 }
@@ -189,7 +232,7 @@ export default {
     padding: 10px;
     border-radius: 4px;
     background-color: #fff;
-    margin: 5px 15px 1px 15px;
+    margin: 10px 15px 1px 15px;
 
     .order-icon {
       width: 40px;
@@ -312,7 +355,7 @@ export default {
         }
 
         .logistics-time {
-          margin-top:4px;
+          margin-top: 4px;
           font-size: 12px;
           color: #7f7f7f;
         }
@@ -349,27 +392,27 @@ export default {
 
   /*订单商品*/
   .goods-all {
-      display: flex;
-      align-items: center;
-      margin: 15px 15px 8px 15px;
-
-      .all-title {
-        flex: 1;
-        font-size: 16px;
-        color: #000;
-        font-weight: bold;
-      }
+    display: flex;
+    align-items: center;
+    margin: 15px 15px 0 15px;
+
+    .all-title {
+      flex: 1;
+      font-size: 16px;
+      color: #000;
+      font-weight: bold;
+    }
 
-      .title-more {
-        color:$txtGray9
-      }
+    .title-more {
+      color: $txtGray9
+    }
 
-      .title-arrow {
-        color:$txtGray9;
-        font-size: 15px;
-        //margin-top: 1px;
-        margin-left: 6px;
-      }
+    .title-arrow {
+      color: $txtGray9;
+      font-size: 15px;
+      //margin-top: 1px;
+      margin-left: 6px;
+    }
   }
 
   /*订单发票*/