-

zhangwei

2025-03-05 16213c0f85aa3ac8317797bf4a05fd12940e16d3

 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>