优化打印效果

2024-03-07 09:07:22 +08:00 · 2024-03-07 09:07:22 +08:00 · b550cf3fd8
parent 5d96435125
commit b550cf3fd8
12 changed files with 176 additions and 235 deletions
--- a/.env.production
+++ b/.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/'
--- a/dist-electron/main.js
+++ b/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,
-    height: 800,
+    width: 1024,
+    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) => {
-    await printUtils(params);
+  const printWin = new electron.BrowserWindow({
+    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", () => {
--- a/electron/main.js
+++ b/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,
-    height: 800,
+    width: 1024,
+    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
+    })
  })
 });

--- a/electron/printUtils.js
+++ b/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
-            })
-        })
-    })
-}
--- a/public/print.html
+++ b/public/print.html
@ -7,69 +7,40 @@
    <meta charset="UTF-8" />
    <title>Print preview</title>
    <style>
-      @page {
-        size: auto;
-      }
-
-      html {
-        padding-bottom: 100px;
-      }
-
-      .title_wrap {
-        font-weight: bold;
-        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;
+      @media print {
+        h1 {
+          font-size: 1.5em;
+          text-align: center;
+          font-weight: bold;
+        }
+        @page {
+          size: auto;
+          margin-top: 50px;
+          margin-bottom: 50px;
+        }
      }
    </style>
  </head>

  <body>
    <section id="app">
-        <RS:2><L><CB>####### 6 ######</CB></L><BR>
-        <RS:2><C>*沙县小吃*</C><BR>
-        <RS:2><CB>--已在线支付--</CB><BR>
-        <RS:2><C>----------------</C><BR>
-        送达时间: 2021-01-04 13:28:50<BR>
-        送达时间: 2021-01-04 12:28:50<BR>
-        订单编号: 1200897812792015996<BR>
-        -------01号篮子------<BR>
-        <L>爆炒肥肠      x2   80.0</L><BR>
-        <L>蚂蚁上树      x1   12.3</L><BR>
-        [会员减配送费: 0.0]<BR>
-        <RS:1>[商家承担的配送费: 1.0]<BR>
-        配送费: ￥1.0<BR>
-        <B>实付: ￥43.3</B><BR>
-        <B>手机号: 13012345678</B><BR>
-        <RS:2><B>仲恺高新区惠风西3路1号</B><BR>
-        备  注: 不要辣椒<BR>
-        发票抬头: 惠州市博实结科技有限公司<BR>
-        <LOGO>
-        <CUT>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <center><em>{{data.shop_name}}</em></center>
+      <section v-for="item in data.carts" :key="item.id">
+        {{item.name}} x{{item.number}} {{item.salePrice}}
+        <br />
+      </section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
+      <section>---------------------</section>
    </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 {
--- a/src/App.vue
+++ b/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);
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@ -110,7 +110,6 @@ const menus = ref([

        .text {
            color: #999;
-            font-size: 22px;
        }
    }
 }
--- a/src/components/payCard/payCard.vue
+++ b/src/components/payCard/payCard.vue
@ -105,26 +105,30 @@ function payTypeChange(index, item) {
 // 结算支付
 async function confirmOrder() {
    try {
-        if (money.value < props.amount) return
-        payLoading.value = true
-        switch (payList.value[payActive.value].payType) {
-            case 'deposit':
-                await accountPay({
-                    orderId: props.orderId,
-                    memberId: 1
-                })
-                break;
-            case 'cash':
-                await cashPay({
-                    orderId: props.orderId
-                })
-                break;
-            default:
-                break;
+        if (payList.value[payActive.value].payType == 'scanCode') {
+            scanModalRef.value.show()
+        } else {
+            if (money.value < props.amount) return
+            payLoading.value = true
+            switch (payList.value[payActive.value].payType) {
+                case 'deposit':
+                    await accountPay({
+                        orderId: props.orderId,
+                        memberId: 1
+                    })
+                    break;
+                case 'cash':
+                    await cashPay({
+                        orderId: props.orderId
+                    })
+                    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
--- a/src/views/home/components/cartOperation.vue
+++ b/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>
--- a/src/views/home/components/goods.vue
+++ b/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;"
-                clearable @input="inputChange"></el-input>
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+                @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 {
-        border: 1px solid #ececec;
-        border-radius: 10px;
-        overflow: hidden;
-        position: relative;
+        .item {
+            border: 1px solid #ececec;
+            border-radius: 10px;
+            overflow: hidden;
+            position: relative;

-        &:hover {
-            cursor: pointer;
-        }
+            &:hover {
+                cursor: pointer;
+            }

-        .dot {
-            padding: 0 14px;
-            background-color: var(--el-color-danger);
-            color: #fff;
-            border-radius: 20px;
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            z-index: 1;
-            font-size: 12px;
-            font-size: 18px;
-        }
-
-        .cover {
-            width: 100%;
-            height: 300px;
-        }
-
-        .name {
-            padding: 0 10px;
-            height: 50px;
-            margin-top: 20px;
-
-            span {
-                font-weight: bold;
+            .dot {
+                padding: 0 14px;
+                background-color: var(--el-color-danger);
+                color: #fff;
+                border-radius: 20px;
+                position: absolute;
+                top: 4px;
+                right: 4px;
+                z-index: 1;
+                font-size: 12px;
                font-size: 18px;
            }
-        }

-        .empty {
-            height: 50px;
-        }
+            .cover {
+                width: 100%;
+                height: 150px;
+            }

-        .price {
-            padding: 10px 20px;
-            background-color: var(--primary-color);
+            .name {
+                padding: 0 10px;
+                height: 50px;
+                margin-top: 20px;

-            span {
-                color: #fff;
-                font-weight: bold;
-                font-size: 18px;
+                span {
+                    font-weight: bold;
+                }
+            }
+
+            .empty {
+                height: 50px;
+            }
+
+            .price {
+                padding: 10px 20px;
+                background-color: var(--primary-color);
+
+                span {
+                    color: #fff;
+                    font-weight: bold;
+                }
            }
        }
    }
--- a/src/views/home/components/settleAccount.vue
+++ b/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))
 }

 // 订单已支付
--- a/src/views/home/index.vue
+++ b/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({
-      shopId: store.userInfo.shopId
-    })
-    masterId.value = res.code
-    // masterId.value = '#13'
+    // const res = await createCode({
+    //   shopId: store.userInfo.shopId
+    // })
+    // masterId.value = res.code
+    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%;
 }