From 43c947967eb7b990fa48af3de29f560b44729e6a Mon Sep 17 00:00:00 2001 From: lq <13849061902@qq.com> Date: Fri, 19 Jul 2024 14:37:55 +0800 Subject: [PATCH] change qrcode --- package-lock.json | 42 ++ package.json | 1 + src/App.vue | 80 +- src/App11.vue | 1807 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1919 insertions(+), 11 deletions(-) create mode 100644 src/App11.vue diff --git a/package-lock.json b/package-lock.json index ad6d2d3..4f83351 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "wps", "version": "0.0.0", "dependencies": { + "@zxing/browser": "^0.1.5", "axios": "^1.7.2", "element-plus": "^2.7.5", "jspdf": "^2.5.1", @@ -896,6 +897,38 @@ } } }, + "node_modules/@zxing/browser": { + "version": "0.1.5", + "resolved": "https://registry.npmmirror.com/@zxing/browser/-/browser-0.1.5.tgz", + "integrity": "sha512-4Lmrn/il4+UNb87Gk8h1iWnhj39TASEHpd91CwwSJtY5u+wa0iH9qS0wNLAWbNVYXR66WmT5uiMhZ7oVTrKfxw==", + "optionalDependencies": { + "@zxing/text-encoding": "^0.9.0" + }, + "peerDependencies": { + "@zxing/library": "^0.21.0" + } + }, + "node_modules/@zxing/library": { + "version": "0.21.2", + "resolved": "https://registry.npmmirror.com/@zxing/library/-/library-0.21.2.tgz", + "integrity": "sha512-VMCCSUJSld3tqG6aREJ6XBCxYuoQFcjrF1kowKPFqTA6QG1ixfm6bVfD7gP4jjfM0MX20wVB65DEXtjRsBmV6w==", + "peer": true, + "dependencies": { + "ts-custom-error": "^3.2.1" + }, + "engines": { + "node": ">= 10.4.0" + }, + "optionalDependencies": { + "@zxing/text-encoding": "~0.9.0" + } + }, + "node_modules/@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmmirror.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -1638,6 +1671,15 @@ "utrie": "^1.0.2" } }, + "node_modules/ts-custom-error": { + "version": "3.3.1", + "resolved": "https://registry.npmmirror.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz", + "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==", + "peer": true, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz", diff --git a/package.json b/package.json index b684409..26486d5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@zxing/browser": "^0.1.5", "axios": "^1.7.2", "element-plus": "^2.7.5", "jspdf": "^2.5.1", diff --git a/src/App.vue b/src/App.vue index 4df42d9..6e72e51 100644 --- a/src/App.vue +++ b/src/App.vue @@ -506,6 +506,7 @@ import QRCode from 'qrcodejs2-fix' import { Dialog } from './components/dialog/Dialog' import jsPDF from 'jspdf' import { debounce, nextTick, scrollIntoView } from './utils' +import { BrowserQRCodeReader, BrowserQRCodeSvgWriter } from '@zxing/browser' export default { data() { return { @@ -534,7 +535,9 @@ export default { myDiv: null, orderType: 0, modeIndex: 0, + imageType: '', id: 0, + code:'', options: { margins: [100, 120, 100, 120], watermark: { @@ -569,7 +572,6 @@ export default { const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width const imgWidth = pdfWidth const imgHeight = pdfHeight - // 将图片添加到PDF中 const x = 0; const y = 0; @@ -579,9 +581,9 @@ export default { } pdf.addImage(imgData, 'PNG', x, y, options.width, options.height) // 保存生成的PDF - const blob = pdf.output("blob") - this.uploadFile(blob) - pdf.save(pdfName + '.pdf') + //const blob = pdf.output("blob") + //this.uploadFile(blob) + //pdf.save(pdfName + '.pdf') }, uploadFile(blob) { const formData = new FormData() @@ -604,7 +606,7 @@ export default { }) .catch(error => console.error(error)) }, - handleGenerate(idName, name) { + handleGeneratebak(idName, name) { // 采集二维码：路径 const url = 'https://www.baihand.com?order_id=' + name//`${getIPAddress}?companyId=80&saleId=${name}`; // 获取二维码码 div 上的 id @@ -618,6 +620,18 @@ export default { }); } }, + handleGenerate(idName, name) { + const codeWriter = new BrowserQRCodeSvgWriter() + const content = 'https://www.baihand.com?order_id=' + name + const svgElement = codeWriter.write(content, 200, 200) + svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg') + this.code = this.convertSvgElementToBase64(svgElement) + }, + convertSvgElementToBase64(svgElement) { + return `data:image/svg+xml;base64,${btoa( + decodeURIComponent(svgElement.outerHTML) + )}` + }, copy(value) { if(navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(value).then(function() { @@ -754,7 +768,7 @@ export default { const ccc = this.instance.command.getValue() console.log(ccc.data) //localStorage.setItem('word_data', JSON.stringify(ccc.data)) - //return false + return false let saveData = { 'id': this.id, 'type': this.orderType, 'field_style': ccc.data } let api = '/api/Administrator/OrderFieldStyle/save' axios.post(api, saveData).then((res) => { @@ -889,7 +903,7 @@ export default { fillData(data) { let config = JSON.parse(data) let res = [] - let code = this.getImage('imgCode') + //let code = this.getImage('imgCode') for (let i = 0; i < config.length; i++) { let configItem = JSON.stringify(config[i])// configItem = JSON.parse(configItem) @@ -972,7 +986,7 @@ export default { } else if (configItem.hasOwnProperty('type') && configItem['type'] == 'image') { //console.log(configItem) if(configItem.hasOwnProperty('field') && configItem['field'] == 'code') { - configItem.value = code + configItem.value = this.code } res.push(configItem) @@ -1062,12 +1076,54 @@ export default { showData, this.options ) + //this.use(barcode2DPlugin, {}) this.updateStatus = !this.updateStatus this.handleContentChange() this.editorLisener() }, getSelectImage() { + //const imageFileDom = document.querySelector('#image') + //imageFileDom.click() + let _this = this + new Dialog({ + title: '图片类型', + data: [ + { + type: 'select', + label: '类型', + name: 'type', + value: 'image', + required: true, + options: [ + { + label: '静态图片', + value: 'image' + }, + { + label: '二维码', + value: 'code' + }, + { + label: '实时渲染图片', + value: 'dynamics' + } + ] + } + ], + onConfirm: payload => { + //console.log('eeeee', payload); + const type = payload.find(p => p.name === 'type')?.value + _this.imageType = type + //console.log('type', type) + //setTimeout('_this.gageImage()', 500) + + //_this.instance.command.executeInsertElementList([blockElement]) + } + }) + + }, + gageImage() { const imageFileDom = document.querySelector('#image') imageFileDom.click() }, @@ -1076,6 +1132,7 @@ export default { imageFileDom.click() }, selectImage(event) { + console.log(this.imageType); let _this = this //console.log(event.target.files[0]) const imageFileDom = document.querySelector('#image') @@ -1091,7 +1148,8 @@ export default { _this.instance.command.executeImage({ value, width: image.width, - height: image.height + height: image.height, + field: _this.imageType }) imageFileDom.value = '' } @@ -1114,7 +1172,7 @@ export default { value, width: image.width, height: image.height, - field:'code' + field: _this.imageType }) imageFileDom.value = '' } @@ -1482,7 +1540,7 @@ export default { } }) } else { - this.instance.command.executeDeleteWatermark() + _this.instance.command.executeDeleteWatermark() } }, diff --git a/src/App11.vue b/src/App11.vue new file mode 100644 index 0000000..a3ddd51 --- /dev/null +++ b/src/App11.vue @@ -0,0 +1,1807 @@ + + + + +