普通海报分享改版

taiyuan
1 parent e18e6275
Showing 1 changed file with 206 additions and 90 deletions
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();
+						}
+						
+					};
+          
           //把画板内容绘制成图片，并回调 画板图片路径