mz666
/
apply-assistant-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

海报分享

Browse Source
cyl/master-0804
wangxia 5 months ago
parent f3b5894dc6
commit b9ab7b9ea8
3 changed files with 548 additions and 13 deletions
Show Stats Download Patch File Download Diff File

511
root/bind/myMain copy.vue
Unescape Escape View File

@ -0,0 +1,511 @@
<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: 555px; margin: 0 auto; display: block" mode=""></image>
<view class="g_text_c g_fs_16 g_mt_12 g_mb_12 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">今日更新职位{{ recommendList.jobUpdateNum }}</view>
</view>
<view>
<image
:src="recommendList.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">{{ recommendList.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">{{ recommendList.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">{{ recommendList.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">
<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,
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,
},
recommendList: {
type: Object,
default: () => {
return {
logo: "",
jobNum: 0,
jobUpdateNum: 0,
recruitmentJobNum: 0,
downNum: 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
this.init();
uni.showLoading({
title: "生成中...",
});
// #endif
},
watch: {
shareJobImg(newValue, oldValue) {
if (newValue) {
uni.hideLoading();
}
},
recommendList(val) {
let that = this;
// #ifdef APP-PLUS || MP-KUAISHOU || MP-TOUTIAO
console.log("watch:", val);
uni.showLoading({
title: "生成中...",
});
that.appInfo = val;
this.init();
// #endif
},
// $route: "init",
},
methods: {
init() {
let that = this;
that.appInfo = that.recommendList;
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);
});
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; //文字高度
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: "保存失败, 请重试",
});
},
});
},
// 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",
});
},
});
},
// 设置分享布局
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, info.fullName, 140, 300, info.fullName.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); // 粉丝数
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>

44
root/bind/myMain.vue
Unescape Escape View File

@ -353,8 +353,18 @@ export default {
img.src = res.path;
console.log("img111", img);
img.onload = (info) => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
console.log("info111", info);
// 绘制背景色
that.G.roundRect1(ctx, 0, 0, canvas.width, canvas.height, 0, "#fea702");
// 绘制中间白色背景
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 - 300, 800, 136, 136, "#fea702");
// that.G.fillTextLineBreak(ctx, '扫一扫关注我的发单号',(mycenter - 800 ) / 2 + 50, canvas.height - 320, '扫一扫关注我的发单号' * 88, 88, "#333", 88, 600); // 总职位
// 绘制头像背景色
that.G.roundRect_yuan(ctx, (mycenter - 360 ) / 2, 110, 360, "#ffffff");
console.log("info111", info);
resolve(true);
};
},
@ -445,7 +455,7 @@ export default {
console.log("res333", res);
img.src = res.path;
img.onload = () => {
that.G.roundRect(ctx, img, (mycenter - 488) / 2, 1160, 488, 488, 0);
that.G.roundRect(ctx, img, (mycenter - 600) / 2, 1260, 600, 600, 0);
let info = that.recommendList;
console.log("info", info);
if (!info.logo) {
@ -459,17 +469,27 @@ export default {
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, info.fullName, 140, 300, info.fullName.length * 80, 80, "#333", 80, 600, "left"); // 企业名称
that.G.fillTextLineBreak(ctx, "今日更新职位" + info.jobUpdateNum, 140, 400, ("今日更新职位" + info.jobUpdateNum).length * 56, 56, "#999", 56, 500, "left"); // 今日更新职位
let numBase = 200
let numBase2 = numBase + (info.jobNum.toString().length * 88 + "总职位".length * 56 + 80)
let numBase3 = numBase + (info.jobNum.toString().length * 88 + "总职位".length * 56 + 80) + (info.recruitmentJobNum.toString().length * 88 + "在招数".length * 56 + 80)
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.agencyDesp + info.agencyDesp+ info.agencyDesp+ info.agencyDesp+ info.agencyDesp+ info.agencyDesp+ info.agencyDesp+ info.agencyDesp+ info.agencyDesp,numBase - 50, 900,mycenter - 360, 56, "#999", 56, 500,'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(), numBase, 760, info.jobNum.toString().length * 88, 88, "#333", 88, 600); // 总职位
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, info.recruitmentJobNum.toString(), numBase2, 760, info.recruitmentJobNum.toString().length * 88, 88, "#333", 88, 600); // 在招数
that.G.fillTextLineBreak(ctx, info.downNum.toString(),numBase3, 760, 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); // 粉丝数
console.log('info.jobNum.toString().length * 88',info.jobNum.toString().length * 88);
that.G.fillTextLineBreak(ctx, "总职位",numBase + info.jobNum.toString().length * 70, 755, "总职位".length * 56, 56, "#999", 56, 500); // 总职位
that.G.fillTextLineBreak(ctx, "在招数", numBase2 + info.recruitmentJobNum.toString().length * 70, 755, "在招数".length * 56, 56, "#999", 56, 500); // 在招数
that.G.fillTextLineBreak(ctx, "粉丝", numBase3 + info.downNum.toString().length * 60, 755, "粉丝".length * 56, 56, "#999", 56, 500); // 粉丝数
imgres(canvas);
};
},

6
utils/common.js
Unescape Escape View File

@ -1283,12 +1283,16 @@ let data = {
// 恢复之前保存的绘图上下文
ctx.restore();
},
roundRect_yuan (ctx, x, y, size) {
roundRect_yuan (ctx, x, y, size, color) {
// 开始绘制
ctx.save(); // 保存
ctx.beginPath(); // 开始绘制
// ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.arc(size / 2 + x, size / 2 + y, size / 2, 0, Math.PI * 2, false);
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.fill();
ctx.clip();
// 恢复之前保存的绘图上下文
ctx.restore();

Write Preview
Loading…
Cancel
Save