商品清单列表对接接口

src/views/myOrder/detail/goodsInfo.vue

 <template>
   <div class="goods-info">
-    <div class="order-sum">
-      <div class="sum-number">全部商品</div>
-    </div>
     <div class="goods-info-details">
-      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <van-list
           v-model="loading"
           :finished="finished"
           finished-text="没有更多了"
           @load="onLoad"
-        >
-          <goods-info-detail
-            v-for="(item, index) in goodsInfos"
+        > -->
+        <div class="list" v-for="(item, index) in detailData.goodsInfos" :key="index">
+          <!-- <goods-info-detail :item="item"></goods-info-detail> -->
+          <goods-info-list-item :item="item"></goods-info-list-item>
+        </div>
+          <!-- <goods-info-detail
+            v-for="(item, index) in detailData.goodsInfos"
             :key="index"
             :title="item"
-          ></goods-info-detail>
-        </van-list>
-      </van-pull-refresh>
+          ></goods-info-detail> -->
+        <!-- </van-list>
+      </van-pull-refresh> -->
     </div>
      <div class="goods-sum">
-      <div class="sum-number-detail">共1个商品</div>
-      <div class="sum-amount">金额总计:</div>
-      <div class="sum-account"><span>￥</span>18,500.00</div>
+      <div class="sum-number-detail">共 {{detailData.goodsInfos.length}} 个商品</div>
+      <div class="sum-amount">金额总计：<span style="font-size: 16PX;">￥{{orderTotalAmount}}</span></div>
+      
     </div>
-    <goods-high-search v-model="showHighSearch" />
+    <!-- <goods-high-search v-model="showHighSearch" /> -->
    
   </div>
 </template>
 
 <script>
+import {AmountNumFormat} from '@/utils/common'
 import goodsInfoDetail from "../components/goodsInfoDetail"
+import goodsInfoListItem from "./goodsInfoListItem"
 import GoodsHighSearch from "../components/goodsHighSearch"
-
+import {getMyOrderList} from '@/api/myOrder'
 export default {
   name: "goodsInfo",
   components: {
     GoodsHighSearch,
     goodsInfoDetail,
+    goodsInfoListItem
   },
   data() {
     return {
@@ -51,8 +55,23 @@ export default {
         inDelivery: require("@/assets/img/u546.svg"),
         copy: require("@/assets/img/u533.svg"),
       },
+      orderItem: this.$route.query,
+      detailData: {
+        goodsInfos: [],
+        orderTotalAmount: '0'
+      }
     };
   },
+  computed: {
+    // 总价格
+    orderTotalAmount () {
+      if (this.detailData.orderTotalAmount) {
+        return AmountNumFormat(this.detailData.orderTotalAmount)
+      } else {
+        return '0.00'
+      }
+    }
+  },
   mounted() {
     // 设置标题栏关闭返回按钮
     this.$store.commit("setNavBar", {
@@ -65,6 +84,7 @@ export default {
       rightClick: this.onShowSearch,
     });
     window.addEventListener("popstate", this.onBrowserBack, false);
+    this.getOrderDetail()
   },
   destroyed() {
     // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
@@ -107,7 +127,50 @@ export default {
       this.loading = false;
       this.onLoad();
     },
-  },
+    /* 获取订单详情 */
+    getOrderDetail() {
+      let params = {
+        'businessType': '',
+        'clientID': [],
+        'endDate': '',
+        'goodsCode': '',
+        'goodsDesc': '',
+        'goodsId': '',
+        'goodsName': '',
+        'goodsSpec': '',
+        'isDelivered': '',
+        'isInvoice': '',
+        'isWeb': '',
+        'manufacturer': '',
+        'mdmClientCode': '',
+        'order': '',
+        'orderId': this.orderItem.orderId, // 19977352;19965720
+        'orderNo': '', // 225202103170165
+        'orderStatusCode': '',
+        'orderType': this.orderItem.orderType,
+        'pageNum': 1,
+        'pageSize': 20,
+        'shippingAdress': '',
+        'sort': '',
+        'sourceDb': this.orderItem.sourceDb,
+        'sourceOrderNo': '',
+        'sourceSystem': '',
+        'startDate': '',
+        'supplierId': []
+      }
+      getMyOrderList(params).then(res => {
+        if (res.code === 200 && res.data && res.data.code === '00000' &&
+          res.data.entity && res.data.entity.orderList && res.data.entity.orderList.length > 0) {
+          this.detailData = res.data.entity.orderList[0]
+          console.log(this.detailData)
+        } else {
+          console.log('订单详情', '请求失败')
+        }
+      }).catch(err => {
+        console.log('订单详情', err)
+      })
+    }
+  }
 };
 </script>
 
