优化打印效果

.env.production

@@ -2,4 +2,4 @@
 ENV = production
 
 # 线上环境接口地址
-VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/api/'
+VITE_API_URL = 'https://cashierclient.sxczgkj.cn/cashier-client/'

dist-electron/main.js

@@ -1,38 +1,11 @@
 "use strict";
 const electron = require("electron");
 const path = require("path");
-function printUtils(params) {
-  return new Promise(async (resolvePrint, rejectPrint) => {
-    let subMainWindow = new electron.BrowserWindow({
-      // show: false,
-      webPreferences: {
-        nodeIntegration: true,
-        // For electron >= 4.0.0
-        contextIsolation: false,
-        webSecurity: false,
-        enableRemoteModule: true
-      }
-    });
-    subMainWindow.loadFile(path.join(__dirname, "../public/print.html"));
-    subMainWindow.webContents.on("did-finish-load", async (res) => {
-      subMainWindow.webContents.openDevTools();
-      console.log("网页加载完成", res);
-      subMainWindow.webContents.send("getParams", params);
-      return;
-    });
-    electron.ipcMain.on("printStart", () => {
-      console.log("开始打印");
-      subMainWindow.webContents.print({
-        silent: true
-      });
-    });
-  });
-}
 electron.app.whenReady().then(() => {
   const win = new electron.BrowserWindow({
     title: "银收客",
-    width: 1200,
+    width: 1024,
-    height: 800,
+    height: 768,
     fullscreenable: true,
     fullscreen: false,
     simpleFullscreen: true,
@@ -48,7 +21,6 @@ electron.app.whenReady().then(() => {
   } else {
     win.loadFile(path.resolve(__dirname, "../dist/index.html"));
   }
-  win.webContents.openDevTools();
   electron.app.on("activate", () => {
     if (electron.BrowserWindow.getAllWindows().length === 0) {
       createWindow();
@@ -57,8 +29,29 @@ electron.app.whenReady().then(() => {
   electron.ipcMain.on("quitHandler", (_, msg) => {
     electron.app.quit();
   });
-  electron.ipcMain.on("printerInfoSync", async (event, params) => {
+  const printWin = new electron.BrowserWindow({
-    await printUtils(params);
+    show: false,
+    webPreferences: {
+      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  });
+  if (process.env.VITE_DEV_SERVER_URL) {
+    printWin.loadFile(path.join(__dirname, "../public/print.html"));
+  } else {
+    printWin.loadFile(path.resolve(__dirname, "../dist/print.html"));
+  }
+  printWin.webContents.openDevTools();
+  electron.ipcMain.on("printerInfoSync", (event, params) => {
+    console.log(JSON.parse(params));
+    printWin.webContents.send("getParams", params);
+  });
+  electron.ipcMain.on("printStart", () => {
+    console.log("开始打印");
+    printWin.webContents.print({
+      silent: true
+    });
   });
 });
 electron.app.on("window-all-closed", () => {

electron/main.js

@@ -1,12 +1,11 @@
 import { app, BrowserWindow, ipcMain } from "electron";
 import path from 'path'
-import { printUtils } from './printUtils'
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({
     title: "银收客",
-    width: 1200,
+    width: 1024,
-    height: 800,
+    height: 768,
     fullscreenable: true,
     fullscreen: false,
     simpleFullscreen: true,
@@ -22,10 +21,10 @@ app.whenReady().then(() => {
   if (process.env.VITE_DEV_SERVER_URL) {
     win.loadURL(process.env.VITE_DEV_SERVER_URL);
     // 使用vite开发服务的url路径访问应用
+    // win.webContents.openDevTools();
   } else {
     win.loadFile(path.resolve(__dirname, '../dist/index.html')); // 打包后使用文件路径访问应用
   }
-  win.webContents.openDevTools();
 
   app.on("activate", () => {
     // 在 macOS 系统内, 如果没有已开启的应用窗口
@@ -39,8 +38,36 @@ app.whenReady().then(() => {
     app.quit();
   });
 
-  ipcMain.on('printerInfoSync', async (event, params) => {
+  // 创建打印小票子窗口
-    await printUtils(params)
+  const printWin = new BrowserWindow({
+    show: false,
+    webPreferences: {
+      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
+      nodeIntegration: true,
+      contextIsolation: false,
+    }
+  })
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    // 加载打印的html文件
+    printWin.loadFile(path.join(__dirname, "../public/print.html"));
+  } else {
+    printWin.loadFile(path.resolve(__dirname, '../dist/print.html')); // 打包后使用文件路径访问应用
+  }
+
+  printWin.webContents.openDevTools()
+
+  ipcMain.on('printerInfoSync', (event, params) => {
+    console.log(JSON.parse(params))
+    printWin.webContents.send('getParams', params)
+  })
+
+  // 执行打印操作
+  ipcMain.on('printStart', () => {
+    console.log('开始打印')
+    printWin.webContents.print({
+      silent: true
+    })
   })
 });
 

electron/printUtils.js

@@ -1,54 +0,0 @@
-import { BrowserWindow, ipcMain } from 'electron';
-import path from "path";
-
-export function printUtils(params) {
-    return new Promise(async (resolvePrint, rejectPrint) => {
-        let subMainWindow = new BrowserWindow({
-            // show: false,
-            webPreferences: {
-                nodeIntegration: true,        // For electron >= 4.0.0
-                contextIsolation: false,
-                webSecurity: false,
-                enableRemoteModule: true
-            }
-        });
-
-        // 加载打印的html文件
-        subMainWindow.loadFile(path.join(__dirname, "../public/print.html"));
-
-        subMainWindow.webContents.on('did-finish-load', async (res) => {
-            subMainWindow.webContents.openDevTools();
-            console.log('网页加载完成', res)
-            subMainWindow.webContents.send('getParams', params)
-            return
-            let data = []
-            return renderPrintDocument(subMainWindow, data)
-                .then(async (result) => {
-                    // let width = Math.ceil((result.width) * 264.5833);
-                    let height = Math.ceil((result.height + 60) * 264.5833);
-                    console.info('height', result, height);
-                    subMainWindow.webContents.print({
-                        silent: true,
-                        margins: {
-                            marginType: 'none'
-                        },
-                        printBackground: false,
-                        deviceName: '',
-                        copies: 1,
-                    }, (success) => {
-                        if (success) {
-                            resolvePrint({ type: 'success' })
-                        }
-                        subMainWindow.close();
-                    })
-                })
-                .catch(err => console.warn(33, err))
-        })
-        ipcMain.on('printStart', () => {
-            console.log('开始打印')
-            subMainWindow.webContents.print({
-                silent: true
-            })
-        })
-    })
-}

public/print.html

@@ -7,69 +7,40 @@
     <meta charset="UTF-8" />
     <title>Print preview</title>
     <style>
-      @page {
+      @media print {
-        size: auto;
+        h1 {
-      }
+          font-size: 1.5em;
-
+          text-align: center;
-      html {
+          font-weight: bold;
-        padding-bottom: 100px;
+        }
-      }
+        @page {
-
+          size: auto;
-      .title_wrap {
+          margin-top: 50px;
-        font-weight: bold;
+          margin-bottom: 50px;
-        display: flex;
+        }
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 50px 0;
-      }
-
-      .title {
-        font-size: 24px;
-      }
-
-      .min_title {
-        font-size: 18px;
-        padding-top: 10px;
-      }
-
-      .item {
-        padding: 20px 0;
-      }
-
-      .item.b {
-        font-weight: bold;
-      }
-
-      .img {
-        width: 100%;
-        display: block;
       }
     </style>
   </head>
 
   <body>
     <section id="app">
-        <RS:2><L><CB>####### 6 ######</CB></L><BR>
+      <section>---------------------</section>
-        <RS:2><C>*沙县小吃*</C><BR>
+      <section>---------------------</section>
-        <RS:2><CB>--已在线支付--</CB><BR>
+      <section>---------------------</section>
-        <RS:2><C>----------------</C><BR>
+      <section>---------------------</section>
-        送达时间: 2021-01-04 13:28:50<BR>
+      <section>---------------------</section>
-        送达时间: 2021-01-04 12:28:50<BR>
+      <section>---------------------</section>
-        订单编号: 1200897812792015996<BR>
+      <center><em>{{data.shop_name}}</em></center>
-        -------01号篮子------<BR>
+      <section v-for="item in data.carts" :key="item.id">
-        <L>爆炒肥肠      x2   80.0</L><BR>
+        {{item.name}} x{{item.number}} {{item.salePrice}}
-        <L>蚂蚁上树      x1   12.3</L><BR>
+        <br />
-        [会员减配送费: 0.0]<BR>
+      </section>
-        <RS:1>[商家承担的配送费: 1.0]<BR>
+      <section>---------------------</section>
-        配送费: ￥1.0<BR>
+      <section>---------------------</section>
-        <B>实付: ￥43.3</B><BR>
+      <section>---------------------</section>
-        <B>手机号: 13012345678</B><BR>
+      <section>---------------------</section>
-        <RS:2><B>仲恺高新区惠风西3路1号</B><BR>
+      <section>---------------------</section>
-        备  注: 不要辣椒<BR>
+      <section>---------------------</section>
-        发票抬头: 惠州市博实结科技有限公司<BR>
-        <LOGO>
-        <CUT>
     </section>
     <script type="module">
       const { ipcRenderer } = require("electron");
@@ -85,9 +56,10 @@
 
           onMounted(() => {
             ipcRenderer.on("getParams", (event, arg) => {
+              console.log(arg);
               data.value = JSON.parse(arg);
+              ipcRenderer.send("printStart");
             });
-            ipcRenderer.send("printStart");
           });
 
           return {

src/App.vue

@@ -52,7 +52,7 @@ router.beforeEach((to, from) => {
 }
 
 :root {
-  --r: 24;
+  --r:24;
   --g: 124;
   --b: 170;
   --r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);

src/components/leftMenu.vue

@@ -110,7 +110,6 @@ const menus = ref([
 
         .text {
             color: #999;
-            font-size: 22px;
         }
     }
 }

src/components/payCard/payCard.vue

@@ -105,26 +105,30 @@ function payTypeChange(index, item) {
 // 结算支付
 async function confirmOrder() {
     try {
-        if (money.value < props.amount) return
+        if (payList.value[payActive.value].payType == 'scanCode') {
-        payLoading.value = true
+            scanModalRef.value.show()
-        switch (payList.value[payActive.value].payType) {
+        } else {
-            case 'deposit':
+            if (money.value < props.amount) return
-                await accountPay({
+            payLoading.value = true
-                    orderId: props.orderId,
+            switch (payList.value[payActive.value].payType) {
-                    memberId: 1
+                case 'deposit':
-                })
+                    await accountPay({
-                break;
+                        orderId: props.orderId,
-            case 'cash':
+                        memberId: 1
-                await cashPay({
+                    })
-                    orderId: props.orderId
+                    break;
-                })
+                case 'cash':
-                break;
+                    await cashPay({
-            default:
+                        orderId: props.orderId
-                break;
+                    })
+                    break;
+                default:
+                    break;
+            }
+            ElMessage.success('支付成功')
+            emit('paySuccess')
+            payLoading.value = false
         }
-        ElMessage.success('支付成功')
-        emit('paySuccess')
-        payLoading.value = false
     } catch (error) {
         console.log(error)
         payLoading.value = false

src/views/home/components/cartOperation.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="operation_wrap">
-        <div class="item" @click="numberChange('sub')">
+        <div class="item" :class="{ disabled: props.item.number <= 1 || !props.item.id }" @click="numberChange('sub')">
             <el-icon class="icon">
                 <SemiSelect />
             </el-icon>

src/views/home/components/goods.vue

@@ -29,8 +29,8 @@
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" style="width: 400px;"
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
-                clearable @input="inputChange"></el-input>
+                @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
             @click="changeShopListType"></el-button>
@@ -299,59 +299,57 @@ defineExpose({
         width: 20%;
         padding: 0 10px;
         padding-bottom: 20px;
-    }
 
-    .item {
+        .item {
-        border: 1px solid #ececec;
+            border: 1px solid #ececec;
-        border-radius: 10px;
+            border-radius: 10px;
-        overflow: hidden;
+            overflow: hidden;
-        position: relative;
+            position: relative;
 
-        &:hover {
+            &:hover {
-            cursor: pointer;
+                cursor: pointer;
-        }
+            }
 
-        .dot {
+            .dot {
-            padding: 0 14px;
+                padding: 0 14px;
-            background-color: var(--el-color-danger);
+                background-color: var(--el-color-danger);
-            color: #fff;
+                color: #fff;
-            border-radius: 20px;
+                border-radius: 20px;
-            position: absolute;
+                position: absolute;
-            top: 4px;
+                top: 4px;
-            right: 4px;
+                right: 4px;
-            z-index: 1;
+                z-index: 1;
-            font-size: 12px;
+                font-size: 12px;
-            font-size: 18px;
-        }
-
-        .cover {
-            width: 100%;
-            height: 300px;
-        }
-
-        .name {
-            padding: 0 10px;
-            height: 50px;
-            margin-top: 20px;
-
-            span {
-                font-weight: bold;
                 font-size: 18px;
             }
-        }
 
-        .empty {
+            .cover {
-            height: 50px;
+                width: 100%;
-        }
+                height: 150px;
+            }
 
-        .price {
+            .name {
-            padding: 10px 20px;
+                padding: 0 10px;
-            background-color: var(--primary-color);
+                height: 50px;
+                margin-top: 20px;
 
-            span {
+                span {
-                color: #fff;
+                    font-weight: bold;
-                font-weight: bold;
+                }
-                font-size: 18px;
+            }
+
+            .empty {
+                height: 50px;
+            }
+
+            .price {
+                padding: 10px 20px;
+                background-color: var(--primary-color);
+
+                span {
+                    color: #fff;
+                    font-weight: bold;
+                }
             }
         }
     }

src/views/home/components/settleAccount.vue

@@ -66,7 +66,7 @@ import { ipcRenderer } from 'electron'
 
 const emit = defineEmits('paySuccess')
 
-const dialogVisible = ref(false)
+const dialogVisible = ref(true)
 const props = defineProps({
     cart: {
         type: Array,
@@ -101,7 +101,7 @@ function printHandle() {
         remark: props.remark,
         orderId: props.orderId
     }
-    ipcRenderer.sendSync('printerInfoSync', JSON.stringify(data))
+    ipcRenderer.send('printerInfoSync', JSON.stringify(data))
 }
 
 // 订单已支付

src/views/home/index.vue

@@ -11,7 +11,7 @@
         <div class="number" @click="takeFoodCodeRef.show()">
           <el-text class="t">{{ masterId }}</el-text>
         </div>
-        <div class="select_user" @click="membershow = true">
+        <!-- <div class="select_user" @click="membershow = true">
           <el-icon class="icon">
             <UserFilled />
           </el-icon>
@@ -19,7 +19,7 @@
           <el-icon class="arrow">
             <ArrowRight />
           </el-icon>
-        </div>
+        </div> -->
       </div>
       <div class="shop_operation">
         <div class="shop_list">
@@ -78,7 +78,7 @@
               @click="createOrderHandle">
               <div class="js">
                 <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
-                <el-text class="t" style="margin-left: 250px;">
+                <el-text class="t" style="margin-left: 30px">
                   <span v-if="!createOrderLoading">结算</span>
                   <span v-else>下单中...</span>
                 </el-text>
@@ -142,7 +142,6 @@ const createOrderLoading = ref(false)
 
 // 取餐码
 const masterId = ref('')
-const uuid = ref('')
 
 // 挂单量
 const pendingCartNum = ref(0)
@@ -212,7 +211,8 @@ async function delCartHandle(params) {
       masterId: params.masterId,
       cartId: params.id
     })
-    queryCartAjax()
+    await queryCartAjax()
+    cartListActive.value = 0
   } catch (error) {
     console.log(error)
   }
@@ -226,6 +226,7 @@ function giftPackHandle(key, item) {
 
 // 打包全选
 const allSelectedHandle = async () => {
+  if (!cartList.value.length) return
   allSelected.value = !allSelected.value
   await packall({
     shopId: store.userInfo.shopId,
@@ -258,7 +259,8 @@ async function addCart(params, type = 'add') {
       isPack: params.isPack || false,
       isGift: params.isGift || false,
       cartId: type == 'add' ? '' : params.id,
-      uuid: params.uuid || store.userInfo.uuid
+      uuid: params.uuid || store.userInfo.uuid,
+      type: type
     })
     masterId.value = res
     goodsRef.value.updateData()
@@ -287,11 +289,11 @@ async function queryCartAjax() {
 // 获取取餐码
 async function createCodeAjax() {
   try {
-    const res = await createCode({
+    // const res = await createCode({
-      shopId: store.userInfo.shopId
+    //   shopId: store.userInfo.shopId
-    })
+    // })
-    masterId.value = res.code
+    // masterId.value = res.code
-    // masterId.value = '#13'
+    masterId.value = '#50'
     queryCartAjax()
   } catch (error) {
     console.log(error)
@@ -305,7 +307,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .cart_wrap {
-  width: 550px;
+  flex: 1.5;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -519,7 +521,7 @@ onMounted(() => {
 }
 
 .shop_manage {
-  flex: 1;
+  flex: 2;
   margin-left: 20px;
   height: 100%;
 }