|
|
|
|
@ -0,0 +1,330 @@
|
|
|
|
|
<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:'',
|
|
|
|
|
_rid:''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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:'',
|
|
|
|
|
},
|
|
|
|
|
rid:{
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
rid(val){
|
|
|
|
|
this._rid = val;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init() {
|
|
|
|
|
let that = this;
|
|
|
|
|
that._name = that.name;
|
|
|
|
|
that._job = that.job;
|
|
|
|
|
that._oid = that.oid;
|
|
|
|
|
that._rid = that.rid;
|
|
|
|
|
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,
|
|
|
|
|
relationId:that._rid
|
|
|
|
|
},
|
|
|
|
|
(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>
|
