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-title">PERILL团队发展动态评估</div>
				<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 class="box-code-tip">长按保存小程序二维码</div>
				</div>
			</div>
			<button class="share-btn" open-type="share">立即分享</button>
		</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: '创衡汇教练AI智能体',
				  path: `/pages/home?shareUserId=${sharerId}&shareType=Forward`,
				};
			},
			async generateQRCode(){
				try {
					let that = this;
					// 确保DOM已经更新，canvas元素已准备好
					this.$nextTick(() => { 
						UQrcode.make({
							canvasId: 'qrcode',
							componentInstance: this,
							text: that.qrVal,
							size: 137, // 对应 274rpx 的物理像素大小
							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">
	.share-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
		border-radius: 44rpx;
		border: none;
		padding: 0;
		margin: 0;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 46rpx;
		&::after {
			border: none;
		}
	}
	
	.default_page{
		box-sizing: border-box;
		.all{
			width: 100%;
			flex: 1;
			padding: 0 30rpx 74rpx;
			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: 48rpx 50rpx;
			box-sizing: border-box;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
			}
			&-code{
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 24rpx 45rpx;
				margin-top: 24rpx;
				&-ewm{
					width: 274rpx;
					height: 274rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #002846;
					line-height: 24rpx;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>