feat 订单详情

src/components/orderComponents/orderDetail.vue

@@ -76,13 +76,15 @@
           <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-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' class="btn_bots">补打发票</el-button>
-        <el-button size='small' class="btn btn_bots">发起配送</el-button>
+        <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>
@@ -90,24 +92,28 @@
 </template>
     
 <script>
-import { detailOrder } from "../../api/order.js";
 export default {
   name: "OrderDetail",
   data() {
-    return {
-      orderDetail: {},
-    };
+    return {};
   },
   props: {
     tabNum: Number,
-    orderInfo: Object,
-  },
-  watch: {
-    orderInfo() {
-      this.getDetailOrder();
-    },
+    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) {
@@ -127,20 +133,6 @@ export default {
       }
       return name;
     },
-    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>

src/components/orderComponents/orderList.vue

@@ -288,8 +288,8 @@
             <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" :orderInfo="orderInfo" v-if="!orderDetailStutus && needTrack"></order-track>
-          <order-detail :tabNum="tabNum" :orderInfo="orderInfo" v-else></order-detail>
+          <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>
         </div>
       </el-col>
     </el-row>
@@ -359,13 +359,13 @@
 </template>
 
 <script>
-import moment from 'moment';
-import bus from '../../common/bus.js';
-import orderMap from './orderAMap.vue';
-import OrderDetail from './orderDetail.vue';
-import orderTrack from './orderTrack.vue';
-import { mapState } from 'vuex';
-import sendOrderPopup from './sendOrderPopup.vue';
+import moment from "moment";
+import bus from "../../common/bus.js";
+import orderMap from "./orderAMap.vue";
+import OrderDetail from "./orderDetail.vue";
+import orderTrack from "./orderTrack.vue";
+import { mapState } from "vuex";
+import sendOrderPopup from "./sendOrderPopup.vue";
 import {
   sendValuation,
   waimaiprinter,
@@ -375,23 +375,25 @@ import {
   setDeliveryTime,
   cancelTimingPublish,
   cancelOrder,
-} from '../../api/order.js';
+  trackOrder,
+  detailOrder,
+} from "../../api/order.js";
 export default {
-  name: 'OrderList',
+  name: "OrderList",
   data() {
     return {
       reasonIndex: null,
-      chooseReason: '',
-      cancelReason: '',
+      chooseReason: "",
+      cancelReason: "",
       cancelList: [
-        { id: 1, name: '无骑手接单' },
-        { id: 2, name: '骑手接单后不取货' },
-        { id: 3, name: '骑手电车装不下' },
-        { id: 4, name: '计划有变，无需配送' },
-        { id: 5, name: '骑手服务态度恶劣' },
-        { id: 6, name: '骑手要求取消订单' },
-        { id: 7, name: '信息填写错误' },
-        { id: 8, name: '其他原因' },
+        { id: 1, name: "无骑手接单" },
+        { id: 2, name: "骑手接单后不取货" },
+        { id: 3, name: "骑手电车装不下" },
+        { id: 4, name: "计划有变，无需配送" },
+        { id: 5, name: "骑手服务态度恶劣" },
+        { id: 6, name: "骑手要求取消订单" },
+        { id: 7, name: "信息填写错误" },
+        { id: 8, name: "其他原因" },
       ],
       timeList: [1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       timeValue: 1,
@@ -402,13 +404,14 @@ export default {
       isLoading: false,
       dialogTableVisible: false,
       ignoreStatus: false,
-      remark: '',
-      orderId: '',
+      remark: "",
+      orderId: "",
       item: {},
-      radio: '',
+      radio: "",
       needTrack: false,
       curIdx: 0,
-      orderInfo: {},
+      trackOrder: {},
+      orderDetail: {},
     };
   },
   props: {
@@ -419,14 +422,18 @@ export default {
     tabNum(newVal, oldVal) {
       if (newVal === 0 || newVal === 1) {
         this.needTrack = false;
+        this.orderDetailStutus = 0;
       } else {
         this.needTrack = true;
+        this.orderDetailStutus = 0;
       }
       this.curIdx = 0;
     },
     list(newVal, oldVal) {
       if (newVal.length) {
-        this.orderInfo = newVal[0];
+        this.orderId = newVal[0].id;
+        this.getDetailOrder(newVal[0].id);
+        this.getTrackOrder(newVal[0].id);
       }
     },
   },
@@ -437,7 +444,7 @@ export default {
     orderTrack,
   },
   computed: {
-    ...mapState(['userInfo']),
+    ...mapState(["userInfo"]),
   },
   methods: {
     changeReason(item) {
@@ -448,35 +455,36 @@ export default {
     commitCancelReason() {
       if (!this.reasonIndex) {
         return this.$message({
-          message: '请选择取消原因',
-          type: 'error',
+          message: "请选择取消原因",
+          type: "error",
         });
       }
       if (this.reasonIndex == 8 && !this.cancelReason.trim()) {
         return this.$message({
-          message: '请填写其他取消原因',
-          type: 'error',
+          message: "请填写其他取消原因",
+          type: "error",
         });
       }
       cancelOrder({
         orderId: this.orderId,
-        cancelReason: this.reasonIndex != 8 ? this.chooseReason : this.cancelReason,
+        cancelReason:
+          this.reasonIndex != 8 ? this.chooseReason : this.cancelReason,
       }).then((res) => {
         this.cancelStatus = false;
         if (res.code == 200) {
           this.$message({
-            message: '取消订单成功',
-            type: 'success',
+            message: "取消订单成功",
+            type: "success",
           });
-          this.orderId = '';
-          this.cancelReason = '';
-          this.chooseReason = '';
+          this.orderId = "";
+          this.cancelReason = "";
+          this.chooseReason = "";
           this.reasonIndex = null;
-          bus.$emit('refreshData');
+          bus.$emit("refreshData");
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -486,15 +494,15 @@ export default {
         this.settingTimeStatus = false;
         if (res.code == 200) {
           this.$message({
-            message: '取消定时发单成功',
-            type: 'success',
+            message: "取消定时发单成功",
+            type: "success",
           });
           this.item = {};
-          bus.$emit('refreshData');
+          bus.$emit("refreshData");
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -502,28 +510,33 @@ export default {
     commitTimeValue() {
       let timestamp = new Date().valueOf();
       let exT = moment(this.item.exceptTime).valueOf();
-      let nowTime = moment(exT).subtract(this.timeValue, 'hours').format('YYYY-MM-DD HH:mm:ss'); //当前时间的前1小时时间
+      let nowTime = moment(exT)
+        .subtract(this.timeValue, "hours")
+        .format("YYYY-MM-DD HH:mm:ss"); //当前时间的前1小时时间
       let t1 = moment(nowTime).valueOf(); // 时间戳
-      console.log(nowTime, this.item, '-------------');
+      console.log(nowTime, this.item, "-------------");
       if (t1 - timestamp < 0) {
         return this.$message({
           message: `设置发单时间超出当前时间`,
-          type: 'error',
+          type: "error",
         });
       }
-      setDeliveryTime({ orderId: this.item.id, delayTime: this.timeValue }).then((res) => {
+      setDeliveryTime({
+        orderId: this.item.id,
+        delayTime: this.timeValue,
+      }).then((res) => {
         this.settingTimeStatus = false;
         if (res.code == 200) {
           this.$message({
-            message: '设置定时发单成功',
-            type: 'success',
+            message: "设置定时发单成功",
+            type: "success",
           });
           this.item = {};
-          bus.$emit('refreshData');
+          bus.$emit("refreshData");
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -541,7 +554,9 @@ export default {
     },
     chooseOrder(v, index) {
       this.curIdx = index;
-      this.orderInfo = v;
+      this.orderId = v.id;
+      this.getDetailOrder(v.id);
+      this.getTrackOrder(v.id);
     },
     changeRadio(i) {
       this.radio = i;
@@ -554,8 +569,8 @@ export default {
     commitIGnore(orderId) {
       if (!this.radio) {
         return this.$message({
-          message: '请选择忽略原因',
-          type: 'error',
+          message: "请选择忽略原因",
+          type: "error",
         });
       }
       let params = {
@@ -566,14 +581,14 @@ export default {
         this.ignoreStatus = false;
         if (res.code == 200) {
           this.$message({
-            message: '操作成功',
-            type: 'success',
+            message: "操作成功",
+            type: "success",
           });
-          bus.$emit('refreshData');
+          bus.$emit("refreshData");
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -582,7 +597,7 @@ export default {
       this.dialogTableVisible = true;
       this.orderId = orderId;
       this.item = item;
-      this.remark = item.takeRemark || '';
+      this.remark = item.takeRemark || "";
     },
     // 一键发单备注
     commitRemark(orderId, item) {
@@ -594,21 +609,21 @@ export default {
         this.dialogTableVisible = false;
         if (res.code == 200) {
           this.$message({
-            message: '添加备注成功',
-            type: 'success',
+            message: "添加备注成功",
+            type: "success",
           });
           this.$set(
             this.list.find((v) => {
               return item.id == v.id;
             }),
-            'takeRemark',
-            this.remark,
+            "takeRemark",
+            this.remark
           );
           this.$forceUpdate();
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -625,14 +640,14 @@ export default {
       rollOrder({ orderId }).then((res) => {
         if (res.code == 200) {
           this.$message({
-            message: '操作成功',
-            type: 'success',
+            message: "操作成功",
+            type: "success",
           });
-          bus.$emit('refreshData');
+          bus.$emit("refreshData");
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
@@ -643,17 +658,25 @@ export default {
       waimaiprinter({ waimaiId }).then((res) => {
         if (res.code == 200) {
           this.$message({
-            message: '操作成功',
-            type: 'success',
+            message: "操作成功",
+            type: "success",
           });
         } else {
           this.$message({
             message: res.msg,
-            type: 'error',
+            type: "error",
           });
         }
       });
     },
+    // 订单详情补打发票
+    showPriter() {
+      this.orderPrinter(this.list[this.curIdx].waimaiId);
+    },
+    // 订单详情发起配送
+    showSend() {
+      this.getValuation(this.list[this.curIdx]);
+    },
     // 计价
     getValuation(order) {
       let requestData = {
@@ -684,7 +707,7 @@ export default {
           phone: order.receiptPhone,
           extension: order.receiptExtension,
           contact: order.receiptContactName,
-          street: order.receiptStreet || '',
+          street: order.receiptStreet || "",
           address: order.receiptAddress,
           cityCode: order.receiptCityCode,
         },
@@ -694,12 +717,12 @@ export default {
         type: this.userInfo.memberType == 1 ? 1 : 2,
         isWaimai: order.waimaiId ? true : false,
         waimaiOrderId: order.waimaiOrderId,
-        takeRemark: order.takeRemark || '',
+        takeRemark: order.takeRemark || "",
         orderId: order.id,
       };
       this.isLoading = true;
       sendValuation(requestData).then((res) => {
-        console.log(res, '发起配送计算');
+        console.log(res, "发起配送计算");
         this.isLoading = false;
         if (res.code == 200) {
           res.data.optionals.forEach((item) => {
@@ -715,6 +738,33 @@ export default {
         }
       });
     },
+    // 订单详情
+    getDetailOrder(orderId) {
+      detailOrder({ orderId }).then((res) => {
+        console.log("object", res);
+        if (res.code === 200) {
+          this.orderDetail = res.data;
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
+    // 订单跟踪
+    getTrackOrder(orderId) {
+      trackOrder({ orderId }).then((res) => {
+        if (res.code === 200) {
+          this.trackOrder = res.data;
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
   },
 };
 </script>

src/components/orderComponents/orderTrack.vue

@@ -105,22 +105,14 @@
 </template>
 
 <script>
-import { trackOrder } from "../../api/order.js";
 export default {
   name: "orderTrack",
   props: {
-    orderInfo: Object,
+    trackOrder: Object,
     tabNum: Number,
   },
   data() {
-    return {
-      trackOrder: {},
-    };
-  },
-  watch: {
-    orderInfo() {
-      this.getTrackOrder();
-    },
+    return {};
   },
   methods: {
     orderStatus(status) {
@@ -182,7 +174,7 @@ export default {
 .order-detail {
   width: 100%;
   box-sizing: border-box;
-  padding: 0 18px;
+  padding: 16px;
   .picking-up {
     .top {
       display: flex;