优化样式 新增版本号

This commit is contained in:
gyq
2024-03-07 16:15:03 +08:00
parent 4a5b52fa45
commit 31ef882431
16 changed files with 291 additions and 186 deletions

View File

@@ -7,41 +7,78 @@
<meta charset="UTF-8" />
<title>Print preview</title>
<style>
@media print {
h1 {
font-size: 1.5em;
text-align: center;
font-weight: bold;
}
@page {
size: auto;
margin-top: 50px;
margin-bottom: 50px;
}
#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>
<section id="app">
<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>
<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 {
@@ -49,6 +86,7 @@
ref,
onMounted,
} from "../node_modules/vue/dist/vue.esm-browser.js";
import html2canvas from "../node_modules/html2canvas/dist/html2canvas.esm.js";
createApp({
setup() {
@@ -58,7 +96,14 @@
ipcRenderer.on("getParams", (event, arg) => {
console.log(arg);
data.value = JSON.parse(arg);
ipcRenderer.send("printStart");
setTimeout(() => {
html2canvas(document.querySelector(".html2cavas")).then(
function (canvas) {
document.querySelector("#app").appendChild(canvas);
ipcRenderer.send("printStart");
}
);
}, 1000);
});
});