feat 订单详情、订单跟踪

src/api/order.js

@@ -1,12 +1,11 @@
 import { get, post, postJson } from './http.js';
 
 // 订单列表&订单查询
-
 export const getOrderList = ( params ) => {
   return get( 'app/order/listNew', params )
 }
-// 订单角标
 
+// 订单角标
 export const getOrderMarker = ( params ) => {
   return get( 'app/order/markerNew', params )
 }

src/components/orderComponents/orderDetail.vue

@@ -71,21 +71,7 @@
         <div class="title">{{takeOUtType(orderDetail.orderType)}}订单编号：</div>
         <div class="cont">{{orderDetail.outOrderId}}</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 @click.native="remark"><span style="color:#FC7200;">发单备注</span></el-dropdown-item>
-              <el-dropdown-item @click.native="ignore">忽略订单</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-        <el-button size='small' @click.native="printer" class="btn_bots">补打发票</el-button>
-        <el-button size='small' v-if="tabNum ===0" @click.native="send" class="btn btn_bots">发起配送</el-button>
-        <el-button size='small' v-if="tabNum ===1" @click.native="send" class="btn btn_bots">预约发单</el-button>
-        <el-button size='small' v-if="tabNum ===1" @click.native="send" class="btn btn_bots">立即配送</el-button>
-      </div>
+      
     </div>
   </div>
 
