From 16213c0f85aa3ac8317797bf4a05fd12940e16d3 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期三, 05 三月 2025 17:29:42 +0800
Subject: [PATCH] -
---
src/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue | 149 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 127 insertions(+), 22 deletions(-)
diff --git a/src/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue b/src/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue
index 802a6de..dc9574b 100644
--- a/src/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue
+++ b/src/uni_modules/uview-plus/components/u-qrcode/u-qrcode.vue
@@ -1,12 +1,36 @@
<template>
- <view class="u-qrcode">
- <canvas class="u-qrcode__canvas" :id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
- <image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" />
+ <view class="u-qrcode" @longpress="longpress">
+ <view class="u-qrcode__content" @click="preview">
+ <!-- #ifndef APP-NVUE -->
+ <canvas class="u-qrcode__canvas"
+ :id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
+ <!-- #endif -->
+ <!-- #ifdef APP-NVUE -->
+ <gcanvas class="u-qrcode__canvas" ref="gcanvess"
+ :style="{ width: size + unit, height: size + unit }">
+ </gcanvas>
+ <!-- #endif -->
+ <view v-if="showLoading && loading" class="u-qrcode__loading"
+ :style="{ width: size + unit, height: size + unit }">
+ <up-loading-icon vertical :text="loadingText" textSize="14px"></up-loading-icon>
+ </view>
+ <!-- <image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" /> -->
+ </view>
+ <!-- <up-action-sheet :actions="list" cancelText="鍙栨秷"
+ v-model:show="popupShow" @select="selectClick">
+ </up-action-sheet> -->
</view>
</template>
<script>
import QRCode from "./qrcode.js"
+// #ifdef APP-NVUE
+// https://github.com/dcloudio/NvueCanvasDemo/blob/master/README.md
+import {
+ enable,
+ WeexBridge
+} from '../../libs/util/gcanvas/index.js';
+// #endif
let qrcode
export default {
name: "u-qrcode",
@@ -73,23 +97,62 @@
},
loadingText: {
type: String,
- default: '浜岀淮鐮佺敓鎴愪腑'
+ default: '鐢熸垚涓�'
+ },
+ allowPreview: {
+ type: Boolean,
+ default: false
},
},
+ emits: ['result', 'longpress'],
data() {
return {
+ loading: false,
result: '',
+ popupShow: false,
+ list: [
+ {
+ name: '淇濆瓨浜岀淮鐮�',
+ }
+ ],
+ ganvas: null,
+ context: '',
+ canvasObj: {}
+ }
+ },
+ mounted: function () {
+ // #ifdef APP-NVUE
+ /*鑾峰彇鍏冪礌寮曠敤*/
+ this.ganvas = this.$refs["gcanvess"]
+ /*閫氳繃鍏冪礌寮曠敤鑾峰彇canvas瀵硅薄*/
+ this.canvasObj = enable(this.ganvas, {
+ bridge: WeexBridge
+ })
+ /*鑾峰彇缁樺浘鎵�闇�鐨勪笂涓嬫枃锛岀洰鍓嶄笉鏀寔3d*/
+ this.context = this.canvasObj.getContext('2d')
+ // #endif
+
+ if (this.loadMake) {
+ if (!this._empty(this.val)) {
+ setTimeout(() => {
+ this._makeCode()
+ }, 0);
+ }
}
},
methods: {
_makeCode() {
let that = this
if (!this._empty(this.val)) {
+ // #ifndef APP-NVUE
+ this.loading = true
+ // #endif
qrcode = new QRCode({
context: that, // 涓婁笅鏂囩幆澧�
canvasId: that.cid, // canvas-id
+ nvueContext: that.context,
usingComponents: that.usingComponents, // 鏄惁鏄嚜瀹氫箟缁勪欢
- showLoading: that.showLoading, // 鏄惁鏄剧ずloading
+ showLoading: false, // 鏄惁鏄剧ずloading
loadingText: that.loadingText, // loading鏂囧瓧
text: that.val, // 鐢熸垚鍐呭
size: that.size, // 浜岀淮鐮佸ぇ灏�
@@ -130,9 +193,47 @@
});
}
},
+ preview(e) {
+ // 棰勮鍥剧墖
+ // console.log(this.result)
+ if (this.allowPreview) {
+ uni.previewImage({
+ urls: [this.result],
+ longPressActions: {
+ itemList: ['淇濆瓨浜岀淮鐮佸浘鐗�'],
+ success: function(data) {
+ // console.log('閫変腑浜嗙' + (data.tapIndex + 1) + '涓寜閽�,绗�' + (data.index + 1) + '寮犲浘鐗�');
+ switch (data.tapIndex) {
+ case 0:
+ that._saveCode();
+ break;
+ }
+ },
+ fail: function(err) {
+ console.log(err.errMsg);
+ }
+ }
+ });
+ }
+ this.$emit('preview', {
+ url: this.result
+ }, e)
+ },
+ longpress() {
+ this.$emit('longpress', this.result)
+ },
+ selectClick(index) {
+ switch (index) {
+ case 0:
+ alert('淇濆瓨浜岀淮鐮�')
+ this._saveCode();
+ break;
+ }
+ },
_result(res) {
+ this.loading = false;
this.result = res;
- this.$emit('result', res)
+ this.$emit('result', res);
},
_empty(v) {
let tp = typeof v,
@@ -173,27 +274,31 @@
}
},
computed: {
- },
- mounted: function () {
- if (this.loadMake) {
- if (!this._empty(this.val)) {
- setTimeout(() => {
- this._makeCode()
- }, 0);
- }
- }
- },
+ }
}
</script>
<style lang="scss" scoped>
.u-qrcode {
- position: relative;
+ &__loading {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f7f7f7;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ &__content {
+ position: relative;
- &__canvas {
- position: fixed;
- top: -99999rpx;
- left: -99999rpx;
- z-index: -99999;
+ &__canvas {
+ position: fixed;
+ top: -99999rpx;
+ left: -99999rpx;
+ z-index: -99999;
+ }
}
}
</style>
--
Gitblit v1.9.1