ChuangHengWx/pages/support.vue

<template>
	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='专业支持'></cus-header>
		<image style="width: 100%;" :src="imgBase+'support.png'" mode="widthFix" @click="handleTurn"></image>
		<div class="code" :style="{'top':(mt*2+1278)+'rpx'}">
			<canvas canvas-id="qrcode" style="width:216rpx;height:216rpx;border-radius: 16rpx; position: fixed;left: -9999px;top: -9999px;"></canvas>
			<image v-if="qrCodeDataURL" :src="qrCodeDataURL" mode="scaleToFill" show-menu-by-longpress></image>
		</div>
	</view>
</template>

<script>
	import UQrcode from '@/uqrcode.js'
	export default {
		data(){
			return {
				imgBase:this.$imgBase,
				qrCodeDataURL:'',
				qrVal:'https://wxapp.transcend-intl.cn',
			}
		},
		onLoad() {
			this.generateQRCode();
			if(uni.getStorageSync('userInfo')){
				this.qrVal = `https://wxapp.transcend-intl.cn?shareUserId=${JSON.parse(uni.getStorageSync('userInfo'))?.id||''}`;
			}
		},
		methods:{
			handleTurn(){
				uni.navigateTo({
					url:'/pages/webView?src=https://appyf7rnhyg7811.h5.xiaoeknow.com'
				})
			},
			async generateQRCode(){
				try {
					let that = this;
					// 确保DOM已经更新，canvas元素已准备好
					this.$nextTick(() => { 
						UQrcode.make({
							canvasId: 'qrcode',
							componentInstance: this,
							text: that.qrVal,
							size: 103, // 对应 216rpx 的物理像素大小
							margin: 5,
							backgroundColor: '#ffffff',
							foregroundColor: '#000000',
							fileType: 'png',
							errorCorrectLevel: UQrcode.errorCorrectLevel.H,
							success: res => {
								uni.canvasToTempFilePath({
									canvasId: 'qrcode', 
									fileType: 'png', 
									quality: 1, 
									success: (canvasRes) => {
										that.qrCodeDataURL = canvasRes.tempFilePath; 
									},
									fail: (err) => {
										that.qrCodeDataURL = res; 
									}
								}, this);
							}
						});
					});
				} catch { }
			},
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		position: relative;
	}
	.code{
		width: 216rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: absolute;
		left: 50%;
		margin-left: -108rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 18rpx;
		}
	}
</style>