Smart-Farm/uniapp/uni-app/mine/pages/distribution/poster.vue

<template>
	<view class="mine-distribution-poster">
		<view class="hideCanvasView">
			<l-painter class="hideCanvas" ref="painter" />
		</view>
		<block v-if="src">
			<view class="space-md fill-body"></view>
			<image :src="src" class="code-img" @tap="previewImage"></image>
			<view class="space-md fill-body"></view>
			<view class="pd-lg">
				<!-- #ifdef H5 -->
				<button class="save-btn flex-center radius" :style="{background:primaryColor}"
					@tap="previewImage">长按上图保存图片</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="save-btn flex-center radius" :style="{background:primaryColor}"
					@tap="saveImage">保存图片至相册</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button class="save-btn flex-center radius" :style="{background:primaryColor}"
					@tap="toAppShare">分享专属海报</button>
				<!-- #endif -->
				<view class="text f-desc mt-lg" :style="{color:primaryColor}">
					<view class="flex-y-center">
						<view class="radius mr-sm" :style="{background:primaryColor}"></view>好友下载app并使用你的邀请码注册成功后
					</view>
					<view class="flex-y-center">
						<view class="radius mr-sm" :style="{background:primaryColor}"></view>TA将成为你的粉丝，粉丝下单，你也可以获得收益哟!
					</view>
				</view>
				<view class="space-footer"></view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				src: '',
				options: '',
				poster: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			this.$util.setNavigationBarColor({
				color: '#000000',
				bg: '#ffffff'
			})
			this.widget = this.$refs.canvas
			this.$util.showLoading()
			let that = this
			setTimeout(() => {
				that.canvase()
			}, 1000)
		},
		methods: {
			...mapActions(['user/report']),
			async canvase() {
				let that = this
				let qr_code = await this.$api.mine.getAppDownloadQr()
				let cover = 'https://lbqny.migugu.com/admin/farm/share.png'
				let {
					primaryColor
				} = this

				let {
					fx_code,
					avatarUrl
				} = this.$util.getPage(-1).detail

				let poster = {
					css: {
						width: '750rpx',
						height: '1156rpx',
					},
					views: [{
							type: 'image',
							src: cover,
							css: {
								width: '750rpx',
								height: '1156rpx',
								top: '0rpx',
								left: '0rpx',
								position: 'absolute'
							}
						},
						{
							type: 'image',
							src: avatarUrl,
							css: {
								position: 'absolute',
								baclground: '#fff',
								width: '82rpx',
								height: '82rpx',
								top: '407rpx',
								left: '333rpx',
								border: '1rpx solid #fff',
								borderRadius: '50%'
							}
						},
						{
							type: 'text',
							text: `邀请码`,
							css: {
								position: 'absolute',
								width: '137rpx',
								height: '30rpx',
								top: '658rpx',
								left: '304rpx',
								textAlign: 'center',
								fontSize: '26rpx',
								color: primaryColor
							}
						},
						{
							type: 'text',
							text: fx_code,
							css: {
								position: 'absolute',
								width: '137rpx',
								height: '30rpx',
								top: '696rpx',
								left: '304rpx',
								textAlign: 'center',
								fontSize: '26rpx',
								textWeight: 'bold',
								color: primaryColor
							}
						},
						{
							type: 'image',
							src: qr_code,
							css: {
								position: 'absolute',
								baclground: '#fff',
								width: '148rpx',
								height: '148rpx',
								top: '505rpx',
								left: '304rpx',
							}
						}
					]
				}
				// 渲染
				this.$refs.painter.render(poster);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					quality: 1,
					success: (res) => {
						that.$util.hideAll()
						this.src = res.tempFilePath
						console.log(res.tempFilePath);
					},
				});
			},
			previewImage() {
				let finalPath = this.src;
				uni.previewImage({
					current: finalPath,
					urls: [finalPath]
				})
			},
			async saveImage() {
				await this.$util.checkAuth({
					type: "writePhotosAlbum"
				});
				let filePath = this.src;
				let [err, success] = await uni.saveImageToPhotosAlbum({
					filePath
				})
				if (err) return;
				uni.showToast({
					icon: 'none',
					title: '保存成功'
				})
			},
			toAppShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "",
					title: "用心分享邀粉丝",
					summary: "月入过万 收益多",
					imageUrl: this.src,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		},

	}
</script>

<style lang="scss">
	page {
		background: #fff
	}

	.mine-distribution-poster {

		.code-img {
			width: 750rpx;
			height: 1156rpx;
		}

		.save-btn {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0 auto;
		}

		.text {
			.radius {
				width: 10rpx;
				height: 10rpx;
			}
		}

		.hideCanvasView {
			position: relative;

			.hideCanvas {
				position: absolute;
				left: -9999rpx;
				top: -9999rpx
			}
		}

	}
</style>