feat 订单跟踪、订单详情

src/components/orderComponents/orderAMap.vue

@@ -4,7 +4,7 @@
     <div>
       <el-row>
         <el-col :span="8">
-          <el-input v-model="searchKey"/>
+          <el-input v-model="searchKey" />
         </el-col>
         <el-col :span="4">
           <el-button @click.stop="searchMap" type="primary">搜&nbsp;索</el-button>
@@ -20,85 +20,98 @@
 </template>
 
 <script>
-  import qs from 'qs';
-  var map = new AMap.Map('container');
-  export default {
-    data() {
-      return {
-        searchKey: '',
-        dialogTableVisible: false,
-        order: {},
-        markers: [
-          // { id:1, position: [120.629585, 31.269379], icon: '/static/image/map-fa.png' },
-          // { id:2, position: [120.609585, 31.209379], icon: '/static/image/map-shou.png' },
-        ],
-        srcList: [],
-        windows: [],
-        window: '',
-        geocoder: '',
-        defaultCity: '苏州',
-        zoom: 12,
-        center: [ '', ''],
-        address: '',
-        province: '',
-        city: '',
-        district: '',
-        lng: '',
-        lat: '',
-        addArr: {
-          addr: {}
-        },
-      }
-    },
-    created() {},
-    methods: {
-      searchMap() {
-        fetch('https://restapi.amap.com/v3/assistant/inputtips?key=5ae8644771ef9abf9cfb3ea23b1df6ca&keywords=苏州大学&city=0512&offset=20&types=keywords',{
-          methods: 'GET'
-        }).then( res => {
-          return res.json()
-        }).then( result => {
-          console.log(result);
-          fetch(`https://restapi.amap.com/v3/geocode/geo?key=4940f0a9fdc717ab27dd37fa0497c771&address=${ result.tips[0].district }${ result.tips[0].address }${ result.tips[0].name }`,{
-            methods: 'GET'
-          }).then( res1 => {
-            return res1.json()
-          }).then( rp => {
-            console.log(rp, '------------')
-          } )
-        } )
+import qs from "qs";
+var map = new AMap.Map("container");
+export default {
+  data() {
+    return {
+      searchKey: "",
+      dialogTableVisible: false,
+      order: {},
+      markers: [
+        // { id:1, position: [120.629585, 31.269379], icon: '/static/image/map-fa.png' },
+        // { id:2, position: [120.609585, 31.209379], icon: '/static/image/map-shou.png' },
+      ],
+      srcList: [],
+      windows: [],
+      window: "",
+      geocoder: "",
+      defaultCity: "苏州",
+      zoom: 12,
+      center: ["", ""],
+      address: "",
+      province: "",
+      city: "",
+      district: "",
+      lng: "",
+      lat: "",
+      addArr: {
+        addr: {},
       },
-      setDialogStatus(data) {
-        let sendM = {
-          id: 1,
-          position: [data.sendLng, data.sendLat],
-          icon: '/static/image/map-fa.png'
-        }
-        let receiptM = {
-          id: 2,
-          position: [data.receiptLng, data.receiptLat],
-          icon: '/static/image/map-shou.png'
+    };
+  },
+  created() {},
+  methods: {
+    searchMap() {
+      fetch(
+        "https://restapi.amap.com/v3/assistant/inputtips?key=5ae8644771ef9abf9cfb3ea23b1df6ca&keywords=苏州大学&city=0512&offset=20&types=keywords",
+        {
+          methods: "GET",
         }
-        this.center = [ ((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6), ((data.receiptLat * 1 + data.sendLat * 1) / 2).toFixed(6) ];
-        console.log(this.center)
-        this.markers = [ sendM, receiptM ];
-        this.dialogTableVisible = true;
-      }
-    }
-  }
+      )
+        .then((res) => {
+          return res.json();
+        })
+        .then((result) => {
+          console.log(result);
+          fetch(
+            `https://restapi.amap.com/v3/geocode/geo?key=4940f0a9fdc717ab27dd37fa0497c771&address=${result.tips[0].district}${result.tips[0].address}${result.tips[0].name}`,
+            {
+              methods: "GET",
+            }
+          )
+            .then((res1) => {
+              return res1.json();
+            })
+            .then((rp) => {
+              console.log(rp, "------------");
+            });
+        });
+    },
+    setDialogStatus(data) {
+      let sendM = {
+        id: 1,
+        position: [data.sendLng, data.sendLat],
+        icon: "/static/image/map-fa.png",
+      };
+      let receiptM = {
+        id: 2,
+        position: [data.receiptLng, data.receiptLat],
+        icon: "/static/image/map-shou.png",
+      };
+      this.center = [
+        ((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6),
+        ((data.receiptLat * 1 + data.sendLat * 1) / 2).toFixed(6),
+      ];
+      console.log(this.center);
+      this.markers = [sendM, receiptM];
+      this.dialogTableVisible = true;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  /* 图标大小修改 */
-  /deep/ .el-dialog__header {
-    display: none !important;
-  }
-  #container {
-    width: 100%;
-    height: 400px;
-  }
-  /deep/ .amap-container img {
-    width: 35px !important;
-    height: 45px !important;
-  }
+/* 图标大小修改 */
+/deep/ .el-dialog__header {
+  display: none !important;
+}
+#container {
+  width: 100%;
+  height: 400px;
+}
+/deep/ .amap-container img {
+  width: 35px !important;
+  height: 45px !important;
+}
 </style>

src/components/orderComponents/orderDetail.vue

@@ -2,47 +2,56 @@
   <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>
+      <template v-if="orderDetail.detailItems">
+        <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>
-      </div>
-      <div class="detail_ine" v-if="orderDetail.caution&&orderDetail.caution"></div>
-      <div class="info2" v-if="orderDetail.caution">
-        <div class="title">用户备注：</div>
-        <div class="cont">{{orderDetail.caution}}</div>
-      </div>
-      <div class="info2 info3" v-if="orderDetail.takeRemark">
-        <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" v-if="orderDetail.invoiceTitle">
-        <div class="title">发票抬头：</div>
-        <div class="cont">{{orderDetail.invoiceTitle}}</div>
-      </div>
-      <div class="info2 info4" v-if="orderDetail.taxpayerId">
-        <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" v-if="orderDetail.receiptPrivacyPhone">
-        <div class="title">隐私号：</div>
-        <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
-      </div>
-      <div class="info2 info4" v-if="orderDetail.receiptPhone">
-        <div class="title">手机号：</div>
-        <div class="cont">{{orderDetail.receiptPhone}}</div>
-      </div>
+        <div class="detail_ine"></div>
+      </template>
+
+      <template v-if="orderDetail.caution || orderDetail.caution">
+        <div class="info2" v-if="orderDetail.caution">
+          <div class="title">用户备注：</div>
+          <div class="cont">{{orderDetail.caution.length > 60 ? orderDetail.caution.slice(0,60) + '...' : orderDetail.caution}}</div>
+        </div>
+        <div class="info2 info3" v-if="orderDetail.takeRemark">
+          <div class="title">发单备注：</div>
+          <div class="cont">{{orderDetail.takeRemark.length > 60 ? orderDetail.takeRemark.slice(0,60) + '...' : orderDetail.takeRemark}}</div>
+        </div>
+        <div class="detail_ine"></div>
+      </template>
+      <template v-if="orderDetail.invoiceTitle || orderDetail.taxpayerId">
+        <div class="detail_title2">发票信息</div>
+        <div class="info2 info4" v-if="orderDetail.invoiceTitle">
+          <div class="title">发票抬头：</div>
+          <div class="cont">{{orderDetail.invoiceTitle}}</div>
+        </div>
+        <div class="info2 info4" v-if="orderDetail.taxpayerId">
+          <div class="title">税号：</div>
+          <div class="cont">{{orderDetail.taxpayerId}}</div>
+        </div>
+        <div class="detail_ine"></div>
+      </template>
+      <template v-if="orderDetail.receiptContactName">
+        <div class="detail_title2">顾客信息</div>
+        <div class="info2 info4">
+          <div class="title">姓名：</div>
+          <div class="cont">{{orderDetail.receiptContactName}}</div>
+        </div>
+        <div class="info2 info4" v-if="orderDetail.receiptPrivacyPhone">
+          <div class="title">隐私号：</div>
+          <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
+        </div>
+        <div class="info2 info4" v-if="orderDetail.receiptPhone">
+          <div class="title">手机号：</div>
+          <div class="cont">{{orderDetail.receiptPhone}}</div>
+        </div>
+      </template>
       <div class="detail_ine"></div>
       <div class="detail_title2">订单金额</div>
       <div class="info2 info4">
@@ -51,27 +60,27 @@
       </div>
       <div class="detail_ine"></div>
       <div class="detail_title2">订单信息</div>
-      <div class="info2 info4">
+      <div class="info2 info4" v-if="tabNum !== 2">
         <div class="title">送达时间：</div>
         <div class="cont cont2">立即送达</div>
       </div>
-      <div class="info2 info4">
+      <div class="info2 info4" v-if="orderDetail.takeTime">
         <div class="title">发单时间：</div>
         <div class="cont">{{orderDetail.takeTime}}</div>
       </div>
-      <div class="info2 info4">
+      <div class="info2 info4" v-if="orderDetail.createTime">
         <div class="title">创建时间：</div>
         <div class="cont">{{orderDetail.createTime}}</div>
       </div>
-      <div class="info2 info4">
+      <div class="info2 info4" v-if="orderDetail.orderSn">
         <div class="title">订单编号：</div>
         <div class="cont">{{orderDetail.orderSn}}</div>
       </div>
-      <div class="info2 info4">
+      <div class="info2 info4" v-if="orderDetail.outOrderId">
         <div class="title">{{takeOUtType(orderDetail.orderType)}}订单编号：</div>
         <div class="cont">{{orderDetail.outOrderId}}</div>
       </div>
-      
+
     </div>
   </div>
 

src/components/orderComponents/orderList.vue

@@ -238,7 +238,7 @@
               </div>
             </div>
           </div>
-          <!-- 异常单 -->
+          <!-- 取消单 -->
           <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">
@@ -290,13 +290,14 @@
           </div>
           <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>
+              <el-button size='small' @click.native="itemAddRemark(list[curIdx].id, list[curIdx])" class="btn_bots">发单备注</el-button>
+              <el-button size='small' @click.native="iGnoreOrder(list[curIdx].id)" class="btn_bots">忽略订单</el-button>
+              <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" class="btn_bots">补打发票</el-button>
+              <el-button size='small' @click.native="deleteItem(list[curIdx])" class="btn_bots btn">发起配送</el-button>
             </div>
             <!-- 预约单 -->
             <div class="btns" v-if="tabNum === 1">
@@ -304,38 +305,38 @@
                 <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-item @click.native="orderPrinter(list[curIdx].waimaiOrderId)"><span style="color:#FC7200;">补打发票</span></el-dropdown-item>
+                    <el-dropdown-item @click.native="iGnoreOrder(list[curIdx].id)">忽略订单</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>
+              <el-button size='small' @click.native="itemAddRemark(list[curIdx].id, list[curIdx])" class="btn_bots">发单备注</el-button>
+              <el-button size='small' @click.native="settingTime(list[curIdx])" class="btn_bots btn">定时发单</el-button>
+              <el-button size='small' @click.native="deleteItem(list[curIdx])" 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>
+              <el-button size='small' @click.native="cancelOrder(list[curIdx].id)" class="btn_bots">取消订单</el-button>
+              <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" class="btn_bots btn">补打发票</el-button>
+              <el-button size='small' @click.native="addTip(list[curIdx].id)" 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>
+              <el-button size='small' @click.native="cancelOrder(list[curIdx].id)" class="btn_bots">取消订单</el-button>
+              <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" 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>
+              <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" 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>
+              <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" class="btn_bots">补打发票</el-button>
+              <el-button size='small' @click.native="orderBack(list[curIdx].id)" 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>
+              <!-- <el-button size='small' @click.native="orderPrinter(list[curIdx].waimaiOrderId)" class="btn_bots btn">再来一单</el-button> -->
             </div>
           </div>
         </div>
@@ -410,7 +411,7 @@
         <div class="tip-list">
           <div class="tip-item" @click.stop="tipActive = index" :class="tipActive == index ? 'tip-active' : ''" v-for="(item, index) in tipList" :key="index">{{ item }}元</div>
           <div class="tip-item" @click.stop="tipActive = -1" :class="tipActive == -1 ? 'tip-active' : ''">
-            <el-input placeholder="其他金额" v-model="tipAmount"/>
+            <el-input placeholder="其他金额" v-model="tipAmount" />
           </div>
         </div>
         <!-- 支付方式 -->
@@ -419,8 +420,7 @@
             <span>支付方式</span>
           </div>
           <div class="pay-list">
-            <div class="pay-item" @click.stop="payId = item.id" :class="payId == item.id ? 'pay-active' : '' " v-for="(item, index) in payList"
-              :key="index">
+            <div class="pay-item" @click.stop="payId = item.id" :class="payId == item.id ? 'pay-active' : '' " v-for="(item, index) in payList" :key="index">
               <img :src="item.icon" class="pay-icon" />
               <span>{{ item.name }}</span>
             </div>
@@ -460,14 +460,14 @@
 </template>
 
 <script>
-import moment from 'moment';
-import bus from '../../common/bus.js';
-import QRCode from "qrcodejs2"
-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 QRCode from "qrcodejs2";
+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,
@@ -480,8 +480,8 @@ import {
   trackOrder,
   detailOrder,
   tips,
-  getPayResult
-} from '../../api/order.js';
+  getPayResult,
+} from "../../api/order.js";
 export default {
   name: "OrderList",
   data() {
@@ -489,25 +489,26 @@ export default {
       payAmount: 0,
       payModal: false, // 二维码弹出层
       payId: 1,
-      payList: [{
+      payList: [
+        {
           id: 1,
-          name: '支付宝支付',
-          icon: '../../../static/image/alipay.png'
+          name: "支付宝支付",
+          icon: "../../../static/image/alipay.png",
         },
         {
           id: 2,
-          name: '微信支付',
-          icon: '../../../static/image/we-chat.png'
+          name: "微信支付",
+          icon: "../../../static/image/we-chat.png",
         },
         {
           id: 4,
-          name: '余额支付',
-          icon: '../../../static/image/yu-e.png'
+          name: "余额支付",
+          icon: "../../../static/image/yu-e.png",
         },
       ],
       tipActive: 0,
       tipList: [1, 2, 5, 10, 15, 20, 30, 50],
-      tipAmount: '', // 小费金额
+      tipAmount: "", // 小费金额
       addTipTimer: null, // 加小费刷新支付计时器
       addTipStatus: false, // 加小费弹出层
       reasonIndex: null, // 取消原因索引
@@ -560,21 +561,18 @@ export default {
       this.curIdx = 0;
     },
     list(newVal, oldVal) {
-      if (newVal.length) {
-        this.orderId = newVal[0].id;
-        this.getDetailOrder(newVal[0].id);
-        this.getTrackOrder(newVal[0].id);
-      }
+      this.getDetailOrder();
+      this.getTrackOrder();
     },
     addTipStatus(val) {
-      if ( !val ) {
-        clearTimeout( this.addTipTimer );
+      if (!val) {
+        clearTimeout(this.addTipTimer);
         this.addTipTimer = null;
       }
-    }
+    },
   },
   destroyed() {
-    clearTimeout( this.addTipTimer );
+    clearTimeout(this.addTipTimer);
     this.addTipTimer = null;
   },
   components: {
@@ -587,89 +585,90 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
-    getPayInfo( orderSn ) {
+    getPayInfo(orderSn) {
       const _ = this;
       let params = {
         orderSn,
-        payType: this.payId
-      }
+        payType: this.payId,
+      };
       _.addTipTimer = setTimeout(() => {
-        getPayResult( params ).then( res => {
-          console.log(res, '查询支付结果');
-          if ( res.data === 'success' ) {
-            clearTimeout( _.addTipTimer );
+        getPayResult(params).then((res) => {
+          console.log(res, "查询支付结果");
+          if (res.data === "success") {
+            clearTimeout(_.addTipTimer);
             _.payModal = false;
             _.addTipStatus = false;
-            bus.$emit('refreshData')
-          }else {
-            _.getPayInfo( orderSn );
+            bus.$emit("refreshData");
+          } else {
+            _.getPayInfo(orderSn);
           }
-        } )
-      }, 3000)
+        });
+      }, 3000);
     },
     //  生成二维码
     qrcode(link) {
       let that = this;
-      let qrcode = new QRCode('qrcode', {
+      let qrcode = new QRCode("qrcode", {
         width: 260,
         height: 260, // 高度
         text: link, // 二维码内容
         // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
         // background: '#f0f',   // 背景色
         // foreground: '#ff0'    // 前景色
-      })
+      });
     },
     richMoney() {
-    	let reg = /(^[1-9]\d*$)/g;
-    	if ( this.tipActive == -1 ) {
-    		if ( !reg.test(this.tipAmount * 1) ) {
-    			return this.$message({
-    				message: '请选择或输入正确的整数金额',
-    				type: 'error'
-    			})
-    		}
-    	}
-      var idObject = document.getElementById('qrcode');
-       if (idObject != null) {
-        idObject.innerHTML = '';
-       }
+      let reg = /(^[1-9]\d*$)/g;
+      if (this.tipActive == -1) {
+        if (!reg.test(this.tipAmount * 1)) {
+          return this.$message({
+            message: "请选择或输入正确的整数金额",
+            type: "error",
+          });
+        }
+      }
+      var idObject = document.getElementById("qrcode");
+      if (idObject != null) {
+        idObject.innerHTML = "";
+      }
       let params = {
         orderId: this.orderId,
-        tipAmount: this.tipActive == -1 ? this.tipAmount : this.tipList[this.tipActive],
+        tipAmount:
+          this.tipActive == -1 ? this.tipAmount : this.tipList[this.tipActive],
         paymentType: this.payId,
-        createType: 1
-      }
-      tips( params ).then( res => {
-        if ( res.code == 200 ) {
-          if ( this.payId == 4 ) {
+        createType: 1,
+      };
+      tips(params).then((res) => {
+        if (res.code == 200) {
+          if (this.payId == 4) {
             // 余额支付
             this.$message({
-              message: '小费添加成功',
-              type: 'success'
-            })
-            bus.$emit('refreshData');
+              message: "小费添加成功",
+              type: "success",
+            });
+            bus.$emit("refreshData");
             this.addTipStatus = false;
-            this.tipAmount = '';
+            this.tipAmount = "";
             this.payModal = false;
-            clearTimeout( this.addTipTimer );
+            clearTimeout(this.addTipTimer);
             this.addTipTimer = null;
-          }else if ( this.payId == 1 || this.payId == 2 ) {
+          } else if (this.payId == 1 || this.payId == 2) {
             // 支付宝、微信支付
             this.payAmount = res.data.amount || 0;
             this.orderSn = res.data.orderSn;
             this.payModal = true;
             this.$nextTick(() => {
               this.qrcode(res.data.data);
-            })
-            this.getPayInfo(res.data.orderSn)
+            });
+            this.getPayInfo(res.data.orderSn);
           }
-        }else {
+        } else {
           this.$message({
             message: res.msg,
-            type: 'error'
-          })
+            type: "error",
+          });
         }
-      } )
+      });
     },
     addTip(orderId) {
       this.orderId = orderId;
@@ -782,9 +781,8 @@ export default {
     },
     chooseOrder(v, index) {
       this.curIdx = index;
-      this.orderId = v.id;
-      this.getDetailOrder(v.id);
-      this.getTrackOrder(v.id);
+      this.getDetailOrder();
+      this.getTrackOrder();
     },
     changeRadio(i) {
       this.radio = i;
@@ -897,14 +895,6 @@ export default {
         }
       });
     },
-    // 订单详情补打发票
-    showPriter() {
-      this.orderPrinter(this.list[this.curIdx].waimaiId);
-    },
-    // 订单详情发起配送
-    showSend() {
-      this.getValuation(this.list[this.curIdx]);
-    },
     // 计价
     getValuation(order) {
       let requestData = {
@@ -967,10 +957,14 @@ export default {
       });
     },
     // 订单详情
-    getDetailOrder(orderId) {
+    getDetailOrder() {
       this.showDetail = false;
-      detailOrder({ orderId }).then((res) => {
-        console.log("object", res);
+      if (this.list.length) {
+        this.orderId = this.list[this.curIdx].id;
+      } else {
+        return;
+      }
+      detailOrder({ orderId: this.orderId }).then((res) => {
         if (res.code === 200) {
           this.orderDetail = res.data;
           this.showDetail = true;
@@ -983,10 +977,15 @@ export default {
       });
     },
     // 订单跟踪
-    getTrackOrder(orderId) {
+    getTrackOrder() {
       this.showTrack = false;
-      if (tabNum < 2) return;
-      trackOrder({ orderId }).then((res) => {
+      if (this.list.length) {
+        this.orderId = this.list[this.curIdx].id;
+      } else {
+        return;
+      }
+      if (this.tabNum < 2) return;
+      trackOrder({ orderId: this.orderId }).then((res) => {
         if (res.code === 200) {
           this.trackOrder = res.data;
           this.showTrack = true;
@@ -1004,202 +1003,202 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped="scoped">
-  .pay-dialog {
-    /deep/ .el-dialog__header {
-      padding: 0;
-    }
-
-    /deep/ .el-dialog__body {
-      padding: 0px !important;
-    }
+.pay-dialog {
+  /deep/ .el-dialog__header {
+    padding: 0;
   }
-  .pay-modal {
-    // border-radius: 16px;
-    overflow: hidden;
 
-    .pay-top {
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      font-size: 22px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #FFFFFF;
-      background: url(../../../static/image/pay-bg.png) no-repeat;
-      background-size: 100% 100%;
-    }
+  /deep/ .el-dialog__body {
+    padding: 0px !important;
   }
+}
+.pay-modal {
+  // border-radius: 16px;
+  overflow: hidden;
 
-  .code-content {
-    width: 640px;
-    margin: 40px auto 0;
-    padding-bottom: 100px;
-    box-sizing: border-box;
+  .pay-top {
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+    background: url(../../../static/image/pay-bg.png) no-repeat;
+    background-size: 100% 100%;
+  }
+}
 
-    .code-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 14px 20px;
+.code-content {
+  width: 640px;
+  margin: 40px auto 0;
+  padding-bottom: 100px;
+  box-sizing: border-box;
 
-      .code-left {
-        .l-title {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #0D1E40;
-        }
+  .code-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 20px;
 
-        .l-price {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: 400;
-          color: #9EA7B7;
-        }
+    .code-left {
+      .l-title {
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: bold;
+        color: #0d1e40;
       }
 
-      .code-right {
-        font-size: 24px;
+      .l-price {
+        font-size: 14px;
         font-family: PingFang SC;
-        font-weight: 600;
-        color: #F74141;
+        font-weight: 400;
+        color: #9ea7b7;
       }
     }
 
-    .code-bottom {
-      text-align: center;
-      padding-top: 30px;
+    .code-right {
+      font-size: 24px;
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #f74141;
+    }
+  }
 
-      .code-img {
-        width: 260px;
-        height: 260px;
-        margin: 0 auto;
-      }
+  .code-bottom {
+    text-align: center;
+    padding-top: 30px;
 
-      .des {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #0D1E40;
-        margin: 10px 0 20px 0;
-      }
+    .code-img {
+      width: 260px;
+      height: 260px;
+      margin: 0 auto;
+    }
 
-      .guo-qi {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #9EA7B7;
+    .des {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #0d1e40;
+      margin: 10px 0 20px 0;
+    }
 
-        span {
-          color: #175199;
-          cursor: pointer;
-        }
+    .guo-qi {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #9ea7b7;
+
+      span {
+        color: #175199;
+        cursor: pointer;
       }
     }
   }
-  .choose-self {
-    padding-top: 25px;
-    border-bottom: 1px solid #eee;
+}
+.choose-self {
+  padding-top: 25px;
+  border-bottom: 1px solid #eee;
 
-    .self-top {
+  .self-top {
+    display: flex;
+    align-items: center;
+    margin-bottom: 11px;
+
+    .choose-self-icon {
+      width: 4px;
+      height: 15px;
+      margin-right: 10px;
+    }
+
+    span {
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #92959b;
+    }
+  }
+  .pay-list {
+    display: flex;
+    align-items: center;
+    padding-top: 10px;
+
+    .pay-item {
+      flex: 1;
       display: flex;
+      justify-content: center;
+      text-align: center;
       align-items: center;
-      margin-bottom: 11px;
+      height: 51px;
+      border: 1px solid #eee;
+      border-radius: 8px;
+      cursor: pointer;
+
+      &.pay-active {
+        border-color: #fc7200;
+      }
 
-      .choose-self-icon {
-        width: 4px;
-        height: 15px;
-        margin-right: 10px;
+      &:nth-child(2) {
+        margin: 0 13px;
       }
 
       span {
         font-size: 14px;
         font-family: PingFang SC;
-        font-weight: 400;
-        color: #92959B;
+        font-weight: bold;
+        color: #222222;
       }
-    }
-    .pay-list {
-      display: flex;
-      align-items: center;
-      padding-top: 10px;
-
-      .pay-item {
-        flex: 1;
-        display: flex;
-        justify-content: center;
-        text-align: center;
-        align-items: center;
-        height: 51px;
-        border: 1px solid #eee;
-        border-radius: 8px;
-        cursor: pointer;
 
-        &.pay-active {
-          border-color: #FC7200;
-        }
-
-        &:nth-child(2) {
-          margin: 0 13px;
-        }
-
-        span {
-          font-size: 14px;
-          font-family: PingFang SC;
-          font-weight: bold;
-          color: #222222;
-        }
-
-        .pay-icon {
-          margin-right: 6px;
-        }
+      .pay-icon {
+        margin-right: 6px;
+      }
 
-        .pay-icon:nth-child(1) {
-          width: 25px;
-          height: 24px;
-        }
+      .pay-icon:nth-child(1) {
+        width: 25px;
+        height: 24px;
       }
     }
   }
-  .tip-title {
-    font-size: 14px;
+}
+.tip-title {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #92959b;
+  padding-bottom: 13px;
+}
+.tip-list {
+  display: flex;
+  flex-wrap: wrap;
+  .tip-item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    width: 93px;
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    font-size: 13px;
     font-family: PingFang SC;
     font-weight: 400;
-    color: #92959B;
-    padding-bottom: 13px;
-  }
-  .tip-list {
-    display: flex;
-    flex-wrap: wrap;
-    .tip-item {
-      margin-right: 10px;
-      margin-bottom: 10px;
-      width: 93px;
-      height: 38px;
-      line-height: 38px;
-      text-align: center;
+    color: #222222;
+    box-sizing: border-box;
+    background: #f4f4f4;
+    cursor: pointer;
+    border-radius: 2px;
+    border: 1px solid transparent;
+    /deep/ .el-input__inner {
+      border: none;
+      height: 32px !important;
+      background-color: #f4f4f4;
       font-size: 13px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #222222;
-      box-sizing: border-box;
-      background: #F4F4F4;
-      cursor: pointer;
-      border-radius: 2px;
-      border: 1px solid transparent;
-      /deep/ .el-input__inner {
-        border: none;
-        height: 32px !important;
-        background-color: #f4f4f4;
-        font-size: 13px;
-        padding: 0 15px !important;
-      }
-    }
-    .tip-active {
-      border-color: #FC7200;
-      color: #FC7200;
+      padding: 0 15px !important;
     }
   }
+  .tip-active {
+    border-color: #fc7200;
+    color: #fc7200;
+  }
+}
 .text-area {
   /deep/ .el-textarea__inner {
     background-color: #f2f2f2;
@@ -1395,6 +1394,7 @@ export default {
     height: 80px;
   }
   .address span {
+    cursor: pointer;
     font-size: 12px;
     color: #b1b1b1;
   }

src/components/orderComponents/orderTrack.vue

@@ -11,7 +11,7 @@
         <span v-if="tabNum === 4" class="top-tlt-l">{{trackOrder.estimateArriveTime}}送达</span>
       </div>
       <!-- 配送信息 ( 待接单无配送信息 ) -->
-      <div class="send-info">
+      <div class="send-info" v-if="trackOrder.deliveryName">
         <div class="send-tlt">配送信息</div>
         <div class="label">
           <div class="label-tlt">接单平台：</div>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <!-- 发单信息 -->
-      <div class="send-info" style="margin-top: 30px;padding-bottom: 10px;border-bottom: 1px dashed #999;">
+      <div class="send-info">
         <div class="send-tlt">发单信息</div>
         <div class="label">
           <div class="label-tlt">下单金额：</div>
@@ -194,6 +194,9 @@ export default {
       }
     }
     .send-info {
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+      border-bottom: 2px dotted #f0f0f0;
       .send-tlt {
         font-size: 12px;
         font-weight: bold;
@@ -248,7 +251,6 @@ export default {
         }
       }
       .process {
-        padding-top: 30px;
         .p-item {
           display: flex;
           padding-bottom: 30px;