WeChatAppH5/pages/game/popup/share.vue

<template>
	<view class="">
		<uni-popup ref="sharePopupRef" :maskClick="!imgURL" :key="maskBg" :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">
					<!-- :class="{'show-anvas':!showCanvas}" -->
					<canvas :class="{'show-anvas':!showCanvas}" 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>
	import CONFIG from "@/config/global.config.js"
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import {
		setShareRecord
	} from "@/api/Lottery.js"
	export default {
		props: {
			posterUrl: {
				type: String,
				default: null
			},
			activityId: {
				type: [String, Number],
				default: null
			},
		},
		data() {
			return {
				showQrcode: false,
				codeurl: null,
				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.codeurl = `${CONFIG.hostUrl}?URLType=BigTurnplate&activityId=${this.activityId}`
				this.imgURL = '';
				this.maskBg = 'rgba(0, 0, 0,.1)';
				this.$refs.sharePopupRef.open()
				uni.showLoading({
					title: '分享海报生成中'
				});
				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 textStr = 0;
				let that = this;
				uni.getImageInfo({
					src: this.posterUrl,
					success: image => {
						var context = uni.createCanvasContext('canvasId');
						context.drawImage(image.path, 0, 0, uni.upx2px(630), uni.upx2px(1111));
						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();
									uni.showToast({
										title: '生成海报失败',
										icon: 'none'
									})
								}
							})
						})
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '生成海报失败',
							icon: 'none'
						})
					}
				})
			},
			popupChange(obj) {
				console.log('popupChange  = = ', obj)
				if (!obj.show) {
					uni.hideLoading()
				}
			},
			saveShare() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: _this.imgURL,
					success() {
						uni.showModal({
							title: "保存成功",
							content: "图片已成功保存到相册",
							showCancel: false
						})
						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));
					}
				});
				setShareRecord({
					activityId: _this.activityId,
					shareMode: 1
				}).then(res => {})

			}
		},
		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>