215 lines
12 KiB
Vue
215 lines
12 KiB
Vue
<!--
|
||
Based on tki-qrcode 组件： https://github.com/q310550690/uni-app-qrcode , https://ext.dcloud.net.cn/plugin?id=39
|
||
// 另一个app里二维码解决方案，但要手动调用生成函数: https://github.com/alei817927/qrcode
|
||
// 另一个h5里二维码解决方案：import VueQriously from 'vue-qriously'; Vue.use(VueQriously)
|
||
-->
|
||
<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>
|
||
import QRCode from "./qrcode.js"
|
||
let qrcode
|
||
export default {
|
||
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>
|