ChuangHengWx/pagesMy/forward.vue

<template>
	<view class="default_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='转发推荐'></cus-header>
		<div class="all adffc">
			<div class="box adffcac">
				<div class="box-code adffcac">
					<div class="box-code-ewm">
						<canvas canvas-id="qrcode" style="width:274rpx;height:274rpx; position: fixed;left: -9999px;top: -9999px;"></canvas>
						<image v-if="qrCodeDataURL" :src="qrCodeDataURL" mode="scaleToFill" show-menu-by-longpress></image>
					</div>
				</div>
				<div class="box-code-tip">扫码立即体验</div>
				<button class="share-btn" open-type="share">
					<image :src="imgBase+'btn_share.png'"></image>
				</button>
			</div>
		</div>
	</view>
</template>

<script>
	import { BaseApi } from '@/http/baseApi.js'
	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:{
			onShareAppMessage(res) {
				const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id||'';
				return {
				  title: '致力于帮助企业打造高价值创造团队',
				  path: `/pages/home?shareUserId=${sharerId}&shareType=Forward`,
				};
			},
			async generateQRCode(){
				try {
					let that = this;
					const canvasSizePx = uni.upx2px(266);
					// 确保DOM已经更新，canvas元素已准备好
					this.$nextTick(() => { 
						UQrcode.make({
							canvasId: 'qrcode',
							componentInstance: this,
							text: that.qrVal,
							size: canvasSizePx, // 对应 266rpx 的物理像素大小
							margin: 0,
							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">
	.share-btn {
		width: 226rpx;
		height: 56rpx;
		background: linear-gradient( 180deg, #CFD9A4 0%, #029292 100%);
		border-radius: 28rpx;
		border: none;
		padding: 0;
		margin: 0;
		margin-top: 46rpx;
		line-height: inherit;
		&::after {
			border: none;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.default_page{
		box-sizing: border-box;
		.all{
			width: 100%;
			flex: 1;
			padding: 0 30rpx 62rpx;
			box-sizing: border-box;
			justify-content: flex-end;
			background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/forward_bg.png') no-repeat;
			background-size: 100% 100%;
		}
		
		.box{
			width: 100%;
			background: rgba(255,255,255,0.14);
			border-radius: 16rpx;
			padding: 36rpx 172rpx;
			box-sizing: border-box;
			&-code{
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 27rpx 40rpx;
				&-ewm{
					width: 266rpx;
					height: 266rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 50rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					letter-spacing: 2px;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>