apply-assistant-v3/root/detail/myMain.vue

<template>
	<view class="p-root-bind-my-main g_w_all g_h_all g_bg_f_5 g_kuaishou" 
	      :class="showBg ? 'g_pt_32' : ''"
	>
		<image :src="shareJobImg" show-menu-by-longpress style="width: 343px; height: 555px; margin: 0 auto; display: block" mode=""></image>
		<view class="g_text_c g_fs_16 g_mt_12 g_fw_600" style="background-color: #ededed;">长按图片转发给微信好友</view>
		<view v-if="allowClick">
			<view class="g_h_100" style="background-color: #ededed;"></view>
			<g-panel-fixed>
				<slot>
					<view class="g_flex_row_center">
						<g-button btnText="保存图片" size="small" type="default" @clickBtn="saveWXImageToAlbum"></g-button>
						<g-button btnText="直接转发" class="g_ml_16" size="small" openType="share" type="primary"></g-button>
					</view>
				</slot>
			</g-panel-fixed>
		</view>
		<canvas type="2d" style="position: absolute; left: -2000px; width: 425px; height: 350px; " id="canvasId" ref="canvasId"></canvas>
	</view>
</template>
<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			localBaseImg: this.G.store().localBaseImg,
			cdnBaseImg: this.G.store().cdnBaseImg,
			wxCode: "",
			appCodeSize: 0,
			appLogoSize: 0,
			appCodeTop: 0,
			appLogoTop: 0,
			appLogoLeft: 0,
			agencyName: "",
			shareJobImg: "",
			allowClick: false,
			appInfo: {},
			appfile: null,
			canvasWidth: 0,
			canvasHeight: 0,
			_name:'',
			_job:'',
			_oid:'',
		};
	},
	props: {
		showBg: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		active: {
			default: 0,
		},
		recommendList: {
			type: Object,
			default: () => {
				return {
					logo: "",
					jobNum: 0,
					jobUpdateNum: 0,
					recruitmentJobNum: 0,
					downNum: 0,
				};
			},
		},
		name:{
			default:'',
		},
		job:{
			default:'',
		},
		oid:{
			default:'',
		}
	},
	created() {
		let that = this;
		uni.getImageInfo({
			src: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png", // 网络图片
			success(res) {
				that.canvasWidth = res.width;
				that.canvasHeight = res.height;
			},
		});
		this.init();
		// uni.showLoading({
		// 	title: "生成中...",
		// });
	},
	watch: {
		shareJobImg(newValue, oldValue) {
			if (newValue) {
				uni.hideLoading();
			}
		},
		recommendList(val) {
			let that = this;
			console.log("watch:", val);
			// uni.showLoading({
			// 	title: "生成中...",
			// });
			that.appInfo = val;
			this.init();
		},
		name(val){
			this._name = val;
		},
		job(val){
			this._job = val;
		},
		oid(val){
			this._oid = val;
		}
	},
	methods: {
		init() {
			let that = this;	
			that._name = that.name;
			that._job = that.job;
			that._oid = that.oid;
			that.appInfo = that.recommendList;
			console.log("that.appInfo", that.appInfo);
			let _env = uni.getAccountInfoSync().miniProgram.envVersion;
			if(!that._oid || that._oid == 0){
				return false;
			}
			that.G.Get(
				that.api.bind_getOrderCode,
				{
					env: _env,
					orderId:that._oid,
				},
				(res) => {
					console.log("获取邀请码：", res);
					that.wxCode = "https://daotian.matripe.com.cn" + res.qrcode;
					that.agencyName = res.agencyName;
					// #ifdef MP-WEIXIN
					console.log("canvasRes1");

					that.getWXCanvas("https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png").then((canvasRes) => {
						console.log("canvasRes", canvasRes);
						that.shareJobImg = canvasRes.tempFilePath;
						that.allowClick = true;
						that.$emit("setImg", that.shareJobImg);
					});
					that.$emit("exportCode", {
						code: res.code,
						agencyName: res.agencyName,
					});
					// #endif
				}
			);
		},
		// 微信端绘制
		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;
									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(() => {
							//使用：
							this.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) => {
									uni.hideLoading();
									uni.showToast({
										title: "生成失败,请重试",
									});
								});
						});
					});
			});
		},

		// 微信端下载
		saveWXImageToAlbum() {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: that.shareJobImg,
				success() {
					uni.showToast({
						title: "保存成功",
					});
				},
				fail(err) {
					uni.showToast({
						title: "保存失败, 请重试",
					});
				},
			});
		},
		// 设置分享布局
		setShareJobImg(ctx, canvas, mycenter, funObj) {
			let that = this;
			return new Promise((imgres) => {
				uni.getImageInfo({
					src: that.wxCode,
					success(res) {
						const img = canvas.createImage();
						console.log("res333", res);
						img.src = res.path;
						img.onload = () => {
							that.G.roundRect(ctx, img, (mycenter - 488) / 2, 1160, 488, 488, 0);
							let info = that.recommendList;
							console.log("info", info);
							if (!info.logo) {
								info.logo = "https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/defaultAvatar.png";
							}
							console.log("that.recommendList333", that.recommendList);
							uni.getImageInfo({
								src: info.logo,
								success(res) {
									console.log("res444", res);
									const img = canvas.createImage();
									img.src = res.path;
									img.onload = () => {
										that.G.roundRect(ctx, img, 915, 218, 272, 272, 136); // logo
										that.G.fillTextLineBreak(ctx, that._name, 140, 300, that._name.length * 80, 80, "#333", 80, 600, "left"); // 企业名称
										that.G.fillTextLineBreak(ctx, that._job, 140, 400, that._job.length * 56, 56, "#999", 56, 500, "left"); // 今日更新职位

										// that.G.fillTextLineBreak(ctx, info.jobNum.toString(), 230, 620, info.jobNum.toString().length * 88, 88, "#333", 88, 600); // 总职位
										// that.G.fillTextLineBreak(ctx, info.recruitmentJobNum.toString(), 480, 620, info.recruitmentJobNum.toString().length * 88, 88, "#333", 88, 600); // 在招数
										// that.G.fillTextLineBreak(ctx, info.downNum.toString(), 730, 620, info.downNum.toString().length * 88, 88, "#333", 88, 600); // 粉丝数

										// that.G.fillTextLineBreak(ctx, "总职位", 230, 700, "总职位".length * 56, 56, "#999", 56, 500); // 总职位
										// that.G.fillTextLineBreak(ctx, "在招数", 480, 700, "在招数".length * 56, 56, "#999", 56, 500); // 在招数
										// that.G.fillTextLineBreak(ctx, "粉丝数", 730, 700, "粉丝数".length * 56, 56, "#999", 56, 500); // 粉丝数
										imgres(canvas);
									};
								},
								fail(err) {},
							});
						};
					},
					fail(err) {},
				});
			});
		},
		// 扫一扫
		handleOpenCamera() {
			let that = this;
			that.G.handleScanCode();
		},
	},
};
</script>

<style lang="scss">
.p-root-bind-my-main {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	.canvas-card {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: calc(100vw - 32px);
		height: calc(calc(100vw - 32px) * 2248 / 1372);
	}
	.m-card {
		top: calc(calc(calc(100vw - 32px) * 2248 / 1372) * (36 / 562));
		border-radius: 15px;
		width: calc(100vw - 74px);
		height: calc(calc(calc(100vw - 32px) * 2248 / 1372) * (198 / 562));
	}
}
</style>