BiKing/components/sharePage/sharePage.vue

<template>
	<uni-popup ref="popupRef">

		<view class="share-box">
			<view class="share-status-bar" :style="{'height': `${statusBarHeight}px`}"></view>
			<!-- statusBarHeight -->
			<view class="share-content">
				<shareInvite v-if="shareType === 1">
					<template #qrcode>
						<tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="qrcodeVal" />
					</template>
				</shareInvite>

				<shareOrder :shareVal="shareVal" v-if="shareType === 2">
					<template #qrcode>
						<tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="qrcodeVal" />
					</template>
				</shareOrder>
			</view>
			<view class="share-footer">
				<view class="share-list">
					<view class="share-icons">
						<text class="share-icon iconfont" style="color: #00b1ff;">&#xe65b;</text>
						<text class="share-text">复制链接</text>
					</view>
					<view class="share-icons">
						<text class="share-icon iconfont" style="color: #029a73;">&#xe631;</text>
						<text class="share-text">微信</text>
					</view>
					<view class="share-icons">
						<text class="share-icon iconfont" style="color: #02d9a2;">&#xe623;</text>
						<text class="share-text">朋友圈</text>
					</view>
					<view class="share-icons">
						<text class="share-icon iconfont" style="color: #1890ff;">&#xe66a;</text>
						<text class="share-text">QQ</text>
					</view>
					<view class="share-icons" @click="my_js.onclicks">
						<text class="share-icon iconfont" style="color: #83a0e5">&#xe63a;</text>
						<text class="share-text">保存图片</text>
					</view>
				</view>
				<view class="share-cancel" @click.stop="cancelShare">
					取消
				</view>
			</view>
		</view>


	</uni-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import shareInvite from "./share_01.vue"
	import shareOrder from "./share_02.vue"
	export default {
		name: "sharePage",
		components: {
			shareInvite,
			shareOrder
		},
		props: {
			tabBar: {
				type: Boolean,
				default: true
			},
			shareType: {
				type: Number,
				default: 1   // 1：邀请分享  2：订单分享
			},
		},
		data() {
			return {
				shareCode: '', 
				shareVal:{}
			};
		},
		computed: {
			...mapGetters([
				'statusBarHeight'
			])
		},
		created() {
			this.shareCode = this.$getStorageSync('shareCode')
			this.qrcodeVal = `${this.$config.shareLink}${this.shareCode}`;
		},
		mounted() {
			
			// this.$refs.popupRef.open()
			// setTimeout(() => {
			// 	this.$refs.qrcodeRef._makeCode()
			// 	console.log('$config', this.$refs.qrcodeRef)
			// },3000)
		},
		methods: {
			drawCode() {
				if (this.$refs.qrcodeRef) {
					this.$refs.qrcodeRef._makeCode()
				} else {
					setTimeout(() => {
						this.drawCode()
					}, 100)
				}

			},
			openShare(val) {
				this.shareVal = val
				this.drawCode()
				this.$nextTick(() => {
					this.showTabBar(false)
					this.$refs.popupRef.open()
				})
			},
			cancelShare() {
				this.$refs.popupRef.close()
				this.showTabBar()
			},
			showTabBar(type = true) {
				if (this.tabBar) {
					try {
						if (type) {
							uni.showTabBar();
						} else {
							uni.hideTabBar();
						}
					} catch {}
				}
			},



			saveBase64(imageStr) {
				uni.showLoading({
					title: "保存中",
				})
				try {
					let bitmap = new plus.nativeObj.Bitmap();
					bitmap.loadBase64Data(imageStr, function() {
						console.log('加载base64图片数据成功');
						//图片名称命名
						bitmap.save('_doc/' + new Date().getTime() + '.png', {
							quality: 100
						}, function(i) {
							// 将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: i.target,
								success: function() {
									bitmap.clear(); //销毁Bitmap图片
									// uni.$u.toast('保存图片成功')

									uni.showToast({
										title: '保存图片成功',
										icon: 'none',
										duration: 2000
									});
									// that.noPhoto = true;
								}
							});
						}, function(e) {
							console.log('保存图片失败：' + JSON.stringify(e));
						});
					}, function(e) {
						console.log('截屏绘制图片失败：' + JSON.stringify(e));
					});
				} catch {
					uni.hideLoading()
				}
			},


		}
	}
</script>

<script module="my_js" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			onclicks(event, ownerInstance) {
				console.log(99)
				html2canvas(document.getElementById('share-content'), {
					backgroundColor: '#fff',
					useCORS: true,
					taintTest: true,
					timeout: 2000
				}).then(canvas => {
					let imgurl = canvas.toDataURL('image/jpg');
					ownerInstance.callMethod('saveBase64', imgurl)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.share-box {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.share-status-bar {
			flex-shrink: 0;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.share-content {
			flex: 1;
			padding: 30rpx 40rpx;


		}

		.share-footer {
			flex-shrink: 0;



			.share-list {
				border-radius: 40rpx 40rpx 0 0;
				width: 100%;
				padding: 30rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				background-color: #f6f7fc;
			}

			.share-icons {
				display: flex;
				flex-direction: column;

				justify-content: center;
				align-items: center;


				.share-icon {
					font-size: 100rpx;
					color: red;
				}

				.share-text {
					font-size: 24rpx;
					padding-top: 10rpx;
				}
			}

			.share-cancel {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #fff;
				text-align: center;
				font-size: 34rpx;
				color: #c0c0c0;
			}
		}

		// <view class="share-content"></view>
		// <view class="share-share"></view>
	}
</style>