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

头像

Browse Source
cyl/master
jscyl13849007907 7 days ago
parent 3bb3cebbb0
commit 3899b08975
2 changed files with 594 additions and 469 deletions
Show Stats Download Patch File Download Diff File

206
components/myMain.vue
Unescape Escape View File

@ -1,24 +1,25 @@
<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="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>
<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="{
<canvas :style="{
width: canvasWidth + 'px',
height: canvasHeight + 'px',
position: 'absolute',
left: '-2000px',
background: '#fff',
}"
canvas-id="text"
></canvas>
}" 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="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">
@ -27,16 +28,12 @@
<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="{
<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>
}"></image>
</view>
</view>
<view class="g_flex_row_start g_pl_20" style="margin-top: 28px">
@ -56,15 +53,11 @@
</view>
</view>
<view class="m-logo g_flex_c">
<image
:src="wxCode"
style="position: absolute; left: 50%; transform: translateX(-50%)"
:style="{
<image :src="wxCode" style="position: absolute; left: 50%; transform: translateX(-50%)" :style="{
width: appCodeSize / 2 + 'px',
height: appCodeSize / 2 + 'px',
top: appCodeTop,
}"
></image>
}"></image>
</view>
</view>
<!-- #endif -->
@ -75,33 +68,42 @@
<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>
<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>
<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>
<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>
<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";
import {
saveAs
} from "file-saver";
// #endif
import canvasJS from '../utils/canvas.js'
console.log('canvasJS',canvasJS)
export default {
onReady() {
this.G.setNavStyle();
@ -191,8 +193,7 @@ export default {
let that = this;
return new Promise((reso) => {
that.G.Get(
that.api.bind_enterpriseDetail + "/" + uni.getStorageSync("apply-agencyId"),
{
that.api.bind_enterpriseDetail + "/" + uni.getStorageSync("apply-agencyId"), {
agencyId: uni.getStorageSync("apply-agencyId"),
type: 1,
},
@ -217,8 +218,7 @@ export default {
let _env = uni.getAccountInfoSync().miniProgram.envVersion;
// #endif
that.G.Get(
that.api.bind_getCode,
{
that.api.bind_getCode, {
env: _env,
},
(res) => {
@ -228,7 +228,8 @@ export default {
// #ifdef MP-WEIXIN
// console.log("canvasRes1");
that.getWXCanvas("https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/canvasBg.png").then((canvasRes) => {
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;
@ -268,17 +269,28 @@ export default {
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.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, 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); // 粉丝数
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() {
@ -350,40 +362,45 @@ export default {
// console.log("img111", img);
img.onload = (info) => {
// 绘制背景色
that.G.roundRect1(ctx, 0, 0, canvas.width, canvas.height + 250, 0, baseColor);
canvasJS.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");
canvasJS.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);
canvasJS.roundRect1(ctx, (mycenter - 800) / 2, canvas.height - 600, 800, 136, 135,
baseColor);
let qrTop = 1145;
// 二维码左上角的
that.G.roundRect1(ctx, (mycenter - 600) / 2 - 5, qrTop, 136, 136, 80, baseColor);
canvasJS.roundRect1(ctx, (mycenter - 600) / 2 - 5, qrTop, 136, 136, 80, baseColor);
// 二维码右上角的
that.G.roundRect1(ctx, (mycenter - 600) / 2 + 470, qrTop, 136, 136, 80, baseColor);
canvasJS.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);
canvasJS.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);
canvasJS.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); // 总职位
canvasJS.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 }]);
canvasJS.drawCenteredText(ctx, mycenter, canvas.height - 300, [{
content: "该图片请不要发给工友",
color: "#d30000",
fontWeight: 500,
fontSize: 72
}]);
canvasJS.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://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/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);
canvasJS.roundRect_yuan(ctx, (mycenter - 360) / 2, 110, 360, "#ffffff");
resolve(true);
// };
// },
// });
};
},
fail(err) {
@ -508,41 +525,56 @@ export default {
// console.log("res333", res);
img.src = res.path;
img.onload = () => {
that.G.roundRect(ctx, img, (mycenter - 600) / 2, 1150, 600, 600, 35);
canvasJS.roundRect(ctx, img, (mycenter - 600) / 2, 1150, 600, 600, 35);
let info = that.appInfo;
// console.log("info", info);
if (!info.logo) {
info.logo = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/ibocai/defaultAvatar.png";
info.logo =
"https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/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"); // 企业名称
canvasJS.roundRect(ctx, img, (mycenter - 300) / 2, 140, 300, 300, 150); // logo
canvasJS.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, 800, 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));
canvasJS.fillTextLineBreak(ctx,
`【${info.fullName}】新一代发单号（小程序），海量职位每日更新，线上报名方便快捷，工单状态实时查看。`, numBase - 25, 800,
mycenter - 260, 86, "#666", 56, 500, "center"); // slogan
const textSegments = [
// { content: that.formatNumberAdvanced(info.jobNum).toString(), color: "#000", fontWeight: 500, fontSize: 80, space: info.jobNum < 10000 ? 10 : 0 },
// info.jobNum < 10000 ? null : { content: "万", color: "#000", fontWeight: 500, fontSize: 64, 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 },
{
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);
};
},
@ -567,12 +599,14 @@ export default {
.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;

91
utils/canvas.js
Unescape Escape View File

@ -0,0 +1,91 @@
export default {
roundRect1 (ctx, x, y, w, h, r, color) {
//绘制圆角矩形(无填充色))
ctx.save();
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.lineJoin = "round"; //交点设置成圆角
ctx.lineWidth = r;
ctx.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
ctx.fillRect(x + r, y + r, w - r * 2, h - r * 2);
ctx.stroke();
ctx.closePath();
},
fillTextLineBreak (ctx, text, x, y, lw, lh, color = "#333", font = "32", weight = "500", align = "left") {
var i = 0;
var n = 0;
var r = -1;
// var initHeight = 0;
ctx.font = weight + " " + font + "px Arial"; //字体大小
ctx.fillStyle = color; //字体颜色
// ctx.textBaseline = align;
// ctx.textAlign = align;
while (i < text.length) {
while (ctx.measureText(text.substring(n, i)).width < lw && i < text.length) {
i++;
}
r++;
ctx.fillText(text.substring(n, i), x, y + lh * r);
n = i;
}
},
drawCenteredText (ctx, x, y, textSegments) {
// 计算总宽度
const totalWidth = this.calculateTotalWidth(ctx, textSegments);
// console.log('totalWidth', totalWidth, textSegments);
// 计算起始X坐标（居中位置）
const centerX = x;
const startX = (centerX - totalWidth) / 2;
const centerY = y;
// 绘制拼接文本
let currentX = startX;
textSegments.forEach((segment) => {
if (segment) {
ctx.font = `${segment.fontWeight} ${segment.fontSize}px Arial`;
ctx.fillStyle = segment.color;
// 文本基线设为中间，使垂直方向也居中
// ctx.textBaseline = "middle";
// 绘制当前文本片段
ctx.fillText(segment.content, currentX, centerY);
// 更新X坐标，为下一段文本做准备, 文本长度为1的时候，使用字体大小
currentX += ((ctx.measureText(segment.content).width) + (segment.space || 0));
}
});
},
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();
},
/**
* 背景图绘制
*/
roundRect (ctx, img, bg_x, bg_y, bg_w, bg_h, bg_r) {
// 开始绘制
ctx.save();
ctx.beginPath();
ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
ctx.clip();
ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
// 恢复之前保存的绘图上下文
ctx.restore();
},
}
Write Preview
Loading…
Cancel
Save