mall-front-app/sheep/components/s-follow-modal/s-follow-modal.vue

<template>
	<!-- 关注 -->
	<su-popup :show="show" round="10" @close="closeSubscribeModal">
		<view class="login-wrap">
			<view class="head-box">
				<view class=" ss-m-b-20">
					<view class="head-title ss-m-r-40 head-title-animation">
						关注公众号
					</view>
					<view class="ss-flex ss-row-center">
						<canvas class="hideCanvas" canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
						
						<image :src="imagePath" mode="widthFix" />
					</view>
				</view>
			</view>

		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watchEffect,
		nextTick 
	} from 'vue';
	import sheep from '@/sheep';
	import QSCanvas from 'qs-canvas';
	import {
		onShow,
		
	} from '@dcloudio/uni-app';
	import {
		closeSubscribeModal,
		
	} from '@/sheep/hooks/useModal';

	const show = computed(() => sheep.$store('modal').subscribe);
	
	// 创建一个响应式的图像路径变量
	const imagePath = ref('');
	// 绘制二维码的函数
	async function drawQrCode(url) {
		console.log(url)
		const qsc = new QSCanvas({
			canvasId: 'myCanvas',
			width: 300,
			height: 300,
			setCanvasWH: (canvas) => {
				// 动态设置画布宽高
			   canvas.width = 300;
			   canvas.height = 300;
			},
		});

		await qsc.drawQrCode({
			val: url, // 二维码内容
			x: 25,
			y: 15,
			size: 250, // 二维码大小
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			pdground: '#000000', // 定位角点颜色
			correctLevel: 3, // 容错级别

		});
		 // 计算二维码底部中心位置
		  const qrY = 15;
		  const qrHeight = 250;
		  const textX = 300 / 2; // 文字的x位置，水平居中
		  const textY = qrY + qrHeight + 15; // 文字的y位置，在二维码下方留出20px的空间
		
		  // 绘制文字
		    await qsc.drawText({
		      val: '长按二维码关注公众号', // 文字内容
		      x: textX,
		      y: textY,
		      maxWidth: 250, // 文字的最大宽度，确保文字不会超出画布
		      
		      paintbrushProps: {
		        fillStyle: '#333', // 文字颜色
				textAlign: 'center', // 文字水平居中
		        textBaseline: 'middle', // 文字垂直居中
		        font: { // 字体属性以对象格式传递
				
				
		          fontStyle: 'normal', // 字体样式
		          fontVariant: 'normal', // 字体变体
		          fontWeight: 'normal', // 字体粗细
		          fontSize: 14, // 字体大小
		          fontFamily: 'sans-serif' // 字体系列
		        },
		      },
		    });
		
		
		await qsc.draw();

		// 确保使用 await 获取到图片路径

		const imagePathData = await qsc.toImage();
		if (imagePathData) {
			imagePath.value = imagePathData;
		}
	}
	
	function createQrcode() {
		
		let SHOPRO_DEV_BASE_URL = import.meta.env.SHOPRO_DEV_BASE_URL;
		console.log("当前接口Url",SHOPRO_DEV_BASE_URL)
		if (SHOPRO_DEV_BASE_URL.includes('letcgo.com')) {
			// 如果是常来此购的网址接口 就用常来此购的二维码
			drawQrCode(import.meta.env.SHOPRO_MP_HOME_PAGE_LETCGO);
			
		} else {
			// 如果不是常来此购的网址接口 就用非繁科技的二维码
			drawQrCode(import.meta.env.SHOPRO_MP_HOME_PAGE_FEIFAN);
		}
	}
	
	watchEffect(() => {
		if (show.value) {
			nextTick().then(() => {

				console.log("弹窗页")
				createQrcode()
			});
		}
	});
	
</script>

<style lang="scss" scoped>
	.hideCanvas {
		position: fixed;
		top: -99999rpx;
		left: -99999rpx;
		z-index: -99999;
	}

	.login-wrap {
		padding: 50rpx 34rpx;
		min-height: 500rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.head-box {
		.head-title {
			min-width: 160rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
		}

		.head-title-active {
			width: 160rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #999;
			line-height: 36rpx;
		}

		.head-title-animation {
			animation-name: title-animation;
			animation-duration: 0.1s;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
		}

		.head-title-line {
			position: relative;

			&::before {
				content: '';
				width: 1rpx;
				height: 34rpx;
				background-color: #e4e7ed;
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.head-subtitle {
			font-size: 26rpx;
			font-weight: 400;
			color: #afb6c0;
			text-align: left;
			display: flex;
		}
	}
</style>