|
|
@@ -1,210 +0,0 @@
|
|
|
-<template xlang="wxml" minapp="mpvue">
|
|
|
- <view class="tki-qrcode">
|
|
|
- <!-- #ifndef MP-ALIPAY -->
|
|
|
- <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
|
|
- <!-- #endif -->
|
|
|
- <!-- #ifdef MP-ALIPAY -->
|
|
|
- <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-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 {
|
|
|
- name: "tki-qrcode",
|
|
|
- props: {
|
|
|
- cid: {
|
|
|
- type: String,
|
|
|
- default: 'tki-qrcode-canvas'
|
|
|
- },
|
|
|
- size: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
- },
|
|
|
- unit: {
|
|
|
- type: String,
|
|
|
- default: 'upx'
|
|
|
- },
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- 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,
|
|
|
- default: 40
|
|
|
- },
|
|
|
- lv: {
|
|
|
- type: Number,
|
|
|
- default: 3
|
|
|
- },
|
|
|
- onval: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- loadMake: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- usingComponents: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- showLoading: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- loadingText: {
|
|
|
- type: String,
|
|
|
- default: '二维码生成中'
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- result: '',
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- _makeCode() {
|
|
|
- let that = this
|
|
|
- if (!this._empty(this.val)) {
|
|
|
- qrcode = new QRCode({
|
|
|
- context: that, // 上下文环境
|
|
|
- canvasId:that.cid, // canvas-id
|
|
|
- usingComponents: that.usingComponents, // 是否是自定义组件
|
|
|
- showLoading: that.showLoading, // 是否显示loading
|
|
|
- loadingText: that.loadingText, // loading文字
|
|
|
- text: that.val, // 生成内容
|
|
|
- size: that.cpSize, // 二维码大小
|
|
|
- background: that.background, // 背景色
|
|
|
- foreground: that.foreground, // 前景色
|
|
|
- pdground: that.pdground, // 定位角点颜色
|
|
|
- correctLevel: that.lv, // 容错级别
|
|
|
- image: that.icon, // 二维码图标
|
|
|
- imageSize: 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) {
|
|
|
- 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) {
|
|
|
- if (!this._empty(this.val)) {
|
|
|
- setTimeout(() => {
|
|
|
- this._makeCode()
|
|
|
- }, 0);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style>
|
|
|
-.tki-qrcode {
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.tki-qrcode-canvas {
|
|
|
- position: fixed;
|
|
|
- top: -99999upx;
|
|
|
- left: -99999upx;
|
|
|
- z-index: -99999;
|
|
|
-}
|
|
|
-</style>
|
