change qrcode
This commit is contained in:
lq
parent
77aedbd559
commit
43c947967e
42
package-lock.json
generated
42
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
80
src/App.vue
80
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()
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
1807
src/App11.vue
Normal file
1807
src/App11.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user