wxd / MShopWeApp

Commit 287ec49aa53c0a86473f0f5f22760cff41e0c2f6

Authored by taiyuan
1 parent e18e6275

普通海报分享改版

Inline Side-by-side
Showing 1 changed file with 206 additions and 90 deletions
pages/goods/goodsInfo/goodsInfo.js
  View file @287ec49
... ... @@ -4179,6 +4179,92 @@ Page({
4179 4179 }
4180 4180 })
4181 4181 },
  4182 +
  4183 +
  4184 + drawPoster(context, unit, img, vpath) {
  4185 + // 1.灰色背景
  4186 + context.setFillStyle('#f2f1f6');
  4187 + context.rect(0,0,554*unit,899*unit);
  4188 + context.fill();
  4189 + // 2.商城名称
  4190 + let shopName = this.data.sto_sele_name_1;
  4191 + // let shopNameLen = context.measureText(shopName);
  4192 + // let x_shopNameLen = (554 - shopNameLen.width)/2*unit;
  4193 + // console.log('11111111111111',shopNameLen,x_shopNameLen);
  4194 + context.setTextAlign('center');
  4195 + context.setFontSize(26*unit);
  4196 + context.setFillStyle('black');
  4197 + context.fillText(shopName, 277*unit, 60*unit);
  4198 + // // 3.推荐来源
  4199 + let fromText = `来自${getApp().globalData.userInfo.nickname}的推荐`;
  4200 + // let fromTextLen = context.measureText(fromText);
  4201 + // let x_fromText = (375 - fromTextLen.width)/2;
  4202 + // console.log('222222',fromTextLen,x_fromText);
  4203 + context.setTextAlign('center');
  4204 + context.setFontSize(22*unit);
  4205 + context.setFillStyle('#96959a');
  4206 + context.fillText(fromText, 277*unit, 105*unit);
  4207 + // 4.海报背景
  4208 + // context.beginPath();
  4209 + // context.setStrokeStyle('#f2f1f6');
  4210 + context.setFillStyle('white');
  4211 + context.fillRect(37*unit, 157*unit, 480*unit, 673*unit);
  4212 + // context.stroke();
  4213 + // context.fill();
  4214 + // 5.商品图片
  4215 + // 图片的x坐标
  4216 + let bg_x = 37*unit
  4217 + // 图片的y坐标
  4218 + let bg_y = 157*unit
  4219 + // 图片宽度
  4220 + let bg_w = 480*unit
  4221 + // 图片高度
  4222 + let bg_h = 474*unit
  4223 + // 图片圆角
  4224 + let bg_r = 4
  4225 + // 绘制海报背景图片圆角
  4226 + context.save()
  4227 + context.beginPath()
  4228 + context.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
  4229 + context.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
  4230 + context.arc(bg_x + bg_w, bg_y + bg_h, bg_r, 0, Math.PI * 0.5)
  4231 + context.arc(bg_x, bg_y + bg_h, 0, Math.PI * 0.5, Math.PI)
  4232 + context.clip()
  4233 + context.drawImage(img, bg_x, bg_y, bg_w, bg_h);
  4234 + context.restore()
  4235 + // 6.强烈推荐
  4236 + // context.beginPath();
  4237 + let tj_path = "../../../images/share/q_tj.png";
  4238 + context.beginPath()
  4239 + context.drawImage(tj_path, 54*unit, 648*unit, 85*unit, 30*unit);
  4240 + context.setFontSize(16*unit)
  4241 + context.setLineJoin('round'); //交点设置成圆角
  4242 + context.setFillStyle("white")
  4243 + context.setTextAlign('left');
  4244 + context.fillText('强烈推荐', 64*unit, 672*unit);
  4245 + // 7.商品价格
  4246 + context.setFontSize(32*unit);
  4247 + context.setFillStyle('#DE1117');
  4248 + context.fillText('￥59.00', 54*unit, 730*unit);
  4249 + // 8.商品标题
  4250 + context.setFontSize(20*unit);
  4251 + context.setFillStyle('#898989');
  4252 + this.draw_Text(context, this.data.data.goods_name,
  4253 + 54*unit, 770*unit, 240*unit, 240*unit, unit);
  4254 + // 9.小程序码
  4255 + context.drawImage(vpath, 375*unit, 660*unit, 120*unit, 120*unit);
  4256 + context.setFontSize(16*unit);
  4257 + context.setFillStyle('#777');
  4258 + context.fillText('长按识别二维码', 378*unit, 810*unit);
  4259 + // 10.竖线
  4260 + context.beginPath();
  4261 + context.setFillStyle('#eee');
  4262 + context.rect(354*unit, 670*unit, 1*unit, 130*unit);
  4263 + context.fill();
  4264 +
  4265 + },
  4266 +
  4267 +
