BlockChainH5/pages/instrument/Spread.vue

<template>
	<view class="shareContent">
		<view class="codeContent" v-if="!posterShow" @click="coverCode">
			<view class="codeTop">
				<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
				<view class="codeTop-title">
					<view class="codeTop-name">{{companyInfo.name}}</view>
					<view class="codeTop-tips">邀请你 加入链商星球</view>
				</view>
			</view>
			<view class="codeCode">
				<image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
				<view class="codeImg-text">点击二维码，进行保存</view>
			</view>
		</view>
		<!-- 分享二维码 -->
		<canvas class="my-canvas" canvas-id="myCanvass" id="myCanvass" />

		<view v-if="posterShow">
			<view class="posterBack"></view>
			<view class="poster">
				<view class="poster-img">
					<image class="img" :src="posterImg" mode="widthFix" />
				</view>
				<view class="poster-btn">
					<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
					<view class="operate" @tap="posterShow = false">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		companiesCode
	} from '@/apis/interfaces/store'
	import {
		saveImageToPhotosAlbum,
		showToast,
		downloadFile
	} from '@/uni_modules/sakura-canvas/js_sdk/util'
	import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
	let draw = null

	export default {
		data() {
			return {
				companyInfo: {},
				posterShow: false, // 是否显示下载弹窗页面
			}
		},
		onShow() {
			companiesCode().then(res => {
				this.companyInfo = res
			})
		},
		methods: {
			// 生成海报
			async coverCode() {
				let img = this.companyInfo.code
				let name = this.companyInfo.name
				let avatar = this.companyInfo.cover
				
				draw = new Draw({
					width: 375,
					height: 460,
					canvasId: 'myCanvass',
					_this: this,
					background: {
						type: 'color',
						color: 'white',
						w: 375,
						h: 460,
					},
				})
				let res = await draw.createdSharePoster(({
					bgObj
				}) => {
					let {
						width,
						height
					} = bgObj
					this.Popinvite = bgObj
					// 绘制内容
					return [
						// 用户昵称
						{
							type: 'text',
							x: 120,
							y: 80,
							zIndex: 99,
							w: width - (20 * 2),
							text: name,
							color: '#333',
							font: {
								size: 20
							}
						},
			
						// 描述
						{
							type: 'text',
							x: 120,
							y: 110,
							zIndex: 99,
							w: width - (20 * 2),
							text:'邀请你 加入链商星球',
							color: '#999',
							font: {
								size: 16
							}
						},
			
						// 用户头像
						{
							type: 'image',
							x: 24,
							y: 60,
							src: avatar,
							w: 80,
							h: 80,
							drawType: 'arc',
							zIndex: 99,
							borderWidth: 5, // 图片边框大小 默认0
							borderColor: '#cacaca' // 图片边框颜色 默认无颜色
						},
			
						// 二维码
						{
							type: 'image',
							x: 80,
							y: 190,
							w: 200,
							h: 200,
							zIndex: 99,
							src: img,
							borderWidth: 5, // 图片边框大小 默认0
							borderColor: '#cacaca' // 图片边框颜色 默认无颜色
						}
					]
				})
				if (!res.success) return
				this.posterImg = res.data
				this.posterShow = true
			},
			
			// 保存图片
			async saveImage() {
				let {
					posterImg
				} = this
				let res = await saveImageToPhotosAlbum(posterImg)
				if (!res.success) return
				showToast('保存成功,去相册分享给朋友吧')
				this.posterShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shareContent {
		background: #7c52fc;
		height: 100vh;
		width: 100vw;
	}

	.codeContent {
		position: relative;
		left: 0;
		right: 0;
		top: 0;

		.codeTop {
			position: absolute;
			left: 5%;
			top: 240rpx;
			width: 90%;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 0 50rpx;
			box-sizing: border-box;
			box-shadow: 0 0 40rpx rgba(94, 59, 201, .5);
			z-index: 2;
			display: flex;
			height: 200rpx;

			.codeTop-cover {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 40rpx 30rpx 0 0;
				border: 4rpx solid #FFFFFF;
				box-shadow: 0 5rpx 10rpx rgba(94, 59, 201, .3);
			}

			.codeTop-title {
				padding-top: 50rpx;

				.codeTop-name {
					font-weight: 600;
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}

				.codeTop-tips {
					color: $text-gray-m;
				}
			}
		}

		.codeCode {
			background-color: #FFFFFF;
			box-shadow: 0 0 40rpx rgba(27, 0, 111, .4);
			position: absolute;
			padding: 400rpx 0 200rpx;
			left: 10%;
			top: 160rpx;
			width: 80%;
			border-radius: 30rpx;
			z-index: 1;
			text-align: center;

			.codeImg-code {
				width: 360rpx;
				height: 360rpx;
				margin: 0 0 20rpx;
				border: 2px solid #f3f3f3;
				padding: 30rpx;
				box-sizing: border-box;
			}

			.codeImg-text {
				font-size: 32rpx;
				color: $text-color;
				position: relative;
				z-index: 1;
			}
		}
	}

	.codeBnt {
		background-color: #7c52fc;
		text-align: center;
		border-radius: 10rpx;
		line-height: 90rpx;
		font-weight: 600;
		font-size: $title-size;
		color: #FFFFFF;
		box-shadow: 2px 0 5px rgb(124, 82, 252);
		position: relative;
	}

	/* canvas */
	.codeImg {
		position: absolute;
		left: -1000%;
		height: 603px;
		width: 375px;
		background: white;
	}
	// canvas
	.my-canvas {
		width: 375px;
		height: 667px;
		position: fixed;
		top: -99999999999rpx;
		left: -99999999999rpx;
		z-index: -99999999999;
		opacity: 0;
	}
	
	.posterBack {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, .7);
		left: 0;
		top: 0;
	}
	
	.poster {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999999;
	
		&-img {
			width: 580rpx;
			position: relative;
			margin: 70rpx auto 20rpx;
	
			.img {
				width: 100%;
			}
		}
	
		&-btn {
			padding: 0 $padding * 2;
	
			.operate {
				width: 80%;
				margin-bottom: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				margin-left: 10%;
				display: inline-block;
				text-align: center;
				color: #fff;
	
				&-cancel {
					background-color: $text-price;
				}
			}
		}
	}
</style>