212 lines
11 KiB
Vue
212 lines
11 KiB
Vue
<template xlang="wxml" minapp="mpvue">
|
|
<view class="cQrcode">
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
<canvas class="cQrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<canvas :id="cid" :width="cpSize" :height="cpSize" class="cQrcode-canvas" />
|
|
<!-- #endif -->
|
|
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// Based on tki-qrcode 组件： https://github.com/q310550690/uni-app-qrcode , https://ext.dcloud.net.cn/plugin?id=39
|
|
import QRCode from "./qrcode.js"
|
|
let qrcode
|
|
export default {
|
|
name: "cQrcode",
|
|
props: {
|
|
cid: {
|
|
type: String,
|
|
default: 'cQrcodeCanvas'
|
|
},
|
|
size: {
|
|
type: [Number, String],
|
|
default: 200
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: 'px'
|
|
},
|
|
show: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
val: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
background: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
foreground: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
pdground: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
iconSize: {
|
|
type: [Number, String],
|
|
default: 40
|
|
},
|
|
lv: {
|
|
type: [Number, String],
|
|
default: 3
|
|
},
|
|
onval: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
loadMake: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
usingComponents: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
showLoading: {
|
|
type: [Boolean, String],
|
|
default: false
|
|
},
|
|
loadingText: {
|
|
type: String,
|
|
default: '......'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
result: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDMtMjJUMjE6NDQ6MjErMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmU1YjIzY2JmLWE3NjEtNGRiNS1hMjQwLWRiNjhlYzYyZWVhNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjkwN2FlNzJjLTMwMWMtZjE0ZS1hMTYxLTU3YTAzNDc3YzdjNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjdkMDZjYzRmLTE0YWEtNGE5MS1hNTRmLWVlZGFhMTEwNDI1MSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6N2QwNmNjNGYtMTRhYS00YTkxLWE1NGYtZWVkYWExMTA0MjUxIiBzdEV2dDp3aGVuPSIyMDIwLTAzLTIyVDIxOjQ0OjIxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTViMjNjYmYtYTc2MS00ZGI1LWEyNDAtZGI2OGVjNjJlZWE1IiBzdEV2dDp3aGVuPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5L/Y2mAAANpUlEQVR42u3dwW5U1x3AYR6BR/AjeNmWSPEb1LtCNvEbwCJB3TFvgCUSZYnfwJN0UYUsPJJNujLjXU26sGMjUCuR8QJjqZt/zxmu3YkxMHPn3vHMvd+RPpkQCK3FvT+dc+49cyMibgDApHwTABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQ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TV1/dt74rjogWd6UFxAEBAFp8Eg3+14tAZnBuyECgoAgIAIiIAgIAiIgAoKAQDsCchRdAREQBAQBmXjkR24rfwrrqPrDHQUEAUFA5mxsvoqlymcgR+U+AVBAEBAEpOX7IE1YvhIQBAQBmf3LhL2mfF9cAwgIAjKjFwrz3kdeEhMQBAR/QVo2pjmRdxiPF/W9MS8gCAgCMv8zkfUSZ18dNi0eAoKAICBl9kTeHe++N+6HSDXh3CsBQUAQkApH/nCoYkbSy0tU57ON/M/5/ZEm7XcICAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAIiG8CAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgvgkACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgAPAp/wN7p4IhtkXo/QAAAABJRU5ErkJggg==' // '../static/cQrcode.loading.png',
|
|
}
|
|
},
|
|
methods: {
|
|
_makeCode() {
|
|
let that = this
|
|
if (!this._empty(this.val)) {
|
|
qrcode = new QRCode({
|
|
context: that, // 上下文环境
|
|
canvasId:that.cid, // canvas-id
|
|
usingComponents: that.usingComponents===true||that.usingComponents==='true', // 是否是自定义组件
|
|
showLoading: that.showLoading===true||that.showLoading==='true', // 是否显示loading
|
|
loadingText: that.loadingText, // loading文字
|
|
text: that.val, // 生成内容
|
|
size: that.cpSize, // 二维码大小
|
|
background: that.background, // 背景色
|
|
foreground: that.foreground, // 前景色
|
|
pdground: that.pdground, // 定位角点颜色
|
|
correctLevel: Number(that.lv), // 容错级别
|
|
image: that.icon, // 二维码图标
|
|
imageSize: Number(that.iconSize),// 二维码图标大小
|
|
cbResult: function (res) { // 生成二维码的回调
|
|
that._result(res)
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: '二维码内容不能为空',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
_clearCode() {
|
|
this._result('')
|
|
qrcode.clear()
|
|
},
|
|
_saveCode() {
|
|
let that = this;
|
|
if (this.result != "") {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: that.result,
|
|
success: function () {
|
|
uni.showToast({
|
|
title: '二维码保存成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
_result(res) {
|
|
this.result = res;
|
|
this.$emit('result', res)
|
|
},
|
|
_empty(v) {
|
|
let tp = typeof v,
|
|
rt = false;
|
|
if (tp == "number" && String(v) == "") {
|
|
rt = true
|
|
} else if (tp == "undefined") {
|
|
rt = true
|
|
} else if (tp == "object") {
|
|
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
|
} else if (tp == "string") {
|
|
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
|
} else if (tp == "function") {
|
|
rt = false
|
|
}
|
|
return rt
|
|
}
|
|
},
|
|
watch: {
|
|
size: function (n, o) {
|
|
if (n != o && !this._empty(n)) {
|
|
this.cSize = n
|
|
if (!this._empty(this.val)) {
|
|
setTimeout(() => {
|
|
this._makeCode()
|
|
}, 100);
|
|
}
|
|
}
|
|
},
|
|
val: function (n, o) {
|
|
if (this.onval===true || this.onval==='true') {
|
|
if (n != o && !this._empty(n)) {
|
|
setTimeout(() => {
|
|
this._makeCode()
|
|
}, 0);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
cpSize() {
|
|
if(this.unit == "upx"){
|
|
return uni.upx2px(this.size)
|
|
}else{
|
|
return this.size
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
if (this.loadMake===true || this.loadMake==='true') {
|
|
if (!this._empty(this.val)) {
|
|
setTimeout(() => {
|
|
this._makeCode()
|
|
}, 0);
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.cQrcode {
|
|
position: relative;
|
|
}
|
|
.cQrcode-canvas {
|
|
position: fixed;
|
|
top: -99999upx;
|
|
left: -99999upx;
|
|
z-index: -99999;
|
|
}
|
|
</style>
|