fangliaoxiaochengxv/subPages/poster/poster.vue

<template>
	<view class="poster" id="posterBox">
		<view class="img-box">
			<u--image width="100%" height="1110rpx" :src="posterImg" :fade="false" mode="aspectFit"></u--image>
		</view>
		<u-toast ref="createPosterLoading"></u-toast>
		<view class="common-btn ml10 mr10" @click="downloadPoster">下载海报</view>
		<!-- 海报生成器 -->
		<l-painter v-if="posterImgBg && wxGodeImg" ref="painter" isCanvasToTempFilePath @success="successHandler"
			css="width: 750rpx;" hidden>
			<l-painter-view css="position: relative; height: 1110rpx;">
				<l-painter-image :src="posterImgBg" css="object-fit: contain; width: 100%; height: 100%;" />
				<l-painter-image :src="wxGodeImg"
					css="width: 180rpx; height: 180rpx;position: absolute;bottom: 50rpx;right: 70rpx" />
			</l-painter-view>

			<l-painter-view
				css="display: flex; align-items: center; justify-content: space-between; padding-top: 38rpx;">
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
	import {
		getBanner
	} from "@/common/api/home.js";
	const RADIO = 721
	export default {
		data() {
			return {
				posterImg: '',
				posterImgBg: '',
				wxGodeImg: '',
			};
		},
		onLoad() {
			this.getPoster()
			this.getWxCode()
			this.handlePoster()
		},
		methods: {
			successHandler(event) {
				this.posterImg = event
				this.$refs.createPosterLoading.hide()
			},
			getWxCode() {
				let userInfo = uni.getStorageSync('userInfo')
				console.log(33333, userInfo)
				userInfo = userInfo && JSON.parse(userInfo)
				const sendData = {
					path: '/pages/home/dashboard/index?id=' + userInfo.id,
					// path: '/pages/home/dashboard/index?id=5',
					type: 'file'
				}
				this.$api.getQRCode(sendData).then(res => {
					this.wxGodeImg = res.data.url
				})
			},
			getPoster() {
				const configs = uni.getStorageSync("configs");
				console.log("getConfigzj=>", configs);
				if (configs) {
					this.posterImgBg = configs.shop_adimg
				} else {
					getBanner().then(res => {
						this.posterImgBg = res.data.shop_adimg
					})
				}
			},
			downloadPoster() {
				// console.log(222, this.posterImgSrc)
				// uni.saveImageToPhotosAlbum({
				// 	filePath: this.posterImgSrc,
				// 	complete:() => {
				// 		this.showPoster = false
				// 	}
				// })
				let _this = this
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						// 非H5 保存到相册
						// H5 提示用户长按图另存
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功'
								})
								// _this.showPoster = false
							}
						});
					},
				})
			},
			handlePoster() {
				this.$refs.createPosterLoading.show({
					type: 'loading',
					message: "海报生成中...",
					duration: 30000,
					complete: () => {
						// this.showPoster = showPoster;
					}
				})
				return
			},
		}
	};
</script>

<style lang="scss" scoped>
	.poster {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;


		.img-box {
			flex-shrink: 0;
			width: 100%;
			height: 1110rpx;
			position: relative;
		}

		.info-wrap {
			position: absolute;
			bottom: 50rpx;
			right: left;
			width: 100%;
			z-index: 100;
			display: flex;
			box-sizing: border-box;
			padding: 0 50rpx;
			justify-content: flex-end;
		}

	}
</style>