@@ -125,21 +188,19 @@ export default {
     .sum-number-detail {
       padding-left: 10px;
     }
-
-    
-
-   
   }
 
   .goods-info-details {
-    background-color: white;
-    width: 92%;
-    // height: calc(100vh - 96px);
-    height: 120px;
-    margin: 0 auto;
-    border-radius: 5px;
+    // background-color: white;
+    width: 100%;
+    height: calc(100vh - 96px);
+    // height: 120px;
     overflow: scroll;
-    padding-left: 10px;
+    padding: 10PX;
+    .list{
+      border-radius: 5px;
+      margin-bottom: 10PX;
+    }
   }
 }
 .goods-sum{
@@ -154,17 +215,15 @@ export default {
   color: white;
   display: flex;
   line-height: 48px;
-  padding-left: 10px;
+  padding: 0px 10px;
+  font-size: 15PX;
     .sum-number-detail {
-     margin-right: 180px;
+      width: 50%;
+      text-align: left;
     }
    .sum-amount {
-      // margin-left: 100px;
-      margin-right: 5px;
-
-      span {
-        font-size: 12px;
-      }
+      width: 50%;
+      text-align: right;
     }
 }
 </style>

src/views/myOrder/detail/goodsInfoListItem.vue

+<template>
+  <div id="goodsInfoListItem">
+    <div class="itemInfo">
+      <div class="headImage">
+        <van-image fit="contain" width="50" height="55" :src="orderImage"/>
+      </div>
+      <div class="info">
+        <div class="infoDesc">{{item.goodsDesc}}</div>
+        <div class="numBer">
+          <div class="unitPrice">￥ {{item.taxPrice}}</div>
+          <div class="packageNum">包装数量：{{item.packageNum}}</div>
+        </div>
+        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '0'}"/>
+        <div class="goodsInfo">
+          <div class="orderNum">订单数量：{{item.orderQty}}</div>
+          <div class="deliveryNum">配送数量：{{item.sendQty}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'GoodsInfoListItem',
+  components: {
+  },
+  data() {
+    return {
+      sphImage: require('@/assets/img/u48.png'),
+      orderImage: require('@/assets/img/order.png')
+    }
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    }
+  },
+  computed: {
+    linkInfo () {
+      return this.$store.state.linkInfo
+    },
+    routKey() {
+      return this.$route.path
+    },
+    searchTime() {
+      let time = this.time.start + '/' + this.time.end
+      return time
+    }
+  },
+  mounted() {
+    // this.onLoad()
+  },
+  methods: {
+    // 根据订单类型返回颜色
+    orderTypeColor (model) {
+      if (model.orderStatusCode === '100') {
+        // 待发货
+        return '#06BF06'
+      } else if (model.orderStatusCode === '220') {
+        // 待收货
+        return '#FFC861'
+      } else if (model.orderStatusCode === '400') {
+        // 已签收
+        return '#929292'
+      } else if (model.orderStatusCode === '110') {
+        // 已取消
+        return '#C17300'
+      }
+    },
+    onRefresh() {
+    },
+    // 查看发票 查看物流 清货单
+    btnAction (type) {
+      this.item.actionType = type
+      this.$emit('orderItemAction', this.item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  #goodsInfoListItem {
+    background-color: white;
+    border-radius: 10PX;
+    font-size: 14PX;
+    color: #999999;
+    padding: 10PX;
+    .itemInfo{
+      display: flex;
+      .headImage{
+        width: 20%;
+      }
+      .info{
+        width: 80%;
+        .infoDesc{
+          color: #333333;
+        }
+        .numBer{
+          display: flex;
+          height: 40PX;
+          line-height: 40PX;
+          .unitPrice{
+            text-align: left;
+            width: 50%;
+            color: #333333;
+            font-weight: 600;
+            font-size: 15PX;
+          }
+          .packageNum{
+            text-align: right;
+            width: 50%;
+          }
+        }
+        .goodsInfo{
+          display: flex;
+          height: 40PX;
+          line-height: 40PX;
+          .orderNum{
+            text-align: left;
+            width: 50%;
+          }
+          .deliveryNum{
+            text-align: right;
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+</style>