| | |
| | | <view class="pickup-card"> |
| | | <text class="pickup-title">核销码</text> |
| | | <view class="qrcode-box"> |
| | | <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas" :style="'width: '+width+'px; height:'+height+'px;'"></canvas> |
| | | <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image> |
| | | <canvas v-if="!qrcodeImage" canvas-id="qrcodeCanvas" id="qrcodeCanvas" :style="'width: '+width+'px; height:'+height+'px;'+'opacity: 0;'"></canvas> |
| | | <image v-else class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image> |
| | | </view> |
| | | <text class="pickup-code">{{ orderDetail.memberVerifyCode }}</text> |
| | | <text class="pickup-tip" @tap="copyCode">点击复制核销码</text> |
| | |
| | | data() { |
| | | |
| | | return { |
| | | height:100, |
| | | width:100, |
| | | height:180, |
| | | width:180, |
| | | orderId: '', |
| | | orderDetail: null, |
| | | qrcodeImage: '' |
| | |
| | | return rpx * wx.getSystemInfoSync().windowWidth / 750 |
| | | }, |
| | | generateQrcode(code) { |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | text: code, |
| | | width: this.width, |
| | | height: this.height, |
| | | correctLevel: 2 |
| | | }) |
| | | this.$nextTick(() => { |
| | | uni.canvasToTempFilePath({ |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | success: (res) => { |
| | | this.qrcodeImage = res.tempFilePath |
| | | } |
| | | }, this) |
| | | text: code, |
| | | width: this.width, |
| | | height: this.height, |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | canvasId: 'qrcodeCanvas', |
| | | x: 0, |
| | | y: 0, |
| | | width: this.width, |
| | | height: this.height, |
| | | destWidth: this.width, |
| | | destHeight: this.height, |
| | | success: (res) => { |
| | | this.qrcodeImage = res.tempFilePath |
| | | }, |
| | | fail: (err) => { |
| | | console.error('生成二维码图片失败:', err) |
| | | // 如果失败,使用 canvas 直接显示 |
| | | this.qrcodeImage = '' |
| | | } |
| | | }, this) |
| | | }, 300) |
| | | }) |
| | | }, |
| | | goHome() { |
| | |
| | | height: 360rpx; |
| | | border-radius: 8rpx; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | overflow: hidden; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | canvas { |
| | | position: fixed; |
| | | top: -100%; |
| | | left: -100%; |
| | | opacity: 0; |
| | | width: 200px; |
| | | height: 200px; |
| | | } |
| | | } |
| | | |