4182 4268  
4183 4269 //--定义的保存图片方法，分享团---
4184 4270 saveImageToPhotosAlbum: function () {
... ... @@ -4229,67 +4315,90 @@ Page({
4229 4315 os.stoid + "?sceneValue=" + scene + "&pageValue=pages/goods/goodsInfo/goodsInfo";
4230 4316  
4231 4317 console.log(path3);
  4318 +
4232 4319  
4233   - //读取文件成功则OK--
  4320 + // 读取文件成功则OK--
4234 4321 wx.getImageInfo({
4235 4322 src: path3,
4236 4323 success: function (res) {
4237   - //回调写法
  4324 + // 回调写法
4238 4325 th.get_head_temp(th.get_goods_temp, function () {
4239 4326 var vpath = res.path;
4240 4327 var context = wx.createCanvasContext('share');
4241   - //先画背景
  4328 + // 先画背景
4242 4329 var pg_path = "../../../images/share/share_bg.png";
4243 4330  
4244 4331 // context.fillStyle="#FFFFFF";
4245 4332 // context.fillRect(0,0,554 * unit, 899 * unit);
  4333 +
  4334 + // if(type == 0) {
  4335 + // this.drawPoster(context);
  4336 + // return false;
  4337 + // };
  4338 +
4246 4339  
4247 4340 //-- 如果有自定义海报的时候，判断背景的图片 --
4248 4341 if (th.data.share_b_img) {
4249 4342 pg_path = th.data.share_b_img;
4250 4343 }
4251   - context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit);
  4344 + // context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit);
  4345 +
  4346 +
  4347 + if(type == 0) { // 如果是普通商品，绘制新海报
  4348 + th.drawPoster(context, unit, th.data.share_goods_img, vpath);
  4349 + } else {
  4350 + context.drawImage(pg_path, 0, 0, 554 * unit, 899 * unit);
  4351 + };
  4352 +
  4353 + // th.drawPoster(context, unit, th.data.share_goods_img, vpath);
  4354 +
4252 4355  
4253 4356 //-- 是自定义海报的情况下 --
4254   - if (th.data.poster && parseInt(th.data.poster.style) == 2) {
4255   - //在线上分享人的情况下
4256   - if (parseInt(th.data.poster.show_headpic)) {
4257   - //获取坐标
4258   - var x = parseFloat(th.data.poster.head_x) * 2;
4259   - var y = parseFloat(th.data.poster.head_y) * 2;
4260   - var x1 = (x + 90) * unit;
4261   - var y1 = (y + 50) * unit;
4262   - //--昵称---
4263   - context.setFontSize(24 * unit)
4264   - context.setFillStyle("black")
4265   - context.fillText(app.globalData.userInfo.nickname, x1, y1);
4266   - var width = 24 * app.globalData.userInfo.nickname.length * unit + 4 * unit;
4267   - //强烈推荐 改许程
4268   - var tj_path = "../../../images/share/q_tj.png";
4269   - context.drawImage(tj_path, x1 + width, y1 - 22 * unit, 85 * unit, 30 * unit);
4270   - context.setFontSize(16 * unit)
4271   - context.setLineJoin('round'); //交点设置成圆角
4272   - context.setFillStyle("white")
4273   - context.fillText('强烈推荐', x1 + width + 8 * unit, y1 - 1 * unit);
4274   -
4275   - //context.setFillStyle("black")
4276   - //context.setFontSize(24 * unit)
4277   - //context.fillText(getApp().globalData.config.store_name, 40 * unit, 130 * unit);
4278   - }
4279   - } else {
4280   - //--昵称---
4281   - context.setFontSize(24 * unit)
4282   - context.setFillStyle("black")
4283   - context.fillText(app.globalData.userInfo.nickname, 152 * unit, 76 * unit);
4284   - var width = 24 * app.globalData.userInfo.nickname.length * unit + 2 * unit;
4285   - //强烈推荐 改许程
4286   - var tj_path = "../../../images/share/q_tj.png";
4287   - context.drawImage(tj_path, 152 * unit + width, 54 * unit, 85 * unit, 30 * unit);
4288   - context.setFontSize(16 * unit);
4289   - context.setLineJoin('round'); //交点设置成圆角
4290   - context.setFillStyle("white");
4291   - context.fillText('强烈推荐', 149 * unit + width + 15 * unit, 75 * unit);
4292   - }
  4357 + if(type != 0) {
  4358 +
  4359 + if (th.data.poster && parseInt(th.data.poster.style) == 2) {
  4360 + //在线上分享人的情况下
  4361 + if (parseInt(th.data.poster.show_headpic)) {
  4362 + //获取坐标
  4363 + var x = parseFloat(th.data.poster.head_x) * 2;
  4364 + var y = parseFloat(th.data.poster.head_y) * 2;
  4365 + var x1 = (x + 90) * unit;
  4366 + var y1 = (y + 50) * unit;
  4367 + //--昵称---
  4368 + context.setFontSize(24 * unit)
  4369 + context.setFillStyle("black")
  4370 + context.fillText(app.globalData.userInfo.nickname, x1, y1);
  4371 + var width = 24 * app.globalData.userInfo.nickname.length * unit + 4 * unit;
  4372 + //强烈推荐 改许程
  4373 + var tj_path = "../../../images/share/q_tj.png";
  4374 + context.drawImage(tj_path, x1 + width, y1 - 22 * unit, 85 * unit, 30 * unit);
  4375 + context.setFontSize(16 * unit);
  4376 + context.setLineJoin('round'); //交点设置成圆角
  4377 + context.setFillStyle("white");
  4378 + context.fillText('强烈推荐', x1 + width + 8 * unit, y1 - 1 * unit);
  4379 +
  4380 + //context.setFillStyle("black")
  4381 + //context.setFontSize(24 * unit)
  4382 + //context.fillText(getApp().globalData.config.store_name, 40 * unit, 130 * unit);
  4383 + }
  4384 + } else {
  4385 + //--昵称---
  4386 + context.setFontSize(24 * unit);
  4387 + context.setFillStyle("black");
  4388 + context.fillText(app.globalData.userInfo.nickname, 152 * unit, 76 * unit);
  4389 + var width = 24 * app.globalData.userInfo.nickname.length * unit + 2 * unit;
  4390 + //强烈推荐 改许程
  4391 + var tj_path = "../../../images/share/q_tj.png";
  4392 + context.drawImage(tj_path, 152 * unit + width, 54 * unit, 85 * unit, 30 * unit);
  4393 + context.setFontSize(16 * unit);
  4394 + context.setLineJoin('round'); //交点设置成圆角
  4395 + context.setFillStyle("white");
  4396 + context.fillText('强烈推荐', 149 * unit + width + 15 * unit, 75 * unit);
  4397 + }
  4398 +
  4399 + };
  4400 +
  4401 +
4293 4402  
4294 4403 var share_title = th.data.data.goods_name;
4295 4404 if (th.data.prom_type == 1 || th.data.prom_type == 6 || th.data.prom_type == 4) {
... ... @@ -4300,7 +4409,7 @@ Page({
4300 4409  
4301 4410 //---产品名称---
4302 4411 //文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度
4303   - if (type != 4) {
  4412 + if (type != 4 && type != 0) {
4304 4413 context.setFillStyle("black");
4305 4414 context.setFontSize(21.3 * unit)
4306 4415 th.draw_Text(context, share_title,
... ... @@ -4333,7 +4442,7 @@ Page({
4333 4442 context.lineTo(wd2 + ut.measureText(pri0, 22 * unit) + 5, 206 * unit);
4334 4443 context.stroke();
4335 4444  
4336   - } else {
  4445 + } else if(type == 4 && type != 0) {
4337 4446 context.setFillStyle("black");
4338 4447 context.setFontSize(21.3 * unit)
4339 4448 th.draw_Text(context, share_title,
... ... @@ -4353,10 +4462,15 @@ Page({
4353 4462 }
4354 4463  
4355 4464 //---中间大图---
4356   - context.drawImage(th.data.share_goods_img, 70 * unit, 250 * unit, 408 * unit, 408 * unit);
  4465 + if(type != 0) {
  4466 + context.drawImage(th.data.share_goods_img, 70 * unit, 250 * unit, 408 * unit, 408 * unit);
  4467 + };
  4468 +
  4469 +
  4470 +
4357 4471 //-------大图后面就不一样了-----------
4358 4472 switch (type) {
4359   - case 0: //普通商品的展示
  4473 + case 0: break;//普通商品的展示
4360 4474 case 4:
4361 4475 //中间的几个字
4362 4476 if (th.data.poster && parseInt(th.data.poster.style) == 2) {
... ... @@ -4423,7 +4537,6 @@ Page({
4423 4537 context.fillText("长按识别二维码", 40 * unit, 806 * unit);
4424 4538 context.fillText("立即开始兑换", 40 * unit, 846 * unit);
4425 4539  
4426   -
4427 4540 }
4428 4541  
4429 4542 //---二维吗图---
... ... @@ -4435,7 +4548,7 @@ Page({
4435 4548 } else {
4436 4549 //---二维吗图---
4437 4550 context.drawImage(vpath, 390 * unit, 726 * unit, 136 * unit, 136 * unit);
4438   - }
  4551 + };
4439 4552  
4440 4553 break;
4441 4554 case 1: //秒杀商品的展示
... ... @@ -4478,7 +4591,6 @@ Page({
4478 4591 context.lineTo(520 * unit, 670 * unit)
4479 4592 context.stroke();
4480 4593 //---文字---
4481   -
4482 4594 context.setFillStyle("black")
4483 4595 context.setFontSize(24 * unit)
4484 4596 context.fillText(th.data.sto_sele_name_1, 40 * unit, 720 * unit);
... ... @@ -4524,7 +4636,6 @@ Page({
4524 4636 context.lineTo(520 * unit, 670 * unit)
4525 4637 context.stroke();
4526 4638 //---文字---
4527   -
4528 4639 context.setFillStyle("black")
4529 4640 context.setFontSize(24 * unit)
4530 4641 context.fillText(th.data.sto_sele_name_1, 40 * unit, 720 * unit);
... ... @@ -4575,45 +4686,50 @@ Page({
4575 4686  
4576 4687  
4577 4688 //--- 如果是自定义海报的时候 ---
4578   - if (th.data.poster && parseInt(th.data.poster.style) == 2) {
4579   -
4580   - //如果显示会员信息的话
4581   - if (parseInt(th.data.poster.show_headpic)) {
4582   - //获取坐标
4583   - var x = parseFloat(th.data.poster.head_x) * 2;
4584   - var y = parseFloat(th.data.poster.head_y) * 2;
4585   - //---绘制圆形要放在最后----
4586   - context.save();
4587   - context.beginPath();
4588   - var h_x = x * unit;
4589   - var h_y = y * unit;
4590   - var h_r = 40 * unit;
4591   - var cx = h_x + h_r;
4592   - var cy = h_y + h_r;
4593   - context.arc(cx, cy, h_r, 0, Math.PI * 2, false);
4594   - context.closePath();
4595   - context.fill();
4596   - context.clip();
4597   - context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2);
4598   - context.restore();
4599   - }
4600   -
4601   - } else {
4602   - //---绘制圆形要放在最后----
4603   - context.save();
4604   - context.beginPath();
4605   - var h_x = 60 * unit;
4606   - var h_y = 24 * unit;
4607   - var h_r = 40 * unit;
4608   - var cx = h_x + h_r;
4609   - var cy = h_y + h_r;
4610   - context.arc(cx, cy, h_r, 0, Math.PI * 2, false);
4611   - context.closePath();
4612   - context.fill();
4613   - context.clip();
4614   - context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2);
4615   - context.restore();
4616   - }
  4689 + if(type != 0) {
  4690 +
  4691 + if (th.data.poster && parseInt(th.data.poster.style) == 2) {
  4692 +
  4693 + //如果显示会员信息的话
  4694 + if (parseInt(th.data.poster.show_headpic)) {
  4695 + //获取坐标
  4696 + var x = parseFloat(th.data.poster.head_x) * 2;
  4697 + var y = parseFloat(th.data.poster.head_y) * 2;
  4698 + //---绘制圆形要放在最后----
  4699 + context.save();
  4700 + context.beginPath();
  4701 + var h_x = x * unit;
  4702 + var h_y = y * unit;
  4703 + var h_r = 40 * unit;
  4704 + var cx = h_x + h_r;
  4705 + var cy = h_y + h_r;
  4706 + context.arc(cx, cy, h_r, 0, Math.PI * 2, false);
  4707 + context.closePath();
  4708 + context.fill();
  4709 + context.clip();
  4710 + context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2);
  4711 + context.restore();
  4712 + }
  4713 +
  4714 + } else {
  4715 + //---绘制圆形要放在最后----
  4716 + context.save();
  4717 + context.beginPath();
  4718 + var h_x = 60 * unit;
  4719 + var h_y = 24 * unit;
  4720 + var h_r = 40 * unit;
  4721 + var cx = h_x + h_r;
  4722 + var cy = h_y + h_r;
  4723 + context.arc(cx, cy, h_r, 0, Math.PI * 2, false);
  4724 + context.closePath();
  4725 + context.fill();
  4726 + context.clip();
  4727 + context.drawImage(th.data.share_head, h_x, h_y, h_r * 2, h_r * 2);
  4728 + context.restore();
  4729 + }
  4730 +
  4731 + };
  4732 +
4617 4733  
4618 4734  
4619 4735 //把画板内容绘制成图片，并回调 画板图片路径
... ...