yuebeilian-c/src/components/AppShare/AppShare.vue

<template>
	<view class="share-container">
		<uni-popup ref="popup" type="center">
			<view class="wrapper" v-if="popShow">
				<canvas canvas-id="shareCanvas" class="canvas" style="width: 250px;height:430px;"></canvas>
				<view class="bottom">
					<button class="bottom-btn" open-type="share">
						<image :src="static + 'wechat.png'"></image>
						<view class="text">分享好友</view>
					</button>
					<view class="bottom-btn" @click="saveImageToPhotos('shareCanvas')">
						<image :src="static + 'download.png'"></image>
						<view class="text">保存图片</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import {
		Component,
		Prop,
		Vue,
		Emit,
		Mixins
	} from 'vue-property-decorator';
	import {
		types
	} from '@/common/store';
	import {
		OSS_STATIC
	} from '@/common/constants';
	import canvasMixin from '@/common/mixins/canvasMixin.ts';
	import {
		namespace
	} from 'vuex-class';
	const canvasModule = namespace('canvas');
	const baseModule = namespace('base');
	@Component({})
	export default class ShopShare extends Mixins(canvasMixin) {
		@canvasModule.Getter('_canvasData') _canvasData: any;
		@baseModule.Getter('_userInfo') _userInfo: any;
		popShow: boolean = false;
		static: string = OSS_STATIC;

		closePop(): void {
			(this.$refs.popup as any).close();
			this.popShow = false;
		}
		openPop(): void {
			(this.$refs.popup as any).open();
			this.popShow = true;
			uni.showLoading({
				title: '加载中'
			});
			this.drawPoster();
		}
		mounted() {}
		drawPoster(): void {
			// 绘制海报
			// 注意：page页面canvas-id获取ctx，组件需传this
			const that = this;
			const ctx = uni.createCanvasContext('shareCanvas', this);
			// 绘制白色底
			this.roundRect(ctx, 0, 0, 250, 460, '#ffffff', 8, 8, 8, 8);
			this.roundRect(ctx, 0, 0, 250, 48, '#fff', 8, 0, 0, 8);
			// 绘制头像
			this.drawCircular(ctx, 24, 24, 13, 15, that._canvasData.avatar);
			this.ellipsisText(
				ctx,
				that._userInfo.nickname,
				200,
				43,
				13,
				'#999',
				'10px',
				14
			);
			// 绘制宣传语
			this.ellipsisText(
				ctx,
				that._canvasData.tips,
				200,
				43,
				27,
				'#454545',
				'10px',
				14
			);
			this.textSet(ctx, '”', '45px', 135, 20, '#ddd');
			// 绘制店铺图片
			this.drawImgInfo(
				ctx,
				10,
				50,
				230,
				230,
				that._canvasData.shareImg,
				// that._canvasData.width,
				// that._canvasData.height
			);
			// this.textSet(ctx, that._canvasData.title, '24px', 13, 360, '#333', 'bold ');
			this.textSet(ctx, '标题', '10px', 13, 348, '#999');
			this.textSet(ctx, '绿价比', '14px', 13, 365, '#000', 'bold ');
			// // 小程序码
			ctx.drawImage(that._canvasData.qr, 150, 295, 90, 90);
			this.textSet(ctx, '长按识别进店铺', '10px', 90, 400, '#999999');
			ctx.draw(true, () => {
				console.log('draw,true');
				uni.hideLoading();
			});
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		@include flex-y();
		width: 250px;
	}

	.canvas {
		border-radius: vw(5);
		overflow: hidden;
		margin-top: vw(50);
	}

	.bottom {
		width: 230px;
		margin-top: vw(15);
		@include flex-x();

		.text {
			@include word-vw(14, white);
			line-height: vw(20);
			margin-top: vw(5);
		}

		image {
			width: vw(60);
			height: vw(60);
		}
	}

	button {
		background: none;
		line-height: 1;
		padding: 0;
		margin: 0;
	}

	button::after {
		border: 0px;
	}

	.button-hover {
		background: none;
	}
</style>