修改二维码模板

pages/my/order/electronicTicket/electronicTicket.vue

@@ -38,7 +38,11 @@
 					</view>
 					<view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5">
 							<view class="box-verificationCode">验证码：{{ticketCode}}</view>
-							<canvas class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" canvas-id="qrcode"/>
+							<!-- <canvas class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" canvas-id="qrcode"/> -->
+							<!--显示图片用的标签-->
+							<image class="code_view" :src="imagePath" v-if="codeViewType" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'"></image>
+							<!--创建一个画布-->
+							<canvas class="canvas-code box-QRcode2" canvas-id="myQrcode" style="background:#fff;" />
 							<view v-if="howtip==true||showUseRule==true" style="width: 180px; height: 180px;"></view>
 							<view class="progress-box" v-if="qrCodeType==true">
 									<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
@@ -365,6 +369,7 @@
 
 <script>
 import uQRCode from '@/common/js/uqrcode.js'
+import QRCode from '@/common/weapp-qrcode.js'
 import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
 export default {
   components: {
@@ -528,6 +533,8 @@ export default {
   },
   data() {
     return {
+      imagePath: '',
+      codeViewType:true,
       orderDataType:false,
       openId:'',//用户信息
       id:'',//订单ID
@@ -851,27 +858,41 @@ export default {
     },
     qecode(){//生成二维码
       if(this.verifyCode){
-        // let qrcode = new QRCode('qrcode',{
-        // 	width: 180,
-        // 	height: 180,
-        // 	text:this.verifyCode
-        // })
         let verifyCode=''
         if(this.visitorIndex!=''&&typeof this.visitorIndex!=undefined){
           verifyCode=this.verifyCode+':'+this.visitorIndex
         }else{
           verifyCode=this.verifyCode
         }
-        uQRCode.make({
-          canvasId: 'qrcode',
-          componentInstance: this,
+        // uQRCode.make({
+        //   canvasId: 'qrcode',
+        //   componentInstance: this,
+        //   text: verifyCode,
+        //   size: 180,
+        //   margin: 10,
+        //   backgroundColor: '#ffffff',
+        //   foregroundColor: '#000000',
+        //   fileType: 'jpg',
+        //   errorCorrectLevel: uQRCode.errorCorrectLevel.H
+        // })
+        var that = this
+        new QRCode('myQrcode', {
           text: verifyCode,
-          size: 180,
-          margin: 10,
-          backgroundColor: '#ffffff',
-          foregroundColor: '#000000',
-          fileType: 'jpg',
-          errorCorrectLevel: uQRCode.errorCorrectLevel.H
+          width: 180, //canvas 画布的宽
+          height: 180, //canvas 画布的高
+          padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
+          correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
+          colorDark: '#000000',//分别为两种交替颜色
+          colorLight: 'white',
+          callback: (res) => {
+            //工具回调数据
+            wx.hideLoading()
+            console.log('生成二维码', res)
+            //将图片路劲放入data中，显示在wxml的image标签上
+            that.codeViewType=false
+            that.imagePath=res.path
+            that.codeViewType=true
+          }
         })
       }
     },
@@ -904,25 +925,36 @@ export default {
         this.dynamicCode()
       } else if( code.code!=this.codeNo ){
         this.codeNo = code.code
-        // if(document.querySelector('#qrcode img')){//移除子元素
-        // 	document.querySelector('#qrcode img').remove()
-        // 	document.querySelector('#qrcode canvas').remove()
-        // }
-        // let qrcode = new QRCode('qrcode',{//进入先获取二维码
-        // 	width: 180,
-        // 	height: 180,
-        // 	text:this.codeNo
+        
+        // uQRCode.make({
+        //   canvasId: 'qrcode',
+        //   componentInstance: this,
+        //   text: this.codeNo,
+        //   size: 180,
+        //   margin: 10,
+        //   backgroundColor: '#ffffff',
+        //   foregroundColor: '#000000',
+        //   fileType: 'jpg',
+        //   errorCorrectLevel: uQRCode.errorCorrectLevel.H
         // })
-        uQRCode.make({
-          canvasId: 'qrcode',
-          componentInstance: this,
-          text: this.codeNo,
-          size: 180,
-          margin: 10,
-          backgroundColor: '#ffffff',
-          foregroundColor: '#000000',
-          fileType: 'jpg',
-          errorCorrectLevel: uQRCode.errorCorrectLevel.H
+        var that = this
+        new QRCode('myQrcode', {
+				  text: this.codeNo,
+				  width: 180, //canvas 画布的宽
+				  height: 180, //canvas 画布的高
+				  padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
+				  correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
+				  colorDark: '#000000',//分别为两种交替颜色
+				  colorLight: 'white',
+				  callback: (res) => {
+				    //工具回调数据
+				    wx.hideLoading()
+				    console.log('生成二维码', res)
+				    //将图片路劲放入data中，显示在wxml的image标签上
+				    that.codeViewType=false
+            that.imagePath=res.path
+            that.codeViewType=true
+				  }
         })
       }
       this.percentage+=1
@@ -1352,9 +1384,18 @@ export default {
 		margin: 0 auto;
 	}
 	.order-certificate .certificate-box .box-QRcode2{
+		display: block;
+		width: 180px;
+		height: 180px;
 		position: fixed;
 		top: -500rpx;
 	}
+	.order-certificate .certificate-box .code_view{
+		display: block;
+		width: 180px;
+		height: 180px;
+		margin: 0 auto;
+	}
 
 	.order-certificate .certificate-box .progress-box {
 		width: 180px;