415 lines
12 KiB
JavaScript
415 lines
12 KiB
JavaScript
// mycomponent/temp/qrcode/qrcode.js
|
|
var posterBehavior = require("../../../poster/poster.js");
|
|
var app = getApp();
|
|
|
|
Component({
|
|
behaviors: [posterBehavior],
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
goodsId: {
|
|
type: Number,
|
|
},
|
|
// 拼团后端生成海报
|
|
ispt: {
|
|
type: null,
|
|
},
|
|
activityid: {
|
|
type: null
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
listData: []
|
|
},
|
|
ready() {
|
|
// this.getPosterPic();
|
|
},
|
|
observers: {
|
|
isshow: function (isshow) {
|
|
if (isshow && !this.data.listData[this.data.goodsId] && this.data.getFlag) {
|
|
this.data.getFlag = false;
|
|
this.setData({ poster: "", loading: 0 });
|
|
this.getPosterPic();
|
|
} else if (this.data.listData[this.data.goodsId] != "") {
|
|
this.setData({
|
|
poster: this.data.listData[this.data.goodsId],
|
|
});
|
|
}
|
|
},
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
ptPoster() {
|
|
if(this.data.ispt == 'group_goods' || this.data.ispt == "zhpGroup" || this.data.ispt == "groupwork"){
|
|
let that = this;
|
|
let urlStr;
|
|
if(this.data.ispt == 'group_goods'){
|
|
urlStr = app.getNetAddresss("plugin.fight-groups.frontend.controllers.group-poster.generate-goods-poster");
|
|
}else if(this.data.ispt == "zhpGroup"){
|
|
urlStr = app.getNetAddresss("plugin.zhp-group-lottery.frontend.activity-poster.generate-goods-poster");
|
|
}else if(this.data.ispt == "groupwork"){
|
|
urlStr = app.getNetAddresss("plugin.group-work.frontend.controllers.group-poster.generate-goods-poster");
|
|
}
|
|
urlStr += "&id=" + this.data.activityid;
|
|
app._getNetWork({
|
|
url: urlStr,
|
|
success: (resdata) => {
|
|
var res = resdata.data;
|
|
if (res.result == 1) {
|
|
that.setData({
|
|
poster:res.data.image_url
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
},
|
|
});
|
|
setTimeout(function () {
|
|
wx.hideLoading();
|
|
}, 5000);
|
|
}else{
|
|
let that = this;
|
|
let urlStr = app.getNetAddresss("plugin.snatch-regiment.api.GoodsPoster.generateGoodsPoster");
|
|
urlStr += "&id=" + this.data.goodsId;
|
|
app._getNetWork({
|
|
url: urlStr,
|
|
success: (resdata) => {
|
|
var res = resdata.data;
|
|
if (res.result == 1) {
|
|
that.setData({
|
|
poster:res.data.image_url
|
|
});
|
|
}
|
|
wx.hideLoading();
|
|
},
|
|
});
|
|
setTimeout(function () {
|
|
wx.hideLoading();
|
|
}, 5000);
|
|
}
|
|
|
|
},
|
|
async getPosterPic() {
|
|
if (this.data.ispt) {
|
|
this.ptPoster();
|
|
return;
|
|
}
|
|
let posterSize = await this.getMyCanvasMessage(640, 1008);
|
|
this.setData({
|
|
canvasWidth: posterSize.width,
|
|
canvasHeight: posterSize.height,
|
|
});
|
|
//this.startDrawCanvas(posterSize);
|
|
|
|
var urlStr = app.getNetAddresss("goods.goods-poster.new-goods-poster");
|
|
|
|
//this.startDrawCanvas(posterSize,{});
|
|
app._getNetWork({
|
|
showToastIn: false,
|
|
url: urlStr,
|
|
data: {
|
|
id: this.data.goodsId,
|
|
},
|
|
success: (resdata) => {
|
|
let res = resdata.data;
|
|
//this.startDrawCanvas(posterSize);
|
|
if (res.result != 1) {
|
|
wx.showToast({
|
|
title: res.msg,
|
|
});
|
|
return;
|
|
}
|
|
if (res.data.new && res.data.new == true) {
|
|
this.startDrawCanvas(posterSize, res.data);
|
|
} else {
|
|
this.startOldDrawCanvas(posterSize, res.data);
|
|
}
|
|
},
|
|
complete: () => {
|
|
this.data.getFlag = true;
|
|
},
|
|
});
|
|
},
|
|
|
|
async startDrawCanvas(posterSize, posterData) {
|
|
let getMarketPrice = "原价";
|
|
let getPrice = "现价";
|
|
try {
|
|
wx.getStorage({
|
|
key: "yz_basic_info",
|
|
success: function (res) {
|
|
if (res.data.lang.goods.market_price != "") {
|
|
getMarketPrice = res.data.lang.goods.market_price;
|
|
}
|
|
if (res.data.lang.goods.price != "") {
|
|
getPrice = res.data.lang.goods.price;
|
|
}
|
|
},
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
const ctx = wx.createCanvasContext("myCanvas", this);
|
|
ctx.save();
|
|
this.drawRoundRectPath(ctx, posterSize.width, posterSize.height, 30);
|
|
ctx.setFillStyle("#fff");
|
|
ctx.fillRect(0, 0, posterSize.width, posterSize.height);
|
|
//console.log(posterData.background)
|
|
//绘制背景
|
|
if (posterData.background.type == "background") {
|
|
// let bgImg = await this.readDownPicInfo(posterData.background.src);
|
|
let bgImg = await this.downImage({src:posterData.background.src});
|
|
//绘制背景图片
|
|
this.setProportion(posterSize, bgImg);
|
|
|
|
this.drawCanvasImage(ctx, {
|
|
left: 0,
|
|
top: 0,
|
|
width: bgImg.width / this.data.step,
|
|
height: bgImg.height / this.data.step,
|
|
img: bgImg.img,
|
|
});
|
|
} else if (posterData.background.type == "color") {
|
|
this.drawCanvasFillRect(ctx, {
|
|
width: posterSize.width / this.data.step,
|
|
color: posterData.background.src,
|
|
height: posterSize.height / this.data.step,
|
|
top: 0,
|
|
left: 0,
|
|
});
|
|
}
|
|
this.setData({ loading: 10 });
|
|
//ctx.restore();
|
|
for (let i = 0; i < posterData.poster_data.length; i++) {
|
|
let item = posterData.poster_data[i];
|
|
if (item.type == "logo" || item.type == "img" || item.type == "other_img" || item.type == "head" || item.type == "qr") {
|
|
if (item.src) {
|
|
let file = await this.downImage(item);
|
|
item.img = file.img;
|
|
this.drawCanvasImage(ctx, item);
|
|
}
|
|
} else if (item.type == "title" || item.type == "nickname") {
|
|
let line = Math.floor(item.height / (item.size + 10)) || 1;
|
|
item.line = line;
|
|
this.drawCanvasLineText(ctx, item);
|
|
} else if (item.type == "invite" || item.type == "text" || item.type == "mid") {
|
|
this.drawCanvasText(ctx, item);
|
|
} else if (item.type == "price") {
|
|
item.src = getPrice + ":￥" + item.src;
|
|
this.drawCanvasText(ctx, item);
|
|
} else if (item.type == "member_price") {
|
|
item.src = "会员价:￥" + item.src;
|
|
this.drawCanvasText(ctx, item);
|
|
} else if (item.type == "market_price" && item.src != 0 && item.src != "0.00") {
|
|
item.src = getMarketPrice + ":￥" + item.src;
|
|
this.drawCanvasText(ctx, item);
|
|
}
|
|
let loading = parseInt((75 / posterData.poster_data.length) * (i + 1));
|
|
this.setData({ loading: loading + 10 });
|
|
}
|
|
let loadingTime = setInterval(() => {
|
|
let loading = this.data.loading + 2;
|
|
loading = loading >= 100 ? 100 : loading;
|
|
this.setData({ loading });
|
|
if (loading >= 100) clearInterval(loadingTime);
|
|
}, 2000);
|
|
ctx.draw(
|
|
false,
|
|
setTimeout(async () => {
|
|
let img = await this.toimage("myCanvas", posterSize);
|
|
clearInterval(loadingTime);
|
|
let target = "listData[" + this.data.goodsId + "]";
|
|
this.setData({
|
|
loading: 100,
|
|
poster: img,
|
|
[target]: img,
|
|
});
|
|
this.removeUnsafeList();
|
|
}, 300)
|
|
);
|
|
},
|
|
//开始绘制-兼容旧海报
|
|
async startOldDrawCanvas(posterSize, posterData) {
|
|
let getMarketPrice = "原价";
|
|
try {
|
|
wx.getStorage({
|
|
key: "yz_basic_info",
|
|
success: function (res) {
|
|
if (res.data.lang.goods.market_price != "") {
|
|
getMarketPrice = res.data.lang.goods.market_price;
|
|
}
|
|
},
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
const ctx = wx.createCanvasContext("myCanvas", this);
|
|
ctx.save();
|
|
this.drawRoundRectPath(ctx, posterSize.width, posterSize.height, 30);
|
|
ctx.setFillStyle("#fff");
|
|
ctx.fillRect(0, 0, posterSize.width, posterSize.height);
|
|
//ctx.draw();
|
|
//ctx.restore();
|
|
//下载背景
|
|
// let bgImg = await this.readDownPicInfo(posterData.backgroundImg);
|
|
let bgImg = await this.downImage({src:posterData.backgroundImg});
|
|
//绘制背景图片
|
|
this.setProportion(posterSize, bgImg);
|
|
|
|
this.drawCanvasImage(ctx, {
|
|
left: 0,
|
|
top: 0,
|
|
width: bgImg.width / this.data.step,
|
|
height: bgImg.height / this.data.step,
|
|
img: bgImg.img,
|
|
});
|
|
this.setData({ loading: 10 });
|
|
//先测量商品标题多宽
|
|
let actualObj = { actualWidth: 0, actualText: "" };
|
|
if (posterData.shopName) {
|
|
actualObj = this.measureTextWidth(ctx, {
|
|
width: 350,
|
|
size: 30,
|
|
text: posterData.shopName,
|
|
});
|
|
this.setData({ loading: 18 });
|
|
//绘制商城名称
|
|
this.drawCanvasLineText(ctx, {
|
|
top: 45,
|
|
left: 145 + (480 - actualObj.actualWidth) / 2,
|
|
src: actualObj.actualText,
|
|
size: 30,
|
|
color: "#333333",
|
|
width: 350,
|
|
line: 1,
|
|
});
|
|
this.setData({ loading: 30 });
|
|
}
|
|
//绘制Logo
|
|
if (posterData.logo) {
|
|
let file1 = await this.downImage({ src: posterData.logo, width: 70, height: 70 });
|
|
this.drawCanvasCircular(ctx, {
|
|
img: file1.img,
|
|
top: 25,
|
|
left: 55 + (480 - actualObj.actualWidth) / 2,
|
|
width: 70,
|
|
height: 70,
|
|
});
|
|
}
|
|
this.setData({ loading: 40 });
|
|
|
|
//绘制中间大图
|
|
if (posterData.thumb) {
|
|
let file2 = await this.downImage({ src: posterData.thumb, width: 520, height: 500 });
|
|
this.drawCanvasImage(ctx, {
|
|
img: file2.img,
|
|
top: 120,
|
|
left: 60,
|
|
width: 520,
|
|
height: 500,
|
|
});
|
|
}
|
|
|
|
this.setData({ loading: 50 });
|
|
//绘制当前价格
|
|
let actualPriceObj = { actualWidth: 0, actualText: "" };
|
|
if (posterData.price) {
|
|
actualPriceObj = this.measureTextWidth(ctx, {
|
|
width: 400,
|
|
size: 30,
|
|
text: "￥" + posterData.price,
|
|
});
|
|
this.drawCanvasLineText(ctx, {
|
|
top: 640,
|
|
left: 70,
|
|
src: "￥" + posterData.price,
|
|
size: 30,
|
|
color: "#f15353",
|
|
width: 400,
|
|
line: 1,
|
|
});
|
|
}
|
|
this.setData({ loading: 55 });
|
|
//绘制原价格
|
|
if (posterData.market_price && posterData.market_price != 0 && posterData.market_price != "0.00") {
|
|
this.drawCanvasLineText(ctx, {
|
|
top: 645,
|
|
left: 100 + actualPriceObj.actualWidth,
|
|
src: getMarketPrice + ":￥" + posterData.market_price,
|
|
size: 22,
|
|
color: "#666666",
|
|
width: 200,
|
|
line: 1,
|
|
});
|
|
let actualObj = this.measureTextWidth(ctx, {
|
|
width: 200,
|
|
size: 22,
|
|
text: getMarketPrice + ":￥" + posterData.market_price,
|
|
});
|
|
this.drawCanvasFillRect(ctx, {
|
|
width: actualObj.actualWidth,
|
|
color: "#999999",
|
|
height: 3,
|
|
top: 656,
|
|
left: 100 + actualPriceObj.actualWidth,
|
|
});
|
|
}
|
|
this.setData({ loading: 60 });
|
|
|
|
//绘制商品标题
|
|
if (posterData.shareTitle) {
|
|
this.drawCanvasLineText(ctx, {
|
|
top: 690,
|
|
left: 70,
|
|
src: posterData.shareTitle,
|
|
size: 26,
|
|
color: "#333333",
|
|
width: 400,
|
|
line: 2,
|
|
});
|
|
}
|
|
|
|
this.setData({ loading: 65 });
|
|
//绘制太阳码
|
|
if (posterData.qrcode) {
|
|
let file3 = await this.downImage({ src: posterData.qrcode, height: 170, width: 170 });
|
|
this.drawCanvasImage(ctx, {
|
|
img: file3.img,
|
|
top: 800,
|
|
left: 400,
|
|
width: 170,
|
|
height: 170,
|
|
});
|
|
}
|
|
|
|
this.setData({ loading: 75 });
|
|
let loadingTime = setInterval(() => {
|
|
let loading = this.data.loading + 2;
|
|
loading = loading >= 100 ? 100 : loading;
|
|
this.setData({ loading });
|
|
if (loading >= 100) clearInterval(loadingTime);
|
|
}, 2000);
|
|
ctx.draw(
|
|
false,
|
|
setTimeout(async () => {
|
|
let img = await this.toimage("myCanvas", posterSize);
|
|
clearInterval(loadingTime);
|
|
let target = "listData[" + this.data.goodsId + "]";
|
|
this.setData({
|
|
loading: 100,
|
|
poster: img,
|
|
[target]: img,
|
|
});
|
|
this.removeUnsafeList();
|
|
}, 300)
|
|
);
|
|
},
|
|
},
|
|
});
|