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; text-align: left;
clear: both; clear: both;
} }
.temuBarCode {
display: flex;
flex-direction: column;
padding: 1pt 3pt;
}

63
public/index.html
View File

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

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

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

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

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