123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260 |
- <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 @click="openIMG" 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: 1
- },
- 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: {
- openIMG(){
- uni.previewImage({
- urls:[this.result]
- })
- },
- _makeCode() {
- console.log(this.cpSize,this.val,"that.cpSize");
- 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() {
- // this.$emit('')
- let that = this;
- if (this.result != "") {
- // this.$emit('saveCode', that.result)
- uni.saveImageToPhotosAlbum({
- filePath: that.result,
- success: function () {
- uni.showToast({
- title: '二维码保存成功',
- icon: 'success',
- duration: 2000
- });
- },
- fail:(err)=>{
- console.log(err,"err")
- if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" ||
- err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
- "saveImageToPhotosAlbum:fail authorize no response") {
- // 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
- uni.showModal({
- title: '提示',
- content: '需要您设置授权保存相册',
- showCancel: false,
- success: modalSuccess => {
- uni.openSetting({
- success(settingdata) {
- console.log("settingdata", settingdata)
- if (settingdata.authSetting[
- 'scope.writePhotosAlbum']) {
- uni.showModal({
- title: '提示',
- content: '获取权限成功,再次点击图片即可保存',
- showCancel: false,
- })
- } else {
- uni.showModal({
- title: '提示',
- content: '获取权限失败,将无法保存到相册哦~',
- showCancel: false,
- })
- }
- },
- fail(failData) {
- console.log("failData", failData)
- },
- complete(finishData) {
- console.log("finishData", finishData)
- }
- })
-
- }
- })
- }
- }
- });
- }
- },
- _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>
|