118 lines
3.1 KiB
HTML
118 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" style="position: fixed; top: -1000%; left: 0">
|
|
<div class="header">
|
|
<div class="t1">{{data.shop_name || '结账单位'}}</div>
|
|
<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 class="item">品相</div>
|
|
<div class="item">数量</div>
|
|
<div class="item">单位</div>
|
|
<div class="item">单价</div>
|
|
<div class="item">小计</div>
|
|
<div class="item">注</div>
|
|
</div>
|
|
<div class="tbody">
|
|
<div v-for="item in data.carts" :key="item.id" class="tr">
|
|
<div class="item">{{item.name}}</div>
|
|
<div class="item">x{{item.number}}</div>
|
|
<div class="item">{{item.unitName}}</div>
|
|
<div class="item">{{item.salePrice}}</div>
|
|
<div class="item"></div>
|
|
<div class="item"></div>
|
|
</div>
|
|
</div>
|
|
<div>优惠信息</div>
|
|
<div>赠送优惠：{{data.amount}}</div>
|
|
<div>结算方式</div>
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
const { ipcRenderer } = require("electron");
|
|
import {
|
|
createApp,
|
|
ref,
|
|
onMounted,
|
|
} from "../node_modules/vue/dist/vue.esm-browser.js";
|
|
import html2canvas from "../node_modules/html2canvas/dist/html2canvas.esm.js";
|
|
|
|
createApp({
|
|
setup() {
|
|
const data = ref({});
|
|
|
|
onMounted(() => {
|
|
ipcRenderer.on("getParams", (event, arg) => {
|
|
console.log(arg);
|
|
data.value = JSON.parse(arg);
|
|
setTimeout(() => {
|
|
html2canvas(document.querySelector(".html2cavas")).then(
|
|
function (canvas) {
|
|
document.querySelector("#app").appendChild(canvas);
|
|
ipcRenderer.send("printStart");
|
|
}
|
|
);
|
|
}, 1000);
|
|
});
|
|
});
|
|
|
|
return {
|
|
data,
|
|
};
|
|
},
|
|
}).mount("#app");
|
|
</script>
|
|
</body>
|
|
</html>
|