Skip to content

U
uni-pdtravel
Commit 6b6e686b authored by qipeng's avatar qipeng
Browse files
Options

修改二维码模板

parent 394cc99d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 500 additions and 33 deletions
common/weapp-qrcode.js 0 → 100644
View file @ 6b6e686b
This diff is collapsed.
pages/my/order/electronicTicket/electronicTicket.vue
View file @ 6b6e686b
...@@ -38,7 +38,11 @@ ...@@ -38,7 +38,11 @@
</view> </view>
<view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5"> <view class="certificate-box" v-else-if="orderInfo.exchangeMode==1||orderInfo.exchangeMode==4||orderInfo.exchangeMode==5">
<view class="box-verificationCode">验证码：{{ticketCode}}</view> <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 v-if="howtip==true||showUseRule==true" style="width: 180px; height: 180px;"></view>
<view class="progress-box" v-if="qrCodeType==true"> <view class="progress-box" v-if="qrCodeType==true">
<progress :percent="percentage" activeColor="#3688FF" stroke-width="3" /> <progress :percent="percentage" activeColor="#3688FF" stroke-width="3" />
...@@ -365,6 +369,7 @@ ...@@ -365,6 +369,7 @@
<script> <script>
import uQRCode from '@/common/js/uqrcode.js' 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' import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
export default { export default {
components: { components: {
...@@ -528,6 +533,8 @@ export default { ...@@ -528,6 +533,8 @@ export default {
}, },
data() { data() {
return { return {
imagePath: '',
codeViewType:true,
orderDataType:false, orderDataType:false,
openId:'',//用户信息 openId:'',//用户信息
id:'',//订单ID id:'',//订单ID
...@@ -851,27 +858,41 @@ export default { ...@@ -851,27 +858,41 @@ export default {
}, },
qecode(){//生成二维码 qecode(){//生成二维码
if(this.verifyCode){ if(this.verifyCode){
// let qrcode = new QRCode('qrcode',{
// width: 180,
// height: 180,
// text:this.verifyCode
// })
let verifyCode='' let verifyCode=''
if(this.visitorIndex!=''&&typeof this.visitorIndex!=undefined){ if(this.visitorIndex!=''&&typeof this.visitorIndex!=undefined){
verifyCode=this.verifyCode+':'+this.visitorIndex verifyCode=this.verifyCode+':'+this.visitorIndex
}else{ }else{
verifyCode=this.verifyCode verifyCode=this.verifyCode
} }
uQRCode.make({ // uQRCode.make({
canvasId: 'qrcode', // canvasId: 'qrcode',
componentInstance: this, // 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, text: verifyCode,
size: 180, width: 180, //canvas 画布的宽
margin: 10, height: 180, //canvas 画布的高
backgroundColor: '#ffffff', padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
foregroundColor: '#000000', correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
fileType: 'jpg', colorDark: '#000000',//分别为两种交替颜色
errorCorrectLevel: uQRCode.errorCorrectLevel.H 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 { ...@@ -904,25 +925,36 @@ export default {
this.dynamicCode() this.dynamicCode()
} else if( code.code!=this.codeNo ){ } else if( code.code!=this.codeNo ){
this.codeNo = code.code this.codeNo = code.code
// if(document.querySelector('#qrcode img')){//移除子元素
// document.querySelector('#qrcode img').remove() // uQRCode.make({
// document.querySelector('#qrcode canvas').remove() // canvasId: 'qrcode',
// } // componentInstance: this,
// let qrcode = new QRCode('qrcode',{//进入先获取二维码 // text: this.codeNo,
// width: 180, // size: 180,
// height: 180, // margin: 10,
// text:this.codeNo // backgroundColor: '#ffffff',
// foregroundColor: '#000000',
// fileType: 'jpg',
// errorCorrectLevel: uQRCode.errorCorrectLevel.H
// }) // })
uQRCode.make({ var that = this
canvasId: 'qrcode', new QRCode('myQrcode', {
componentInstance: this, text: this.codeNo,
text: this.codeNo, width: 180, //canvas 画布的宽
size: 180, height: 180, //canvas 画布的高
margin: 10, padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
backgroundColor: '#ffffff', correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
foregroundColor: '#000000', colorDark: '#000000',//分别为两种交替颜色
fileType: 'jpg', colorLight: 'white',
errorCorrectLevel: uQRCode.errorCorrectLevel.H callback: (res) => {
//工具回调数据
wx.hideLoading()
console.log('生成二维码', res)
//将图片路劲放入data中，显示在wxml的image标签上
that.codeViewType=false
that.imagePath=res.path
that.codeViewType=true
}
}) })
} }
this.percentage+=1 this.percentage+=1
...@@ -1352,9 +1384,18 @@ export default { ...@@ -1352,9 +1384,18 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.order-certificate .certificate-box .box-QRcode2{ .order-certificate .certificate-box .box-QRcode2{
display: block;
width: 180px;
height: 180px;
position: fixed; position: fixed;
top: -500rpx; top: -500rpx;
} }
.order-certificate .certificate-box .code_view{
display: block;
width: 180px;
height: 180px;
margin: 0 auto;
}
.order-certificate .certificate-box .progress-box { .order-certificate .certificate-box .progress-box {
width: 180px; width: 180px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment