Merge branch 'limengbo'

component/popup/popup.js

@@ -0,0 +1,23 @@
+// component/popup/popup.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

component/popup/popup.wxml

@@ -0,0 +1,2 @@
+<!--component/popup/popup.wxml-->
+<text>component/popup/popup.wxml</text>

component/popup/popup.wxss

@@ -0,0 +1 @@
+/* component/popup/popup.wxss */

component/share-dialog/share-dialog.js

@@ -1,36 +0,0 @@
-// component/shar-dialog/shar-dialog.js
-Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-
-  },
-
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    poster: function () {
-      const ctx = wx.createCanvasContext('myCanvas');
-      ctx.setFontSize(20)
-      ctx.fillText('喔喔', 93, 49)
-      ctx.setFillStyle('#FF4400')
-      ctx.fillText('郎朗读书声是世上最美的声音', 92, 76) 
-      ctx.save()
-      ctx.arc(48, 53, 37, 0, 2 * Math.PI, false)
-      ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内  
-      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 10, 10, 100, 100);   //插入图片  
-      ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 9, 103, 352, 145);  
-      ctx.draw()
-    }
-  }
-})

component/share-dialog/share-dialog.wxml

@@ -1,16 +0,0 @@
-<!--component/shar-dialog/shar-dialog.wxml-->
-<view class="share">
-   <view class="btn">
-       <image class="bg" src="../../static/groupImg/share.png"></image>
-       <view class="share-btn">
-           <view class="share-friend">
-               <image  src="../../static/groupImg/weixin.png"></image>
-               <text>发送给群/好友</text>
-           </view>
-           <view class="share-circle" bindtap="poster">
-               <image  src="../../static/groupImg/circle.png"></image>
-               <text>发朋友圈</text>
-           </view>           
-       </view>
-   </view>
-</view>

component/share-dialog/share-dialog.wxss

@@ -1,42 +0,0 @@
-/* component/shar-dialog/shar-dialog.wxss */
-.share {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, .3);
-    z-index: 99;
-}
-
-.btn {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 290rpx;
-    background: #fff;
-}
-
-.btn .bg {
-    width: 90%;
-    margin: 46rpx 5%;
-    height: 42rpx;
-}
-
-.share-btn {
-    display: flex;
-    justify-content: space-around;
-}
-
-.share-btn image {
-    width: 66rpx;
-    height: 66rpx;
-}
-
-.share-btn view {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 32rpx;
-}

component/share/share.js

@@ -0,0 +1,110 @@
+// component/shar-dialog/shar-dialog.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    shareFlag: true,
+    imgUrls: ''
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    poster: function () {
+      const that = this;
+      const ctx = wx.createCanvasContext('myCanvas');
+      ctx.rect(0, 0, 370, 507)
+      ctx.setFillStyle('#fff')
+      ctx.fill()
+      ctx.save()
+      ctx.beginPath()
+      ctx.setFillStyle('#fff')
+      ctx.fill()
+      ctx.arc(185, 48, 37, 0, 2 * Math.PI, false)
+      ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内  
+      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 148, 8, 100, 100);   //插入图片  
+      ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+      ctx.setFontSize(20)
+      ctx.setFillStyle('#000')
+      ctx.fillText('喔喔', 166, 115)
+      ctx.setFillStyle('#FF4400')
+      ctx.fillText('郎朗读书声是世上最美的声音', 50, 138) 
+      ctx.drawImage('../../../static/groupImg/Bitmap1.png', 9, 156, 352, 145);  
+      ctx.setFontSize(18)
+      ctx.setFillStyle('#000')
+      ctx.fillText('一年级语文上学期', 12, 329)
+      ctx.drawImage('../../../static/groupImg/Combined Shape.png', 11, 348, 196, 65);
+      ctx.drawImage('../../../static/groupImg/Rectangle 41.png', 134, 358, 59, 20);
+      ctx.setFontSize(14)  
+      ctx.setFillStyle('#fff')
+      ctx.fillText('五人团', 149, 373) 
+      ctx.setFontSize(16)  
+      ctx.setFillStyle('#A95A00')
+      ctx.fillText('原价', 24, 373)
+      ctx.setStrokeStyle('red')
+      ctx.moveTo(64, 368)
+      ctx.lineTo(114, 368)
+      ctx.stroke()
+      ctx.fillText('￥99元', 64, 373)
+      ctx.setFontSize(18)
+      ctx.fillText('团购价仅需', 20, 403)
+      ctx.fillText('元', 144, 403)
+      ctx.setFontSize(20)  
+      ctx.setFillStyle('red')
+      ctx.fillText('￥1', 109, 403) 
+      ctx.drawImage('../../../static/groupImg/Group 5 Copy 7.png', 3, 419, 370, 192);  
+      ctx.setFontSize(20)
+      ctx.setFillStyle('red')
+      ctx.fillText('名额有限，售完截止', 9, 467)
+      ctx.setFontSize(18)
+      ctx.setFillStyle('#000')
+      ctx.fillText('长按识别二维码参加团购', 9, 493)
+      ctx.drawImage('../../../static/groupImg/code.png', 217, 374, 135, 135);
+      ctx.draw(true, function (res) {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          width: 370,
+          height: 507,
+          destWidth: 370,
+          destHeight: 507,
+          canvasId: 'myCanvas',
+          success:(res) => {
+              console.log(res.tempFilePath)
+              // wx.saveImageToPhotosAlbum({
+              //   filePath: res.path,
+              //   success(res) {
+              //     console.log(res);
+              //    }
+              // })
+              that.setData({
+                imgUrls: res.tempFilePath
+              })
+          }
+        })
+      })
+    },
+    share: function () {
+      this.setData({
+        shareFlag: !this.data.shareFlag
+      })
+    },
+    PreservationImg: function () {
+      wx.saveImageToPhotosAlbum({
+        filePath: this.data.imgUrls,
+        success(res) { 
+          console.log('保存成功')
+        }
+      })
+    }
+  }
+})

component/share/share.wxml

@@ -0,0 +1,22 @@
+<view class="share" bindtap="share" hidden="{{shareFlag}}">
+   <view class="btn" wx:if="{{!imgUrls}}">
+       <image class="bg" src="../../static/groupImg/share.png"></image>
+       <view class="share-btn">
+           <view class="share-friend">
+               <image  src="../../static/groupImg/weixin.png"></image>
+               <text>发送给群/好友</text>
+           </view>
+           <view class="share-circle" catchtap="poster">
+               <image  src="../../static/groupImg/circle.png"></image>
+               <text>发朋友圈</text>
+           </view>           
+       </view>
+   </view>
+   <view class="share-img" wx:if="{{imgUrls}}">
+       <image class="img" src="{{imgUrls}}"></image>
+       <view class="Preservation">
+           <image class="PreservationBg" src="../../static/groupImg/Preservation.png"></image>
+           <text bindtap="PreservationImg">点我保存，并分享至朋友圈</text>
+       </view>
+   </view>
+</view>

component/share/share.wxss

@@ -0,0 +1,76 @@
+/* component/shar-dialog/shar-dialog.wxss */
+.share {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .3);
+    z-index: 99;
+}
+
+.btn {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 290rpx;
+    background: #fff;
+}
+
+.btn .bg {
+    width: 90%;
+    margin: 46rpx 5%;
+    height: 42rpx;
+}
+
+.share-btn {
+    display: flex;
+    justify-content: space-around;
+}
+
+.share-btn image {
+    width: 66rpx;
+    height: 66rpx;
+}
+
+.share-btn view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+}
+
+.img {
+    position: absolute;
+    left: 5rpx;
+    top: 30rpx;
+    width: 740rpx;
+    height: 1014rpx;
+}
+
+.Preservation {
+    position: absolute;
+    left: 15%;
+    bottom: 5%;
+    width: 70%;
+    height: 88rpx;
+
+}
+
+.Preservation .PreservationBg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.Preservation text {
+    color: #fff;
+    font-size: 36rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 20rpx;
+    z-index: 9;
+}

pages/groupPage/collage-details/collage-details.js

@@ -5,7 +5,6 @@ Page({
    * 页面的初始数据
    */
   data: {
-    hideFlag: true,
     hideFlag: true
   },
 
@@ -15,6 +14,10 @@ Page({
       hideFlag: !this.data.hideFlag
     })
   },
+  //显示分享页 
+  share: function () {
+    this.shareDialog.share();
+  },
   /**
    * 生命周期函数--监听页面加载
    */
@@ -26,7 +29,7 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    this.shareDialog = this.selectComponent("#share-dialog");
   },
 
   /**

pages/groupPage/collage-details/collage-details.json

@@ -1,6 +1,6 @@
 {
     "component": true,
     "usingComponents": {
-        "sharDialog": "/component/share-dialog/share-dialog"
+        "shareDialog": "/component/share/share"
     }
   }

pages/groupPage/collage-details/collage-details.wxml

@@ -58,7 +58,7 @@
                 分             
             </view>
         </view>
-        <view class="invitation-btn" bindtap="hideFlag">
+        <view class="invitation-btn" bindtap="share">
             <image src="../../../static/groupImg/Invitation.png"></image>
             <text>邀请朋友参加</text>
         </view>
@@ -72,6 +72,6 @@
         * 转发给自己的朋友们，分享好课， 追随您一起学习进步。您的魅力不是吹的！ * 在限定时间内内成功拼团，您将得到xx元的奖励金哦。 * 如果拼团失败，您预付的课程费将在48小时内退回您的账户。
     </view>
 </view> 
-<canvas canvas-id="myCanvas" style="width:100%; height: 100%;"></canvas>
-<sharDialog/>
+<canvas canvas-id="myCanvas" style="width:370px; height: 507px; position: absolute; left: -99rpx; top: -999rpx;"></canvas>
+<shareDialog id="share-dialog"/>