优化样式 新增版本号
This commit is contained in:
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user