调试打印

2024-03-05 09:52:20 +08:00
parent 0fa0d56558
commit d00612da5a
10 changed files with 143 additions and 93 deletions
--- a/public/print.html
+++ b/public/print.html
@@ -10,25 +10,99 @@
      @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;
+      }
    </style>
  </head>

  <body>
-    <section id="main">测试打印</section>
-    <!-- <script type="module">
+    <br />
+    <section id="app">
+      <div class="title_wrap">
+        <div class="title">
+          <b>{{data.shop_name}}</b>
+        </div>
+        <div class="min_title">结账单</div>
+      </div>
+      <div class="item b">NO:{{data.orderId}}</div>
+      <div class="item b">开始时间：2023-3-4 16:32:54</div>
+      <div class="item b">结束时间：2023-3-4 16:32:54</div>
+      <div class="item b">打印人：002-蔡紫薇 打印次数：第一次打印</div>
+      <div class="item b">品相费：450</div>
+      <div class="item b">服务费：280</div>
+      <div v-for="(item,index) in data.carts" :key="index">
+        <div class="item">{{item.name}} {{item.number}}</div>
+        <br />
+      </div>
+      <div class="item b">收银员：张三</div>
+    </section>
+    <div class="item b">电话</div>
+    <br />
+    <div class="item b">地址：陕西省西安市灞桥区后海餐厅一二三</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <div class="item b">--------------------------------</div>
+    <br />
+    <script type="module">
      const { ipcRenderer } = require("electron");
-      window.onload = () => {
-        ipcRenderer.on("webview-print-render", (event, info) => {
-          // 执行渲染
-          const main = document.getElementById("main");
-          main.appendChild(info.shop_name);
-          ipcRenderer.send("load-ok", {
-            width: document.body.clientWidth,
-            height: document.body.clientHeight,
+      import {
+        createApp,
+        ref,
+        onMounted,
+      } from "../node_modules/vue/dist/vue.esm-browser.js";
+
+      createApp({
+        setup() {
+          const data = ref({});
+
+          onMounted(() => {
+            ipcRenderer.on("getParams", (event, arg) => {
+              data.value = JSON.parse(arg);
+            });
+            ipcRenderer.send("printStart");
          });
-          ipcRenderer.sendToHost("did-finish-load");
-        });
-      };
-    </script> -->
+
+          return {
+            data,
+          };
+        },
+      }).mount("#app");
+    </script>
  </body>
 </html>