feat 5秒获取一次订单打印，每次打印一笔

src/App.vue

@@ -5,13 +5,17 @@
     <iframe id="iframeDom" allow="autoplay" style="display:none" :src="src" sandbox=""></iframe>
     <audio class="audio" ref="audio" :src="url" controlsList="nodownload" controls autoplay hidden>
     </audio>
-    
+    <!-- usb自动打印 -->
+    <usb-auto-print @printOver="printOver" :printNum="printNum" :printData="printData"></usb-auto-print>
   </div>
 </template>
 
 <script>
 import { getSoundMsg } from "./api/setting.js";
+import {   getPrintOrderInfos } from "./api/order.js";
 import bus from "./common/bus.js";
+import UsbAutoPrint from "./common/UsbAutoPrint";
+
 export default {
   name: "App",
   data() {
@@ -31,21 +35,33 @@ export default {
       src: "https://pc.liebaoai.cn/audio/alone.mp3",
       timer: null,
       openMsg: false,
+      printNum: 0,
+      printData: {},
+      printList: [],
     };
   },
+  components: {
+    UsbAutoPrint,
+  },
   created() {},
   mounted() {
+    // 进来准备关闭新订单提醒声音了
     bus.$on("closeGetSoundMsg", () => {
       console.log("进来准备关闭新订单提醒声音了");
       clearInterval(this.timer);
       this.timer = null;
     });
+    // 进来准备开启新订单提醒声音了
     bus.$on("openGetSoundMsg", () => {
       console.log("进来准备开启新订单提醒声音了");
       this.timer = setInterval(() => {
         this.getSoundMsg();
       }, 5000);
     });
+    bus.$on("startUsbPrint", (e) => {
+      console.log("进来准备开始USB打印");
+      this.usbPrint(e);
+    });
     // 诱导用户触发点击动作，否则页面刷新后不会自动播放音频
     let userInfo = localStorage.getItem("userInfo");
     if (userInfo) {
@@ -63,12 +79,49 @@ export default {
   },
   destroyed() {},
   methods: {
-    
+    printOver(isRemove) {
+      // 是否需要去除已打印的对象
+      if (isRemove) {
+        this.printList = this.printList.slice(1);
+        if (!this.printList.length) {
+          return;
+        }
+      }
+      this.printData = this.printList[0];
+      this.printNum += 1;
+    },
+    usbPrint(orderId, waimaiOrderId) {
+      // usb自动打印新订单、预约单
+      getPrintOrderInfos({ orderId, waimaiOrderId }).then((res) => {
+        console.log("返回内容：", res);
+        if (res.code === 200 && res.data.length) {
+          let len = this.printList.length;
+          res.data = res.data.map((v) => {
+            if (v.exceptTime) {
+              v.timeTxt = "期望" + v.exceptTime;
+            } else {
+              v.exceptTime = "立即送达";
+            }
+            return v;
+          });
+          this.printList = this.printList.concat(res.data);
+          if (!len) {
+            this.printOver(false);
+          }
+        }
+      });
+    },
     getSoundMsg() {
       getSoundMsg().then((res) => {
         if (res.code === 200) {
+          console.log("提示音:", res.data);
           if (res.data) {
-            let name = res.data.slice(0, res.data.indexOf("."));
+            let data = res.data;
+            let name = data.sound.slice(0, data.sound.indexOf("."));
+            // 打印新订单、取消单
+            if (name === "new-order" || name.includes("cancel")) {
+              this.usbPrint(data.orderId, data.waimaiOrderId);
+            }
             let url = this.audioList.filter((v) => {
               return v.includes(name);
             })[0];

src/api/tool.js

@@ -106,8 +106,8 @@ export default {
     //     Math.ceil(disparityTime)}:30`;
     // }
     var date = new Date(oldTimes1)
-    let newDate = date-disparityTime*60*60*1000
-    let showDate = this.getFormatDate(newDate,'MM-dd hh:mm:ss')
+    let newDate = date - disparityTime * 60 * 60 * 1000
+    let showDate = this.getFormatDate(newDate, 'MM-dd hh:mm:ss')
     return showDate
   },
   timeago(hisTime) {

src/common/UsbAutoPrint.vue

@@ -2,31 +2,31 @@
   <div class="print">
     <!-- <div @click="pringPdf">打印测试</div> -->
     <div id="form1">
-      <div style="font-size: 24px;font-weight: bold;text-align: center;">#{{printData.daySeq}}{{printData.orderSource}}</div>
-      <!-- <div style="font-size: 18px;text-align: center;margin:10px 0;">{{printData.shopName}}</div>
-      <div style="font-size: 18px;font-weight: bold;">期望09月15日 18:45送达</div>
+      <div style="font-size: 22px;font-weight: bold;text-align: center;">#{{printInfo.daySeq}}{{printInfo.orderSource}}</div>
+      <div style="font-size: 18px;text-align: center;margin:10px 0;">{{printInfo.shopName}}</div>
+      <div style="font-size: 18px;font-weight: bold;text-align: center;">{{printInfo.deliveryTime}}</div>
       <div>------------------------------------</div>
-      <div style="font-size: 13px;margin-bottom:5px;">下单时间：{{printData.createTime}}</div>
-      <div style="font-size: 13px;">订单编号：{{printData.outOrderId}}</div>
+      <div style="font-size: 13px;margin-bottom:5px;">下单时间：{{printInfo.createTime}}</div>
+      <div style="font-size: 13px;">订单编号：{{printInfo.outOrderId}}</div>
       <div>----------------商品--------------</div>
-      <div style="font-size: 20px; display: flex;flex-wrap:wrap;justify-content:space-between;" v-for="(v,i) in printData.orderGoodsDtoList" :key="i">
+      <div style="font-size: 18px; display: flex;flex-wrap:wrap;justify-content:space-between;" v-for="(v,i) in printInfo.orderGoodsDtoList" :key="i">
         <div>{{v.foodName}}</div>
         <div style="width:100%;text-align:right"><span style="margin-right:20px;">x{{v.quantity}}</span><span>{{v.price}}</span></div>
       </div>
-      <div v-if="printData.taxpayerId || printData.invoiceTitle" style="margin-top: 5px;">----------------发票--------------</div>
-      <div v-if="printData.invoiceTitle" style="font-size: 13px;">抬头: {{printData.invoiceTitle}}</div>
-      <div v-if="printData.taxpayerId" style="font-size: 13px;">税号: {{printData.taxpayerId}}</div>
+      <div v-if="printInfo.taxpayerId || printInfo.invoiceTitle" style="margin-top: 5px;">----------------发票--------------</div>
+      <div v-if="printInfo.invoiceTitle" style="font-size: 13px;">抬头: {{printInfo.invoiceTitle}}</div>
+      <div v-if="printInfo.taxpayerId" style="font-size: 13px;">税号: {{printInfo.taxpayerId}}</div>
       <div>------------------------------------</div>
-      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>配送费:</span><span>{{Number(printData.deliverFee)}}元</span></div>
+      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>配送费:</span><span>{{Number(printInfo.deliverFee)}}元</span></div>
       <div>------------------------------------</div>
-      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>原价:</span><span>{{printData.originalPrice}}元</span></div>
+      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>原价:</span><span>{{printInfo.originalPrice}}元</span></div>
       <div>------------------------------------</div>
-      <div style="font-size: 18px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>{{printData.totalPrice}}元</span></div>
+      <div style="font-size: 20px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>{{printInfo.totalPrice}}元</span></div>
       <div>------------------------------------</div>
-      <div style="font-size: 18px;font-weight: bold;">地址: {{printData.recipientAddress}}</div>
-      <div style="font-size: 13px;">{{printData.recipientName}}</div>
-      <div style="font-size: 14px;">{{printData.recipientPhone}}</div> -->
-      <div>----------------#{{printData.daySeq}}完--------------</div>
+      <div style="font-size: 20px;font-weight: bold;">地址: {{printInfo.recipientAddress}}</div>
+      <div style="font-size: 13px;">{{printInfo.recipientName}}</div>
+      <div style="font-size: 14px;">{{printInfo.recipientPhone}}</div>
+      <div>----------------#{{printInfo.daySeq}}完--------------</div>
     </div>
   </div>
 </template>
@@ -37,29 +37,52 @@ export default {
   name: "UsbAutoPrint",
   props: { printNum: Number, printData: Object },
   data() {
-    return {};
+    return {
+      printInfo: {},
+      orderType: 1, // 1是新订单2是取消单
+      num: 1,
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    printNum: {
+      handler(newVal, oldVal) {
+        console.log(newVal, this.printData);
+        if (JSON.stringify(this.printData) !== "{}") {
+          this.printInfo = this.printData;
+          this.pringPdf();
+        }
+      },
+    },
+  },
 
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    console.log("需要打印的内容：", this.content);
-  },
+  created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (JSON.stringify(this.printData) !== "{}") {
-      this.$nextTick(() => {
-        this.pringPdf();
-      });
-    }
-  },
+  mounted() {},
   // 方法集合
   methods: {
     pringPdf() {
-      this.CreateOneFormPage();
+      let len = this.printInfo.orderSource.length;
+      if (this.num === 1) {
+        this.printInfo.orderSource = this.printInfo.orderSource + "(顾客联)";
+      }
+      if (this.num === 2) {
+        this.printInfo.orderSource =
+          this.printInfo.orderSource.slice(0, len - 5) + "(商家联)";
+      }
+      if (this.num === 3) {
+        this.printInfo.orderSource =
+          this.printInfo.orderSource.slice(0, len - 5) + "(厨房联)";
+      }
+      console.log("打印:", this.num, this.printInfo.orderSource);
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.CreateOneFormPage();
+        }, 500);
+      });
     },
     CreateOneFormPage() {
       LODOP = getLodop();
@@ -79,7 +102,22 @@ export default {
       );
       LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
       LODOP.PRINT();
-      this.$emit("printOver", this.printNum);
+      // 新订单未打印完三联，继续打印
+      if (this.orderType === 1 && this.num < 3) {
+        console.log("num", this.num);
+        this.num += 1;
+        this.pringPdf();
+        return;
+      }
+      // 新订单第三联打完，出去打印下一单
+      if (this.orderType === 1 && this.num === 3) {
+        this.num = 1;
+        this.$emit("printOver", true);
+      }
+      // 取消单打印
+      if (this.orderType === 2) {
+        this.$emit("printOver", true);
+      }
       // LODOP.PRINT_DESIGN();
       // LODOP.PREVIEW();
     },

src/components/Home.vue

@@ -55,8 +55,6 @@
         <div class="no-data">暂无订单数据</div>
       </el-col>
     </el-row>
-    <!-- usb自动打印 -->
-    <usb-auto-print @printOver="printOver" :printNum="printNum" :printData="printData"></usb-auto-print>
   </div>
 </template>
 
@@ -64,13 +62,10 @@
 import bus from "../common/bus.js";
 import sendOrderPopup from "./orderComponents/sendOrderPopup.vue";
 import OrderList from "./orderComponents/orderList.vue";
-import UsbAutoPrint from "../common/UsbAutoPrint";
-
 import {
   getOrderList,
   getOrderMarker,
   getRefreshOrder,
-  getPrintOrderInfos,
 } from "../api/order.js";
 import { getShopList } from "../api/shop";
 export default {
@@ -139,15 +134,11 @@ export default {
       timer: null,
       timer2: null,
       shopList: [],
-      printNum: 0,
-      printData: {},
-      printList: [],
     };
   },
   components: {
     sendOrderPopup,
     OrderList,
-    UsbAutoPrint,
   },
   watch: {
     "$store.state.userInfo": {
@@ -178,37 +169,17 @@ export default {
       }
     }, 5000);
   },
-  mounted() {
-    this.usbPrint();
-  },
+  mounted() {},
   beforeDestroy() {
     clearInterval(this.timer);
     this.timer = null;
-    clearInterval(this.timer2);
-    this.timer2 = null;
   },
   destroyed() {
     bus.$off("pullData");
     bus.$off("refreshData");
   },
   methods: {
-    printOver() {
-      this.printList = this.printList.slice(1);
-    },
-    usbPrint() {
-      // usb自动打印新订单、预约单
-      let orderIdStr = "34441,34442,34443";
-      getPrintOrderInfos({ orderIdStr }).then((res) => {
-        console.log("返回内容：", res);
-        if (res.code === 200 && res.data.length) {
-          let len = this.printList.length;
-          this.printList = this.printList.concat(res.data);
-          if (!len) {
-            this.printOver();
-          }
-        }
-      });
-    },
+   
     changeShopIds() {
       this.params.searchShopIdStr = String(this.searchShopIdStr);
       localStorage.setItem("searchShopIdStr", this.params.searchShopIdStr);
@@ -364,7 +335,6 @@ export default {
           let newList = res.data.newList;
           let deliveryList = res.data.deliveryList;
           if (!newList.length && !deliveryList.length) return;
-
           // 根据exceptTime判断是新订单还是预约单
           let normalList = newList
             .filter((v) => {