Skip to content

M
mallapp
Commit 3ed6864e authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/mallapp

parents 6623542a 31a81b7a
Show whitespace changes
Inline Side-by-side
Showing with 2917 additions and 3 deletions
pages.json
View file @ 3ed6864e
...@@ -41,6 +41,9 @@ ...@@ -41,6 +41,9 @@
}, },
{ {
"path": "list" "path": "list"
},
{
"path": "draw"
} }
] ]
}, },
...@@ -54,7 +57,7 @@ ...@@ -54,7 +57,7 @@
}, },
{ {
"path": "detail" "path": "detail"
},{ }, {
"path": "rules" "path": "rules"
} }
] ]
......
pages/goods/components/draw/style1.vue 0 → 100644
View file @ 3ed6864e
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<u-top-tips ref="uTips"></u-top-tips>
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (e) {
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300",
});
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.drawBg(ctx);
that.info.avatar_loca = image.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
},
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(24 + 45, 95 + 45, 45, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 24, 95, 90, 90);
ctx.restore();
},
drawTitle(ctx) {
let text = this.info.nickname + "向您推荐一个好物";
this.roundRect(
ctx,
24 + 90 + 20,
95 + 20,
text.length * 20,
55,
55,
"#f5f5f5"
);
ctx.fillStyle = "#000000";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(text, 24 + 134, 95 + 55);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 480, 975, 215, 215);
ctx.draw();
},
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 24, 95 + 130, 702, 702);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 24, 95 + 130, 702, 702);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 130, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 130,
702,
351
);
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 481, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 481,
702,
351
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(24, 95 + 130, 702, 351);
var imgRect = this.coverImg(
702,
351,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
24,
95 + 130,
702,
351
);
ctx.drawImage(this.config.loca_images[1].path, 24, 95 + 481, 351, 351);
ctx.drawImage(
this.config.loca_images[2].path,
24 + 351,
95 + 481,
351,
351
);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 24, 95 + 130, 351, 351);
ctx.drawImage(
this.config.loca_images[1].path,
24 + 351,
95 + 130,
351,
351
);
ctx.drawImage(this.config.loca_images[2].path, 24, 95 + 481, 351, 351);
ctx.drawImage(
this.config.loca_images[3].path,
24 + 351,
95 + 481,
351,
351
);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 24, 95 + 130, 351, 351);
ctx.drawImage(this.config.loca_images[1].path, 24, 95 + 481, 351, 351);
ctx.fillStyle = "#000";
ctx.fillRect(375, 225, 351, 234);
var imgRect = this.coverImg(
351,
234,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
225,
351,
234
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 459, 351, 234);
imgRect = this.coverImg(
351,
234,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375, 459, 351, 234
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 693, 351, 234);
imgRect = this.coverImg(
351,
234,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375, 693, 351, 234
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
let x = 24;
let y = 797 + 130;
let w = 702;
let h = 310;
let r = 20;
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = "#FFF";
// ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x, y);
ctx.lineTo(x + w, y);
//ctx.lineTo(x + w, y + r);
//ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
//ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x, y);
ctx.fill();
ctx.closePath();
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 54;
let y = 797 + 235 + 80;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, x + 30, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 54;
let y = 1194;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 360;
let n = this.info.goods_name;
let lines = 2;
let x = 54;
let y = 797 + 185;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > 360) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
}
</style>
pages/goods/components/draw/style2.vue 0 → 100644
View file @ 3ed6864e
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<u-top-tips ref="uTips"></u-top-tips>
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (e) {
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300",
});
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.drawBg(ctx);
that.drawGoodPicture(ctx);
that.info.avatar_loca = image.path;
},
});
} else {
this.drawBg(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(99, 1150, 45, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 54, 1105, 90, 90);
ctx.restore();
ctx.fillStyle = "#000000";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(this.info.nickname, 54+90+20, 1160);
},
drawTitle(ctx) {
let text = "长按识别小程序码进入";
this.roundRect(ctx, 54, 1210, 280, 52, 52, "#f5f5f5");
ctx.fillStyle = "#000000";
ctx.font = "24px 'microsoft yahei'";
ctx.fillText(text, 74, 1244);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 458, 1063, 215, 215);
ctx.draw();
},
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 0, 0, 750, 750);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 0, 0, 750, 750);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
0,
750,
375
);
ctx.fillStyle = "#000";
ctx.fillRect(0, 375, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
375,
750,
375
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 750, 375);
var imgRect = this.coverImg(
750,
375,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
0,
0,
750,
375
);
ctx.drawImage(this.config.loca_images[1].path, 0, 375, 375, 375);
ctx.drawImage(this.config.loca_images[2].path, 375, 375, 375, 375);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 0, 0, 375, 375);
ctx.drawImage(this.config.loca_images[1].path, 375, 0, 375, 375);
ctx.drawImage(this.config.loca_images[2].path, 0, 375, 375, 375);
ctx.drawImage(this.config.loca_images[3].path, 375, 375, 375, 375);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 0, 0, 375, 375);
ctx.drawImage(this.config.loca_images[1].path, 0, 375, 375, 375);
ctx.fillStyle = "#000";
ctx.fillRect(375, 0, 375, 250);
var imgRect = this.coverImg(
375,
250,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
0,
375,
250
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 250, 375, 250);
imgRect = this.coverImg(
375,
250,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
250,
375,
250
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 500, 375, 250);
imgRect = this.coverImg(
375,
250,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
500,
375,
250
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
if (!this.config.twostyle) {
let that = this;
uni.getImageInfo({
src:
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/style-two-end.png",
success: function (image) {
that.config.twostyle = image.path;
ctx.drawImage(that.config.twostyle, 24, 707, 702, 600);
that.showGoodName(ctx);
that.showGoodPrice(ctx);
//that.showTips(ctx);
that.drawQrCode(ctx);
that.drawAvatar(ctx);
that.drawTitle(ctx);
},
});
} else {
ctx.drawImage(this.config.twostyle, 24, 707, 702, 600);
this.showGoodName(ctx);
this.showGoodPrice(ctx);
//this.showTips(ctx);
this.drawQrCode(ctx);
that.drawAvatar(ctx);
that.drawTitle(ctx);
}
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 54;
let y = 900;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, x + 30, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 54;
let y = 1194;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 646;
let n = this.info.goods_name;
let lines = 2;
let x = 54;
let y = 780;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
}
</style>
pages/goods/components/draw/style3.vue 0 → 100644
View file @ 3ed6864e
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<u-top-tips ref="uTips"></u-top-tips>
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (e) {
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300",
});
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.info.avatar_loca = image.path;
uni.getImageInfo({
src:
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/three-love.png",
success: function (bxImg) {
that.drawBg(ctx);
that.config.bixin = bxImg.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
},
});
},
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
console.log(this.config.images);
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(85, 90, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 35, 40, 100, 100);
ctx.restore();
},
drawTitle(ctx) {
ctx.fillStyle = "#333333";
ctx.font = "24px 'microsoft yahei'";
ctx.fillText("我看上了这款商品", 165, 64);
ctx.fillText("帮我看看咋样啊~", 165, 103);
ctx.fillText("比心~", 165, 147);
ctx.drawImage(this.config.bixin, 235, 125, 24, 24);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 50, 1085, 232, 232);
ctx.draw();
},
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 36, 176, 678, 678);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 36, 176, 678, 678);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(36, 176, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
176,
678,
339
);
ctx.fillStyle = "#000";
ctx.fillRect(36, 515, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
515,
678,
339
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(36, 176, 678, 339);
var imgRect = this.coverImg(
678,
339,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
36,
176,
678,
339
);
ctx.drawImage(this.config.loca_images[1].path, 36, 515, 339, 339);
ctx.drawImage(this.config.loca_images[2].path, 375, 515, 339, 339);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 36, 176, 339, 339);
ctx.drawImage(this.config.loca_images[1].path, 375, 176, 339, 339);
ctx.drawImage(this.config.loca_images[2].path, 36, 515, 339, 339);
ctx.drawImage(this.config.loca_images[3].path, 375, 515, 339, 339);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 36, 176, 339, 339);
ctx.drawImage(this.config.loca_images[1].path, 36, 515, 339, 339);
ctx.fillStyle = "#000";
ctx.fillRect(375, 176, 339, 226);
var imgRect = this.coverImg(
339,
226,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
176,
339,
226
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 402, 339, 226);
imgRect = this.coverImg(
339,
226,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
402,
339,
226
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 628, 339, 226);
imgRect = this.coverImg(
339,
226,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
628,
339,
226
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#333";
ctx.font = "26px 'microsoft yahei'";
let x = 285;
let y = 990;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#333";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, 315, y);
ctx.beginPath();
ctx.fillStyle = "#FFF";
ctx.fillRect(36, 1055, 678, 2);
},
showTips(ctx) {
ctx.fillStyle = "#333";
ctx.font = "24px 'microsoft yahei'";
let x = 320;
let y = 1225;
ctx.fillText("长按识别小程序码 即可查看~", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#333333";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 618;
let n = this.info.goods_name;
let lines = 1;
let x = 60;
let y = 910;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y);
}
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
}
</style>
pages/goods/components/draw/style4.vue 0 → 100644
View file @ 3ed6864e
<template>
<view class="draw-style1" :style="{ zoom: zoom }">
<u-top-tips ref="uTips"></u-top-tips>
<canvas
canvas-id="firstCanvas"
class="sty-box"
@error="canvasIdErrorCallback"
></canvas>
</view>
</template>
<script>
export default {
props: {
autoHeight: {
type: String,
default: "0",
},
images: {
type: Array,
default: [],
},
bgType: {
type: Number,
default: 0,
},
bgColor: {
type: String,
default: "",
},
info: {
type: Object,
default: {},
},
},
data() {
return {
zoom: 1,
config: {
images: [],
bgType: 1,
bgColor: "",
info: {},
loca_images: [],
},
ctx: null,
};
},
watch: {
images: {
handler: function (val, oldval) {
this.config.images = val;
this.drawCtx();
},
deep: true,
},
bgType: {
handler: function (val, oldval) {
this.config.bgType = val;
this.drawCtx();
},
deep: true,
},
bgColor: {
handler: function (val, oldval) {
this.config.bgColor = val;
this.drawCtx();
},
deep: true,
},
info: {
handler: function (val, oldval) {
this.config.info = val;
this.drawCtx();
},
deep: true,
},
},
mounted() {
console.log("in draw");
this.zoom = (parseFloat(this.autoHeight) / 1344.0).toFixed(2);
this.config.images = this.images;
this.config.bgType = this.bgType;
this.config.bgColor = this.bgColor;
this.drawCtx();
},
onReady: function (e) {},
methods: {
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
saveImage() {
uni.showLoading({
title: "正在生成海报",
});
let that = this;
uni.canvasToTempFilePath(
{
canvasId: "firstCanvas",
success: (res) => {
uni.hideLoading();
uni.showLoading({
title: "正在保存海报",
});
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
});
},
fail: function (e) {
that.$refs.uTips.show({
title: "保存失败，请稍后重试",
type: "error",
duration: "2300",
});
},
complete: function () {
uni.hideLoading();
},
});
},
fail: function (e) {
console.log(e);
that.$refs.uTips.show({
title: "生成失败，请稍后重试",
type: "error",
duration: "2300",
});
},
},
this
);
},
drawCtx() {
let ctx = uni.createCanvasContext("firstCanvas", this);
let that = this;
if (!this.info.avatar_loca) {
uni.getImageInfo({
src: this.info.avatar,
success: function (image) {
that.drawBg(ctx);
that.info.avatar_loca = image.path;
that.drawAvatar(ctx);
that.drawTitle(ctx);
that.drawGoodPicture(ctx);
},
});
} else {
this.drawBg(ctx);
this.drawAvatar(ctx);
this.drawTitle(ctx);
this.drawGoodPicture(ctx);
}
},
drawGoodPicture(ctx) {
this.roundRect(ctx, 25, 138, 700, 1182, 15, "#fff");
if (this.config.images.length == 1) {
this.drawOnePic(ctx);
} else if (this.config.images.length == 2) {
this.drawTowPic(ctx);
} else if (this.config.images.length == 3) {
this.drawThreePic(ctx);
} else if (this.config.images.length == 4) {
this.drawFourPic(ctx);
} else if (this.config.images.length == 5) {
this.drawFivePic(ctx);
}
},
drawAvatar(ctx) {
ctx.save();
ctx.beginPath();
ctx.arc(74, 58, 50, 0, Math.PI * 2);
ctx.setFillStyle("#ffffff");
ctx.fill();
ctx.clip();
ctx.drawImage(this.info.avatar_loca, 24, 8, 100, 100);
ctx.restore();
},
drawTitle(ctx) {
let text = this.info.nickname + "向您推荐一个好物";
this.roundRect(ctx, 144, 34, text.length * 20, 55, 55, "#f5f5f5");
ctx.fillStyle = "#333";
ctx.font = "20px 'microsoft yahei'";
ctx.fillText(text, 165, 70);
},
drawBg(ctx) {
if (this.config.bgType == 1) {
ctx.fillStyle = this.config.bgColor;
ctx.fillRect(0, 0, 750, 1344);
} else {
let g = ctx.createLinearGradient(0, 0, 0, 1344);
g.addColorStop(0, this.config.bgColor);
console.log(`rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
g.addColorStop(1, `rgba(${this.colorRgb(this.config.bgColor)},0.3)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, 750, 1344);
}
},
drawQrCode(ctx) {
uni.getImageInfo({
src: this.info.qrcode_url,
success: function (image) {
ctx.drawImage(image.path, 306, 1097, 138, 138);
ctx.draw();
},
});
},
drawOnePic(ctx) {
let that = this;
if (!this.config.loca_images[0]) {
uni.getImageInfo({
src: this.config.images[0],
success: function (image) {
that.config.loca_images[0] = image.path;
ctx.drawImage(image.path, 50, 407, 650, 650);
that.otherDraw(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0], 50, 407, 650, 650);
that.otherDraw(ctx);
}
},
drawTowPic(ctx) {
if (this.config.loca_images.length < 2) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawTowPic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(50, 407, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
407,
650,
325
);
ctx.fillStyle = "#000";
ctx.fillRect(50, 732, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[1].width,
this.config.loca_images[1].height
);
ctx.drawImage(
this.config.loca_images[1].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
732,
650,
325
);
this.otherDraw(ctx);
}
},
drawThreePic(ctx) {
if (this.config.loca_images.length < 3) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawThreePic(ctx);
},
});
} else {
ctx.fillStyle = "#000";
ctx.fillRect(50, 407, 650, 325);
var imgRect = this.coverImg(
650,
325,
this.config.loca_images[0].width,
this.config.loca_images[0].height
);
ctx.drawImage(
this.config.loca_images[0].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
50,
407,
650,
325
);
ctx.drawImage(this.config.loca_images[1].path, 50, 732, 325, 325);
ctx.drawImage(this.config.loca_images[2].path, 375, 732, 325, 325);
this.otherDraw(ctx);
}
},
drawFourPic(ctx) {
if (this.config.loca_images.length < 4) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
that.config.loca_images.push(image);
that.drawFourPic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 50, 407, 325, 325);
ctx.drawImage(this.config.loca_images[1].path, 375, 407, 325, 325);
ctx.drawImage(this.config.loca_images[2].path, 50, 732, 325, 325);
ctx.drawImage(this.config.loca_images[3].path, 375, 732, 325, 325);
this.otherDraw(ctx);
}
},
drawFivePic(ctx) {
if (this.config.loca_images.length < 5) {
let that = this;
uni.getImageInfo({
src: this.config.images[this.config.loca_images.length],
success: function (image) {
console.log(image);
that.config.loca_images.push(image);
that.drawFivePic(ctx);
},
});
} else {
ctx.drawImage(this.config.loca_images[0].path, 50, 407, 325, 325);
ctx.drawImage(this.config.loca_images[1].path, 50, 732, 325, 325);
ctx.fillStyle = "#000";
ctx.fillRect(375, 407, 325, 216);
var imgRect = this.coverImg(
325,
216,
this.config.loca_images[2].width,
this.config.loca_images[2].height
);
ctx.drawImage(
this.config.loca_images[2].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
407,
325,
216
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 623, 325, 217);
imgRect = this.coverImg(
325,
217,
this.config.loca_images[3].width,
this.config.loca_images[3].height
);
ctx.drawImage(
this.config.loca_images[3].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
623,
325,
217
);
ctx.fillStyle = "#000";
ctx.fillRect(375, 840, 325, 217);
imgRect = this.coverImg(
325,
217,
this.config.loca_images[4].width,
this.config.loca_images[4].height
);
ctx.drawImage(
this.config.loca_images[4].path,
imgRect.sx,
imgRect.sy,
imgRect.sWidth,
imgRect.sHeight,
375,
840,
325,
217
);
this.otherDraw(ctx);
}
},
coverImg(box_w, box_h, source_w, source_h) {
var sx = 0,
sy = 0,
sWidth = source_w,
sHeight = source_h;
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
sWidth = (box_w * sHeight) / box_h;
sx = (source_w - sWidth) / 2;
} else if (
source_w < source_h ||
(source_w == source_h && box_w > box_h)
) {
sHeight = (box_h * sWidth) / box_w;
sy = (source_h - sHeight) / 2;
}
return {
sx,
sy,
sWidth,
sHeight,
};
},
otherDraw(ctx) {
this.showGoodName(ctx);
this.showGoodPrice(ctx);
this.showTips(ctx);
this.drawQrCode(ctx);
},
showGoodPrice(ctx) {
ctx.fillStyle = "#fc4a3b";
ctx.font = "26px 'microsoft yahei'";
let x = 55;
let y = 308;
ctx.fillText("￥", x, y);
ctx.fillStyle = "#fc4a3b";
ctx.font = "40px 'microsoft yahei'";
ctx.fillText(this.info.min_price, 85, y);
},
showTips(ctx) {
ctx.fillStyle = "gray";
ctx.font = "24px 'microsoft yahei'";
let x = 262;
let y = 1271;
ctx.fillText("长按识别小程序码进入", x, y);
},
showGoodName(ctx) {
ctx.fillStyle = "#000000";
ctx.font = "30px 'microsoft yahei'";
let maxWidth = 616;
let n = this.info.goods_name;
let lines = 2;
let x = 55;
let y = 200;
for (let i = 0; i < lines; i++) {
let lineText = "";
let currentWidth = 0;
for (let x = 0; x < n.length; x++) {
currentWidth += ctx.measureText(n[x]).width;
if (currentWidth > maxWidth) {
break;
} else {
lineText += n[x];
}
}
ctx.fillText(lineText, x, y + i * 55);
n = n.substring(lineText.length);
if (n == "") {
break;
}
}
if (n != "") {
ctx.fillText("...", x + maxWidth, y + 55);
}
},
roundRect(ctx, x, y, w, h, r, c = "#fff") {
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
ctx.fill();
ctx.closePath();
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
},
};
</script>
<style>
.draw-style1 {
width: 750px;
height: 1344px;
background: #fff;
}
.draw-style1 .sty-box {
width: 100%;
height: 100%;
}
.draw-style1 .sty-box .header {
height: 90px;
display: flex;
align-items: center;
margin-bottom: 40px;
}
.draw-style1 .sty-box .header .image {
width: 90px;
height: 90px;
border-radius: 90px;
margin-right: 20px;
}
.draw-style1 .sty-box .header .title {
font-size: 20px;
color: #000;
line-height: 55px;
height: 55px;
border-radius: 55px;
padding: 0 24px;
background: #fff;
}
.draw-style1 .sty-box .content-img,
.draw-style1 .sty-box .content-img-one {
width: 100%;
height: 702px;
}
.draw-style1 .sty-box .info-box {
padding: 28px 30px;
display: flex;
align-items: center;
background: #fff;
}
.draw-style1 .sty-box .info-box .qrcode {
width: 215px;
height: 215px;
}
.draw-style1 .sty-box .info-box .left-info {
width: 1px;
flex: 1;
}
.draw-style1 .sty-box .info-box .left-info .good-name {
font-size: 28px;
color: #000;
line-height: 1.5;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.draw-style1 .sty-box .info-box .left-info .good-price {
color: #fc4a3b;
font-size: 40px;
margin-bottom: 75px;
}
.draw-style1 .sty-box .info-box .left-info .tips {
font-size: 24px;
color: gray;
}
</style>
pages/goods/draw.vue 0 → 100644
View file @ 3ed6864e
<template>
<view class="draw-box" v-if="!loading">
<view class="show-box">
<view class="ad-box" :style="{ width: adWidth + 'px' }">
<style1
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '1'"
></style1>
<style2
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '2'"
></style2>
<style3
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '3'"
></style3>
<style4
:auto-height="adHeight"
:bg-color="generterConfig.bgColor"
:bg-type="generterConfig.bgType"
:images="generterConfig.images"
ref="shareImageContent"
:info="info"
v-if="adHeight > 0 && generterConfig.themeSty == '4'"
></style4>
</view>
</view>
<view class="op-box">
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">样式</view>
<view class="content">
<view
class="item"
v-for="(x, i) in config.poster_style"
:key="i"
:style="[i == chosens.style ? activeStyle : {}]"
@click="changeChosenHandler('style', i)"
>
样式{{ x }}
<view
class="chosen"
:style="[i == chosens.style ? chosenStyle : {}]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">排版</view>
<view class="content">
<view
class="item"
v-for="(x, i) in config.image_style"
:key="i"
:style="[i == chosens.image ? activeStyle : {}]"
@click="changeChosenHandler('image', i)"
>
<view class="fill">&nbsp;</view>
<text>{{ x }}张图</text>
<view
class="chosen"
v-if="i == chosens.image"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">类型</view>
<view class="content">
<view
class="item"
v-for="(x, i) in types"
:key="i"
:style="[i == chosens.type ? activeStyle : {}]"
@click="changeChosenHandler('type', i)"
>
<view :class="[x.clsName]"></view>
<text>{{ x.name }}</text>
<view
class="chosen"
v-if="i == chosens.type"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
<view class="filed">
<view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
<view class="name">颜色</view>
<view class="content">
<view>
<view class="color-box">
<view
class="color-item"
v-for="(x, i) in config.color"
:key="i"
:style="{ background: x }"
@click="changeChosenHandler('color', i)"
>
&nbsp;
<view
class="chosen"
v-if="i == chosens.color"
:style="[chosenStyle]"
>
<u-icon
style="display: inline-block;"
name="success"
color="#FFF"
size="24"
></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view style="margin: 0 5vw; margin-bottom: 20rpx;">
<u-button
@click="gerenalPicHandler"
:ripple="true"
:hair-line="false"
:custom-style="btn2"
>保存图片</u-button
>
</view>
</view>
</view>
</template>
<script>
import style1 from "./components/draw/style1";
import style2 from "./components/draw/style2";
import style3 from "./components/draw/style3";
import style4 from "./components/draw/style4";
export default {
components: { style1, style2, style3, style4 },
data() {
return {
mainColor: "",
activeStyle: {},
chosenStyle: {},
id: 0,
config: {},
info: {},
loading: true,
chosens: {
style: 0,
image: 0,
color: 0,
type: 0,
},
generterConfig: {
bgColor: "",
bgType: 1,
images: [],
themeSty: "1",
},
types: [
{
clsName: "fill",
name: "纯色",
},
{
clsName: "change",
name: "渐变",
},
],
btn2: {
flex: 1,
height: "100%",
borderRadius: "40px",
border: "none",
color: "#FFF",
fontSize: "13px",
width: "100%",
},
adWidth: 10,
adHeight: 0,
};
},
onLoad(option) {
uni.setNavigationBarTitle({
title: "商品海报",
});
this.mainColor = this.$uiConfig.mainColor;
this.activeStyle = {
background: "#FFF",
border: "2rpx solid " + this.mainColor,
color: this.mainColor,
};
this.chosenStyle = {
background: this.mainColor,
color: "#FFF",
};
this.id = option.id || 56978;
this.btn2.background = this.mainColor;
this.init();
},
onShow() {
setTimeout(() => {
this.queryHeight();
}, 1000);
},
methods: {
gerenalPicHandler() {
this.$refs.shareImageContent.saveImage();
},
queryHeight() {
let that = this;
let info = uni.createSelectorQuery().select(".ad-box");
info
.boundingClientRect(function (data) {
that.adHeight = data.height;
that.adWidth = data.height * 0.5622;
})
.exec();
},
changeChosenHandler(k, v) {
this.chosens[k] = v;
if (k == "style") {
this.generterConfig.themeSty = this.config.poster_style[v];
} else if (k == "color") {
this.generterConfig.bgColor = this.config.color[v];
} else if (k == "image") {
let temp = parseInt(this.config.image_style[v]);
this.generterConfig.images = [];
for (let i = 0; i < temp; i++) {
this.generterConfig.images.push(this.info.multi_map[i]);
}
} else if (k == "type") {
this.generterConfig.bgType = this.types[v].clsName == "fill" ? 1 : 2;
}
},
init() {
let h = this.apiheader();
this.request(
{
url: "",
header: h,
data: {
r: "plugin/quick_share/api/poster/config",
goods_id: this.id,
},
},
(res) => {
this.config = res.data.config;
this.info = res.data.info;
this.loading = false;
this.generterConfig.bgColor = this.config.color[0];
let temp = 1; //parseInt(this.config.image_style[0]);
for (let i = 0; i < temp; i++) {
this.generterConfig.images.push(this.info.multi_map[i]);
}
}
);
},
},
};
</script>
<style>
.draw-box {
height: 100vh;
display: flex;
flex-direction: column;
font-family: "a";
}
.draw-box .show-box {
background: #f5f5f5;
flex: 1;
height: 1rpx;
padding: 40rpx;
}
.ad-box {
height: 100%;
width: 56%;
margin: 0 auto;
}
.draw-box .op-box {
padding: 20rpx 20rpx 40rpx 20rpx;
background: #fff;
}
.draw-box .op-box .filed {
margin-bottom: 17rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.draw-box .op-box .filed .sty {
width: 20rpx;
height: 20rpx;
border: 5rpx solid transparent;
border-radius: 20rpx;
margin-right: 20rpx;
overflow: hidden;
}
.draw-box .op-box .filed .name {
width: 60rpx;
margin-right: 20rpx;
font-size: 24rpx;
color: #000;
}
.draw-box .op-box .filed .content {
display: flex;
flex-direction: row;
align-items: center;
flex: 1;
width: 1rpx;
padding-top: 13rpx;
overflow: auto;
}
.draw-box .op-box .filed .content .item {
padding: 10rpx 14rpx;
background: #f5f5f5;
color: #000;
position: relative;
font-size: 26rpx;
margin-right: 30rpx;
border-radius: 4rpx;
}
.draw-box .op-box .filed .content .item .fill {
display: inline-block;
height: 24rpx;
width: 24rpx;
vertical-align: middle;
background: #ddd;
margin-right: 10rpx;
}
.draw-box .op-box .filed .content .item .change {
display: inline-block;
height: 24rpx;
width: 24rpx;
vertical-align: middle;
background: linear-gradient(to bottom, #ddd, transparent);
margin-right: 10rpx;
}
.draw-box .op-box .filed .content .chosen {
border-radius: 26rpx;
height: 28rpx;
width: 28rpx;
position: absolute;
top: -13rpx;
right: -13rpx;
text-align: center;
line-height: 30rpx;
}
.draw-box .op-box .filed .content .color-box {
display: block;
white-space: nowrap;
}
.draw-box .op-box .filed .content .color-box .color-item {
position: relative;
margin-right: 30rpx;
border-radius: 4rpx;
width: 58rpx;
height: 58rpx;
display: inline-block;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment