dandelionPlatformToB-uni-v3/components/myMain.vue

<template>
	<view class="p-root-bind-my-main g_flex_column_center flex_center g_w_all g_h_all g_bg_f_5 g_kuaishou"
		:style="{ 'background-image': showBg ? 'url(' + cdnBaseImg + 'share_bg.svg)' : '' }"
		:class="showBg ? 'g_pt_32' : ''">
		<!-- #ifdef MP-WEIXIN -->
		<view class="g_position_rela" style="width: 343px; height: 567px; margin: 0 auto;">
			<div style="height: 16px;"></div>
			<view v-if="loading" class="g_position_abso g_top_0 g_left_0 g_w_all g_h_all g_flex_row_center flex_center" style="z-index: 10;">
				<rh-loading :loading="loading" />
			</view>
			<image v-show="!loading" :src="shareJobImg" show-menu-by-longpress style="width: 343px; height: 567px; display: block"
				mode=""></image>
		</view>
		<view v-show="!loading" class="g_text_c g_fs_16 g_mt_28 g_mb_32 g_fw_600" style="margin-top: 36px;color: #333;">长按图片转发给微信好友</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<canvas :style="{
				width: canvasWidth + 'px',
				height: canvasHeight + 'px',
				position: 'absolute',
				left: '-2000px',
				background: '#fff',
			}" canvas-id="text"></canvas>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="canvas-card g_position_rela" id="canvas-card"
			style="background-image: url('https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/v3/bg.png')">
			<view class="m-card g_position_abso" style="left: 50%; transform: translateX(-50%)">
				<view class="g_w_all g_h_all g_position_rela">
					<view class="g_pl_20 g_pt_18 g_pr_24">
						<view class="">
							<view class="g_fs_20 g_c_3 g_fw_600">{{ agencyName }}</view>
							<view class="g_fs_14 g_c_9 g_mt_6">今日更新职位{{ appInfo.jobUpdateNum }}</view>
						</view>
						<view>
							<image :src="appInfo.logo" style="border-radius: 50%; position: absolute; border: 2px solid #fff" :style="{
									width: appLogoSize / 2 + 'px',
									height: appLogoSize / 2 + 'px',
									top: appLogoTop,
									right: appLogoLeft,
								}"></image>
						</view>
					</view>
					<view class="g_flex_row_start g_pl_20" style="margin-top: 28px">
						<view class="g_mr_12">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ appInfo.jobNum }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">总职位</view>
						</view>
						<view class="g_mr_12">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ appInfo.recruitmentJobNum.toString() }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">在招数</view>
						</view>
						<view class="">
							<view class="g_fs_22 g_c_3 g_flex_row_center g_fw_600">{{ appInfo.downNum }}</view>
							<view class="g_fs_14 g_c_9 g_mt_4 g_flex_row_center">粉丝数</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-logo g_flex_c">
				<image :src="wxCode" style="position: absolute; left: 50%; transform: translateX(-50%)" :style="{
						width: appCodeSize / 2 + 'px',
						height: appCodeSize / 2 + 'px',
						top: appCodeTop,
					}"></image>
			</view>
		</view>
		<!-- #endif -->

		<view v-if="allowClick && false">
			<view class="g_h_100"></view>
			<rh-fixed>
				<slot>
					<view class="g_flex_row_center">
						<!-- #ifdef APP-PLUS -->
						<rh-button primaryColor="#00b666" btnText="扫一扫" size="small" type="default"
							@clickBtn="handleOpenCamera"></rh-button>
						<rh-button primaryColor="#00b666" btnText="保存图片" class="g_ml_16" size="small" type="primary"
							@clickBtn="saveAppImageCanvas"></rh-button>
						<!-- #endif -->

						<!-- #ifdef H5 -->
						<rh-button primaryColor="#00b666" btnText="保存图片" size="small" type="primary"
							@clickBtn="saveH5ImageCanvas"></rh-button>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<rh-button primaryColor="#00b666" btnText="保存图片" size="small" type="default"
							@clickBtn="saveWXImageToAlbum"></rh-button>
						<rh-button primaryColor="#00b666" btnText="直接转发" class="g_ml_16" size="small" openType="share"
							type="primary"></rh-button>
						<!-- #endif -->
					</view>
				</slot>
			</rh-fixed>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<canvas type="2d" style="position: absolute; left: -2000px; width: 425px; height: 350px; background: #fff"
			id="canvasId" ref="canvasId"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import {
		saveAs
	} from "file-saver";
	// #endif
	import canvasJS from '../utils/canvas.js'
	console.log('canvasJS',canvasJS)
	export default {
		onReady() {
			this.G.setNavStyle();
		},
		onShareAppMessage() {
			return this.G.shareFun();
		},
		data() {
			return {
				localBaseImg: this.G.store().localBaseImg,
				agencyInfo: uni.getStorageSync("agencyInfo"),
				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,
				loading: true,
			};
		},
		props: {
			showBg: {
				type: Boolean,
				default: () => {
					return true;
				},
			},
			active: {
				default: 0,
			},
		},
		created() {
			let that = this;

			uni.getImageInfo({
				src: "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/canvasBg.png", // 网络图片
				success(res) {
					that.canvasWidth = res.width;
					that.canvasHeight = res.height;
				},
			});

			// #ifdef MP-WEIXIN || H5
			if (uni.getStorageSync("poster_img")) {
				this.shareJobImg = uni.getStorageSync("poster_img");
				this.loading = false;
			} else {
				if (this.active == 1) {
					uni.showLoading({
						title: "生成中...",
					});
				}
				this.getDetail().then(() => {
					this.init();
				});
			}

			// #endif
		},
		lifetimes: {
			// 组件生命周期函数，在组件实例被从页面节点树移除时执行
			// detached() {
			// 	// console.log("detacheddetacheddetacheddetacheddetached");
			// 	uni.removeStorageSync("poster_img");
			// },
		},
		watch: {
			shareJobImg(newValue, oldValue) {
				console.log("shareJobImg123", newValue);
				if (newValue) {
					uni.hideLoading();
					this.loading = false;
				}
			},
			// $route: "init",
		},
		methods: {
			getDetail() {
				let that = this;
				return new Promise((reso) => {
					that.G.Get(
						that.api.bind_enterpriseDetail + "/" + uni.getStorageSync("apply-agencyId"), {
							agencyId: uni.getStorageSync("apply-agencyId"),
							type: 1,
						},
						(res) => {
							// console.log("recommendList", res);
							that.appInfo = res;
							reso();
						}
					);
				});
			},
			init() {
				let that = this;
				// console.log("that.appInfo", that.appInfo);
				// #ifdef APP-PLUS || MP-KUAISHOU
				let _env = "app";
				// #endif
				// #ifdef H5
				let _env = "app";
				// #endif
				// #ifdef MP-WEIXIN
				let _env = uni.getAccountInfoSync().miniProgram.envVersion;
				// #endif
				that.G.Get(
					that.api.bind_getCode, {
						env: _env,
						appTag:'fdb'
					},
					(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://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/canvasBg.png")
							.then((canvasRes) => {
								// console.log("canvasRes", canvasRes);
								that.shareJobImg = canvasRes.tempFilePath;
								that.allowClick = true;
								that.$emit("setImg", that.shareJobImg);
								uni.setStorageSync("poster_img", that.shareJobImg);
							});
						that.$emit("exportCode", {
							code: res.code,
							agencyName: res.agencyName,
						});
						console.log("canvasRes12");
						// #endif
					}
				);
			},

			// App端绘制
			getAppCanvas(sharelImg, type) {
				let that = this,
					ctx = uni.createCanvasContext("text");
				let info = that.appInfo;
				new Promise(function(resolve) {
					// 绘制背景图片
					uni.downloadFile({
						url: sharelImg,
						success: function(bgRes) {
							uni.getImageInfo({
								src: bgRes.tempFilePath, // 网络图片
								success(res) {
									let _width = res.width;
									let _height = res.height;
									ctx.drawImage(bgRes.tempFilePath, 0, 0, _width, _height);
									uni.downloadFile({
										url: info.logo,
										success: function(bgRes) {
											// that.G.roundRect(ctx, bgRes.tempFilePath, 915, 218, 272, 272, 136); // logo
											uni.downloadFile({
												url: that.wxCode,
												success: function(QRres) {
													that.G.roundRect(ctx, QRres.tempFilePath, (_width - 488) / 2, 1160,
														488, 488, 0);
													that.G.fillTextLineBreak(ctx, info.agencyName, 140, 300, info
														.agencyName.length * 80, 80, "#333", 80, 600, "left"); // 企业名称
													that.G.fillTextLineBreak(ctx, "今日更新职位" + info.jobUpdateNum, 140, 400,
														("今日更新职位" + info.jobUpdateNum).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); // 粉丝数
													ctx.restore();
													ctx.draw(false, () => {
														setTimeout(function() {
															that.endAppCanvas(ctx, _width, _height);
														}, 50);
													});
												},
											});
										},
									});
								},
								fail(err) {},
							});
						},
					});
				}).then(() => {});
			},
			endAppCanvas(ctx, _width, _height) {
				let that = this;
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: _width,
					height: _height,
					canvasId: "text",
					success: function(pathRres) {
						const savedFilePath = pathRres.tempFilePath; //相对路径
						const path = plus.io.convertLocalFileSystemURL(savedFilePath); //绝对路径
						const fileReader = new plus.io.FileReader();
						fileReader.readAsDataURL(path);
						fileReader.onloadend = (res) => {
							that.shareJobImg = res.target.result;
							that.appfile = savedFilePath;
						};
					},
				});
			},
			// 微信端绘制
			getWXCanvas(sharelImg, type) {
				const that = this;
				return new Promise((resolve) => {
					var mycenter = 0; //文字左右居中显示
					var myheight = 0; //文字高度
					var baseColor = this.agencyInfo.themeColor || "#52cd8d"; //背景色
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#canvasId")
						.fields({
							node: true,
							size: true,
						})
						.exec((res) => {
							const canvas = res[0].node;
							const ctx = canvas.getContext("2d");
							// 元素整体上移偏移量
							const offsetTop = 190;
							new Promise(function(resolve) {
								uni.getImageInfo({
									src: sharelImg,
									success(res) {
										canvas.width = res.width;
										canvas.height = res.height + 250;
										mycenter = canvas.width;
										myheight = canvas.height;
										const img = canvas.createImage();
										img.src = res.path;
										img.onload = (info) => {
											// 绘制背景色（圆角矩形）
											canvasJS.roundRect1(ctx, 0, 0, canvas.width, canvas.height, 30, baseColor);
											// 绘制中间白色背景
											const whiteTop = 120;
											const whiteHeight = canvas.height - 240;
											canvasJS.roundRect1(ctx, 60, whiteTop, canvas.width - 120, whiteHeight, 60, "#fff");
											// 绘制关注发单号背景色
											canvasJS.roundRect1(ctx, (mycenter - 800) / 2, canvas.height - 540 - offsetTop, 800, 136, 135,
												baseColor);
											let qrTop = 1150 - offsetTop;
											// 二维码左上角的
											canvasJS.roundRect1(ctx, (mycenter - 680) / 2 - 5, qrTop - 5, 140, 140, 80, baseColor);
											// 二维码右上角的
											canvasJS.roundRect1(ctx, (mycenter - 680) / 2 + 545, qrTop - 5, 140, 140, 80, baseColor);
											// 二维码左下角的
											canvasJS.roundRect1(ctx, (mycenter - 680) / 2 - 5, qrTop + 545, 140, 140, 80,
												baseColor);
											// 二维码右下角的
											canvasJS.roundRect1(ctx, (mycenter - 680) / 2 + 545, qrTop + 545, 140, 140, 80,
												baseColor);
											// 绘制关注发单号文字
											canvasJS.fillTextLineBreak(ctx, "扫一扫关注我的发单号", (mycenter - "扫一扫关注我的发单号".length * 54) /
												2, canvas.height - 455 - offsetTop, "扫一扫关注我的发单号".length * 54, 58, that.isLightColor(
													baseColor) ? "#333" : "#fff", 54, 600);

											canvasJS.drawCenteredText(ctx, mycenter, canvas.height - 170 - offsetTop, [{
												content: "该图片请不要发给工友",
												color: "#d30000",
												fontWeight: 600,
												fontSize: 72
											}]);
											canvasJS.drawCenteredText(ctx, mycenter, canvas.height - 60 - offsetTop, [{
												content: "关注后能直接看到单子的代理费/佣金",
												color: "#333",
												fontWeight: 500,
												fontSize: 48
											}]);

											resolve(true);
										};
									},
									fail(err) {},
								});
							}).then(() => {
								this.setShareJobImg(ctx, canvas, mycenter, offsetTop)
									.then(function(canvas1) {
										uni.canvasToTempFilePath({
											canvas: canvas1,
											success(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: "保存失败, 请重试",
						});
					},
				});
			},
			// H5下载
			saveH5ImageCanvas() {
				let that = this;
				// #ifdef H5
				// #endif
			},
			// APP下载
			saveAppImageCanvas() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.appfile,
					success() {
						uni.showToast({
							title: "保存成功",
							icon: "success",
						});
					},
					fail() {
						uni.showToast({
							title: "保存失败",
							icon: "none",
						});
					},
				});
			},
			// 判断颜色是浅色还是深色
			isLightColor(hexColor, threshold = 180) {
				hexColor = hexColor.replace("#", "");

				if (hexColor.length === 3) {
					hexColor = hexColor[0] + hexColor[0] + hexColor[1] + hexColor[1] + hexColor[2] + hexColor[2];
				}

				const r = parseInt(hexColor.substring(0, 2), 16);
				const g = parseInt(hexColor.substring(2, 4), 16);
				const b = parseInt(hexColor.substring(4, 6), 16);

				const brightness = (r * 299 + g * 587 + b * 114) / 1000;

				return brightness > threshold;
			},
			formatNumberAdvanced(num, fixed = 1) {
				if (typeof num !== "number" || isNaN(num)) {
					return "0";
				}

				// 如果数字小于1000，直接返回
				if (num < 10000) {
					return num.toString();
				}

				// 如果数字小于10000，转换为千
				// if (num < 10000) {
				// 	return (num / 1000).toFixed(fixed) + "K";
				// }

				// 如果数字大于等于10000，转换为万
				return (num / 10000).toFixed(fixed);
			},
			// 设置分享布局
			setShareJobImg(ctx, canvas, mycenter, offsetTop = 0) {
				let that = this;
				return new Promise((imgres) => {
					uni.getImageInfo({
						src: that.wxCode,
						success(res) {
							const img = canvas.createImage();
							img.src = res.path;
							img.onload = () => {
								canvasJS.roundRect(ctx, img, (mycenter - 680) / 2, 1150 - offsetTop, 680, 680, 50);
								let info = that.appInfo;
								if (!info.logo) {
									info.logo =
										"https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/ibocai/defaultAvatar.png";
								}
								uni.getImageInfo({
									src: info.logo,
									success(res) {
										const img = canvas.createImage();
										img.src = res.path;
										img.onload = () => {
											let numBase = 150;
											canvasJS.fillTextLineBreak(ctx, info.fullName, (mycenter - info.fullName.length *
												80) / 2, 550 - offsetTop, info.fullName.length * 80, 200, "#333", 90, 600, "left");

											canvasJS.fillTextLineBreak(ctx,
												`【${info.fullName}】新一代发单号（小程序），海量职位每日更新，线上报名方便快捷，工单状态实时查看。`, numBase - 25, 800 - offsetTop,
												mycenter - 260, 86, "#666", 56, 500, "center");
											const textSegments = [
												{
													content: that.formatNumberAdvanced(info.recruitmentJobNum).toString(),
													color: "#000",
													fontWeight: 500,
													fontSize: 80,
													space: 10
												},
												{
													content: "在招",
													color: "#666",
													fontWeight: 500,
													fontSize: 56,
													space: 70
												},
												{
													content: that.formatNumberAdvanced(info.downNum).toString(),
													color: "#000",
													fontWeight: 500,
													fontSize: 80,
													space: 10
												},
												{
													content: "粉丝",
													color: "#666",
													fontWeight: 500,
													fontSize: 56,
													space: 40
												},
											];
											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>