Merge branch 'master' of http://gitlab.jiucaiyun.cn/sph/SH_OrderLifeCycleU

src/api/myOrder.js

@@ -26,6 +26,15 @@ export function getOrderInvoiceList(params) {
     loading: true
   })
 }
+// 获取物流追踪信息
+export function getTrackInfo(params) {
+  return fetch({
+    url: '/OrderLife/TrackInfo',
+    method: 'post',
+    data: params,
+    loading: true
+  })
+}
 
 // 获取商品详情列表
 export function getGoodInfoList(params) {

src/assets/styles/common.scss

@@ -276,4 +276,12 @@ body{
   text-align: center;
   min-width:20px;
 }
+
+.empty-tips {
+  height: 70px;
+  text-align: center;
+  line-height: 70px;
+  font-size: 13px;
+  color: $txtGrayL;
+}
 /*-----------公共样式---------------------------结束*/

src/views/myOrder/components/goodsSimpleItem.vue

 <template>
-  <div class="goods-simple-content ">
+  <div class="goods-simple-content " :style = "{'border-bottom': isLast?'none':''}">
 <!--    <div class="goods-company">-->
 <!--      <span class="company-name">{{item.company}}</span>-->
 <!--      <span class="state-type order-type-tip-cold">{{item.goodsType}}</span>-->
@@ -44,6 +44,10 @@ export default {
           manufacturer: ''
         }
       }
+    },
+    isLast: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {

src/views/myOrder/components/invoiceSimpleItem.vue

 <template>
-  <div class="invoice-simple-content" @click="onItemClick">
+  <div class="invoice-simple-content" :style = "{'border-bottom': isLast?'none':''}" @click="onItemClick">
 <!--    <div class="invoice-company">-->
 <!--      {{item.company}}-->
 <!--    </div>-->
@@ -27,6 +27,10 @@ export default {
           invoiceDate: ''
         }
       }
+    },
+    isLast: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {

src/views/myOrder/components/orderState.vue

@@ -7,6 +7,12 @@
 <script>
 export default {
   name: 'orderState',
+  props: {
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
   mounted() {
     this.calDashLineWidth()
   },
@@ -16,6 +22,7 @@ export default {
       let width = '88%'
       switch (lineEle.length) {
         case 2:
+          width = '90%'
           break
         case 3:
           width = '84%'

src/views/myOrder/components/orderStateItem.vue

 <template>
-    <div class="state-item" :class="'state-item__'+state">
-      <div style="position:relative">
-        <van-icon class="state-icon" :name="this.state==='select'?'checked':'passed'" />
-        <div :style="{display:state!=='end'?'inline-block':'none'}" class="state-line"></div>
+  <div class="state-item" :class="'state-item__'+stepState">
+    <div style="position:relative;z-index:1">
+      <div
+        :style="{display:(stepState!=='end'&& hasNext)?'block':'none',backgroundColor:stepState==='normal'?'white':''}"
+        class="state-line"></div>
+      <span class="state-icon-layout">
+          <span v-if="this.stepState!=='select'" class="state-icon-text state-icon-b">{{ itemNum }}</span>
+          <span v-else class="state-icon-b">
+            <van-icon class="state-icon-img" name="success"/>
+          </span>
+        </span>
     </div>
-      <div >{{text}}</div>
+    <div class="state-name">{{ text }}</div>
   </div>
 </template>
 
@@ -14,55 +21,117 @@ export default {
   props: {
     state: {
       type: String,
-      default: 'normal' // normal; select; end
+      default: 'normal' // normal; select; next;end
+    },
+    hasNext: {
+      type: Boolean,
+      default: true
+    },
+    itemNum: {
+      type: Number,
+      default: 0
     },
     text: {
       type: String,
       default: '已开单'
     }
   },
-  data () {
+  data() {
     return {}
+  },
+  computed: {
+    stepState: function () {
+      let res = 'normal'
+      let parentActive = this.$parent.active
+      if (parentActive === this.itemNum) {
+        res = 'select'
+      } else if (parentActive > this.itemNum) {
+        res = 'normal'
+      } else {
+        res = 'next'
+      }
+      return res
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .state-item {
+.state-item {
   text-align: center;
+  margin: 0 auto;
+  width: 100%;
+  color: #fff;
 
-    i {
-      font-size: 25px;
+  .state-icon-layout {
+    background: #16a7f0;
+    padding: 3px;
+
+    .state-icon-b {
+      display: inline-block;
+      border-radius: 20px;
+      border: solid 2.5px #fff;
+      width: 25px;
+      height: 25px;
+      text-align: center;
     }
-    .state-icon {
-      position: relative;
+
+    .state-icon-img {
+      font-size: 10px;
+      font-weight: bold;
+      line-height: 22px;
+    }
+
+    .state-icon-text {
+      line-height: 22px;
+      font-size: 16px;
     }
   }
 
-  .state-item__normal {
-    color: #fff;
+  .state-name {
+    margin-top:5px;
+    color: #a8e1f3;
   }
+}
+
+.state-item__normal {
+
+  .state-icon {
 
-  .state-item__select {
-    color: #ea9518;
   }
+}
 
-  .state-item__end {
-    color: #707070;
+.state-item__select {
+  .state-icon-b {
+    background: #ea9518;
   }
+  .state-name {
+    color: #fff;
+  }
+}
+
+.state-item__next {
 
-  .state-line {
+}
+
+.state-item__end {
+
+}
+
+.state-line {
   position: absolute;
-    top: 14px;
+  top: 12px;
+  left: 50%;
+  z-index: -1;
   width: 88%;
-    height: 1px;
+  height: 2px;
   background-size: 15px 3px;
   background-repeat: repeat-x;
   background-image: linear-gradient(
       to right,
       #fff 0%,
-        #fff 80%,
+      #fff 60%,
       transparent 50%
   );
-  }
+}
 </style>