|
|
|
|
@ -0,0 +1,588 @@
|
|
|
|
|
<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' : ''">
|
|
|
|
|
<view class="g_flex_row_center g_fs_22 g_c_3 g_fw_600 g_mb_24" v-if="showBg">邀请粉丝（代理）关注我的发单号</view>
|
|
|
|
|
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
|
|
|
<image :src="shareJobImg" show-menu-by-longpress style="width: 343px; height: 635px; margin: 0 auto; display: block" mode=""></image>
|
|
|
|
|
<view class="g_text_c g_fs_16 g_mt_12 g_mb_32 g_fw_600">长按图片转发给微信好友</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://matripe-cms.oss-cn-beijing.aliyuncs.com/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>
|
|
|
|
|
<g-panel-fixed>
|
|
|
|
|
<slot>
|
|
|
|
|
<view class="g_flex_row_center">
|
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
|
|
|
<g-button btnText="扫一扫" size="small" type="default" @clickBtn="handleOpenCamera"></g-button>
|
|
|
|
|
<g-button btnText="保存图片" class="g_ml_16" size="small" type="primary" @clickBtn="saveAppImageCanvas"></g-button>
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
|
|
|
|
<!-- #ifdef H5 -->
|
|
|
|
|
<g-button btnText="保存图片" size="small" type="primary" @clickBtn="saveH5ImageCanvas"></g-button>
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
|
|
<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>
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
</view>
|
|
|
|
|
</slot>
|
|
|
|
|
</g-panel-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
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
showBg: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: () => {
|
|
|
|
|
return true;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
active: {
|
|
|
|
|
default: 0,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// #ifdef MP-WEIXIN || H5
|
|
|
|
|
if (uni.getStorageSync("poster_img")) {
|
|
|
|
|
this.shareJobImg = uni.getStorageSync("poster_img");
|
|
|
|
|
} else {
|
|
|
|
|
this.getDetail().then(() => {
|
|
|
|
|
this.init();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// #endif
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
shareJobImg(newValue, oldValue) {
|
|
|
|
|
console.log("shareJobImg123", newValue);
|
|
|
|
|
if (newValue) {
|
|
|
|
|
console.log("shareJobImg345", newValue);
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// $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,
|
|
|
|
|
},
|
|
|
|
|
(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);
|
|
|
|
|
uni.setStorageSync("poster_img", that.shareJobImg);
|
|
|
|
|
});
|
|
|
|
|
that.$emit("exportCode", {
|
|
|
|
|
code: res.code,
|
|
|
|
|
agencyName: res.agencyName,
|
|
|
|
|
});
|
|
|
|
|
// #endif
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
that.appCodeSize = uni.getSystemInfoSync().windowWidth * (122 / 375) * 2;
|
|
|
|
|
that.appCodeTop = (((uni.getSystemInfoSync().windowWidth - 32) * 2248) / 1372) * (290 / 562) + "px";
|
|
|
|
|
|
|
|
|
|
that.appLogoSize = uni.getSystemInfoSync().windowWidth * (68 / 375) * 2;
|
|
|
|
|
that.appLogoTop = (((uni.getSystemInfoSync().windowWidth - 32) * 2248) / 1372) * (36 / 562) - uni.getSystemInfoSync().windowWidth * 0.046 + "px";
|
|
|
|
|
that.appLogoLeft = (uni.getSystemInfoSync().windowWidth - 74) * (24 / 303) + uni.getSystemInfoSync().windowWidth * 0.00065 + "px";
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
that.allowClick = true;
|
|
|
|
|
that.$emit("exportCode", {
|
|
|
|
|
code: res.code,
|
|
|
|
|
agencyName: res.agencyName,
|
|
|
|
|
});
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
// #ifdef APP-PLUS || MP-KUAISHOU
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
that.allowClick = true;
|
|
|
|
|
that.getAppCanvas("https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/canvasBg.png");
|
|
|
|
|
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) => {
|
|
|
|
|
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 + 250;
|
|
|
|
|
mycenter = canvas.width;
|
|
|
|
|
myheight = canvas.height;
|
|
|
|
|
const img = canvas.createImage();
|
|
|
|
|
img.src = res.path;
|
|
|
|
|
console.log("img111", img);
|
|
|
|
|
img.onload = (info) => {
|
|
|
|
|
// 绘制背景色
|
|
|
|
|
that.G.roundRect1(ctx, 0, 0, canvas.width, canvas.height + 250, 0, baseColor);
|
|
|
|
|
// 绘制中间白色背景
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - canvas.width + 120) / 2, 280, canvas.width - 120, canvas.height - 360, 180, "#fff");
|
|
|
|
|
// 绘制关注发单号背景色
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - 800) / 2, canvas.height - 600, 800, 136, 135, baseColor);
|
|
|
|
|
let qrTop = 1195;
|
|
|
|
|
// 二维码左上角的
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - 600) / 2 - 5, qrTop, 136, 136, 80, baseColor);
|
|
|
|
|
// 二维码右上角的
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - 600) / 2 + 470, qrTop, 136, 136, 80, baseColor);
|
|
|
|
|
// 二维码左下角的
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - 600) / 2 - 5, qrTop + 475, 136, 136, 80, baseColor);
|
|
|
|
|
// 二维码右下角的
|
|
|
|
|
that.G.roundRect1(ctx, (mycenter - 600) / 2 + 470, qrTop + 475, 136, 136, 80, baseColor);
|
|
|
|
|
// 绘制关注发单号文字
|
|
|
|
|
that.G.fillTextLineBreak(ctx, "扫一扫关注我的发单号", (mycenter - "扫一扫关注我的发单号".length * 54) / 2, canvas.height - 515, "扫一扫关注我的发单号".length * 54, 58, that.isLightColor(baseColor) ? "#333" : "#fff", 54, 600); // 总职位
|
|
|
|
|
|
|
|
|
|
that.G.drawCenteredText(ctx, mycenter, canvas.height - 300, [{ content: "该图片请不要发给工友", color: "#d30000", fontWeight: 500, fontSize: 72 }]);
|
|
|
|
|
that.G.drawCenteredText(ctx, mycenter, canvas.height - 200, [{ content: "关注后能直接看到单子的代理费/佣金", color: "#333", fontWeight: 500, fontSize: 48 }]);
|
|
|
|
|
|
|
|
|
|
// 绘制头像背景色
|
|
|
|
|
that.G.roundRect_yuan(ctx, (mycenter - 360) / 2, 110, 360, "#ffffff");
|
|
|
|
|
// uni.getImageInfo({
|
|
|
|
|
// src: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/dailibaoming/phone.png", // 手机图标图片
|
|
|
|
|
// success(res) {
|
|
|
|
|
// const img = canvas.createImage();
|
|
|
|
|
// console.log("res333", res);
|
|
|
|
|
// img.src = res.path;
|
|
|
|
|
// img.onload = () => {
|
|
|
|
|
// that.G.roundRect(ctx, img, (mycenter - 800) / 2 + 100, canvas.height - 565, 70, 70, 0);
|
|
|
|
|
resolve(true);
|
|
|
|
|
// };
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
fail(err) {
|
|
|
|
|
console.log("errerrerrerrerrerrerr", 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: "保存失败, 请重试",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 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 < 1000) {
|
|
|
|
|
return num.toString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果数字小于10000，转换为千
|
|
|
|
|
if (num < 10000) {
|
|
|
|
|
return (num / 1000).toFixed(fixed) + "千";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果数字大于等于10000，转换为万
|
|
|
|
|
return (num / 10000).toFixed(fixed) + "万";
|
|
|
|
|
},
|
|
|
|
|
// 设置分享布局
|
|
|
|
|
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 - 600) / 2, 1200, 600, 600, 35);
|
|
|
|
|
let info = that.appInfo;
|
|
|
|
|
console.log("info", info);
|
|
|
|
|
if (!info.logo) {
|
|
|
|
|
info.logo = "https://matripe-cms.oss-cn-beijing.aliyuncs.com/ibocai/defaultAvatar.png";
|
|
|
|
|
}
|
|
|
|
|
uni.getImageInfo({
|
|
|
|
|
src: info.logo,
|
|
|
|
|
success(res) {
|
|
|
|
|
console.log("res444", res);
|
|
|
|
|
const img = canvas.createImage();
|
|
|
|
|
img.src = res.path;
|
|
|
|
|
img.onload = () => {
|
|
|
|
|
// info.jobNum = 10000
|
|
|
|
|
// info.recruitmentJobNum = 1000
|
|
|
|
|
// info.downNum = 32
|
|
|
|
|
let numBase = 150;
|
|
|
|
|
that.G.roundRect(ctx, img, (mycenter - 300) / 2, 140, 300, 300, 150); // logo
|
|
|
|
|
that.G.fillTextLineBreak(ctx, info.fullName, (mycenter - info.fullName.length * 80) / 2, 600, info.fullName.length * 80, 200, "#333", 80, 600, "left"); // 企业名称
|
|
|
|
|
|
|
|
|
|
that.G.fillTextLineBreak(ctx, `【${info.fullName}】新一代发单号（小程序），海量职位每日更新，线上报名方便快捷，工单状态实时查看。`, numBase - 25, 870, mycenter - 260, 86, "#666", 56, 500, "center"); // slogan
|
|
|
|
|
// that.G.fillTextLineBreak(ctx, info.agencyDesp, numBase - 35, 870, mycenter - 260, 86, "#666", 56, 500, "center"); // slogan
|
|
|
|
|
|
|
|
|
|
// that.G.fillTextLineBreak(ctx, "今日更新职位" + info.jobUpdateNum, 140, 400, ("今日更新职位" + info.jobUpdateNum).length * 56, 56, "#999", 56, 500, "left"); // 今日更新职位
|
|
|
|
|
console.log("that.formatNumberAdvanced(info.jobNum)", that.formatNumberAdvanced(info.jobNum));
|
|
|
|
|
const textSegments = [
|
|
|
|
|
{ content: that.formatNumberAdvanced(info.jobNum).toString(), color: "#000", fontWeight: 500, fontSize: 80, space: 10 },
|
|
|
|
|
{ content: "总职位", color: "#666", fontWeight: 500, fontSize: 56, space: 70 },
|
|
|
|
|
{ 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 },
|
|
|
|
|
];
|
|
|
|
|
that.G.drawCenteredText(ctx, mycenter + 20, 745, textSegments);
|
|
|
|
|
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>
|
