Skip to content

U
uni-pdtravel
Commit 0d6da221 authored by qipeng's avatar qipeng
Browse files
Options

新二维码代码

parent 102f1a73
Show whitespace changes
Inline Side-by-side
Showing with 103 additions and 69 deletions
pages/my/order/electronicTicket/electronicTicket-副本.vue
View file @ 0d6da221
...@@ -47,7 +47,12 @@ ...@@ -47,7 +47,12 @@
</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>
<!--#ifdef MP-WEIXIN-->
<canvas class="box-QRcode" canvas-id="qrcode"/> <canvas class="box-QRcode" canvas-id="qrcode"/>
<!--#endif-->
<!--#ifdef MP-ALIPAY-->
<uqrcode ref="uqrcode" canvas-id="qrcode" class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode>
<!--#endif-->
<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" />
</view> </view>
...@@ -343,7 +348,13 @@ ...@@ -343,7 +348,13 @@
</template> </template>
<script> <script>
import uQRCode from '@/common/js/uqrcode.js' //#ifdef MP-WEIXIN
import uQRCodeS from '@/common/js/uqrcode.js'
//#endif
//#ifdef MP-ALIPAY
import uQRCode from '@/common/uqrcode4.js'
//#endif
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: {
...@@ -507,6 +518,7 @@ export default { ...@@ -507,6 +518,7 @@ export default {
}, },
data() { data() {
return { return {
uqrcodeVal:'',
orderDataType:false, orderDataType:false,
openId:'',//用户信息 openId:'',//用户信息
id:'',//订单ID id:'',//订单ID
...@@ -843,7 +855,8 @@ export default { ...@@ -843,7 +855,8 @@ export default {
}else{ }else{
verifyCode=this.verifyCode verifyCode=this.verifyCode
} }
uQRCode.make({ //#ifdef MP-WEIXIN
uQRCodeS.make({
canvasId: 'qrcode', canvasId: 'qrcode',
componentInstance: this, componentInstance: this,
text: verifyCode, text: verifyCode,
...@@ -852,8 +865,13 @@ export default { ...@@ -852,8 +865,13 @@ export default {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
foregroundColor: '#000000', foregroundColor: '#000000',
fileType: 'jpg', fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H errorCorrectLevel: uQRCodeS.errorCorrectLevel.H
}) })
//#endif
//#ifdef MP-ALIPAY
this.uqrcodeVal=verifyCode
//#endif
} }
}, },
signOverFun(item){//过号遮罩显示 signOverFun(item){//过号遮罩显示
...@@ -894,7 +912,9 @@ export default { ...@@ -894,7 +912,9 @@ export default {
// height: 180, // height: 180,
// text:this.codeNo // text:this.codeNo
// }) // })
uQRCode.make({
//#ifdef MP-WEIXIN
uQRCodeS.make({
canvasId: 'qrcode', canvasId: 'qrcode',
componentInstance: this, componentInstance: this,
text: this.codeNo, text: this.codeNo,
...@@ -903,8 +923,13 @@ export default { ...@@ -903,8 +923,13 @@ export default {
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
foregroundColor: '#000000', foregroundColor: '#000000',
fileType: 'jpg', fileType: 'jpg',
errorCorrectLevel: uQRCode.errorCorrectLevel.H errorCorrectLevel: uQRCodeS.errorCorrectLevel.H
}) })
//#endif
//#ifdef MP-ALIPAY
this.uqrcodeVal=this.codeNo
//#endif
} }
this.percentage+=1 this.percentage+=1
if(this.percentage>=100){ if(this.percentage>=100){
...@@ -1336,6 +1361,15 @@ export default { ...@@ -1336,6 +1361,15 @@ export default {
height: 180px; height: 180px;
margin: 0 auto; margin: 0 auto;
} }
//#ifdef MP-ALIPAY
/deep/ .uqrcode-canvas-wrapper,/deep/ .uqrcode{
margin: 0 auto;
position: relative;
}
/deep/ .uqrcode-canvas{
transform:(1,1)
}
//#endif
.order-certificate .certificate-box .box-QRcode2{ .order-certificate .certificate-box .box-QRcode2{
position: fixed; position: fixed;
top: -500rpx; top: -500rpx;
......
pages/my/order/electronicTicket/electronicTicket.vue
View file @ 0d6da221
...@@ -47,12 +47,11 @@ ...@@ -47,12 +47,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>
<!--#ifdef MP-WEIXIN--> <!-- <uqrcode ref="uqrcode" canvas-id="qrcode" size="200" class="box-QRcode" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode> -->
<canvas class="box-QRcode" canvas-id="qrcode"/> <!--后端生成-->
<!--#endif--> <!-- <image :src="imgUrlList" style="width: 180px;height: 180px;margin: 0 auto;display: block;" v-if="imgUrlListType"></image> -->
<!--#ifdef MP-ALIPAY--> <!--显示图片用的标签-->
<uqrcode ref="uqrcode" canvas-id="qrcode" class="box-QRcode" :class="showtip==false&&showUseRule==false?'':'box-QRcode2'" :value="uqrcodeVal" :options="{ margin: 10 }" ></uqrcode> <image class="code_view" :src="imagePath"></image>
<!--#endif-->
<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" />
</view> </view>
...@@ -145,7 +144,7 @@ ...@@ -145,7 +144,7 @@
</view> </view>
<view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1"> <view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">我的排号：</view> <view class="rowNumber-signOver">我的排号：</view>
<view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;flex-shrink:0;">({{item.projectName}})</text></view> <view class="list-value">{{item.sortNo}}<text style="font-size: 28rpx;margin-left: 8rpx;line-height: 56rpx;flex-shrink: 0;">({{item.projectName}})</text></view>
</view> </view>
<view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1"> <view class="rowNumber-list rowNumber-list2" v-if="item.config.paPassedNumEnable==1">
<view class="rowNumber-signOver">您排队号已过</view> <view class="rowNumber-signOver">您排队号已过</view>
...@@ -348,13 +347,8 @@ ...@@ -348,13 +347,8 @@
</template> </template>
<script> <script>
//#ifdef MP-WEIXIN // import uQRCode from '@/common/uqrcode4.js'
import uQRCodeS from '@/common/js/uqrcode.js' import QRCode from '@/common/weapp-qrcode.js'
//#endif
//#ifdef MP-ALIPAY
import uQRCode from '@/common/uqrcode4.js'
//#endif
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: {
...@@ -556,6 +550,10 @@ export default { ...@@ -556,6 +550,10 @@ export default {
photoType:false,//是否显示优惠券 photoType:false,//是否显示优惠券
claimStatus:1,//领取状态 0未领取 1已领取 claimStatus:1,//领取状态 0未领取 1已领取
findCouponPhoto:{},//相册优惠券 findCouponPhoto:{},//相册优惠券
imgUrlList:'',
imgUrlListType:false,
imagePath:'',//图片接受地址
imgTypeShow:true,//是否展示图片
} }
}, },
onShow() { onShow() {
...@@ -855,25 +853,34 @@ export default { ...@@ -855,25 +853,34 @@ export default {
}else{ }else{
verifyCode=this.verifyCode verifyCode=this.verifyCode
} }
//#ifdef MP-WEIXIN // uQRCode.make({
uQRCodeS.make({ // canvasId: 'qrcode',
canvasId: 'qrcode', // componentInstance: this,
componentInstance: this, // text: verifyCode,
text: verifyCode, // size: 180,
size: 180, // margin: 10,
margin: 10, // backgroundColor: '#ffffff',
backgroundColor: '#ffffff', // foregroundColor: '#000000',
foregroundColor: '#000000', // fileType: 'jpg',
fileType: 'jpg', // errorCorrectLevel: uQRCode.errorCorrectLevel.H
errorCorrectLevel: uQRCodeS.errorCorrectLevel.H // })
}) // this.uqrcodeVal=verifyCode
//#endif //后端生成
// var verifyCodeURL = encodeURI(verifyCode)
//#ifdef MP-ALIPAY // this.imgUrlList = 'http://pay.tuyoyoo.com/distribution/c/'+verifyCodeURL+'?width=180&height=180&frontColor=0&backColor=16777215'
this.uqrcodeVal=verifyCode // this.imgUrlListType = true
//#endif this.createCode(verifyCode)
} }
}, },
createCode(showCode) {//创建二维码
var imgData = QRCode.drawImg(showCode, {
typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
size: 180
})
console.log(imgData)
this.imagePath = imgData
},
signOverFun(item){//过号遮罩显示 signOverFun(item){//过号遮罩显示
this.overSignedData = {} this.overSignedData = {}
this.overSignedData = item this.overSignedData = item
...@@ -912,24 +919,24 @@ export default { ...@@ -912,24 +919,24 @@ export default {
// height: 180, // height: 180,
// text:this.codeNo // text:this.codeNo
// }) // })
// uQRCode.make({
//#ifdef MP-WEIXIN // canvasId: 'qrcode',
uQRCodeS.make({ // componentInstance: this,
canvasId: 'qrcode', // text: this.codeNo,
componentInstance: this, // size: 180,
text: this.codeNo, // margin: 10,
size: 180, // backgroundColor: '#ffffff',
margin: 10, // foregroundColor: '#000000',
backgroundColor: '#ffffff', // fileType: 'jpg',
foregroundColor: '#000000', // errorCorrectLevel: uQRCode.errorCorrectLevel.H
fileType: 'jpg', // })
errorCorrectLevel: uQRCodeS.errorCorrectLevel.H // this.uqrcodeVal=this.codeNo
}) //后端生成
//#endif // this.imgUrlListType = false
// var verifyCodeURL = 'http://pay.tuyoyoo.com/distribution/c/'+this.codeNo+'?width=180&height=180&frontColor=0&backColor=16777215'
//#ifdef MP-ALIPAY // this.imgUrlList = encodeURI(verifyCodeURL)
this.uqrcodeVal=this.codeNo // this.imgUrlListType = true
//#endif this.createCode(this.codeNo)
} }
this.percentage+=1 this.percentage+=1
if(this.percentage>=100){ if(this.percentage>=100){
...@@ -1325,7 +1332,6 @@ export default { ...@@ -1325,7 +1332,6 @@ export default {
line-height: 56rpx; line-height: 56rpx;
font-weight: bold; font-weight: bold;
margin-right: 40rpx; margin-right: 40rpx;
flex-shrink:0;
} }
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value, .order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value,
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value2, .order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value2,
...@@ -1333,9 +1339,6 @@ export default { ...@@ -1333,9 +1339,6 @@ export default {
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value3{ .order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value3{
color:#fff; color:#fff;
} }
.order-queueUp .queueUp-rowNumber3 .rowNumber-list .list-value{
flex-shrink:0;
}
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum, .order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum,
.order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum2{ .order-queueUp .queueUp-rowNumber3 .rowNumber-takeNum2{
background-color: #fff; background-color: #fff;
...@@ -1357,19 +1360,10 @@ export default { ...@@ -1357,19 +1360,10 @@ export default {
.order-certificate .certificate-box .box-QRcode { .order-certificate .certificate-box .box-QRcode {
display: block; display: block;
width: 180px; width: 200px;
height: 180px; height: 200px;
margin: 0 auto;
}
//#ifdef MP-ALIPAY
/deep/ .uqrcode-canvas-wrapper,/deep/ .uqrcode{
margin: 0 auto; margin: 0 auto;
position: relative;
}
/deep/ .uqrcode-canvas{
transform:(1,1)
} }
//#endif
.order-certificate .certificate-box .box-QRcode2{ .order-certificate .certificate-box .box-QRcode2{
position: fixed; position: fixed;
top: -500rpx; top: -500rpx;
...@@ -1601,4 +1595,10 @@ export default { ...@@ -1601,4 +1595,10 @@ export default {
} }
} }
} }
.code_view{
display: block;
width: 180px;
height: 180px;
margin: 0 auto;
}
</style> </style>
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