hotelHomestayWx/pagesMy/code/index.vue

<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }" id="saveImage">
		<c-nav-bar title="预订二维码" :showHome="false"></c-nav-bar>
		<image :src="posterUrl" mode="widthFix" style="width: 100vw;" @tap="previewPoster"></image>
		
		<view class="bottom-buttons">
			<view class="btn copy-btn" @tap="copyShareLink">
				<text class="btn-text">复制分享链接</text>
			</view>
			<view class="btn save-btn" @tap="savePoster">
				<text class="btn-text">保存分享海报</text>
			</view>
		</view>
		<!-- <image src="https://fsy.shengsi.gov.cn/file/20240115/4cfb2a681dba4431800e88ba903d61a6.png" class="title" mode="widthFix"></image>
		<view class="code">
			
		</view>
		<view class="save-btn" @tap="saveImage">保存图片</view>
		<canvas canvas-id="myCanvas" class="my-canvas"></canvas> -->
		<!-- <image style="width: 70vw;" :src="posterUrl" mode="widthFix" @click="preview(posterUrl)"></image> -->
		
		<view style="position: fixed;left:-2000px;top: -2000px;">
			<l-painter ref="painter">
				<l-painter-image src="https://cdn.szhd.ycurm.top/fengxiao/bg2.png"
					css="width: 555rpx; height: 985rpx" />
				<l-painter-image :src="info.distributionCodeUrl"
					css="width: 140rpx; height: 140rpx;position:absolute;border-radius:50%;left:81rpx;top:712rpx" />
				<!-- <l-painter-image src="https://cdn.szhd.ycurm.top/fengxiao/qg.png"
					css="width: 46rpx; height: 46rpx;position:absolute;border-radius:50%;left:68rpx;top:708rpx" />
				<l-painter-image src="https://cdn.szhd.ycurm.top/fengxiao/qg.png"
					css="width: 84rpx; height: 29rpx;position:absolute;left:68rpx;top:778rpx;object-fit: fill;" /> -->
				<l-painter-image :src="stayInfo.picList[0]"
					css="width: 426rpx; height: 426rpx;position:absolute;left:64rpx;top:81rpx;object-fit: fill;" />
				<l-painter-text :text="stayInfo.name"
					css="width: 426rpx; height: 40rpx;position:absolute;left:64rpx;top:566rpx;font-size:24rpx;color:#222222;text-align:left" />
				<!-- <l-painter-text :text="'111'"
					css="width: 200rpx; height: 35rpx;position:absolute;left:126rpx;top:714rpx;font-size:24rpx;color:#222222;text-align:left" />
				<l-painter-text :text="'￥1'"
					css="width: 200rpx;height: 46rpx; position:absolute;left:164rpx;top:767rpx;font-size:32rpx;color:#FE2B00" />
				<l-painter-text :text="'1人已购买'"
					css="width: 200rpx;height: 46rpx; position:absolute;left:68rpx;top:822rpx;font-size:18rpx;color:#FE2B00" /> -->
				<l-painter-text :text="stayInfo.areaDetail"
					css="width: 270rpx; height: 120rpx;position:absolute;left:230rpx;top:700rpx;font-size:20rpx;color:#222222;text-align:left" />
					<l-painter-view
					css="background: #FFDD02; width: 200rpx;height: 40rpx; display: inline-block;position:absolute;left:260rpx;top:812rpx;border-radius:14rpx"></l-painter-view>
				<l-painter-text text="长按识别二维码"
					css="width: 200rpx;height: 40rpx;line-height:27rpx;position:absolute;left:260rpx;top:812rpx;font-size:18rpx;color:#222222;border-radius: 14rpx;text-align:center" />
			</l-painter>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: '',
			posterUrl: {},
			info: {},
			stayInfo: {}
		}
	},
	onLoad() {
		this.getCode();
		setTimeout(() => {
				this.setPost()
			}, 10);

	},
	onShow() {
		

	},
	methods: {
		 onImgOK(e){
        console.log(e)
        //e.detail.path  图片路径
    },
    onImgErr(e){
        console.log(e)
        //e.detail.path  图片路径错误
    },
		setPost() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.showPoster = true
						console.log(res.tempFilePath);
						this.posterUrl = res.tempFilePath

					},
					fail: (res) => {
						console.log(res);

					},
				});
			},
		getCode() {
			const merchantType = uni.getStorageSync('merchantType');
			let merchantId = uni.getStorageSync('merchantId');

			if (merchantType === 2) {
				const homestayId = uni.getStorageSync('homestayId');
				if (homestayId) {
					merchantId = homestayId;
				}
			}

			const params = {
				merchantId: merchantId,
				merchantType: merchantType,
				merchantName: uni.getStorageSync('merchantName'),
				page: 'pagesTrip/hotel/details/index?homestayId=' + merchantId
			};
			this.$api.get('/merchant/hotel/mine/getMerchantHomestayInfo/' + merchantId).then(res => {
				if (res.data.code == 0) {
					this.stayInfo = res.data.data;
				}
			})
			this.$api.post('/order/api/merchant/distribution/code/generate', params).then(res => {
				if (res.data && res.data.code === 0 && res.data.data && res.data.data.distributionCodeUrl) {
					this.info = res.data.data;
				}
			})
		},
		copyShareLink() {
			var that = this;
			if (!that.info.shortLink) {
				uni.showToast({ title: '分享链接暂未生成', icon: 'none' });
				return;
			}
			uni.setClipboardData({
				data: that.info.shortLink,
				success: function() {
					uni.showToast({ title: '链接已复制', icon: 'success' });
				}
			});
		},
		savePoster() {
			var that = this;
			if (!that.posterUrl) {
				uni.showToast({ title: '海报生成中，请稍后', icon: 'none' });
				return;
			}
			uni.saveImageToPhotosAlbum({
				filePath: that.posterUrl,
				success: function() {
					uni.showToast({ title: '保存成功', icon: 'success' });
				},
				fail: function(err) {
					console.error('保存失败', err);
					uni.showToast({ title: '保存失败', icon: 'none' });
				}
			});
		},
		previewPoster() {
			var that = this;
			if (!that.posterUrl) {
				uni.showToast({ title: '海报生成中，请稍后', icon: 'none' });
				return;
			}
			uni.previewImage({
				urls: [that.posterUrl]
			});
		},
		
	}
}
</script>

<style scoped lang="less">
.page {
	box-sizing: border-box;
	
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 150rpx;
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
	z-index: 100;

	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		cursor: pointer;

		.btn-icon {
			margin-right: 8rpx;
		}

		&:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}

	.copy-btn {
		background: #33AFFC;
	}

	.save-btn {
		background: #1372FF;
	}

	.title {
		width: calc(100% - 98rpx);
		margin: 214rpx 49rpx 0;
	}

	.code {
		width: 460rpx;
		height: 460rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(72, 139, 255, 0.27);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin: 83rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.my-canvas {
		position: fixed;
		left: -1000px;
		top: -1000px;
		width: 750px;
		height: 1334px;
	}
}
</style>