ykt-wxapp/pages/work/team/invite/invite-teammate.vue

<template>
	<view v-if="team" class="flex flex-col justify-center h-full bg-white">
		<view>
			<view class="text-dark text-lg font-semibold text-center mb-10">
				{{ team.name }}
			</view>
			<view class="mb-10 text-dark text-lg font-semibold text-center mb-10">
				成员邀请码
			</view>
			<view class="flex justify-center overflow-hidden">
				<uqrcode canvas-id="qrcode" :value="qrcode" :options="options"></uqrcode>
			</view>
			<view class="mt-10 px-15 text-base text-dark leading-normal text-center">
				微信扫一扫上面的二维码
			</view>
			<view class="mt-10 px-15 text-base text-dark leading-normal text-center">
				加入我的团队，协同开展患者管理服务
			</view>
			<view class="mt-10 flex px-15 leading-normal text-center">
				<button class="mr-10 border-auto rounded py-5 text-base text-primary flex-grow"
					@click="saveImage('save')">
					保存图片
				</button>
				<button class="bg-primary rounded py-5 text-base text-white flex-grow" open-type="share">分享微信</button>
			</view>
			<view class="canvas-box">
				<l-painter ref="painterRef" :board="poster" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		computed,
		ref
	} from "vue";
	import {
		storeToRefs
	} from "pinia";
	import {
		onLoad,
		onShareAppMessage
	} from "@dcloudio/uni-app";
	import useGuard from "@/hooks/useGuard.js";
	import useAccountStore from "@/store/account.js";
	import api from '@/utils/api';
	import {
		toast
	} from "@/utils/widget";
	import {
		getInviteMatePoster
	} from './base-poster-data';

	const env = __VITE_ENV__;
	const inviteQrcode = env.MP_INVITE_TEAMMATE_QRCODE;

	const options = {
		margin: 10
	};
	const team = ref(null);
	const teamId = ref('');
	const painterRef = ref()
	const poster = ref({})

	const {
		useLoad,
		useShow
	} = useGuard();
	const {
		account
	} = storeToRefs(useAccountStore());

	const qrcode = computed(() => `${inviteQrcode}?type=inviteTeam&teamId=${teamId.value}`)

	async function getTeam() {
		const res = await api('getTeamData', {
			teamId: teamId.value,
			corpId: account.value.corpId
		});
		if (res && res.data) {
			team.value = res.data;
		} else {
			toast(res?.message || '获取团队信息失败')
		}
	}

	async function saveImage(action = 'save') {
		const data = getInviteMatePoster(team.value.name, qrcode.value)
		try {
			await painterRef.value.render(data);
			painterRef.value.canvasToTempFilePathSync({
				fileType: "jpg",
				// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				pathType: 'url',
				quality: 1,
				success: (res) => {
					console.log(res.tempFilePath);
					if (action === 'save') {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('save success');
							}
						});
					} else if (action === 'share') {
						wx.showShareImageMenu({
							path: res.tempFilePath,
							needShowEntrance: false
						})
					}
				},
			});
		} catch (e) {
			toast(e?.message)
		}
	}
	useLoad(options => {
		teamId.value = options.teamId;
	})

	useShow(() => {
		getTeam()
	});

	onShareAppMessage(() => {
		return {
			title: '邀请团队成员',
			path: `pages/login/redirect-page?type=inviteTeam&teamId=${teamId.value}`
		}
	})
</script>
<style>
	.canvas-box {
		top: 10000rpx;
		position: absolute;
		z-index: -1;
		width: 0;
		height: 0;
		overflow: hidden;
	}
</style>