bocai_supplyChain_uni/root/merchantManagement/child/tools.vue

<template>
	<div class="tools_container g_pl_10 g_pr_10 g_pb_12">
		<posterShare></posterShare>
	</div>
</template>

<script>
import posterShare from "../posterShare.vue";
export default {
	name: "tools",
	data() {
		return {
			showPage: true,
			imgList: [],
			currentImg: "",
			posterShow: false,
		};
	},
  components: {
    posterShare
  },
	onLoad() {},
	created() {
		setTimeout(() => {
			this.showPage = false;
		}, 2000);
		for (let i = 0; i < 20; i++) {
			this.imgList[i] = `https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/poster/a${i + 1}.png`;
		}
		console.log(this.imgList);
	},
	props: {
		firstLoad: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		firstLoad(val) {
			console.log("firstLoad", val);
			if (val) {
				this.showPage = true;
				setTimeout(() => {
					this.showPage = false;
				}, 2000);
			}
		},
	},
	methods: {
		getPoster(e) {
			const that = this;
			uni.showLoading({
				title: "生成中...",
				mask: true,
			});
			that.getWXCanvas(e).then((res) => {
				console.log("res", res);
				that.currentImg = res.tempFilePath;
				that.posterShow = true;
				uni.hideLoading();
			});
		},
		// 微信端绘制
		getWXCanvas(sharelImg, type) {
			const that = this;
			return new Promise((resolve) => {
				var mycenter = 0; //文字左右居中显示
				var myheight = 0; //文字高度
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#canvasId")
					.fields({
						node: true,
						size: true,
					})
					.exec((res) => {
						console.log("uni 获取节点信息：", res);
						// console.log("sharelImg", sharelImg);
						const canvas = res[0].node;
						const ctx = canvas.getContext("2d");
						new Promise(function (resolve) {
							// 绘制背景图片
							uni.getImageInfo({
								src: sharelImg, // 网络图片
								success(res) {
									console.log("res111", res);
									canvas.width = res.width;
									canvas.height = res.height;
									mycenter = canvas.width / 2;
									myheight = canvas.height;
									const img = canvas.createImage();
									img.src = res.path;
									console.log("img111", img);
									img.onload = (info) => {
										ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
										console.log("info111", info);
										resolve(true);
									};
								},
								fail(err) {},
							});
						}).then(() => {
							console.log("inthen");
							//使用：
							that
								.setShareJobImg(ctx, canvas, mycenter)
								.then(function (canvas1) {
									console.log("canvas1", canvas1);
									uni.canvasToTempFilePath({
										canvas: canvas1,
										success(res) {
											console.log("res222", res);
											resolve(res);
										},
										fail(res) {
											uni.hideLoading();
											uni.showToast({
												title: res.errMsg,
												icon: "error",
											});
										},
									});
								})
								.catch((err) => {
									console.log(err);
									uni.hideLoading();
									uni.showToast({
										title: "生成失败,请重试",
									});
								});
						});
					});
			});
		},
		// 设置分享布局
		setShareJobImg(ctx, canvas, mycenter, funObj) {
			let that = this;
			let labelLeft = 0;
			// ctx.arcTo()
			let baseTop, QRSize;

			baseTop = 470;

			QRSize = 2 * 260;

			return new Promise((imgres) => {
				uni.getImageInfo({
					src: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/poster/renhaiQRCode.png",
					success(res) {
						console.log("res333", res);
						const img = canvas.createImage();
						img.src = res.path;
						img.onload = () => {
							console.log("ctx", ctx);
							console.log("canvas", canvas);
							that.G.roundRect1(ctx, mycenter - 580 / 2, baseTop + 740, 580, 580, 0, "#fff");
							that.G.roundRect(ctx, img, mycenter - res.width / 2 - 40, baseTop + 770, QRSize, QRSize, 0);
							setTimeout(() => {
								imgres(canvas);
							}, 300);
						};
					},
					fail(err) {
						console.log(err);
					},
				});
			});
		},
		saveImg() {
			let that = this;
			console.log("saveImg");
			uni.saveImageToPhotosAlbum({
				filePath: that.currentImg,
				success(res) {
					console.log(res);
					if (res.errMsg == "saveImageToPhotosAlbum:ok") {
						uni.showToast({
							title: "保存成功 ",
							icon: "none",
							duration: 1500,
						});
					}
				},
				fail(res) {
					console.log(res);
					uni.showToast({
						title: "图片保存失败",
						icon: "none",
						duration: 1500,
					});
				},
			});
		},
	},
};
</script>

<style>
.tools_container {
	min-height: 100vh;
	background-color: #f5f5f5;
}
.list-image {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}
</style>