ledehui-c/src/components/GoodsShare/GoodsShare.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;
		@baseModule.Getter('_goods') goodsInfo: 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.drawCircular(ctx, 24, 24, 13, 15, that._canvasData.avatar);
			this.ellipsisText(
				ctx,
				that._userInfo.nickname,
				// '爱润妍',
				200,
				43,
				13,
				'#999',
				'10px',
				14
			);
			// 绘制宣传语
			this.ellipsisText(
				ctx,
				'推荐给你一个好物',
				200,
				43,
				27,
				'#454545',
				'10px',
				14
			);
			this.textSet(ctx, '”', '45px', 135, 20, '#ddd');
			// 绘制店铺图片
			this.drawImgInfo(
				ctx,
				10,
				50,
				230,
				230,
				that.goodsInfo.goodImg,
				that.goodsInfo.width,
				that.goodsInfo.height
			);
			// 商品标题
			this.ellipsisText(
				ctx,
				that.goodsInfo.name,
				180,
				11,
				291,
				'#000',
				'14px',
				20,
				1,
				'bold '
			);
			// 商品副标题
			this.ellipsisText(
				ctx,
				that.goodsInfo.tagline,
				150,
				11,
				311,
				'#999',
				'10px',
				14,
				1
			);
			//  划线价
			// let linePrice:string = '￥0.00';
			// if (that.goodsInfo.linePrice) {
			// 	linePrice = '¥' + Number(that.goodsInfo.linePrice).toFixed(2);
			// }
			// this.textSet(ctx, linePrice, '12px', 11, 340, '#999');
			// let lineH = ctx.measureText(linePrice).width;
			// ctx.moveTo(14, 347);
			// ctx.lineTo(lineH + 20, 347);
			// ctx.strokeStyle = '#999999';
			// ctx.stroke();
			// 商品价格
			this.textSet(ctx, '¥', '12px', 11, 362, '#000', 'bold ');
			this.textSet(
				ctx,
				Number(that.goodsInfo.minPrice).toFixed(2),
				'19px',
				19,
				356,
				'#000',
				'bold '
			);
			// // 小程序码
			ctx.drawImage(that._canvasData.goodQr, 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>