sct/pagesT/Distribution/Poster.vue

<template>
	<view class="poster_page">
		<canvas canvas-id="poster" class="poster_canvas"></canvas>
		<view class="poster_image">
			<image class="poster_bg_image" :src="promoteBgImgs" mode="widthFix"></image>
			<image class="poster_code_image" :src="promoteCodeImg" mode="aspectFit"></image>
		</view>

		<view class="share_save_box">
			<!-- #ifdef MP -->
			<button open-type="share" class="b-btn">
				<text class="ibonfont ibonsousuo"></text>
				<text>发给好友</text>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view @click="onAppShare"  class="b-btn">
				<text class="ibonfont ibonsousuo"></text>
				<text>发给好友</text>
			</view>
			<!-- #endif -->
			<view class="b-btn" @click="onSaveImg">
				<text class="ibonfont ibonbaocun-" style="color: #f2b844;"></text>
				<text>保存图片</text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
			<image :src="h5SaveImg" mode="widthFix"></image>
			<button class="download">长按图片保存图片</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
let settingWritePhotosAlbum = false;
import webUrl from '../../config.js';
export default {
	data() {
		return {
			promoteCodeImg: '',
			swiperIndex: 0,
			posterImgs: [],
			base_set_info:{},
			h5SaveImg: '',
			promoteBgImgs:'https://onlineimg.qianniao.vip/94d23d0a2f4c4e6187de1ba6e12050b5/1595924199706推广.jpg'
		};
	},
	//第一次加载
	onLoad(e) {
		this.getQrSrc();
		this.base_set_info = this.$store.state.baseSet;
	},
	computed: {
		...mapState(['userInfo'])
	},
	//方法
	methods: {
		async getQrSrc() {
			// #ifdef MP-TOUTIAO
			// let pathT = 'pages/index/index' + this.goods_id;
			// pathT = encodeURIComponent(pathT);
			// this.$u.api.byteCreateQRCode({
			// 	path: pathT,
			// 	params: this.goods_id,
			// 	appname: 'toutiao'
			// }).then(res=>{});
			// #endif
			// #ifdef MP-WEIXIN || H5
			let pathS = 'pages/index/index';
			this.$u.api.createwxaqrcode({
				path: pathS,
				params: this.$store.state.userStatus.id
			}).then(res=>{
				this.promoteCodeImg = res.data.indexOf('https') > -1 ? res.data : webUrl.QRC_SRC + res.data;
			})
			// #endif
		},
		// 轮播图变化
		onSwiperChange(e) {
			this.swiperIndex = e.detail.current;
		},
		// 创建海报
		createPoster() {
			return new Promise((resolve, reject) => {
				if (this.posterImgs[this.swiperIndex]) {
					resolve(this.posterImgs[this.swiperIndex]);
				} else {
					uni.showLoading({
						title: '海报生成中'
					});
					const ctx = uni.createCanvasContext('poster');
					ctx.fillRect(0, 0, 375, 667);
					uni.downloadFile({
						url: this.promoteBgImgs,
						success: res => {
							if (res.statusCode === 200) {
								ctx.drawImage(res.tempFilePath, 0, 0, 375, 667);
								uni.downloadFile({
									url: this.promoteCodeImg,
									success: res => {
										if (res.statusCode === 200) {
											ctx.drawImage(res.tempFilePath, 137, 416, 100.1, 100.1);
											ctx.draw(true, () => {
												// canvas画布转成图片并返回图片地址
												uni.canvasToTempFilePath({
													canvasId: 'poster',
													width: 375,
													height: 667,
													success: res => {
														if (this.posterImgs[this.swiperIndex]) {
															this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
														} else {
															this.posterImgs[this.swiperIndex] = {};
															this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
														}
														resolve(res.tempFilePath);
														console.log(res.tempFilePath);
													},
													fail: () => {
														uni.hideLoading();
														reject();
													}
												});
											});
										} else {
											uni.hideLoading();
											uni.showToast({
												title: '海报制作失败，图片下载失败',
												icon: 'none'
											});
										}
									},
									fail: err => {
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败',
											icon: 'none'
										});
									}
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: '海报制作失败，图片下载失败',
									icon: 'none'
								});
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		// 保存图片
		async onSaveImg() {
			let imgUrl = '';
			if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary) {
				imgUrl = await this.posterImgs[this.swiperIndex].temporary;
			} else {
				imgUrl = await this.createPoster();
			}
			// #ifdef H5
			this.h5SaveImg = imgUrl;
			uni.hideLoading();
			// #endif
			// #ifdef MP-WEIXIN
			uni.showLoading({
				title: '海报下载中'
			});
			if (settingWritePhotosAlbum) {
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '请先在设置页面打开“保存相册”使用权限',
								confirmText: '去设置',
								cancelText: '算了',
								success: data => {
									if (data.confirm) {
										uni.hideLoading();
										uni.openSetting();
									}
								}
							});
						}
					}
				});
			} else {
				settingWritePhotosAlbum = true;
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: imgUrl,
							success: () => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功'
								});
							}
						});
					}
				});
			}
			// #endif
			// #ifdef APP-PLUS
			uni.showLoading({
				title: '海报下载中'
			});
			uni.saveImageToPhotosAlbum({
				filePath: imgUrl,
				success: () => {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功'
					});
				}
			});
			// #endif
		},
		async onAppShare() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.base_set_info.shop,
				imageUrl: this.base_set_info.images,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + this.$store.state.userStatus.id,
			imageUrl: this.$store.state.baseSet.images,
			success: res => {
				console.log(res);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
// @import '@/style/mixin.scss';
.poster_page {
	min-height: 100vh;
	background-color: #fff;
	display: flex;
	align-items: center;
}
.poster_canvas {
	width: 750rpx;
	height: 1334rpx;
	position: fixed;
	top: -10000rpx;
	left: 0rpx;
}
.poster_image {
	position: fixed;
	top: 0;
	left: 0;
	.poster_bg_image {
		width: 750upx;
		height: 100vh;
	}
	.poster_code_image {
		position: absolute;
		bottom: 350rpx;
		width: 136rpx;
		height: 136rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.share_save_box {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 6;
	width: 100%;
	display: flex;
	padding: 10upx 0;
	background-color: rgba($color: #ffffff, $alpha: 0.6);
	.b-btn {
		flex: 2;
		text-align: center;
		color: #000000;
		font-size: 24rpx;
		height: auto;
		background-color: transparent;
		overflow: inherit;
		line-height: 46upx;
		padding-left: 0;
		padding-right: 0;
		.ibonfont {
			font-size: 60upx;
			display: block;
			color: #04be02;
			margin: 0 auto 10upx;
			width: 58rpx;
			height: 58rpx;
			border-radius: 100%;
			background-color: #ffffff;
			line-height: 60rpx;

		}
	}
	button::after{
		border: 0 none;
	}
}
.h5_press_save {
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 100;
	image {
		width: 100%;
	}
	.download {
		font-size: 24rpx;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		padding: 5rpx 30rpx;
		border-radius: 40rpx;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		&:before {
			content: '';
			// @include bis('../../../static/demo/icon_download.png');
			width: 24rpx;
			height: 24rpx;
			margin-right: 15rpx;
		}
	}
}
</style>