121 lines
3.1 KiB
HTML
121 lines
3.1 KiB
HTML
<!--
|
|
~ Copyright (c) 2023. Author Hubert Formin <2399270194@qq.com>
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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 {
|
|
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>
|
|
<!-- <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";
|
|
|
|
createApp({
|
|
setup() {
|
|
const data = ref({});
|
|
|
|
onMounted(() => {
|
|
ipcRenderer.on("getParams", (event, arg) => {
|
|
// console.log(arg);
|
|
data.value = JSON.parse(arg);
|
|
ipcRenderer.send("printStart");
|
|
});
|
|
});
|
|
|
|
return {
|
|
data,
|
|
};
|
|
},
|
|
}).mount("#app");
|
|
</script>
|
|
</body>
|
|
</html>
|