feat 订单详情

src/api/order.js

@@ -45,3 +45,13 @@ export const ignoreOrder = ( params ) => {
 export const rollOrder = ( params ) => {
   return post('app/order/rollOrder', params);
 }
+
+// 订单跟踪
+export const trackOrder = ( params ) => {
+  return get('app/order/track', params);
+}
+
+// 订单详情
+export const detailOrder = ( params ) => {
+  return get('app/order/detailNew', params);
+}

src/components/Home.vue

@@ -3,19 +3,19 @@
     <el-row class="order_tab">
       <el-col :span="15">
         <div class="tab_list">
-          <div class="tab_item" @click="change_tab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}"
-            v-for="(item,i) in tab_list" :key="i">
+          <div class="tab_item" @click="changeTab(i,item.status)" :class="{'tab_item_ac':tab_ac==i?true:false}" v-for="(item,i) in tab_list" :key="i">
             <div class="point" v-show="item.num">{{item.num}}</div>
             <span>{{item.name}}</span>
             <div class="tab_line"></div>
           </div>
         </div>
       </el-col>
-      <el-col :span="9">
+      <el-col :span="9" class="search">
         <div class="header_serch">
           <div class="search_inp">
             <el-input class="inp" v-model="params.searchKey" placeholder="请输入手机号/姓名/地址/订单编号"></el-input>
-            <div class="btn"><i class="el-icon-search"></i></div>
+            <!-- <div class="btn"><i class="el-icon-search"></i></div> -->
+            <el-button slot="append" icon="el-icon-search"></el-button>
           </div>
           <!-- 1.0.0版本暂不开发该功能 -->
           <!-- <div class="Manual">手动发单</div> -->
@@ -27,9 +27,7 @@
       <el-col :span="24" v-loading="isLoading">
         <order-list :list='orderList' :tabNum='tab_ac'></order-list>
         <div style="text-align: center;">
-          <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" background>
+          <el-pagination :current-page.sync="params.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
           </el-pagination>
         </div>
       </el-col>
@@ -38,240 +36,236 @@
 </template>
 
 <script>
-  import bus from '../common/bus.js';
-  import sendOrderPopup from './orderComponents/sendOrderPopup.vue';
-  import OrderList from './orderComponents/orderList.vue';
-  import {
-    getOrderList,
-    getOrderMarker,
-  } from '../api/order.js';
-  export default {
-    data() {
-      return {
-        isLoading: false,
-        total: 0,
-        orderList: [],
-        tab_list: [{
-            name: '新订单',
-            num: 0,
-            status: 0
-          },
-          {
-            name: '预约单',
-            num: 0,
-            status: 10
-          },
-          {
-            name: '待接单',
-            num: 0,
-            status: 1
-          },
-          {
-            name: '取货中',
-            num: 0,
-            status: 2
-          },
-          {
-            name: '配送中',
-            num: 0,
-            status: 3
-          },
-          {
-            name: '异常单',
-            num: 0,
-            status: -2
-          },
-          {
-            name: '已取消',
-            num: 0,
-            status: -1
-          }
-        ],
-        tab_ac: 0,
-        orderDetailStutus: 1,
-        params: {
+import bus from "../common/bus.js";
+import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
+import OrderList from "./orderComponents/orderList.vue";
+import { getOrderList, getOrderMarker } from "../api/order.js";
+export default {
+  data() {
+    return {
+      isLoading: false,
+      total: 0,
+      orderList: [],
+      tab_list: [
+        {
+          name: "新订单",
+          num: 0,
           status: 0,
-          searchType: 0,
-          searchKey: '',
-          pageNum: 1,
-          pageSize: 10
         },
-        needTrack: false,
-        markerNum: '',
-        clickBool: false
-      }
+        {
+          name: "预约单",
+          num: 0,
+          status: 10,
+        },
+        {
+          name: "待接单",
+          num: 0,
+          status: 1,
+        },
+        {
+          name: "取货中",
+          num: 0,
+          status: 2,
+        },
+        {
+          name: "配送中",
+          num: 0,
+          status: 3,
+        },
+        {
+          name: "异常单",
+          num: 0,
+          status: -2,
+        },
+        {
+          name: "已取消",
+          num: 0,
+          status: -1,
+        },
+      ],
+      tab_ac: 0,
+      needTrack: false,
+      orderDetailStutus: 1,
+      params: {
+        status: 0,
+        searchType: 0,
+        searchKey: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      markerNum: "",
+      clickBool: false,
+    };
+  },
+  components: {
+    sendOrderPopup,
+    OrderList,
+  },
+  destroyed() {
+    bus.$off("pullData");
+    bus.$off("refreshData");
+  },
+  created() {
+    bus.$on("pullData", (index) => {
+      this.tab_ac = index;
+      this.params.status = this.tab_list[index].status;
+      this.params.pageNum = 1;
+      this.orderList = [];
+      Promise.all([this.getOrder(), this.getMarker()]);
+    });
+    bus.$on("refreshData", () => {
+      console.log("执行refreshData");
+      this.params.pageNum = 1;
+      this.orderList = [];
+      Promise.all([this.getOrder(), this.getMarker()]);
+    });
+  },
+  mounted() {
+    this.getOrder();
+    this.getMarker();
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.params.pageNum = 1;
+      this.params.pageSize = val;
+      this.orderList = [];
+      this.getOrder();
     },
-    components: {
-      sendOrderPopup,
-      OrderList,
+    handleCurrentChange(val) {
+      this.params.pageNum = val;
+      this.orderList = [];
+      this.getOrder();
     },
-    destroyed() {
-      bus.$off('pullData');
-      bus.$off('refreshData');
+    getMarker() {
+      getOrderMarker().then((res) => {
+        this.markerNum = res.data;
+        this.tab_list[0].num = res.data.toBeBillNum;
+        this.tab_list[1].num = res.data.appointNum;
+        this.tab_list[2].num = res.data.toBeReceivedNum;
+        this.tab_list[3].num = res.data.toBePickedNum;
+        this.tab_list[4].num = res.data.inDeliveryNum;
+        this.tab_list[5].num = res.data.exceptionNum;
+        this.tab_list[6].num = res.data.cancelNum;
+      });
     },
-    created() {
-      bus.$on('pullData', (index) => {
-        this.tab_ac = index;
-        this.params.status = this.tab_list[index].status;
-        this.params.pageNum = 1;
-        this.orderList = [];
-        Promise.all([this.getOrder(), this.getMarker()])
-      })
-      bus.$on('refreshData', () => {
-        console.log('执行refreshData')
-        this.params.pageNum = 1;
-        this.orderList = [];
-        Promise.all([this.getOrder(), this.getMarker()]);
-      })
+    sendOrder() {
+      this.$refs.sendOrderPopup.init();
     },
-    mounted() {
+    changeTab(i, status) {
+      this.tab_ac = i;
+      this.params.status = status;
+      this.orderList = [];
+      this.params.pageNum = 1;
       this.getOrder();
-      this.getMarker();
-      console.log(this.$tool.eosFormatTime2("2017-07-10 16:00:00", 2.5))
     },
-    methods: {
-      handleSizeChange(val) {
-        this.params.pageNum = 1;
-        this.params.pageSize = val;
-        this.orderList = [];
-        this.getOrder();
-      },
-      handleCurrentChange(val) {
-        this.params.pageNum = val;
-        this.orderList = [];
-        this.getOrder();
-      },
-      getMarker() {
-        getOrderMarker().then(res => {
-          this.markerNum = res.data;
-          this.tab_list[0].num = res.data.toBeBillNum;
-          this.tab_list[1].num = res.data.appointNum;
-          this.tab_list[2].num = res.data.toBeReceivedNum;
-          this.tab_list[3].num = res.data.toBePickedNum;
-          this.tab_list[4].num = res.data.inDeliveryNum;
-          this.tab_list[5].num = res.data.exceptionNum;
-          this.tab_list[6].num = res.data.cancelNum;
-          console.log(this.markerNum);
-        })
-      },
-      sendOrder() {
-        this.$refs.sendOrderPopup.init();
-      },
-      change_tab(i, status) {
-        if (i == 2 || i == 3 || i == 4 || i == 5 || i == 6) {
-          this.needTrack = true;
+    getOrder() {
+      let _this = this;
+      var minute = 1000 * 60;
+      var hour = minute * 60;
+      var day = hour * 24;
+      this.isLoading = true;
+      getOrderList(this.params).then((res) => {
+        this.isLoading = false;
+        if (res.code == 200) {
+          this.total = res.data.totalNums || 0;
+          this.params.pageNum = res.data.pageNum;
+          res.data.data.forEach((element) => {
+            element.takeTimeTxt = this.$tool.timeago(
+              new Date(element.takeTime).getTime()
+            );
+            if (_this.tab_ac == 1) {
+              if (element.exceptTime) {
+                element.timeTxt = _this.$tool.eosFormatTime2(
+                  element.exceptTime,
+                  element.delayTime
+                );
+              } else {
+                element.timeTxt = "";
+              }
+            }
+            this.orderList.push(element);
+          });
         } else {
-          this.needTrack = false;
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
         }
-        this.tab_ac = i;
-        this.params.status = status;
-        this.orderList = [];
-        this.params.pageNum = 1;
-        this.getOrder();
-      },
-      getOrder() {
-        let _this = this;
-        var minute = 1000 * 60;
-        var hour = minute * 60;
-        var day = hour * 24;
-        this.isLoading = true;
-        getOrderList(this.params).then(res => {
-          this.isLoading = false;
-          if (res.code == 200) {
-            this.total = res.data.totalNums || 0;
-            this.params.pageNum = res.data.pageNum;
-            res.data.data.forEach(element => {
-              element.takeTimeTxt = this.$tool.timeago((new Date(element.takeTime)).getTime());
-              if (_this.tab_ac == 1) {
-                if (element.exceptTime) {
-                  element.timeTxt = _this.$tool.eosFormatTime2(element.exceptTime, element.delayTime);
-                } else {
-                  element.timeTxt = '';
-                }
-
-              }
-              this.orderList.push(element)
-            });
-            console.log('---------', this.orderList)
-          }else {
-            this.$message({
-              message: res.msg,
-              type: 'error'
-            })
-          }
-        })
-      },
-    }
-  }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-  // /deep/ .el-input__inner {
-  //   padding-right: 50px;
-  //   height: 44px;
-  // }
+/deep/ .el-input__inner {
+  padding-right: 30px;
+}
+
+.mainContent {
+  width: 100%;
 
-  .mainContent {
+  .order_tab {
     width: 100%;
+    height: 74px;
+    background: #fff;
 
-    .order_tab {
+    .tab_list {
+      display: flex;
       width: 100%;
       height: 74px;
-      background: #FFF;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      overflow-x: auto;
 
-      .tab_list {
-        width: 100%;
-        height: 74px;
-        padding-top: 20px;
-        padding-left: 36px;
-        box-sizing: border-box;
-        display: flex;
+      .tab_item {
+        width: 58px;
+        margin-right: 56px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #b1b1b1;
+        position: relative;
+        text-align: center;
+        cursor: pointer;
 
-        .tab_item {
+        .tab_line {
           width: 58px;
-          margin-right: 56px;
-          font-size: 16px;
-          font-weight: 500;
-          color: #B1B1B1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
-
-          .tab_line {
-            width: 58px;
-            height: 6px;
-            background: #FFF;
-            border-radius: 3px;
-            margin-top: 15px;
-          }
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin-top: 15px;
+        }
 
-          .point {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: #F74141;
-            font-size: 12px;
-            font-weight: 400;
-            color: #FFFFFF;
-            position: absolute;
-            top: -5px;
-            right: -10px;
-            text-align: center;
-            line-height: 16px;
-          }
+        .point {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: #f74141;
+          font-size: 12px;
+          font-weight: 400;
+          color: #ffffff;
+          position: absolute;
+          top: -5px;
+          right: -10px;
+          text-align: center;
+          line-height: 16px;
         }
+      }
 
-        .tab_item_ac {
-          color: #FC7200;
+      .tab_item_ac {
+        color: #fc7200;
 
-          .tab_line {
-            background: #FC7200;
-          }
+        .tab_line {
+          background: #fc7200;
         }
       }
-
+    }
+    .search {
+      display: flex;
+      justify-content: flex-end;
       .header_serch {
-        width: 100%;
+        width: 80%;
         height: 74px;
         padding-right: 25px;
         box-sizing: border-box;
@@ -282,11 +276,11 @@
         .Manual {
           width: 118px;
           height: 44px;
-          background: #FC7200;
+          background: #fc7200;
           border-radius: 6px;
           font-size: 16px;
           font-weight: 500;
-          color: #FFFFFF;
+          color: #ffffff;
           text-align: center;
           line-height: 44px;
           margin-left: 18px;
@@ -300,13 +294,12 @@
           position: relative;
 
           .inp {
-            width: 380px;
-            height: 44px;
+            width: 100%;
+            // height: 44px;
             border: none;
           }
 
           .btn {
-            margin-left: 15px;
             font-size: 22px;
             position: absolute;
             right: 15px;
@@ -314,10 +307,11 @@
         }
       }
     }
+  }
 
-    .order_list {
-      width: 100%;
-      margin-top: 10px;
-    }
+  .order_list {
+    width: 100%;
+    margin-top: 10px;
   }
+}
 </style>

src/components/orderComponents/orderDetail.vue

@@ -1,264 +1,218 @@
 <template>
-    <div>
-        <!-- 新订单 -->
-        <div class="detail_cont">
-            <div class="detail_title2">商品详情</div>
-            <div class="shop_detail" v-for="(item,i) in 2" :key="i">
-                <img src="" alt="" srcset="">
-                <div class="info">
-                <div class="shop_title">6英寸可可奥利奥、抹茶奶油蛋糕2选1</div>
-                <div class="shop_num">x1</div>
-                </div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="info2">
-                <div class="title">用户备注：</div>
-                <div class="cont">蜡烛需要20岁，要个王冠的帽子，顾客需要餐具。</div>
-            </div>
-                <div class="info2 info3">
-                <div class="title">发单备注：</div>
-                <div class="cont">切勿挤压堆放，一定要联系上收件人取货！</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">发票信息</div>
-            <div class="info2 info4">
-                <div class="title">发票抬头：</div>
-                <div class="cont">苏州盈点点信息科技有限公司</div>
-            </div>
-                <div class="info2 info4">
-                <div class="title">税号：</div>
-                <div class="cont">91320452MA1M15M85F</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">顾客信息</div>
-            <div class="info2 info4">
-                <div class="title">姓名：</div>
-                <div class="cont">苏州盈点点信息科技有限公司</div>
-            </div>
-                <div class="info2 info4">
-                <div class="title">隐私号：</div>
-                <div class="cont">91320452MA1M15M85F</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单金额</div>
-            <div class="info2 info4">
-                <div class="title">商品金额：</div>
-                <div class="cont">¥310.00</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单信息</div>
-            <div class="info2 info4">
-                <div class="title">送达时间：</div>
-                <div class="cont cont2">立即送达</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">创建时间：</div>
-                <div class="cont">2021/09/01  15:16:08</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">订单编号：</div>
-                <div class="cont">210812134713235749</div>
-            </div>
-            <div class="btns">
-                <el-button size='small'>修改订单</el-button>
-                <el-button size='small'>忽略订单</el-button>
-                <el-button size='small'>补打发票</el-button>
-                <el-button size='small' class="btn">发起配送</el-button>
-            </div>
+  <div>
+    <!-- 新订单 -->
+    <div class="detail_cont">
+      <div class="detail_title2">商品详情</div>
+      <div class="shop_detail" v-for="(item,i) in orderDetail.detailItems" :key="i">
+        <img :src="item.foodPic" alt="" srcset="">
+        <div class="info">
+          <div class="shop_title">{{item.foodName}}</div>
+          <div class="shop_num">x{{item.quantity}}</div>
         </div>
-        <!-- 预约单 -->
-        <div class="detail_cont" v-if="false">
-            <div class="detail_title2">商品详情</div>
-            <div class="shop_detail" v-for="(item,i) in 2" :key="i">
-                <img src="" alt="" srcset="">
-                <div class="info">
-                <div class="shop_title">6英寸可可奥利奥、抹茶奶油蛋糕2选1</div>
-                <div class="shop_num">x1</div>
-                </div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="info2">
-                <div class="title">用户备注：</div>
-                <div class="cont">蜡烛需要20岁，要个王冠的帽子，顾客需要餐具。</div>
-            </div>
-            
-            <div class="detail_ine"></div>
-            <div class="detail_title2">顾客信息</div>
-            <div class="info2 info4">
-                <div class="title">姓名：</div>
-                <div class="cont">苏州盈点点信息科技有限公司</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">手机号：</div>
-                <div class="cont">18015468888</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">隐私号：</div>
-                <div class="cont">13000957421转1157</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单金额</div>
-            <div class="info2 info4">
-                <div class="title">配送费：</div>
-                <div class="cont">¥310.00</div>
-            </div>
-             <div class="info2 info4">
-                <div class="title">顾客实付：</div>
-                <div class="cont">¥310.00</div>
-            </div>
-             <div class="info2 info4">
-                <div class="title">商家实收：</div>
-                <div class="cont">¥310.00</div>
-            </div>
-            <div class="detail_ine"></div>
-            <div class="detail_title2">订单信息</div>
-            <div class="info2 info4">
-                <div class="title">商家修改时间：</div>
-                <div class="cont cont2">2021/09/09  20:00</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">送达时间：</div>
-                <div class="cont">2021/09/10  20:00</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">创建时间：</div>
-                <div class="cont">2021/09/01  15:16:08</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">美团订单编号：</div>
-                <div class="cont">32866082128077024</div>
-            </div>
-            <div class="info2 info4">
-                <div class="title">订单编号：</div>
-                <div class="cont">210812134713235749</div>
-            </div>
-            <div class="btns">
-                <div class="btn_bot">
-                    <!-- <el-dropdown trigger="click"> -->
-                    <el-dropdown>
-                        <span class="el-dropdown-link">更多</span>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item><span style="color:#FC7200;">补打发票</span></el-dropdown-item>
-                            <el-dropdown-item>忽略订单</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </el-dropdown>
-                </div>
-                <el-button size='small' class="btn_bots">忽略订单</el-button>
-                <el-button size='small' class="btn_bots">补打发票</el-button>
-                <el-button size='small' class="btn btn_bots">发起配送</el-button>
-            </div>
+      </div>
+      <div class="detail_ine"></div>
+      <div class="info2">
+        <div class="title">用户备注：</div>
+        <div class="cont">{{orderDetail.caution}}</div>
+      </div>
+      <div class="info2 info3">
+        <div class="title">发单备注：</div>
+        <div class="cont">{{orderDetail.takeRemark}}</div>
+      </div>
+      <div class="detail_ine"></div>
+      <div class="detail_title2">发票信息</div>
+      <div class="info2 info4">
+        <div class="title">发票抬头：</div>
+        <div class="cont">{{orderDetail.invoiceTitle}}</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">税号：</div>
+        <div class="cont">{{orderDetail.taxpayerId}}</div>
+      </div>
+      <div class="detail_ine"></div>
+      <div class="detail_title2">顾客信息</div>
+      <div class="info2 info4">
+        <div class="title">姓名：</div>
+        <div class="cont">{{orderDetail.receiptContactName}}</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">隐私号：</div>
+        <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">手机号：</div>
+        <div class="cont">{{orderDetail.receiptPhone}}</div>
+      </div>
+      <div class="detail_ine"></div>
+      <div class="detail_title2">订单金额</div>
+      <div class="info2 info4">
+        <div class="title">商品金额：</div>
+        <div class="cont">¥{{orderDetail.payAmount}}</div>
+      </div>
+      <div class="detail_ine"></div>
+      <div class="detail_title2">订单信息</div>
+      <div class="info2 info4">
+        <div class="title">送达时间：</div>
+        <div class="cont cont2">立即送达</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">发单时间：</div>
+        <div class="cont">{{orderDetail.takeTime}}</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">创建时间：</div>
+        <div class="cont">{{orderDetail.createTime}}</div>
+      </div>
+      <div class="info2 info4">
+        <div class="title">订单编号：</div>
+        <div class="cont">{{orderDetail.orderSn}}</div>
+      </div>
+      <div class="btns">
+        <div class="btn_bot">
+          <el-dropdown>
+            <span class="el-dropdown-link">更多</span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item><span style="color:#FC7200;">补打发票</span></el-dropdown-item>
+              <el-dropdown-item>忽略订单</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
+        <el-button size='small' class="btn_bots">补打发票</el-button>
+        <el-button size='small' class="btn btn_bots">发起配送</el-button>
+      </div>
     </div>
-    
+  </div>
+
 </template>
     
 <script>
+import { detailOrder } from "../../api/order.js";
 export default {
-  name: 'OrderDetail',
-  data () {
+  name: "OrderDetail",
+  data() {
     return {
-      
-    }
+      orderDetail: {},
+    };
   },
-  props:{
+  props: {
     tabNum: Number,
-  }
-}
+    orderInfo: Object,
+  },
+  watch: {
+    orderInfo() {
+      this.getDetailOrder();
+    },
+  },
+  methods: {
+    getDetailOrder() {
+      if (!this.orderInfo) return;
+      detailOrder({ orderId: this.orderInfo.id }).then((res) => {
+        console.log("object", res);
+        if (res.code === 200) {
+          this.orderDetail = res.data;
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
-.detail_cont{
+.detail_cont {
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  .detail_title2 {
     width: 100%;
-    padding: 16px;
-    box-sizing: border-box;
-    .detail_title2{
-        width: 100%;
-        font-size: 12px;
-        font-weight: 600;
-        color: #777777;
-        margin-bottom: 15px;
-    }
-    .shop_detail{
-        width: 100%;
-        display: flex;
-        margin-bottom: 10px;
-        img{
-        width: 47px;
-        height: 47px;
-        border-radius: 4px 4px 4px 4px;
-        margin-right: 12px;
-        }
-        .info{
-        flex-grow: 1;
-        display: flex;
-        justify-content: space-between;
-        .shop_title{
-            width: 70%;
-            font-size: 14px;
-            font-weight: 500;
-            color: #333333;
-            line-height: 18px;
-        }
-        .shop_num{
-            color: #B1B1B1;
-        }
-        }
-    }
-    .detail_ine{
-        width: 100%;
-        height: 1px;
-        border-top: 2px dotted #F0F0F0;
-        margin: 16px 0;
+    font-size: 12px;
+    font-weight: 600;
+    color: #777777;
+    margin-bottom: 15px;
+  }
+  .shop_detail {
+    width: 100%;
+    display: flex;
+    margin-bottom: 10px;
+    img {
+      width: 47px;
+      height: 47px;
+      border-radius: 4px 4px 4px 4px;
+      margin-right: 12px;
     }
-    .info2{
-        width: 100%;
-        display: flex;
-        margin-bottom: 5px;
-        .title{
+    .info {
+      flex-grow: 1;
+      display: flex;
+      justify-content: space-between;
+      .shop_title {
+        width: 70%;
         font-size: 14px;
-        font-weight: 400;
-        // width: 80px;
-        color: #B1B1B1;
-        }
-        .cont{
-        font-size: 14px;
-        font-weight: 400;
+        font-weight: 500;
         color: #333333;
-        line-height: 20px;
-        }
-        .cont2{
-        color: #FC7200;
-        }
+        line-height: 18px;
+      }
+      .shop_num {
+        color: #b1b1b1;
+      }
+    }
+  }
+  .detail_ine {
+    width: 100%;
+    height: 1px;
+    border-top: 2px dotted #f0f0f0;
+    margin: 16px 0;
+  }
+  .info2 {
+    width: 100%;
+    display: flex;
+    margin-bottom: 5px;
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      // width: 80px;
+      color: #b1b1b1;
     }
-    .info3{
-        margin-top: 10px;
+    .cont {
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
     }
-    .info4{
-        display: flex;
-        justify-content: space-between;
+    .cont2 {
+      color: #fc7200;
     }
-    .btns{
-        margin-top: 30px;
-        display: flex;
-        justify-content: space-between;
-        .btn{
-            background: #FC7200;
-            border-color: #FC7200;
-            color: #FFF;
-        }
-        .btn_bot{
-           width: 74px;
-           display: flex;
-           align-items: center;
-           justify-content: center;
-           color: #888888;
-          .el-dropdown-link{
-              cursor: pointer;
-          }
-           
-        }
-       
+  }
+  .info3 {
+    margin-top: 10px;
+  }
+  .info4 {
+    display: flex;
+    justify-content: space-between;
+  }
+  .btns {
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    .btn {
+      background: #fc7200;
+      border-color: #fc7200;
+      color: #fff;
     }
+    .btn_bot {
+      width: 74px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #888888;
+      .el-dropdown-link {
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>

src/components/orderComponents/orderList.vue

@@ -8,8 +8,8 @@
           </div>
           <!-- <div style="width:100%;height:10px" v-if="!list.length"></div> -->
           <!-- 新订单 -->
-          <div v-if="tabNum==0">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===0">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number">#{{item.daySeq}}</div>
@@ -26,31 +26,29 @@
 
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
                     </span>
-                  </div>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
+                    </span>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
             </div>
           </div>
           <!-- 预约单 -->
-          <div v-if="tabNum==1">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===1">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number">#{{item.daySeq}}</div>
@@ -64,34 +62,31 @@
                   <el-button size='small' class="btn" @click.stop="itemAddRemark(item.id, item)">添加备注</el-button>
                   <el-button size='small' class="btn" @click.stop="iGnoreOrder(item.id)">忽略订单</el-button>
                 </div>
-
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
                     </span>
-                  </div>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
+                    </span>
+                  </span>
                 </div>
                 <div v-if="item.takeRemark" class="itme_r">备注：{{item.takeRemark}}</div>
               </div>
             </div>
           </div>
           <!-- 待接单 -->
-          <div v-if="tabNum==2">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===2">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
@@ -106,31 +101,30 @@
 
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
                     </span>
-                  </div>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
+                    </span>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
             </div>
           </div>
           <!-- 取货中 -->
-          <div v-if="tabNum==3">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===3">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
@@ -142,34 +136,31 @@
                   <span class="header_r">预计{{item.takeTimeTxt}}取件</span>
                   <el-button size='small' class="btn" @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
                 </div>
-
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
+                    </span>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
                     </span>
-                  </div>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
             </div>
           </div>
           <!-- 配送中 -->
-          <div v-if="tabNum==4">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===4">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
@@ -181,34 +172,31 @@
                   <span class="header_r" v-if="item.exceptTime">预计{{item.exceptTime}}送达</span>
                   <el-button size='small' class="btn" @click.stop="orderPrinter(item.waimaiOrderId)">补打发票</el-button>
                 </div>
-
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
+                    </span>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
                     </span>
-                  </div>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
             </div>
           </div>
           <!-- 异常单 -->
-          <div v-if="tabNum==5">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===5">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
@@ -224,34 +212,31 @@
                   <span class="header_r" v-if="item.cancelType == 5">平台取消</span>
                   <el-button size='small' class="btn" @click.stop="orderBack(item.id)">撤回订单</el-button>
                 </div>
-
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
+                    </span>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
                     </span>
-                  </div>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
             </div>
           </div>
           <!-- 异常单 -->
-          <div v-if="tabNum==6">
-            <div class="order_item" v-for="(item,i) in list" :key="i">
+          <div v-if="tabNum===6">
+            <div :class="curIdx === i ? 'order_item active-order-item' : 'order_item'" @click="chooseOrder(item,i)" v-for="(item,i) in list" :key="i">
               <div class="order_item_header">
                 <div class="order_item_header_l">
                   <div class="Serial_number" v-if="item.daySeq">#{{item.daySeq}}</div>
@@ -267,26 +252,23 @@
                   <span class="header_r" v-if="item.cancelType == 5">平台取消</span>
                   <!-- <el-button size='small' class="btn" @click.stop="orderBack(item.id)">撤回订单</el-button> -->
                 </div>
-
               </div>
               <div class="order_item_cont">
-                <div class="itme_l">
-                  <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
-                  <div class="address">
-                    {{item.receiptProvinceName}}
-                    {{item.receiptCityName}}
-                    {{item.receiptDistrictName}}
-                    {{item.receiptAddress}}
-                    <span v-if="item.orderDistance" @click.stop="checkMap(item)">
-                      <i class="el-icon-location"></i>
-                      <span v-if="item.orderDistance < 1000">
-                        {{item.orderDistance}}m
-                      </span>
-                      <span v-else>
-                        {{item.orderDistance / 1000}}km
-                      </span>
+                <div class="content">{{item.receiptContactName}}<span>{{item.receiptPhone}}</span></div>
+                <div class="address">
+                  {{item.receiptProvinceName}}
+                  {{item.receiptCityName}}
+                  {{item.receiptDistrictName}}
+                  {{item.receiptAddress}}
+                  <span v-if="item.orderDistance" @click.stop="checkMap(item)">
+                    <i class="el-icon-location"></i>
+                    <span v-if="item.orderDistance < 1000">
+                      {{item.orderDistance}}m
+                    </span>
+                    <span v-else>
+                      {{item.orderDistance / 1000}}km
                     </span>
-                  </div>
+                  </span>
                 </div>
                 <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
               </div>
@@ -295,21 +277,15 @@
           <div v-if="item.caution" class="itme_r">备注：{{item.caution}}</div>
         </div>
       </el-col>
+      <!-- 订单追踪、订单详情 -->
       <el-col :span="6">
-        <div class="order_detail" v-if="needTrack">
+        <div class="order_detail">
           <div class="detail_title">
-            <div class="detail_txt" @click="orderDetailStutus=0" :class="{'detail_txt_ac':orderDetailStutus==0?true:false}">订单跟踪</div>
-            <div class="detail_txt" @click="orderDetailStutus=1" :class="{'detail_txt_ac':orderDetailStutus==1?true:false}">订单详情</div>
+            <div v-show="needTrack" class="detail_txt" @click="orderDetailStutus=0" :class="{'detail_txt_ac':!orderDetailStutus}">订单跟踪</div>
+            <div class="detail_txt" @click="orderDetailStutus=1" :class="{'detail_txt_ac':!!orderDetailStutus}">订单详情</div>
           </div>
-          <order-detail v-if="orderDetailStutus==1"></order-detail>
-          <order-track v-if="orderDetailStutus==0"></order-track>
-        </div>
-        <div class="order_detail" v-else>
-          <div class="detail_title">
-            <div class="detail_txt" @click="orderDetailStutus=1">订单详情</div>
-          </div>
-          <order-detail v-if="orderDetailStutus==1"></order-detail>
-          <order-track v-if="orderDetailStutus==0"></order-track>
+          <order-track :tabNum="tabNum" :orderInfo="orderInfo" v-if="!orderDetailStutus && needTrack"></order-track>
+          <order-detail :tabNum="tabNum" :orderInfo="orderInfo" v-else></order-detail>
         </div>
       </el-col>
     </el-row>
@@ -368,7 +344,7 @@ export default {
   name: "OrderList",
   data() {
     return {
-      needTrack: true,
+      needTrack: false,
       orderDetailStutus: 0,
       isLoading: false,
       dialogTableVisible: false,
@@ -377,12 +353,30 @@ export default {
       orderId: "",
       item: {},
       radio: "",
+      needTrack: false,
+      curIdx: 0,
+      orderInfo: {},
     };
   },
   props: {
     tabNum: Number,
     list: Array,
   },
+  watch: {
+    tabNum(newVal, oldVal) {
+      if (newVal === 0 || newVal === 1) {
+        this.needTrack = false;
+      } else {
+        this.needTrack = true;
+      }
+      this.curIdx = 0;
+    },
+    list(newVal, oldVal) {
+      if (newVal.length) {
+        this.orderInfo = newVal[0];
+      }
+    },
+  },
   components: {
     sendOrderPopup,
     orderMap,
@@ -392,8 +386,11 @@ export default {
   computed: {
     ...mapState(["userInfo"]),
   },
-  mounted() {},
   methods: {
+    chooseOrder(v, index) {
+      this.curIdx = index;
+      this.orderInfo = v;
+    },
     changeRadio(i) {
       this.radio = i;
     },
@@ -611,12 +608,17 @@ export default {
     height: 222px;
   }
 }
-
+.active-order-item {
+  border: 2px solid #fc7200;
+  height: 136px !important;
+  width: calc(100% - 4px) !important;
+}
 .order_item {
   width: 100%;
   height: 140px;
   background: #fff;
   margin-bottom: 10px;
+  border-radius: 5px;
 
   .order_item_header {
     width: 100%;
@@ -720,7 +722,13 @@ export default {
       //  right: 10px;
     }
   }
-
+  .order_item_cont {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    padding: 5px 20px;
+    height: 80px;
+  }
   .address span {
     font-size: 12px;
     color: #b1b1b1;

src/components/orderComponents/orderTrack.vue

@@ -2,10 +2,13 @@
   <div class="order-detail">
     <!-- 取货中 -->
     <div class="picking-up">
-      <div class="top">
-        <img src="../../../static/image/time-icon.png" class="time-icon" />
-        <span class="top-tlt">骑手预计</span>
-        <span class="top-tlt-l">5分钟到店取件</span>
+      <div class="top" v-if="tabNum === 3 || tabNum === 4">
+        <div class="top-l">
+          <img src="../../../static/image/time-icon.png" class="time-icon" />
+          <span class="top-tlt">骑手预计</span>
+        </div>
+        <span v-if="tabNum === 3" class="top-tlt-l">{{trackOrder.riderArriveMinute}}分钟到店取件</span>
+        <span v-if="tabNum === 4" class="top-tlt-l">{{trackOrder.estimateArriveTime}}送达</span>
       </div>
       <!-- 配送信息 ( 待接单无配送信息 ) -->
       <div class="send-info">
@@ -13,32 +16,32 @@
         <div class="label">
           <div class="label-tlt">接单平台：</div>
           <div class="label-right">
-            <img src="../../../static/image/juhe-icon.png" class="send-logo" />
-            <span>闪送</span>
+            <img :src="trackOrder.deliveryLogo" class="send-logo" />
+            <span>{{trackOrder.deliveryName}}</span>
           </div>
         </div>
         <div class="label">
           <div class="label-tlt">骑手信息：</div>
           <div class="label-right">
-            <span>张某某（18855558888)</span>
+            <span>{{trackOrder.shipperName}}（{{trackOrder.shipperPhone}})</span>
           </div>
         </div>
         <div class="label">
-          <div class="label-tlt">闪送客服：</div>
+          <div class="label-tlt">{{trackOrder.deliveryName}}客服：</div>
           <div class="label-right">
-            <span>400-612-6688</span>
+            <span>{{trackOrder.shipperPhone}}</span>
           </div>
         </div>
         <div class="label">
           <div class="label-tlt">接单时间：</div>
           <div class="label-right">
-            <span>2021/09/01  17:00:00</span>
+            <span>{{trackOrder.receiveTime}}</span>
           </div>
         </div>
         <div class="label">
-          <div class="label-tlt">闪送订单号：</div>
+          <div class="label-tlt">{{trackOrder.deliveryName}}订单号：</div>
           <div class="label-right">
-            <span>TDH2021081218578724</span>
+            <span>{{trackOrder.deliveryOrderSn}}</span>
           </div>
         </div>
       </div>
@@ -48,44 +51,42 @@
         <div class="label">
           <div class="label-tlt">下单金额：</div>
           <div class="label-right">
-            <span>¥10.00</span>
+            <span>¥{{trackOrder.deliveryFee}}</span>
           </div>
         </div>
         <div class="label">
           <div class="label-tlt">发单时间：</div>
           <div class="label-right">
-            <span>2021/09/01  17:00:00</span>
+            <span>{{trackOrder.takeTime}}</span>
           </div>
         </div>
       </div>
       <!-- 收件地址信息、配送进度 -->
       <div class="address-box">
-        <div class="address-info">
+        <!-- <div class="address-info">
           <img src="../../../static/image/address-shou.png" class="address-icon" />
           <div class="address-content">【苏州市工业园区】娄葑街道通园路80号（56文创园）C栋1楼 18015468888-1157</div>
-        </div>
+        </div> -->
         <!-- 进度列表 -->
         <div class="process">
-          <div class="p-item">
-            <div class="p-left">
-              <img src="../../../static/image/black-point.png" class="black-point" />
-              <img v-if="false" src="../../../static/image/transp-point.png" class="black-point" />
-            </div>
-            <div class="p-right">
-              <div class="p-top">
-                <span>骑手接单</span>
-                <span style="font-weight: normal;">17:00:08</span>
-              </div>
-              <div class="p-bottom">
-                闪送骑手
-                <span class="has-driver">张某某（18855558888) </span>
-                已接单
-              </div>
-              <div class="p-bottom" v-if="false">
-                <span>20分钟内无骑手接单将自动取消订单</span>
+          <el-timeline>
+            <el-timeline-item class="p-item" v-for="(v,i) in trackOrder.itemList" :key="i" type="info" size="large" :icon="i ? 'el-icon-success' : 'el-icon-circle-check'">
+              <div class="p-right">
+                <div class="p-top">
+                  <span class="p-status">{{orderStatus(v.orderStatus)}}</span>
+                  <span class="p-time">{{v.nodeTime}}</span>
+                </div>
+                <div class="p-bottom" v-if="v.orderStatus === 2">
+                  {{trackOrder.deliveryName}}骑手
+                  <span class="has-driver">{{trackOrder.shipperName}}（{{trackOrder.shipperPhone}})</span>
+                  已接单
+                </div>
+                <div class="p-bottom" v-if="v.orderStatus === 1">
+                  <span>20分钟内无骑手接单将自动取消订单</span>
+                </div>
               </div>
-            </div>
-          </div>
+            </el-timeline-item>
+          </el-timeline>
         </div>
       </div>
       <!-- 按钮列表 -->
@@ -104,158 +105,236 @@
 </template>
 
 <script>
-  export default {
-     name: 'orderTrack',
-    data() {
-      return {
+import { trackOrder } from "../../api/order.js";
+export default {
+  name: "orderTrack",
+  props: {
+    orderInfo: Object,
+    tabNum: Number,
+  },
+  data() {
+    return {
+      trackOrder: {},
+    };
+  },
+  watch: {
+    orderInfo() {
+      this.getTrackOrder();
+    },
+  },
+  methods: {
+    orderStatus(status) {
+      let name = "";
+      switch (status) {
+        case -2:
+          name = "异常单";
+          break;
+        case -1:
+          name = "已取消";
+          break;
+        case 1:
+          name = "发起配送";
+          break;
+        case 2:
+          name = "骑手已接单";
+          break;
+        case 3:
+          name = "配送中";
+          break;
+        case 4:
+          name = "配送已完成";
+          break;
 
+        default:
+          name = "配送已完成";
+          break;
       }
+      return name;
     },
-    methods: {
-
-    }
-  }
+    getTrackOrder() {
+      if (!this.orderInfo) return;
+      trackOrder({ orderId: this.orderInfo.id }).then((res) => {
+        if (res.code === 200) {
+          this.trackOrder = res.data;
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .clearfix:after {
-    content: "";
-    font-size: 0;
-    height: 0;
-    display: block;
-    clear: both;
-  }
-  .order-detail {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 18px;
-    .picking-up {
-      .top {
+/deep/ .el-timeline {
+  padding: 0 0 0 5px !important;
+}
+.clearfix:after {
+  content: "";
+  font-size: 0;
+  height: 0;
+  display: block;
+  clear: both;
+}
+.order-detail {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 18px;
+  .picking-up {
+    .top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      font-weight: bold;
+      margin: 15px 0;
+      .top-l {
         display: flex;
         align-items: center;
-        justify-content: center;
-        font-weight: bold;
         .time-icon {
           width: 15px;
           height: 16px;
         }
         .top-tlt {
+          flex-shrink: 0;
           margin: 0 6px;
           font-size: 14px;
-          color: #00152A;
-        }
-        .top-tlt-l {
-          font-size: 14px;
-          color: #009CFF;
+          color: #00152a;
+          line-height: 16px;
         }
       }
-      .send-info {
-        .send-tlt {
-          font-size: 12px;
-          font-weight: bold;
-          color: #777777;
-          margin-bottom: 15px;
+      .top-tlt-l {
+        text-align: right;
+        font-size: 14px;
+        line-height: 16px;
+        color: #009cff;
+      }
+    }
+    .send-info {
+      .send-tlt {
+        font-size: 12px;
+        font-weight: bold;
+        color: #777777;
+        margin-bottom: 15px;
+      }
+      .label {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        .label-tlt {
+          flex-shrink: 0;
+          font-size: 14px;
+          font-weight: 400;
+          color: #b1b1b1;
         }
-        .label {
+        .label-right {
           display: flex;
-          justify-content: space-between;
-          margin-bottom: 4px;
-          .label-tlt {
+          flex-wrap: wrap;
+          align-items: center;
+          .send-logo {
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+          }
+          span {
+            text-align: right;
             font-size: 14px;
             font-weight: 400;
-            color: #B1B1B1;
-          }
-          .label-right {
-            display: flex;
-            align-items: center;
-            .send-logo {
-              width: 16px;
-              height: 16px;
-              margin-right: 4px;
-            }
-            span {
-              font-size: 14px;
-              font-weight: 400;
-              color: #333333;
-              line-height: 20px;
-            }
+            color: #333333;
+            line-height: 20px;
+            word-break: break-all;
           }
         }
       }
-      .address-box {
-        padding-top: 20px;
-        .address-info {
-          display: flex;
-          .address-icon {
-            width: 21px;
-            height: 22px;
-            margin-right: 11px;
-          }
-          .address-content {
-            word-break: break-all;
-            font-size: 14px;
-            font-weight: 600;
-            color: #00152A;
-            line-height: 20px;
-          }
+    }
+    .address-box {
+      padding-top: 20px;
+      .address-info {
+        display: flex;
+        .address-icon {
+          width: 21px;
+          height: 22px;
+          margin-right: 11px;
         }
-        .process {
-          padding-top: 30px;
-          .p-item {
-            display: flex;
-            padding-bottom: 30px;
-            .p-left {
-              margin-left: 6px;
-              margin-right: 14px;
-              .black-point {
-                width: 9px;
-                height: 10px;
-              }
+        .address-content {
+          word-break: break-all;
+          font-size: 14px;
+          font-weight: 600;
+          color: #00152a;
+          line-height: 20px;
+        }
+      }
+      .process {
+        padding-top: 30px;
+        .p-item {
+          display: flex;
+          padding-bottom: 30px;
+          .p-left {
+            margin-left: 6px;
+            margin-right: 14px;
+            .black-point {
+              width: 9px;
+              height: 10px;
             }
-            .p-right {
-              flex: 1;
-              .p-top {
-                display: flex;
-                justify-content: space-between;
-                font-size: 14px;
-                font-weight: 600;
-                color: #00152A;
-                margin-bottom: 6px;
+          }
+          .p-right {
+            flex: 1;
+            .p-top {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              font-size: 14px;
+              font-weight: 600;
+              color: #00152a;
+              margin-bottom: 6px;
+              .p-status {
+                flex-shrink: 0;
+                line-height: 20px;
               }
-              .p-bottom {
+              .p-time {
+                margin-left: 10px;
+                font-weight: normal;
+                text-align: right;
+                line-height: 20px;
                 font-size: 12px;
-                font-weight: 400;
-                color: #B1B1B1;
-                .has-driver {
-                  color: #009CFF;
-                }
+              }
+            }
+            .p-bottom {
+              font-size: 12px;
+              font-weight: 400;
+              color: #b1b1b1;
+              .has-driver {
+                color: #009cff;
               }
             }
           }
         }
       }
-      .button-list {
-        padding-bottom: 15px;
-        .btn-item {
-          float: right;
-          width: 74px;
-          height: 30px;
-          line-height: 30px;
-          box-sizing: border-box;
-          text-align: center;
-          border-radius: 4px;
-          font-size: 12px;
-          cursor: pointer;
-        }
-        .add-tip {
-          background-color: #FC7200;
-          color: #fff;
-        }
-        .cancel {
-          color: #888888;
-          border: 1px solid #eee;
-        }
+    }
+    .button-list {
+      padding-bottom: 15px;
+      .btn-item {
+        float: right;
+        width: 74px;
+        height: 30px;
+        line-height: 30px;
+        box-sizing: border-box;
+        text-align: center;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+      }
+      .add-tip {
+        background-color: #fc7200;
+        color: #fff;
+      }
+      .cancel {
+        color: #888888;
+        border: 1px solid #eee;
       }
     }
   }
+}
 </style>