助力活动显示会员头像的修改

yvan.ni
1 parent 511bfd0c
Showing 1 changed file with 80 additions and 29 deletions
pages/user/assistance/task_assistance.js
@@ -44,15 +44,13 @@ Page({
     screenWidth: "", //用户的屏幕宽度
     gid: "",
     images: ["miniapp/images/friendhelp/help.png", "miniapp/images/friendhelp/background.png", "miniapp/images/friendhelp/no_check.png",
-      "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/unfinished.png",
-      "/public/upload/libao/temp/2019/12-20/51f251f44ea0f67b8efdc5bfa3a434b0.jpg"
+      "miniapp/images/friendhelp/check.png", "miniapp/images/friendhelp/unfinished.png","miniapp/images/xc_ellipsis.png"
     ], //固的分享图片
  
     dynamic: null, //已助力的微信头像数组
     head_pic_arr: [], //助力的头像
     share_lb_img: "", //分享的礼包图片
  
-
     is_generate: 0, //是否重复点击拆一拆
     already: 0, //已有几人助力
     lack: 0, //还差几人助力
@@ -646,38 +644,91 @@ Page({
         ctx.drawImage(images[3], 65 * unit, 445 * unit, 320 * unit * c, 12 * unit);
         var head_list_num = 30;
         var is_head_list = 0;
-        if (help_num < 8) {
-          //  判断已助力的人数
-
-          for (var a = 0; a < head_list_img.length; a++) {
-            ctx.save();
-            ctx.beginPath(); //开始绘制
-            ctx.arc(left + imagesize / 2, 505 * unit, imagesize / 2, 0, 2 * Math.PI);
-            ctx.setLineWidth(4 * unit);
-            ctx.setStrokeStyle('red');
-            ctx.setFillStyle("white");
-            ctx.fill();
-            ctx.clip();
-            ctx.drawImage(head_list_img[a], left , 505 * unit - imagesize / 2, imagesize, imagesize);
-            ctx.restore();
-            left += imagesize + spacing;
-          }
-          //这个是还未助力的位置
-          for (var i = 0; i < q_num; i++) {
-            // 助力人的头像
-            ctx.drawImage(images[4], left , 505 * unit - imagesize / 2, imagesize, imagesize); //分享的背景图片
-            left += imagesize + spacing;
-          }
-        }
-
-
+      
+		//当需要助力人数小与6个
+		if (help_num < 6) {
+			  var pos_arr=ut.get_box_arr(help_num,225.25*unit,505 * unit,spacing,imagesize / 2); 
+			  var now_ind=0;							
+			  //--判断已助力的人数--
+			  for (var a = 0; a < head_list_img.length; a++) {
+				 var pos= pos_arr[now_ind];
+				 ut.draw_circle(ctx,pos.x, pos.y, imagesize / 2,head_list_img[a],'red',unit); 			 
+				 now_ind++;
+			  }	  
+			  //--显示还差的人数--
+			  if(help_num-head_list_img.length>0){
+				   var neednum=help_num-head_list_img.length;				   
+				   //这个是还未助力的位置
+				   for (var i = 0; i < neednum; i++) {
+					   var pos= pos_arr[now_ind];
+					   now_ind++;
+				   	   // 助力人的头像
+				   	   ctx.drawImage(images[4], pos.x-imagesize/2, pos.y-imagesize/2,imagesize, imagesize); //分享的背景图片
+				   	  
+				   } 
+			  }
+			 			  		  
+        }else if(help_num>7){		
+			 //助力头像数量, 是不是要显示省略图
+			  var zl_head=0,is_sheng=0;  
+			  if(head_list_img.length>=6) {
+				  zl_head=5;is_sheng=1;
+			  }else{
+				  zl_head=head_list_img.length;
+			  }
+			  
+			  
+			  //判断已助力的人数
+			  for (var a = 0; a < zl_head; a++) { 
+                //绘制头像
+				ut.draw_circle(ctx,left + imagesize / 2, 505 * unit, imagesize / 2,head_list_img[a],'red',unit);
+			    left += imagesize + spacing;
+			  }
+		  
+			  //如果是省略号的话
+			  if(is_sheng){
+				   ctx.drawImage(images[5], left , 505 * unit - imagesize / 2, imagesize, imagesize); //头像的省略图片
+              }else{
+				   //这个是还未助力的位置
+				   for (var i = 0; i < 6-head_list_img.length; i++) {
+				     // 助力人的头像
+				     ctx.drawImage(images[4], left , 505 * unit - imagesize / 2, imagesize, imagesize); //分享的?号图片
+				     left += imagesize + spacing;
+				   }
+			  }			 	  
+		}else{
+			 //  判断已助力的人数
+			 for (var a = 0; a < head_list_img.length; a++) {
+			 				ctx.save();
+			 				ctx.beginPath(); //开始绘制
+			 				ctx.arc(left + imagesize / 2, 505 * unit, imagesize / 2, 0, 2 * Math.PI);
+			 				ctx.setLineWidth(4 * unit);
+			 				ctx.setStrokeStyle('red');
+			 				ctx.setFillStyle("white");
+			 				ctx.fill();
+			 				ctx.clip();
+			 				ctx.drawImage(head_list_img[a], left , 505 * unit - imagesize / 2, imagesize, imagesize);
+			 				ctx.restore();
+			 				left += imagesize + spacing;
+			 }
+			 
+			 if(help_num-head_list_img.lengt>0){
+				  var neednum=help_num-head_list_img.length;
+				  //这个是还未助力的位置
+				  for (var i = 0; i < neednum; i++) {
+				  	  // 助力人的头像
+				  	  ctx.drawImage(images[4], left , 505 * unit - imagesize / 2, imagesize, imagesize); //分享的背景图片
+				  	  left += imagesize + spacing;
+				  }
+			 }
+			 
+		}
  
         ctx.setFillStyle("rgb(255,255,255)");
         ctx.setFontSize(size);
         ctx.fillText("优惠乐翻天，精彩就在你身边!", 37 * unit, 595 * unit);
         ctx.setFillStyle("rgb(255,255,255)");
         ctx.setFontSize(size);
-
         ctx.fillText(act_time, 37 * unit, 620 * unit); //绘制活动是时间
         ctx.setFillStyle("rgb(255,255,255)");
         ctx.setFontSize(size);