diff --git a/pages/goods/goodsInfo/goodsInfo.js b/pages/goods/goodsInfo/goodsInfo.js index 245346b..b15b562 100644 --- a/pages/goods/goodsInfo/goodsInfo.js +++ b/pages/goods/goodsInfo/goodsInfo.js @@ -4179,6 +4179,92 @@ Page({ } }) }, + + + drawPoster(context, unit, img, vpath) { + // 1.灰色背景 + context.setFillStyle('#f2f1f6'); + context.rect(0,0,554*unit,899*unit); + context.fill(); + // 2.商城名称 + let shopName = this.data.sto_sele_name_1; + // let shopNameLen = context.measureText(shopName); + // let x_shopNameLen = (554 - shopNameLen.width)/2*unit; + // console.log('11111111111111',shopNameLen,x_shopNameLen); + context.setTextAlign('center'); + context.setFontSize(26*unit); + context.setFillStyle('black'); + context.fillText(shopName, 277*unit, 60*unit); + // // 3.推荐来源 + let fromText = `来自${getApp().globalData.userInfo.nickname}的推荐`; + // let fromTextLen = context.measureText(fromText); + // let x_fromText = (375 - fromTextLen.width)/2; + // console.log('222222',fromTextLen,x_fromText); + context.setTextAlign('center'); + context.setFontSize(22*unit); + context.setFillStyle('#96959a'); + context.fillText(fromText, 277*unit, 105*unit); + // 4.海报背景 + // context.beginPath(); + // context.setStrokeStyle('#f2f1f6'); + context.setFillStyle('white'); + context.fillRect(37*unit, 157*unit, 480*unit, 673*unit); + // context.stroke(); + // context.fill(); + // 5.商品图片 + // 图片的x坐标 + let bg_x = 37*unit + // 图片的y坐标 + let bg_y = 157*unit + // 图片宽度 + let bg_w = 480*unit + // 图片高度 + let bg_h = 474*unit + // 图片圆角 + let bg_r = 4 + // 绘制海报背景图片圆角 + context.save() + context.beginPath() + context.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5) + context.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2) + context.arc(bg_x + bg_w, bg_y + bg_h, bg_r, 0, Math.PI * 0.5) + context.arc(bg_x, bg_y + bg_h, 0, Math.PI * 0.5, Math.PI) + context.clip() + context.drawImage(img, bg_x, bg_y, bg_w, bg_h); + context.restore() + // 6.强烈推荐 + // context.beginPath(); + let tj_path = "../../../images/share/q_tj.png"; + context.beginPath() + context.drawImage(tj_path, 54*unit, 648*unit, 85*unit, 30*unit); + context.setFontSize(16*unit) + context.setLineJoin('round'); //交点设置成圆角 + context.setFillStyle("white") + context.setTextAlign('left'); + context.fillText('强烈推荐', 64*unit, 672*unit); + // 7.商品价格 + context.setFontSize(32*unit); + context.setFillStyle('#DE1117'); + context.fillText('￥59.00', 54*unit, 730*unit); + // 8.商品标题 + context.setFontSize(20*unit); + context.setFillStyle('#898989'); + this.draw_Text(context, this.data.data.goods_name, + 54*unit, 770*unit, 240*unit, 240*unit, unit); + // 9.小程序码 + context.drawImage(vpath, 375*unit, 660*unit, 120*unit, 120*unit); + context.setFontSize(16*unit); + context.setFillStyle('#777'); + context.fillText('长按识别二维码', 378*unit, 810*unit); + // 10.竖线 + context.beginPath(); + context.setFillStyle('#eee'); + context.rect(354*unit, 670*unit, 1*unit, 130*unit); + context.fill(); + + }, + + //--定义的保存图片方法，分享团--- saveImageToPhotosAlbum: function () { @@ -4229,67 +4315,90 @@ Page({ os.stoid + "?sceneValue=" + scene + "&pageValue=pages/goods/goodsInfo/goodsInfo"; console.log(path3); + - //读取文件成功则OK-- + // 读取文件成功则OK-- wx.getImageInfo({ src: path3, success: function (res) { - //回调写法 + // 回调写法 th.get_head_temp(th.get_goods_temp, function () { var vpath = res.path; var context = wx.createCanvasContext('share'); - //先画背景 + // 先画背景 var pg_path = "../../../images/share/share_bg.png"; // context.fillStyle="#FFFFFF"; // context.fillRect(0,0,554 * unit, 899 * unit); + + // if(type == 0) { + // this.drawPoster(context); + // return false; + // }; + //-- 如果有自定义海报的时候，判断背景的图片 -- if (th.data.share_b_img) { pg_path = th.data.share_b_img; } - context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit); + // context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit); + + + if(type == 0) { // 如果是普通商品，绘制新海报 + th.drawPoster(context, unit, th.data.share_goods_img, vpath); + } else { + context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit); + }; + + // th.drawPoster(context, unit, th.data.share_goods_img, vpath); + //-- 是自定义海报的情况下 -- - if (th.data.poster && parseInt(th.data.poster.style) == 2) { - //在线上分享人的情况下 - if (parseInt(th.data.poster.show_headpic)) { - //获取坐标 - var x = parseFloat(th.data.poster.head_x) * 2; - var y = parseFloat(th.data.poster.head_y) * 2; - var x1 = (x + 90) * unit; - var y1 = (y + 50) * unit; - //--昵称--- - context.setFontSize(24 * unit) - context.setFillStyle("black") - context.fillText(app.globalData.userInfo.nickname, x1, y1); - var width = 24 * app.globalData.userInfo.nickname.length * unit + 4 * unit; - //强烈推荐 改许程 - var tj_path = "../../../images/share/q_tj.png"; - context.drawImage(tj_path, x1 + width, y1 - 22 * unit, 85 * unit, 30 * unit); - context.setFontSize(16 * unit) - context.setLineJoin('round'); //交点设置成圆角 - context.setFillStyle("white") - context.fillText('强烈推荐', x1 + width + 8 * unit, y1 - 1 * unit); - - //context.setFillStyle("black") - //context.setFontSize(24 * unit) - //context.fillText(getApp().globalData.config.store_name, 40 * unit, 130 * unit); - } - } else { - //--昵称--- - context.setFontSize(24 * unit) - context.setFillStyle("black") - context.fillText(app.globalData.userInfo.nickname, 152 * unit, 76 * unit); - var width = 24 * app.globalData.userInfo.nickname.length * unit + 2 * unit; - //强烈推荐 改许程 - var tj_path = "../../../images/share/q_tj.png"; - context.drawImage(tj_path, 152 * unit + width, 54 * unit, 85 * unit, 30 * unit); - context.setFontSize(16 * unit); - context.setLineJoin('round'); //交点设置成圆角 - context.setFillStyle("white"); - context.fillText('强烈推荐', 149 * unit + width + 15 * unit, 75 * unit); - } + if(type != 0) { + + if (th.data.poster && parseInt(th.data.poster.style) == 2) { + //在线上分享人的情况下 + if (parseInt(th.data.poster.show_headpic)) { + //获取坐标 + var x = parseFloat(th.data.poster.head_x) * 2; + var y = parseFloat(th.data.poster.head_y) * 2; + var x1 = (x + 90) * unit; + var y1 = (y + 50) * unit; + //--昵称--- + context.setFontSize(24 * unit) + context.setFillStyle("black") + context.fillText(app.globalData.userInfo.nickname, x1, y1); + var width = 24 * app.globalData.userInfo.nickname.length * unit + 4 * unit; + //强烈推荐 改许程 + var tj_path = "../../../images/share/q_tj.png"; + context.drawImage(tj_path, x1 + width, y1 - 22 * unit, 85 * unit, 30 * unit); + context.setFontSize(16 * unit); + context.setLineJoin('round'); //交点设置成圆角 + context.setFillStyle("white"); + context.fillText('强烈推荐', x1 + width + 8 * unit, y1 - 1 * unit); + + //context.setFillStyle("black") + //context.setFontSize(24 * unit) + //context.fillText(getApp().globalData.config.store_name, 40 * unit, 130 * unit); + } + } else { + //--昵称--- + context.setFontSize(24 * unit); + context.setFillStyle("black"); + context.fillText(app.globalData.userInfo.nickname, 152 * unit, 76 * unit); + var width = 24 * app.globalData.userInfo.nickname.length * unit + 2 * unit; + //强烈推荐 改许程 + var tj_path = "../../../images/share/q_tj.png"; + context.drawImage(tj_path, 152 * unit + width, 54 * unit, 85 * unit, 30 * unit); + context.setFontSize(16 * unit); + context.setLineJoin('round'); //交点设置成圆角 + context.setFillStyle("white"); + context.fillText('强烈推荐', 149 * unit + width + 15 * unit, 75 * unit); + } + + }; + + var share_title = th.data.data.goods_name; if (th.data.prom_type == 1 || th.data.prom_type == 6 || th.data.prom_type == 4) { @@ -4300,7 +4409,7 @@ Page({ //---产品名称--- //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度 - if (type != 4) { + if (type != 4 && type != 0) { context.setFillStyle("black"); context.setFontSize(21.3 * unit) th.draw_Text(context, share_title, @@ -4333,7 +4442,7 @@ Page({ context.lineTo(wd2 + ut.measureText(pri0, 22 * unit) + 5, 206 * unit); context.stroke(); - } else { + } else if(type == 4 && type != 0) { context.setFillStyle("black"); context.setFontSize(21.3 * unit) th.draw_Text(context, share_title, @@ -4353,10 +4462,15 @@ Page({ } //---中间大图--- - context.drawImage(th.data.share_goods_img, 70 * unit, 250 * unit, 408 * unit, 408 * unit); + if(type != 0) { + context.drawImage(th.data.share_goods_img, 70 * unit, 250 * unit, 408 * unit, 408 * unit); + }; + + + //-------大图后面就不一样了----------- switch (type) { - case 0: //普通商品的展示 + case 0: break;//普通商品的展示 case 4: //中间的几个字 if (th.data.poster && parseInt(th.data.poster.style) == 2) { @@ -4423,7 +4537,6 @@ Page({ context.fillText("长按识别二维码", 40 * unit, 806 * unit); context.fillText("立即开始兑换", 40 * unit, 846 * unit); - } //---二维吗图--- @@ -4435,7 +4548,7 @@ Page({ } else { //---二维吗图--- context.drawImage(vpath, 390 * unit, 726 * unit, 136 * unit, 136 * unit); - } + }; break; case 1: //秒杀商品的展示 @@ -4478,7 +4591,6 @@ Page({ context.lineTo(520 * unit, 670 * unit) context.stroke(); //---文字--- - context.setFillStyle("black") context.setFontSize(24 * unit) context.fillText(th.data.sto_sele_name_1, 40 * unit, 720 * unit); @@ -4524,7 +4636,6 @@ Page({ context.lineTo(520 * unit, 670 * unit) context.stroke(); //---文字--- - context.setFillStyle("black") context.setFontSize(24 * unit) context.fillText(th.data.sto_sele_name_1, 40 * unit, 720 * unit); @@ -4575,45 +4686,50 @@ Page({ //--- 如果是自定义海报的时候 --- - if (th.data.poster && parseInt(th.data.poster.style) == 2) { - - //如果显示会员信息的话 - if (parseInt(th.data.poster.show_headpic)) { - //获取坐标 - var x = parseFloat(th.data.poster.head_x) * 2; - var y = parseFloat(th.data.poster.head_y) * 2; - //---绘制圆形要放在最后---- - context.save(); - context.beginPath(); - var h_x = x * unit; - var h_y = y * unit; - var h_r = 40 * unit; - var cx = h_x + h_r; - var cy = h_y + h_r; - context.arc(cx, cy, h_r, 0, Math.PI * 2, false); - context.closePath(); - context.fill(); - context.clip(); - context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2); - context.restore(); - } - - } else { - //---绘制圆形要放在最后---- - context.save(); - context.beginPath(); - var h_x = 60 * unit; - var h_y = 24 * unit; - var h_r = 40 * unit; - var cx = h_x + h_r; - var cy = h_y + h_r; - context.arc(cx, cy, h_r, 0, Math.PI * 2, false); - context.closePath(); - context.fill(); - context.clip(); - context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2); - context.restore(); - } + if(type != 0) { + + if (th.data.poster && parseInt(th.data.poster.style) == 2) { + + //如果显示会员信息的话 + if (parseInt(th.data.poster.show_headpic)) { + //获取坐标 + var x = parseFloat(th.data.poster.head_x) * 2; + var y = parseFloat(th.data.poster.head_y) * 2; + //---绘制圆形要放在最后---- + context.save(); + context.beginPath(); + var h_x = x * unit; + var h_y = y * unit; + var h_r = 40 * unit; + var cx = h_x + h_r; + var cy = h_y + h_r; + context.arc(cx, cy, h_r, 0, Math.PI * 2, false); + context.closePath(); + context.fill(); + context.clip(); + context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2); + context.restore(); + } + + } else { + //---绘制圆形要放在最后---- + context.save(); + context.beginPath(); + var h_x = 60 * unit; + var h_y = 24 * unit; + var h_r = 40 * unit; + var cx = h_x + h_r; + var cy = h_y + h_r; + context.arc(cx, cy, h_r, 0, Math.PI * 2, false); + context.closePath(); + context.fill(); + context.clip(); + context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2); + context.restore(); + } + + }; + //把画板内容绘制成图片，并回调 画板图片路径