yicangzongtai_app_240321/components/sharePoster/sharePoster.vue

<template>
	<view class="">
		<uni-popup ref="sharePopupRef" :maskClick="!imgURL" :maskBg="maskBg" @change="popupChange">
			<view class="share-content">
				<view class="close-winning-icon" @click.stop="onClose()">
					<image v-if="imgURL" src="@/static/Lottery/close.png" mode="aspectFit"></image>
				</view>
				<template v-if="showQrcode && codeUrl">
					<uqrcode ref="uqrcode" :hide="true" canvas-id="qrcode" :options="options" :value="codeUrl"
						:size="codeSize" @complete="getCode" />
				</template>
				<view class="canvas-box">
					<canvas :class="{'show-anvas':!showCanvas}" :style="{width:posterW + 'rpx', height:posterH+ 'rpx'}"
						canvas-id="canvasId" id="canvasId"></canvas>
					<!-- v-if="imgURL" -->
					<view class="share-btns" v-if="imgURL">
						<view class="share-btn seve-share" @click="saveShare()">保存到本地</view>
						<view class="share-btn share-user" @click="ShareWX()">分享好友</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			posterW: {
				type: Number,
				default: 630
			},
			posterH: {
				type: Number,
				default: 1111
			},
			posterUrl: {
				type: String,
				default: null
			},
			codeUrl: {
				type: String,
				default: null
			},
		},
		data() {
			return {
				showQrcode: false,
				codeSize: uni.upx2px(1000),
				options: {
					margin: uni.upx2px(30),
					useDynamicSize: true
				},
				codeImgUrl: null,
				imgURL: null,
				showCanvas: false,
				maskBg: 'rgba(0, 0, 0,.1)'
			}
		},
		created() {
			// console.log('111')

		},
		mounted() {
			// this.$refs.sharePopupRef.open()
		},
		methods: {
			open() {
				this.showCanvas = false;
				this.showQrcode = false;
				if (!this.posterUrl) {
					uni.showToast({
						title: '当前暂无分享海报',
						icon: 'none'
					})
				}
				this.imgURL = null;
				this.maskBg = 'rgba(0, 0, 0,.1)';
				this.$refs.sharePopupRef.open()
				uni.showLoading({
					title: '分享海报生成中'
				});
				if (!this.codeUrl) {
					this.init()
				}
				this.showQrcode = true;
			},
			onClose() {
				this.showQrcode = false;
				uni.hideLoading();
				this.$refs.sharePopupRef.close();
			},
			getCode(e) {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						this.codeImgUrl = res.tempFilePath;
						this.init()
					}
				});
			},
			init() {
				let that = this;
				uni.getImageInfo({
					src: that.posterUrl,
					success: image => {
						try {
							var context = uni.createCanvasContext('canvasId');
							context.drawImage(image.path, 0, 0, uni.upx2px(that.posterW), uni.upx2px(that
								.posterH));
							if (that.codeUrl) {
								context.drawImage(that.codeImgUrl, uni.upx2px(231), uni.upx2px(698), uni
									.upx2px(
										166),
									uni.upx2px(166));
							}
							context.draw(false, () => {
								// 返回canvas图片信息
								uni.canvasToTempFilePath({
									canvasId: 'canvasId',
									success: (res) => {
										that.imgURL = res.tempFilePath;
										// console.log('res.tempFilePath =', res.tempFilePath)
										// console.log('that.imgURL =', that.imgURL)
										uni.hideLoading();
										this.maskBg = 'rgba(0, 0, 0,.6)';
										this.showCanvas = true;
										// this.$refs.sharePopupRef.open()
									},
									fail: function(err) {
										// console.log(err)
										uni.hideLoading();
										that.$refs.sharePopupRef.close()
										uni.showToast({
											title: '生成海报失败',
											icon: 'none'
										})
									}
								})
							})
						} catch (e) {
							uni.hideLoading();
							that.$refs.sharePopupRef.close()
							uni.showToast({
								title: '生成海报失败',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.log('34 = ', this.posterUrl)
						uni.hideLoading();
						this.$refs.sharePopupRef.close()
						uni.showToast({
							title: '生成海报失败',
							icon: 'none'
						})
					}
				})
			},
			popupChange(obj) {
				if (!obj.show) {
					uni.hideLoading()
				}
			},
			saveShare() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: _this.imgURL,
					success() {
						uni.showModal({
							title: "保存成功",
							content: "图片已成功保存到相册",
							showCancel: false
						});
						this.$emit('onShareSuccess', "download")
						// setShareRecord({
						// 	activityId: _this.activityId,
						// 	shareMode: 0
						// }).then(res => {
						// 	console.log("success:1 图片已成功保存到相册");
						// })
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			ShareWX() {
				var _this = this;
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					scene: "WXSceneSession", //分享场景，此代表分享到聊天
					type: 2, //分享类型纯图片
					imageUrl: _this.imgURL, //分享图片链接，图片大小不要太大，不然会报错，推荐小于20kb
					success: function(res) {

					},
					fail: function(err) {
						// console.log("fail:" + JSON.stringify(err));
					}
				});
				this.$emit('onShareSuccess', "WeChat")

			}
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.poster-template {
		position: fixed;
		left: 1000000px;
		top: 1000000px;



		.share-code {
			width: 166rpx;
			height: 166rpx;
		}

	}

	.share-content {
		width: 630rpx;

		.close-winning-icon {
			width: 100%;
			height: calc(65rpx + 20rpx);
			// transform: translateX(-50%);

			image {
				display: block;
				margin: 0 auto;
				width: 65rpx;
				height: 65rpx;
			}
		}

		.canvas-box {
			position: relative;
			width: 630rpx;
			height: 1111rpx;

			.share-btns {
				position: absolute;
				left: 50%;
				bottom: 70rpx;
				transform: translateX(-50%);

				.share-btn {
					width: 345rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					margin-top: 15rpx;
				}

				.seve-share {
					color: #721202;
					background: linear-gradient(180deg, #f7dea4, #d8a759);
					border-radius: 30rpx;
				}

				.share-user {
					color: #ffffff;
					background: linear-gradient(180deg, #3db8d3, #45c7d5);
					border-radius: 30rpx;
				}

			}

			// <view class="share-btn seve-share">保存到本地</view>
			// <view class="share-btn share-user">分享好友</view>

		}
	}

	#canvasId {
		width: 630rpx;
		height: 1111rpx;
	}

	.share-box {
		width: 630rpx;
		height: 1111rpx;

		image {
			width: 630rpx;
			height: 1111rpx;
		}
	}

	.show-anvas {
		margin-left: 200vw;
	}
</style>