详情的分享好友

yvan.ni
1 parent 240a354d
Showing 2 changed files with 286 additions and 1 deletions
pages/user/Detailed/Detailed.js
utils/util.js
@@ -25,6 +25,11 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function(options) {
+	   var img_money = url + "/miniapp/images/plus/share/money.png";
+	   var img_Ancrown = url + "/miniapp/images/plus/share/Ancrown.png";
+	   var img_Identification = url + "/miniapp/images/plus/share/Identification.png";
+	   var img_square = url + "/miniapp/images/plus/share/square.png";
+	   var privilege_o = url + "/miniapp/images/plus/share/privilege_o.png";
   },
   selectDetailed: function() {
@@ -83,5 +88,245 @@ Page({
       return
     };
     this.selectDetailed();
-  }
+  },
+  
+  
+  saveImageToPhotosAlbum: function () {
+    if (this.data.imagePath != "") {
+      wx.previewImage({
+        urls: [this.data.imagePath],
+      })
+      return;
+    }
+  //   if(this.data.is_loading) return false ;
+    this.data.is_loading=1;
+  
+    wx.showLoading({
+      title: '生成中...',
+    })
+  
+    this.setData({
+      canvasHidden: false
+    })
+   
+    var th = this;
+    //设置画板显示，才能开始绘图
+    var card_ming=th.data.bas_ming;//卡的图片
+    var user = th.data.user;//会员资料；
+    var big_card= th.data.big_card;//获取最大的卡
+    var user_head = th.data.head_pic;//会员头像
+    var img_money = th.data.img_money;//缓存vip的价格
+    var img_Ancrown = th.data.img_Ancrown;//会员权益的图片
+    var img_Identification = th.data.img_Identification;//会员标识
+    var privilege_o = th.data.privilege_o;//勋章图片
+    var img_square=th.data.img_square;
+   
+    var app = getApp();
+    var unit = th.data.screenWidth / 750 * 1.35;
+    var scene = getApp().globalData.user_id;
+    console.log("用户头像", th.data.head_pic);
+    ///二微码
+   
+    var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" +
+      os.stoid + "?sceneValue=" + scene + "&pageValue=pages/user/index/index";
+    wx.getImageInfo({
+      src: path3,
+      success: function (res) {
+        //回调写法
+        th.get_head_temp(th.get_goods_temp, function () {
+         var  vpath=res.path;
+    
+    console.log("生成二维码", path3);
+     //开启画布
+    const ctx = wx.createCanvasContext('myCanvas');
+    
+   //先画背景
+    ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0, 554 * unit, 930 * unit);
+    ctx.setFontSize(26 * unit);
+    ctx.setFillStyle("rgb(0,0,0)");
+    ctx.fillText(user.nickname, 155 * unit, 75 * unit, 200 * unit);
+  
+    var tj_path = "../../../images/userinfo/q_tj.png";
+    ctx.drawImage(tj_path, 385 * unit, 45 * unit, 90 * unit, 30 * unit);
+    ctx.setFontSize(18 * unit);
+    ctx.setFillStyle("rgb(255,255,255)");
+    ctx.fillText("强烈推荐", 394 * unit, 65 * unit);
+  
+    ctx.setStrokeStyle("rgb(255,255,255)");
+    ctx.setLineDash([5 * unit, 5 * unit], 5 * unit);
+    ctx.beginPath();
+    ctx.moveTo(0, 125 * unit);
+    ctx.lineTo(554 * unit, 125 * unit);
+    ctx.stroke();
+  
+    var x = 55 * unit, y = 165 * unit,w = 444 * unit, h = 220 * unit,r = 14 * unit;
+    ut.draw_randon_rect(ctx,x,y,r,w,h);
+    ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
+    ctx.drawImage(card_ming, x, y, 444 * unit, 220 * unit); // 推进去图片
+    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+  
+    ctx.beginPath();
+    // 卡图片
+    //  ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 165 * unit, 444 * unit, 220 * unit,);
+    ctx.setFontSize(26 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fillText(big_card.CardName, 80 * unit, 215 * unit);
+    ctx.setFontSize(18 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fillText("开通会员年卡仅" + big_card.CardFee+"元", 80 * unit, 240 * unit);
+  
+    ctx.drawImage(privilege_o, 80 * unit, 343 * unit, 20 * unit, 20 * unit);
+  
+    ctx.setFontSize(14 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥3031元", 105 * unit, 360 * unit);
+  
+    ctx.rect(70 * unit, 425 * unit, 182 * unit, 1 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fill();
+  
+    ctx.drawImage(img_square, 267 * unit, 420 * unit, 13 * unit, 13 * unit);
+  
+    ctx.beginPath();
+    ctx.rect(295 * unit, 425 * unit, 182 * unit, 1 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fill();
+  
+    ctx.drawImage(img_square, 80 * unit, 470 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("超级VIP权益", 100 * unit, 475 * unit);
+  
+    ctx.setFontSize(20 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("超级会员专属权益", 100 * unit, 505 * unit);
+    ctx.drawImage(img_Ancrown, 355 * unit, 440 * unit, 65 * unit, 65 * unit);
+  
+    ctx.rect(85 * unit, 530 * unit, 375 * unit, 1 * unit)
+    ctx.setFillStyle('rgb(218,194,169)')
+    ctx.fill();
+  
+    ctx.drawImage(img_square, 80 * unit, 575 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("超级VIP标识", 100 * unit, 580 * unit);
+  
+    ctx.setFontSize(20 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("彰显尊贵身份的象征", 100 * unit, 610 * unit);
+    ctx.drawImage(img_Identification, 355 * unit, 548 * unit, 65 * unit, 65 * unit);
+  
+    ctx.rect(85 * unit, 635 * unit, 375 * unit, 1 * unit);
+    ctx.setFillStyle('rgb(218,194,169)');
+    ctx.fill();
+  
+    ctx.drawImage(img_square, 80 * unit, 695 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("超级VIP价格", 100 * unit, 695 * unit);
+  
+    ctx.setFontSize(20 * unit);
+    ctx.setFillStyle("rgb(198,165,126)");
+    ctx.fillText("享受专属会员超低价", 100 * unit, 725 * unit);
+    ctx.drawImage(img_money, 355 * unit, 660 * unit, 65 * unit, 65 * unit);
+  
+    ctx.rect(85 * unit, 750 * unit, 375 * unit, 1 * unit)
+    ctx.setFillStyle('rgb(218,194,169)')
+    ctx.fill();
+  
+   ctx.drawImage(vpath, 100 * unit, 780 * unit, 110 * unit, 110 * unit);
+  
+    ctx.setFontSize(20 * unit);
+    ctx.setFillStyle("#000");
+    ctx.fillText("解锁新权益 精彩享不停", 230 * unit, 825 * unit);
+  
+    ctx.setFontSize(20 * unit);
+    ctx.setFillStyle("#000");
+    ctx.fillText("长按识别二维码,立即开通!", 230 * unit, 865 * unit);
+  
+    //---绘制圆形要放在最后----
+    ctx.save();
+    ctx.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;
+    ctx.arc(cx, cy, h_r, 0, Math.PI * 2, false);
+    ctx.closePath();
+    ctx.fill();
+    ctx.clip();
+    ctx.drawImage(th.data.head_pic, h_x, h_y, h_r * 2, h_r * 2);
+    ctx.restore();
+  
+    x = 345 * unit,
+    y = 190 * unit,
+    w = 105 * unit,
+    h = 30 * unit,
+    r = 14 * unit;
+    ut.draw_randon_rect(ctx,x,y,r,w,h); 
+    ctx.setFontSize(18 * unit);
+    ctx.setFillStyle("#000");
+    ctx.fillText("立即开通", 362 * unit, 212 * unit);
+  
+  
+ 
+    //绘制图片
+    ctx.draw(false,
+  
+     function(){
+  
+       setTimeout(function(){
+         wx.canvasToTempFilePath({
+           x: 0,
+           y: 0,
+           width: 750,
+           height: 930,
+           destWidth: 1.2 * 750 * 750 / th.data.screenWidth,
+           destHeight: 1.2 * 1217 * 750 / th.data.screenWidth,
+           canvasId: 'myCanvas',
+           success: function (res) {
+             wx.hideLoading();//关闭生成中的方法
+             th.data.is_loading = 0;
+             console.log("生成的海报");
+             console.log(res.tempFilePath);
+             var tempFilePath = res.tempFilePath;
+             th.setData({
+               imagePath: tempFilePath,
+               maskHidden: false,
+               canvasHidden: true
+             });
+             wx.previewImage({
+               urls: [res.tempFilePath],
+             })
+             if (!res.tempFilePath) {
+               wx.showModal({
+                 title: '提示',
+                 content: '图片绘制中，请稍后重试',
+                 showCancel: false
+               })
+             }
+  
+           }
+  
+         })
+       },500)
+      
+    
+     }
+    )
+     
+   
+        })
+      }
+    }) 
+    
+  },
+  
+  
+  
+  
+  
+  
+  
 })
 \ No newline at end of file
@@ -258,6 +258,46 @@ function get_rand_item(arr){
    return arr[ind];
 }
+
+//画布画椭圆矩形
+function draw_randon_rect(ctx,x,y,r,w,h){
+	ctx.save();
+	// 开始绘制
+	ctx.beginPath();
+	// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
+	// 这里是使用 fill 还是 stroke都可以，二选一即可
+	ctx.setFillStyle('rgb(237,188,150)')
+	// ctx.setStrokeStyle('transparent')
+	// 左上角
+	ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
+	  
+	// border-top
+	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)
+	  
+	// border-right
+	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)
+	  
+	// border-bottom
+	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)
+	  
+	// border-left
+	ctx.lineTo(x, y + r)
+	ctx.lineTo(x + r, y)  
+	// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
+	ctx.fill(); 
+	
+}
+
 module.exports = {
     formatTime: function(e, r) {
         var t = e ? new Date(1e3 * e) : new Date(), n = t.getFullYear(), o = t.getMonth() + 1, a = t.getDate(), u = t.getHours(), i = t.getMinutes(), f = t.getSeconds(), s = function(e) {