@@ -102,18 +88,6 @@ export default {
     orderDetail: Object,
   },
   methods: {
-    remark() {
-      this.$emit("showRemark");
-    },
-    ignore() {
-      this.$emit("showIgnore");
-    },
-    printer() {
-      this.$emit("showPriter");
-    },
-    send() {
-      this.$emit("showSend");
-    },
     takeOUtType(type) {
       let name = "";
       switch (type) {
@@ -187,6 +161,7 @@ export default {
     display: flex;
     margin-bottom: 5px;
     .title {
+      flex-shrink: 0;
       font-size: 14px;
       font-weight: 400;
       // width: 80px;
@@ -197,6 +172,8 @@ export default {
       font-weight: 400;
       color: #333333;
       line-height: 20px;
+      word-break: break-all;
+      text-align: right;
     }
     .cont2 {
       color: #fc7200;
@@ -209,25 +186,5 @@ export default {
     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

@@ -288,8 +288,56 @@
             <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-track :tabNum="tabNum" :trackOrder="trackOrder" v-if="!orderDetailStutus && needTrack"></order-track>
-          <order-detail @showSend="showSend" @showPriter="showPriter" @showIgnore="ignoreStatus = true" @showRemark="dialogTableVisible = true" :tabNum="tabNum" :orderDetail="orderDetail" v-else></order-detail>
+          <order-track v-show="showTrack" :tabNum="tabNum" :trackOrder="trackOrder" v-if="!orderDetailStutus && needTrack"></order-track>
+          <order-detail v-show="showDetail" :tabNum="tabNum" :orderDetail="orderDetail" v-else></order-detail>
+          <div v-show="showDetail || showTrack">
+            <!-- 新订单 -->
+            <div class="btns" v-if="tabNum === 0">
+              <el-button size='small' @click.native="dialogTableVisible = true" class="btn_bots">发单备注</el-button>
+              <el-button size='small' @click.native="ignoreStatus = true" class="btn_bots">忽略订单</el-button>
+              <el-button size='small' @click.native="showPriter" class="btn_bots">补打发票</el-button>
+              <el-button size='small' @click.native="showSend" class="btn_bots btn">发起配送</el-button>
+            </div>
+            <!-- 预约单 -->
+            <div class="btns" v-if="tabNum === 1">
+              <div class="btn_bot">
+                <el-dropdown>
+                  <span class="el-dropdown-link">更多</span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="showPriter"><span style="color:#FC7200;">补打发票</span></el-dropdown-item>
+                    <el-dropdown-item @click.native="ignoreStatus = true">忽略订单</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+              <el-button size='small' @click.native="dialogTableVisible = true" class="btn_bots">发单备注</el-button>
+              <el-button size='small' @click.native="orderSend" class="btn_bots btn">预约发单</el-button>
+              <el-button size='small' @click.native="send" type="primary" class="btn_bots">立即配送</el-button>
+            </div>
+            <!-- 待接单 -->
+            <div class="btns" v-if="tabNum === 2">
+              <el-button size='small' @click.native="remark" class="btn_bots">取消订单</el-button>
+              <el-button size='small' @click.native="printer" class="btn_bots btn">补打发票</el-button>
+              <el-button size='small' @click.native="showSend" type="primary" class="btn_bots">加小费</el-button>
+            </div>
+            <!-- 取货中 -->
+            <div class="btns" v-if="tabNum === 3">
+              <el-button size='small' @click.native="remark" class="btn_bots">取消订单</el-button>
+              <el-button size='small' @click.native="printer" class="btn_bots btn">补打发票</el-button>
+            </div>
+            <!-- 配送中 -->
+            <div class="btns" v-if="tabNum === 4">
+              <el-button size='small' @click.native="printer" class="btn_bots btn">补打发票</el-button>
+            </div>
+            <!-- 异常单 -->
+            <div class="btns" v-if="tabNum === 5">
+              <el-button size='small' @click.native="showPriter" class="btn_bots">补打发票</el-button>
+              <el-button size='small' @click.native="orderSend" class="btn_bots btn">撤回订单</el-button>
+            </div>
+            <!-- 已取消 -->
+            <div class="btns" v-if="tabNum === 6">
+              <el-button size='small' @click.native="printer" class="btn_bots btn">再来一单</el-button>
+            </div>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -387,10 +435,10 @@ export default {
   data() {
     return {
       addTipTimer: null, // 加小费刷新支付计时器
-      addTipStatus: true, // 加小费弹出层
+      addTipStatus: false, // 加小费弹出层
       reasonIndex: null, // 取消原因索引
-      chooseReason: '', // 选择取消原因
-      cancelReason: '', // 输入取消原因
+      chooseReason: "", // 选择取消原因
+      cancelReason: "", // 输入取消原因
       cancelList: [
         { id: 1, name: "无骑手接单" },
         { id: 2, name: "骑手接单后不取货" },
@@ -410,14 +458,16 @@ export default {
       isLoading: false,
       dialogTableVisible: false,
       ignoreStatus: false, // 忽略订单弹出层
-      remark: '',
-      orderId: '',
+      remark: "",
+      orderId: "",
       item: {},
       radio: "",
       needTrack: false,
       curIdx: 0,
       trackOrder: {},
       orderDetail: {},
+      showDetail: false,
+      showTrack: false,
     };
   },
   props: {
@@ -453,9 +503,7 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
-    addTip(orderId) {
-
-    },
+    addTip(orderId) {},
     changeReason(item) {
       this.reasonIndex = item.id;
       this.chooseReason = item.name;
@@ -749,10 +797,12 @@ export default {
     },
     // 订单详情
     getDetailOrder(orderId) {
+      this.showDetail = false;
       detailOrder({ orderId }).then((res) => {
         console.log("object", res);
         if (res.code === 200) {
           this.orderDetail = res.data;
+          this.showDetail = true;
         } else {
           this.$message({
             message: res.msg,
@@ -763,9 +813,12 @@ export default {
     },
     // 订单跟踪
     getTrackOrder(orderId) {
+      this.showTrack = false;
+      if (tabNum < 2) return;
       trackOrder({ orderId }).then((res) => {
         if (res.code === 200) {
           this.trackOrder = res.data;
+          this.showTrack = true;
         } else {
           this.$message({
             message: res.msg,
@@ -1018,7 +1071,32 @@ export default {
       border-color: #00152a;
     }
   }
-
+  .btns {
+    margin: 10px 15px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .btn {
+      background: #fc7200;
+      border-color: #fc7200;
+      color: #fff !important;
+    }
+    .btn_bots {
+      margin: 0 !important;
+      margin-bottom: 10px !important;
+    }
+    .btn_bot {
+      width: 74px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #888888;
+      margin-bottom: 10px !important;
+      .el-dropdown-link {
+        cursor: pointer;
+      }
+    }
+  }
   .detail_cont {
     width: 100%;
     padding: 16px;

src/components/orderComponents/orderTrack.vue

@@ -89,17 +89,6 @@
           </el-timeline>
         </div>
       </div>
-      <!-- 按钮列表 -->
-      <div class="button-list clearfix">
-        <div class="btn-item add-tip">补打发票</div>
-        <div class="btn-item cancel" style="margin-right: 6px;">取消订单</div>
-      </div>
-      <!-- 待接单按钮组 -->
-      <div class="button-list clearfix" v-if="false">
-        <div class="btn-item add-tip">加小费</div>
-        <div class="btn-item cancel" style="margin-right: 6px;">补打发票</div>
-        <div class="btn-item cancel" style="margin-right: 6px;">取消订单</div>
-      </div>
     </div>
   </div>
 </template>