This commit is contained in:
gyq
2024-03-11 14:34:17 +08:00
parent 11290d1505
commit 0fbc614c61
13 changed files with 156 additions and 217 deletions

View File

@@ -7,114 +7,58 @@
<meta charset="UTF-8" />
<title>Print preview</title>
<style>
#app {
padding: 30px;
}
.header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 30px;
}
.t1 {
section {
font-size: 24px;
font-weight: bold;
}
.t2 {
font-size: 18px;
}
.time {
padding-bottom: 10px;
}
.thead {
display: flex;
}
.thead .item {
flex: 1;
font-weight: bold;
}
.tbody .tr {
padding: 10px 0;
display: flex;
}
.tbody .tr .item {
flex: 1;
}
.html2cavas {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<div class="html2cavas">
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<ESC> "@"
<ESC> "|cA" "Sample Text" <LF>
<ESC> "|cA" "Price: $10.00" <LF>
<ESC> "|cA" "Thank you!" <LF>
<ESC> "d" "n" <LF>
<pre style="text-align: center">{{data.shop_name || '结账单位'}}</pre>
<div class="header">
<div class="t2">结账单</div>
</div>
<div class="time">开始时间: 2024/3/7 09:56:23</div>
<div class="time">结束时间: 2024/3/8 13:11:07</div>
<div class="thead">品相 数量 单位 单价 小计 注</div>
<div class="tbody">
<div v-for="item in data.carts" :key="item.id" class="tr">
{{item.name}} x{{item.number}} x{{item.number}} {{item.unitName}}
{{item.salePrice}} {{item.salePrice}}
</div>
</div>
<div>优惠信息</div>
<div><br /></div>
<div>赠送优惠:{{data.amount}}</div>
<div><br /></div>
<div>结算方式</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div>---------------</div>
<div class="html2canvas" style="position: fixed;top: -1000%;">
<section style="font-size: 22px;">#B1 B2</section>
<section style="font-size: 22px;">喔喔奶茶 x12</section>
<section style="font-size: 22px;">麻辣味</section></section></section>
<section style="font-size: 22px;">03-08 16:32 ¥123.00</section>
</div>
<!-- <section>我是标签111</section>
<section>我是标签222</section>
<section>我是标签333</section>
<section>我是标签444</section> -->
</div>
<script type="module">
const { ipcRenderer } = require("electron");
import {
createApp,
ref,
onMounted,
} from "../node_modules/vue/dist/vue.esm-browser.js";
// import {
// createApp,
// ref,
// onMounted,
// } from "../node_modules/vue/dist/vue.esm-browser.js";
createApp({
setup() {
const data = ref({});
import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js'
onMounted(() => {
ipcRenderer.on("getParams", (event, arg) => {
// console.log(arg);
data.value = JSON.parse(arg);
ipcRenderer.send("printStart");
});
});
html2canvas(document.querySelector('.html2canvas')).then(canvas => {
console.log(canvas)
document.querySelector('#app').appendChild(canvas)
}).catch(err=> {
console.log(err);
})
return {
data,
};
},
}).mount("#app");
// createApp({
// setup() {
// const data = ref({});
// onMounted(() => {
// ipcRenderer.on("getParams", (event, arg) => {
// // console.log(arg);
// data.value = JSON.parse(arg);
// setTimeout(() => {
// ipcRenderer.send("printStart");
// },500)
// });
// });
// return {
// data,
// };
// },
// }).mount("#app");
</script>
</body>
</html>