WeChatAppH5/pages/game/popup/share - 副本.vue

<template>
	<view class="">
		<uni-popup ref="sharePopupRef" :maskClick="!imgURL" @change="popupChange">
			<view class="share-content">
				<view class="close-winning-icon" @click.stop="onClose()">
					<image  v-if="showQrcode && codeurl" 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="poster-template">
					<div class="share-code">
						
					</div>
				</view> -->
				<view class="canvas-box">
					<canvas 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(20),
					useDynamicSize: true
				},
				codeUrl: null,
				imgURL: null,
			}
		},
		created() {
			// console.log('111')

		},
		mounted() {
			// this.$refs.sharePopupRef.open()
		},
		methods: {
			open() {
				this.codeurl = `${CONFIG.hostUrl}?URLType=BigTurnplate&activityId=${this.activityId}`
				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.codeUrl = 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(image.width), uni.upx2px(image.height));
						context.drawImage(that.codeUrl, 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();
								},
								fail: function(err) {
									// console.log(err)
									uni.hideLoading();
								}
							})
						})
					}
				})
			},
			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: 1113rpx;
			.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: 1113rpx;
	}

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

		image {
			width: 630rpx;
			height: 1113rpx;
		}
	}
</style>