我的会员

iceling
1 parent 2476135d
Showing 3 changed files with 250 additions and 114 deletions
pages/user/plus/plus.js
pages/user/plus/plus.wxml
pages/user/plus/plus.wxss
@@ -13,6 +13,7 @@ var e = function(e) {
   n = new e.default();
 var regeneratorRuntime = require('../../../utils/runtime.js');
 var api = require('../../../api/api.js');
+//wx.downloadFile把线上地址设为本地地址
 Page({
   /**
@@ -28,8 +29,7 @@ Page({
     canvasHidden: true,
     shareImgPath: null,
     plusCard: "",
-    imagePath: "",
-    isshare: 0,
+    imagePath: ""
   },
   swiperChange: function(e) {
     var currentId = e.detail.current;
@@ -51,9 +51,8 @@ Page({
         })
       }
     })
-   this.getPlusCardType();
-   
-
+    this.getPlusCardType();
+    this.saveImageToPhotosAlbum();
   },
   //获取卡类
   getPlusCardType: function(e) {
@@ -70,116 +69,254 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   saveImageToPhotosAlbum: function() {
+    wx.showLoading({
+      title: '生成中...',
+    })
     var th = this;
     var unit = th.data.screenWidth / 750 * 1.35;
     const ctx = wx.createCanvasContext('myCanvas');
     //设置画板显示，才能开始绘图
     th.setData({
+
       canvasHidden: false
     })
-   ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0,554 * unit,899 * unit);
-    ctx.drawImage("../../../images/userinfo/user_head.jpg", 60 * unit, 20 * unit, 60 * unit, 60 * unit);
+    ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0, 554 * unit, 930 * unit);
     ctx.setFontSize(26 * unit);
     ctx.setFillStyle("rgb(0,0,0)");
-    ctx.setTextAlign('left')
-    ctx.fillText("钱巧玲", 136 * unit, 65 * unit, 110 * unit);
+    ctx.fillText("钱巧玲", 155 * unit, 75 * unit, 200 * unit);
-    ctx.setFontSize(22 * 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("强烈推荐", 400 * unit, 60 * unit);
-
+    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, 120 * unit);
-    ctx.lineTo(554 * unit, 120 * unit);
+    ctx.moveTo(0, 125 * unit);
+    ctx.lineTo(554 * unit, 125 * unit);
     ctx.stroke();
-    ctx.setStrokeStyle("rgb(218,194,169)");
+    var x = 55 * unit,
+      y = 165 * unit,
+      w = 444 * unit,
+      h = 220 * unit,
+      r = 14 * unit;
+    ctx.save();
+    // 开始绘制
     ctx.beginPath();
-    ctx.moveTo(0, 420 * unit);
-    ctx.lineTo(554 * unit, 420 * unit);
-    ctx.stroke();
+    // 因为边缘描边存在锯齿，最好指定使用 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()
+
+    ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
+    ctx.drawImage("../../../images/plus/share/one.jpg", x, y, 444 * unit, 220 * unit); // 推进去图片
+    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+    ctx.beginPath();
     // 卡图片
-    ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 170 * unit, 444 * unit, 205 * unit);
+    //  ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 165 * unit, 444 * unit, 220 * unit,);
     ctx.setFontSize(26 * unit);
-    ctx.setFillStyle("white");
+    ctx.setFillStyle("rgb(237,188,150)");
     ctx.fillText("PLUSI会员", 80 * unit, 215 * unit);
     ctx.setFontSize(18 * unit);
-    ctx.setFillStyle("white");
+    ctx.setFillStyle("rgb(237,188,150)");
     ctx.fillText("开通会员年卡仅199元", 80 * unit, 240 * unit);
-    ctx.setFontSize(18 * unit);
-    ctx.setFillStyle("white");
-    ctx.fillText("立即开通", 360 * unit, 215 * unit);
-
-    ctx.drawImage("../../../images/userinfo/user_head.jpg", 80 * unit, 315 * unit, 40 * unit, 40 * unit);
+    ctx.drawImage("../../../images/plus/share/privilege_o.png", 80 * unit, 343 * unit, 20 * unit, 20 * unit);
     ctx.setFontSize(14 * unit);
-    ctx.setFillStyle("white");
-    ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥2899元", 130 * unit, 345 * unit);
+    ctx.setFillStyle("rgb(237,188,150)");
+    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("../../../images/plus/share/square.png", 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.setFontSize(22 * unit);
+    ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 470 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("超级VIP权益", 90 * unit, 475 * unit);
+    ctx.fillText("超级VIP权益", 100 * unit, 475 * unit);
     ctx.setFontSize(20 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("超级会员专属权益", 90 * unit, 505 * unit);
-    ctx.drawImage("../../../images/plus/share/Ancrown.png", 395 * unit, 435 * unit, 80 * unit, 80 * unit);
+    ctx.fillText("超级会员专属权益", 100 * unit, 505 * unit);
+    ctx.drawImage("../../../images/plus/share/Ancrown.png", 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.setFontSize(22 * unit);
+    ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 575 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("超级VIP标识", 90 * unit, 580 * unit);
+    ctx.fillText("超级VIP标识", 100 * unit, 580 * unit);
     ctx.setFontSize(20 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("彰显尊贵身份的象征", 90 * unit, 610 * unit);
-    ctx.drawImage("../../../images/plus/share/Identification.png", 395 * unit, 545 * unit, 80 * unit, 80 * unit);
+    ctx.fillText("彰显尊贵身份的象征", 100 * unit, 610 * unit);
+    ctx.drawImage("../../../images/plus/share/Identification.png", 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.setFontSize(22 * unit);
+    ctx.drawImage("../../../images/plus/share/square.png", 80 * unit, 695 * unit, 10 * unit, 10 * unit);
+    ctx.setFontSize(24 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("超级VIP价格", 90 * unit, 695 * unit);
+    ctx.fillText("超级VIP价格", 100 * unit, 695 * unit);
     ctx.setFontSize(20 * unit);
     ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("享受专属会员超低价", 90 * unit, 725 * unit);
-    ctx.drawImage("../../../images/plus/share/money.png", 395 * unit, 660 * unit, 80 * unit, 80 * unit);
+    ctx.fillText("享受专属会员超低价", 100 * unit, 725 * unit);
+    ctx.drawImage("../../../images/plus/share/money.png", 355 * unit, 660 * unit, 65 * unit, 65 * unit);
-    ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 760 * unit, 100 * unit, 100 * unit);
+    ctx.rect(85 * unit, 750 * unit, 375 * unit, 1 * unit)
+    ctx.setFillStyle('rgb(218,194,169)')
+    ctx.fill();
+
+    ctx.drawImage("../../../images/userinfo/user_head.jpg", 100 * unit, 780 * unit, 110 * unit, 110 * unit);
     ctx.setFontSize(20 * unit);
-    ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("解锁新权益 精彩享不停", 220 * unit, 800 * unit);
+    ctx.setFillStyle("#000");
+    ctx.fillText("解锁新权益 精彩享不停", 230 * unit, 825 * unit);
     ctx.setFontSize(20 * unit);
-    ctx.setFillStyle("rgb(198,165,126)");
-    ctx.fillText("长按识别二维码,立即开通", 220 * unit, 840 * 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("../../../images/userinfo/user_head.jpg", h_x, h_y, h_r * 2, h_r * 2);
+    ctx.restore();
+
+    var x = 345 * unit,
+      y = 190 * unit,
+      w = 105 * unit,
+      h = 30 * unit,
+      r = 14 * unit;
+    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()
+    // ctx.stroke()
+    ctx.closePath()
+    // 剪切
+    ctx.clip();
+
+    ctx.setFontSize(18 * unit);
+    ctx.setFillStyle("#000");
+    ctx.fillText("立即开通", 362 * unit, 212 * unit);
     //绘制图片
-    ctx.draw(false, wx.canvasToTempFilePath({
+    ctx.draw(false,
+     wx.canvasToTempFilePath({
       x: 0,
       y: 0,
       width: 750,
-      height: 1217,
+      height: 930,
       destWidth: 1.2 * 750 * 750 / th.data.screenWidth,
       destHeight: 1.2 * 1217 * 750 / th.data.screenWidth,
       canvasId: 'myCanvas',
       success: function(res) {
+        console.log("sssssssssssssssssssssssss" + res.tempFilePath);
         var tempFilePath = res.tempFilePath;
         th.setData({
           imagePath: tempFilePath,
           maskHidden: false,
-          canvasHidden: true,
-          isshare: 1
+          canvasHidden: true
         });
         wx.previewImage({
-          urls: [tempFilePath],
+          urls: [res.tempFilePath],
         })
-      }
+        if (!res.tempFilePath) {
+          wx.showModal({
+            title: '提示',
+            content: '图片绘制中，请稍后重试',
+            showCancel: false
+          })
+        }
+        wx.hideLoading();
+       }
+
     }))
   },
@@ -43,35 +43,35 @@
         <!-- 已开通 -->
-       
-            <view class="MemberPlus" style=" background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
-              <view class="flex-space-between">
-                <view>
-                  <view class="fs36" style="font-weight:bold">PLUSI会员</view>
-                  <view class="fs22">开通会员年卡仅199元</view>
-                </view>
-                <view class="renew fs28">立即续费
-                </view>
+        <view class="MemberPlus" style=" background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
-              </view>
+          <view class="flex-space-between">
+            <view>
+              <view class="fs36" style="font-weight:bold">PLUSI会员</view>
+              <view class="fs22">开通会员年卡仅199元</view>
+            </view>
+            <view class="renew fs28">立即续费
+            </view>
-              <view class="flex-vertical-between xs fs24">
+          </view>
-                <view class="flex">
-                  <image class="privilege" src="{{url}}/miniapp/images/plus/privilege_o.png"></image>
-                  <view>正在享受PLUSI会员特权
-                  </view>
-                </view>
-                <view class="flex-vertical" bindtap="saveImageToPhotosAlbum">
-                  <view>邀请新朋友</view>
-                  <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image>
-                </view>
-              </view>
+          <view class="flex-vertical-between xs fs24">
+            <view class="flex">
+              <image class="privilege" src="{{url}}/miniapp/images/plus/privilege_o.png"></image>
+              <view>正在享受PLUSI会员特权
+              </view>
             </view>
-   
+            <view class="flex-vertical" bindtap="saveImageToPhotosAlbum">
+              <view>邀请新朋友</view>
+              <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image>
+            </view>
+          </view>
+
+        </view>
+
       </block>
       <view wx:if="{{j==false}}" class="flex-vertical-between Invitation fs30">
@@ -188,36 +188,36 @@
   <view bindtap="OpeningClose"></view>
   <!-- 弹框 -->
-    <view class="Member_purchase">
-      <view class="rel purchase_Bk" style="background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
-        <image class="abs write" src="../../../images/plus/write.png"></image>
-      </view>
-      <view class="fs26 inf_com">
-        <view class="fs36 flex-level perfect">请完善下面信息</view>
-        <view class="fillin">
-          <!-- 输入推荐人手机号 -->
-          <view class="flex ai_and Enter_phone">
-            <image class="phone_image" src="../../../images/plus/Invitation_code.png" ></image>
-            <view class="phone">
-            <input placeholder="请输入邀请码(推荐人手机号)" type="number" maxlength="30"/>
-            </view>
+  <view class="Member_purchase">
+    <view class="rel purchase_Bk" style="background-image: url({{url}}/miniapp/images/plus/card_one.jpg);">
+      <image class="abs write" src="../../../images/plus/write.png"></image>
+    </view>
+    <view class="fs26 inf_com">
+      <view class="fs36 flex-level perfect">请完善下面信息</view>
+      <view class="fillin">
+        <!-- 输入推荐人手机号 -->
+        <view class="flex ai_and Enter_phone">
+          <image class="phone_image" src="../../../images/plus/Invitation_code.png"></image>
+          <view class="phone">
+            <input placeholder="请输入邀请码(推荐人手机号)" type="number" maxlength="30" />
           </view>
+        </view>
-          <!-- 输入营业员 -->
-          <view class="flex ai_and enter_SalesClerk">
-            <image class="SalesClerk_image" src="../../../images/plus/Sales_Clerk.png" ></image>
-            <view class="SalesClerk">
-            <input placeholder="请输入营业员" maxlength="30"/>
-            </view>
+        <!-- 输入营业员 -->
+        <view class="flex ai_and enter_SalesClerk">
+          <image class="SalesClerk_image" src="../../../images/plus/Sales_Clerk.png"></image>
+          <view class="SalesClerk">
+            <input placeholder="请输入营业员" maxlength="30" />
           </view>
-          <!-- 确认购买 -->
-          <view class="flex-center">
-            <view class="flex-center purchase" style="background-image:url({{url}}/miniapp/images/plus/card_one.jpg);">
-              确认购买
-            </view>
+        </view>
+        <!-- 确认购买 -->
+        <view class="flex-center">
+          <view class="flex-center purchase" style="background-image:url({{url}}/miniapp/images/plus/card_one.jpg);">
+            确认购买
           </view>
         </view>
       </view>
+    </view>
     <view class="flex-level">
       <image class="purchaseClose" bindtap="OpeningClose" src="../../../images/plus/Close.png"></image>
     </view>
@@ -227,10 +227,15 @@
 <!-- 画布 -->
-<canvas canvas-id='myCanvas' style="width:750rpx;height:1217rpx;"></canvas>
-<!-- 分享图片
-<view class="mc" wx:if="{{false}}" bindtap="isshare">
-<!-- 蒙尘 -->
-    <!-- <image src="{{imagePath}}" style="width:400rpx;height:400rpx;"></image>
-</view> --> 
+<canvas canvas-id='myCanvas' style="width:750rpx;height:1330rpx;"></canvas>
+<!-- < 分享图片 -->
+<!-- <view class="mc" wx:if="{{isshare}}" catchtap="isshare">
+  <!-- 蒙尘 -->
+  <!-- <view>
+    <image src="{{imagePath}}"></image>
+  </view>
+  <view class="flex-center Close">
+    <image src="../../../images/plus/Close.png" bindtap="isshare"></image>
+  </view>
+</view> -->  -->
 <warn id="warn"></warn>
 \ No newline at end of file
@@ -4,9 +4,11 @@ page {
   z-index: 3;
   overflow-x: hidden;
 }
-.plus{
+
+.plus {
   overflow-x: hidden;
 }
+
 .Member_bk {
   position: absolute;
   z-index: 0;
@@ -198,7 +200,7 @@ swiper {
 .Invitation .Detailed {
   color: rgb(237, 189, 150);
-  text-decoration:underline;
+  text-decoration: underline;
 }
 .consumption {
@@ -351,12 +353,4 @@ input {
   overflow: visible;
   width: 360rpx;
 }
-.mc{
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  z-index: 7;
-  top: 0rpx;
-  left: 0rpx;
-  background-color: rgba(0,0,0,0.4);
-}
 \ No newline at end of file
+