mall-front-app/pages/user/qrcode-share.vue

<template>
	<s-layout title="我的二维码/分享页" class="set-userinfo-wrap">
		<view class="ss-flex-col ss-col-center ss-row-center">
		<view v-if="poster.src === ''" class="poster-title ss-flex ss-row-center" :style="{
		  height: poster.height + 'px',
		  width: poster.width + 'px',
		}">
				海报加载中...
			</view>
		<image v-else class="poster-img ss-m-20" :src="poster.src" :style="{
		  height: poster.height + 'px',
		  width: poster.width + 'px',
		}" :show-menu-by-longpress="true" />
		<canvas class="hideCanvas" :canvas-id="poster.canvasId" :id="poster.canvasId" :style="{
		  height: poster.height + 'px',
		  width: poster.width + 'px',
		}" />

		</view>
		<view class="modal-footer ss-flex ss-p-x-20">
			<button class="confirm-btn" @tap="onSavePoster">{{
		    ['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
		      ? '长按图片保存'
		      : '保存图片'
		  }}</button>
			<button class="confirm-btn" @tap="showShareModal">分享</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		onBeforeMount,
		getCurrentInstance
	} from 'vue';
	import sheep from '@/sheep';
	import useCanvas from '@/sheep/components/s-share-modal/canvas-poster/useCanvas';

	import {
		showAuthModal,
		showShareModal
	} from '@/sheep/hooks/useModal';
	const poster = reactive({
		canvasId: 'canvasId',
		width: sheep.$platform.device.windowWidth * 0.9,
		height: 600,
		src: '',
	});
	const vm = getCurrentInstance();
	// 使用 canvas 生成海报
	async function getPoster(params) {
		poster.src = '';
		poster.shareInfo = {
			"title": "",
			"desc": "",
			"image": "",
			"path": "",
			"link": "https://zxgz.newfeifan.cn/",
			// "query": "spm=undefined.1.0.1.1",
			"poster": {
				"type": "user"
			}
		};
		// #ifdef APP-PLUS
		poster.canvasId = 'canvasId-' + new Date().getTime();
		// #endif
		
		const canvas = await useCanvas(poster, vm);
		return canvas;
	}
	// 保存海报图片
	const onSavePoster = () => {
		if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
			sheep.$helper.toast('请长按图片保存');
			return;
		}
		uni.saveImageToPhotosAlbum({
			filePath: poster.src,
			success: (res) => {
				onClosePoster();
				sheep.$helper.toast('保存成功');
			},
			fail: (err) => {
				sheep.$helper.toast('保存失败');
				console.log('图片保存失败:', err);
			},
		});
	};
	onBeforeMount(() => {
		getPoster();
	});
</script>

<style lang="scss" scoped>
	.confirm-btn {
		width: 710rpx;
		margin-left: 20rpx;
		height: 80rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 40rpx;
		color: #fff;
	}
	.confirm-btn:first-child{
		margin-left: 0;
	}
	.hideCanvas {
		position: fixed;
		top: -99999rpx;
		left: -99999rpx;
		z-index: -99999;
	}
</style>