kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【新增】temu标签组件

Browse Source
This commit is contained in:
yanran200830
2024-10-21 18:01:56 +08:00
parent 5157d601cc
commit 5a7058c036
4 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/print-lock.css
View File

@@ -347,3 +347,9 @@ table.hiprint-printElement-tableTarget {
text-align: left;
clear: both;
}
.temuBarCode {
display: flex;
flex-direction: column;
padding: 1pt 3pt;
}

63
public/index.html
View File

@@ -1,18 +1,51 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>css/print-lock.css">
<title>TEMU助手</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>css/print-lock.css">
<title>TEMU助手</title>
<style>
.temuBarCode {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
padding: 10pt 10pt;
border: 1pt solid #000;
}
.temuBarCode-code {
height: 100%;
}
.temuBarCode-top,
.temuBarCode-bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
}
.temuBarCode-middle {
width: 80%;
height: 60%;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

12
src/components/print/Print.vue
View File

@@ -210,7 +210,7 @@
// eslint-disable-next-line no-undef
$('#hiprint-printTemplate').empty()
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
template: template,
template: {},
settingContainer: '#PrintElementOptionSetting',
fields: [{
field: 'html',
@@ -281,8 +281,9 @@
elementToString(el) {
const node = document.createElement('div')
node.appendChild(el)
node.innerHTML = el.html()
document.querySelector('body').appendChild(node)
return node.innerHTML
},
@@ -295,6 +296,7 @@
getHtml() {
const list = this.labels
console.log(printData)
this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
console.log(this.html)
@@ -316,6 +318,12 @@
.print {
height: 100%;
.temuBarCode {
display: flex;
flex-direction: column;
padding: 1pt 3pt;
}
.print-wrapper {
display: flex;
height: calc(100vh - 180px);

27
src/components/print/customProvider.js
View File

@@ -11,16 +11,22 @@ export const customProvider = function (options) {
type: 'html',
formatter: function (title, options, templateData) {
console.log(options, templateData)
var elId = 'barCode-' + new Date().getTime()
$('body').append('<svg id="' + elId + '" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>')
setTimeout(() => {
// eslint-disable-next-line no-undef
JsBarcode("#barcode", "1234567890", {
format: "code128", // 条形码类型
width: 2, // 条的宽度
height: 50, // 条形码的高度
});
console.log(options.width * 0.8)
JsBarcode('#'+ elId, '1234567890', {
format: "code128",
width: 2,
height: options.height * 0.6,
margin: 0,
displayValue: false
})
return `
const codeHtml = $(`#${elId}`).html()
$(`#${elId}`).remove()
var html = `
<div class="temuBarCode">
<div class="temuBarCode-top">
<div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
@@ -28,7 +34,9 @@ export const customProvider = function (options) {
</div>
<div class="temuBarCode-middle">
<div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code">
<svg id="barcode"></svg>
<svg id="${elId}" style="display: block; width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice">
${codeHtml}
</svg>
</div>
</div>
<div class="temuBarCode-bottom">
@@ -37,6 +45,7 @@ export const customProvider = function (options) {
</div>
</div>
`
return html
},
options: {
width: 316,