添加单个订单视图

src/views/myOrder/index.vue

 <template>
   <div id="myOrder">
-    <van-tabs class="tabs" v-model="activeTab">
+    <!-- <van-tabs class="tabs" v-model="activeTab">
       <van-tab title="全部">
         <my-order-list/>
       </van-tab>
@@ -12,12 +12,31 @@
       </van-tab>
       <van-tab title="已取消">
       </van-tab>
+    </van-tabs> -->
+    <van-tabs class="tabs" v-model="activeTab"
+      :line-width="40"
+      :line-height="2"
+      v-if="tabsTitle.length"
+      swipeable>
+      <van-tab
+        v-for="(item, index) in tabsTitle"
+        :key="index"
+        :title="item.title">
+        <my-order-list/>
+      </van-tab>
     </van-tabs>
   </div>
 </template>
 
 <script>
 import myOrderList from './myOrderList.vue'
+const allTabsTitle = [
+  {title: '全部', name: 'home'},
+  {title: '已开单', name: 'monitor'},
+  {title: '已发货', name: 'purchase'},
+  {title: '已完成', name: 'sales'},
+  {title: '已取消', name: 'stock'}
+]
 export default {
   components: {
     myOrderList
@@ -49,9 +68,9 @@ export default {
       leftClick: this.closeAppPage,
       rightClick: this.closeAppPage
     })
-
     // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
     window.addEventListener('popstate', this.onBrowserBack, false)
+    this.tabsTitleData()
   },
   destroyed() {
     // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
@@ -86,7 +105,14 @@ export default {
       this.$nextTick(() => {
         this.activeName = nextTab.name
       })
-      console.log(this.activeName)
+    },
+    /// 处理tabsTitle
+    tabsTitleData() {
+      this.tabsTitle = []
+      for (let i = 0; i < allTabsTitle.length; i++) {
+        let dic = allTabsTitle[i]
+        this.tabsTitle.push(dic)
+      }
     },
     closeAppPage() {
       console.log('关闭页面')

src/views/myOrder/myOrderList.vue

@@ -12,13 +12,13 @@
           <div class="orderItem"
             v-for="(item, index) in orderList"
             :key="index">
-            <div class="itemInfo">
+            <order-list-item :item="item"/>
+            <!-- <div class="itemInfo">
               <div class="orderNum">
+                <van-image fit="contain" width="45" height="45" :src="sphImage"/>
                 <div class="num">订单号：34678649876</div>
                 <div class="dian"></div>
-                <div class="numType">
-                  <span>已开单</span>
-                </div>
+                <div class="numType"><span>已开单</span></div>
               </div>
               <div class="divider"></div>
               <div class="orderInfo">
@@ -54,7 +54,7 @@
                   <van-button plain size="small" type="info">清货单</van-button>
                 </div>
               </div>
-            </div>
+            </div> -->
           </div>
         </van-list>
       </van-pull-refresh>
@@ -65,9 +65,11 @@
 <script>
 // 引入接口
 import { getMyOrderList } from '@/api/myOrder'
+import orderListItem from './orderListItem.vue'
 export default {
   name: 'MyOrderList',
   components: {
+    orderListItem
   },
   data() {
     return {
@@ -79,7 +81,8 @@ export default {
       error: false,
       logInfoShow: false,
       orderList: [],
-      orderItem: {}
+      orderItem: {},
+      sphImage: require('@/assets/img/u48.png'),
     }
   },
   computed: {
@@ -167,86 +170,6 @@ export default {
         border-radius: 10PX;
         font-size: 14PX;
         color: #333333;
-        .itemInfo{
-          .divider{
-            width: 100%;
-            height: 1px;
-            background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
-            background-size: 10px 1px;
-            background-repeat: repeat-x;
-          }
-          .orderNum{
-            display: flex;
-            line-height: 45PX;
-            height: 45px;
-            margin: 0px 10px;
-            .num{
-              width: 80%;
-            }
-            .dian{
-              width: 10PX;
-              height: 10PX;
-              border-radius: 10PX;
-              background-color: red;
-              margin: auto 5px
-            }
-            .numType{
-              width: 20%;
-              text-align: right
-            }
-          }
-          .orderInfo{
-            margin: 0px 10px;
-            // display: flex;
-            height: 105px;
-            .company {
-              height: 35px;
-              line-height: 35px;
-              width: 100%;
-              display: flex;
-              font-weight: 600;
-            }
-            .info{
-              height: 80px;
-              display: flex;
-              .headImage{
-                // width: 55px;
-                padding-right: 10px;
-              }
-              .details{
-                float: right;
-                width: calc(100vw - 105px);
-                .titleInfo{
-                  width: 100%;
-                  overflow:hidden;
-                  white-space: nowrap;
-                  text-overflow:ellipsis;
-                }
-                .priceInfo{
-                  line-height: 30px;
-                  height: 30px;
-                  display: flex;
-                  .price{
-                    width: 50%;
-                  }
-                  .numBer {
-                    width: 50%;
-                    text-align: right;
-                  }
-                }
-              }
-            }
-          }
-          .orderTime{
-            display: flex;
-            .price {
-              width: 40%;
-              text-align: right;
-              font-weight: 600;
-              font-size: 15px
-            }
-          }
-        }
       }
     }
   }

src/views/myOrder/orderListItem.vue

+<template>
+  <div id="orderListItem">
+    <div class="itemInfo">
+      <div class="orderNum">
+        <van-image fit="contain" width="45" height="45" :src="sphImage"/>
+        <div class="num">订单号：34678649876</div>
+        <div class="dian"></div>
+        <div class="numType"><span>已开单</span></div>
+      </div>
+      <div class="divider"></div>
+      <div class="orderInfo">
+        <div class="company">
+          <span style="width: 83%">上药控股有限公司</span>
+          <span style="margin-right: 5PX;">共8件</span>
+          <van-icon style="margin: auto 0;" color="#1989fa" name="arrow" />
+        </div>
+        <div class="info">
+          <div class="headImage">
+            <van-image width="55" height="55"
+              src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
+          </div>
+          <div class="details">
+            <div class="titleInfo">
+              [132521]阿西匹林/0.25g*s/上海市浦东新区金科路长泰广场负一楼
+            </div>
+            <div class="priceInfo">
+              <div class="price">￥<span style="color:red;">10.5</span></div>
+              <div class="numBer">X 8</div>
+            </div>
+          </div>
+        </div>
+        <div class="orderTime">
+          <van-icon size="20" style="margin: auto 0; width: 10%;" name="clock-o" />
+          <span style="width: 50%;">2020-11-10 18:09:33</span>
+          <div class="price">总计：￥<span style="color:red;">10.5</span></div>
+        </div>
+        <van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '15PX 0 10PX 0'}"/>
+        <div class="btnInfo" style="text-align: right;">
+          <van-button plain size="small" type="info">产看发票</van-button>
+          <van-button plain size="small" type="info">查看物流</van-button>
+          <van-button plain size="small" type="info">清货单</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderListItem',
+  components: {
+  },
+  data() {
+    return {
+      sphImage: require('@/assets/img/u48.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: {
+    onRefresh() {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  #orderListItem {
+    .itemInfo{
+      .divider{
+        width: 100%;
+        height: 1PX;
+        background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
+        background-size: 10PX 1PX;
+        background-repeat: repeat-x;
+      }
+      .orderNum{
+        display: flex;
+        line-height: 45PX;
+        height: 45PX;
+        margin: 0PX 10PX;
+        .num{
+          width: 77%;
+          padding-left: 10PX;
+        }
+        .dian{
+          width: 12PX;
+          height: 10PX;
+          border-radius: 10PX;
+          background-color: red;
+          margin: auto 5PX
+        }
+        .numType{
+          width: 17%;
+          text-align: right
+        }
+      }
+      .orderInfo{
+        margin: 0PX 10PX;
+        // display: flex;
+        height: 105PX;
+        .company {
+          height: 35PX;
+          line-height: 35PX;
+          width: 100%;
+          display: flex;
+          font-weight: 600;
+        }
+        .info{
+          height: 80PX;
+          display: flex;
+          .headImage{
+            // width: 55PX;
+            padding-right: 10PX;
+          }
+          .details{
+            float: right;
+            width: calc(100vw - 105PX);
+            .titleInfo{
+              width: 100%;
+              overflow:hidden;
+              white-space: nowrap;
+              text-overflow:ellipsis;
+              line-height: 30PX;
+            }
+            .priceInfo{
+              line-height: 30PX;
+              height: 30PX;
+              display: flex;
+              .price{
+                width: 50%;
+              }
+              .numBer {
+                width: 50%;
+                text-align: right;
+              }
+            }
+          }
+        }
+      }
+      .orderTime{
+        display: flex;
+        .price {
+          width: 40%;
+          text-align: right;
+          font-weight: 600;
+          font-size: 15PX
+        }
+      }
+    }
+  }
+</style>