1.修改路由文件添加订单详情页面

2.添加订单状态组件及基本页面
3.修改APP.vue中的标题栏

src/App.vue

@@ -6,6 +6,7 @@
       :left-arrow="navBar.leftArrow"
       @click-left="navBar.leftClick"
       :right-text="navBar.rightText"
+      :left-text="navBar.leftText"
       @click-right="navBar.rightClick"
       :fixed="navBar.fixed"
       :title="navBar.title">
@@ -34,7 +35,6 @@ export default {
     this.$store.commit('setNavBar', {
       leftClick: () => {
         this.$router.back()
-        
       }
     })
   }
@@ -60,10 +60,14 @@ export default {
       }
       .van-icon{
         // color: $arrowC;
+        font-size: 22px;
       }
       .van-nav-bar__text{
-        color: $txtGray;
-        font-size: 12px;
+        //color: $txtGray;
+        //font-size: 12px;
+        color: $txtBlack;
+        font-weight: 600;
+        font-size: 15px;
       }
     }
     .app-nav-space {

src/router/myOrder/index.js

-const saleSituation = [
+const myOrder = [
   {
     path: '/myOrder',
     name: 'myOrder',
@@ -7,6 +7,15 @@ const saleSituation = [
       auth: false
     },
     component: resolve => require(['@/views/myOrder'], resolve)
+  },
+  {
+    path: '/orderDetail',
+    name: 'orderDetail',
+    meta: {
+      title: '订单详情',
+      auth: false
+    },
+    component: resolve => require(['@/views/myOrder/orderDetail'], resolve)
   }
 ]
-export default saleSituation
+export default myOrder

src/views/myOrder/components/orderState.vue

+<template>
+  <div id="orderStateLayout" class="order-state">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'orderState',
+  mounted() {
+    this.calDashLineWidth()
+  },
+  methods: {
+    calDashLineWidth() {
+      // let layout = document.getElementById('orderStateLayout')
+      let lineEle = document.getElementsByClassName('state-line')
+      let width = '88%'
+      switch (lineEle.length) {
+        case 2:
+          break
+        case 3:
+
+          break
+        case 4:
+          width = '80%'
+          break
+      }
+      for (let index = 0; index < lineEle.length; index++) {
+        console.log(lineEle[index])
+        lineEle[index].setAttribute('style', 'width:50%')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order-state {
+  display: flex;
+  background-color: #16a7f0;
+
+  /deep/ .state-item {
+    flex: 1
+  }
+  .item-line__1 {
+
+  }
+}
+</style>

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>
+      <div >{{text}}</div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'orderStateItem',
+  props: {
+    state: {
+      type: String,
+      default: 'normal' // normal; select; end
+    },
+    text: {
+      type: String,
+      default: '已开单'
+    }
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .state-item {
+    text-align: center;
+
+    i {
+      font-size: 23px;
+    }
+    .state-icon {
+      position: relative;
+    }
+  }
+
+  .state-item__normal {
+    color: #fff;
+  }
+
+  .state-item__select {
+    color: #ea9518;
+  }
+
+  .state-item__end {
+    color: #707070;
+  }
+
+  .state-line {
+    position: absolute;
+    top: 11px;
+    width: 88%;
+    height: 1px;
+    background-size: 15px 3px;
+    background-repeat: repeat-x;
+    background-image: linear-gradient(
+        to right,
+        #fff 0%,
+        #fff 80%,
+        transparent 50%
+    );
+  }
+</style>

src/views/myOrder/orderDetail.vue

+<template>
+  <div class="order-detail">
+    <order-state>
+      <order-state-item text="已开单" />
+      <order-state-item text="已发货" state="normal"/>
+      <order-state-item text="运输中" state="select"/>
+      <order-state-item text="已收货" state="end"/>
+    </order-state>
+  </div>
+</template>
+
+<script>
+import OrderStateItem from './components/orderStateItem'
+import OrderState from './components/orderState'
+export default {
+  name: 'orderDetail',
+  components: {OrderState, OrderStateItem},
+  data() {
+    return {}
+  },
+  mounted() {
+    // 设置标题栏关闭返回按钮
+    this.$store.commit('setNavBar', {
+      show: true,
+      leftArrow: true,
+      rightIcon: false,
+      title: '',
+      leftText: '订单详情',
+      leftClick: null,
+      rightClick: null
+    })
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .order-detail {
+
+}
+</style>