1

component/flowerBox/flowerBox.js

@@ -0,0 +1,47 @@
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        flowerNum: {
+        type: "String",
+        value: '1'
+      }
+    },
+  
+    /**
+     * 组件的初始数据
+     */
+    data: {
+      flag: true,
+    },
+  
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        comeOut: function(){
+            this.animation = wx.createAnimation({
+                duration: 700,
+                timingFunction: 'ease',
+              })
+              this.animation.bottom('350rpx').step();
+              this.setData({
+                animationData: this.animation.export()
+              })
+              setTimeout(()=>{
+                this.close()
+              },2000);
+        },
+        close: function (e) {
+            this.animation = wx.createAnimation({
+              duration: 400,
+              timingFunction: 'ease',
+            })
+            this.animation.opacity(0).step();
+            this.setData({
+              animationData: this.animation.export()
+            })
+          },
+    }
+  })

component/flowerBox/flowerBox.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+  }

component/flowerBox/flowerBox.wxml

@@ -0,0 +1,6 @@
+<view class="flower-alert" animation="{{animationData}}">
+    <view class="flower-title">
+        <text>恭喜：获得{{flowerNum}}朵</text>
+        <image class="flower-icon" src="../../static/image/flower_small.png" />
+    </view>
+</view>

component/flowerBox/flowerBox.wxss

@@ -0,0 +1,33 @@
+
+.flower-alert {
+    width: 290rpx;
+    height: 100rpx;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 20rpx 0rpx rgba(0, 0, 0, 0.3);
+    border-radius: 40rpx;
+    position: fixed;
+    bottom: -100rpx;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    background: #fff;
+    padding-left: 49rpx;
+    box-sizing: border-box;
+}
+.flower-title{
+    display: flex;
+    align-items: center;
+    text-align: center;
+    font-size: 24rpx;
+    font-weight: 800;
+    color: #393939;
+}
+.flower-icon{
+    width: 32rpx;
+    height: 38rpx;
+    display: block;
+    margin-left: 7rpx;
+}

component/share/share.js

@@ -42,75 +42,131 @@ Component({
       return false
     },
     poster: function () {
-      const that = this;
       const ctx = wx.createCanvasContext('myCanvas');
-      // 先画背景
-      this.drawBg(ctx)
-        .then(() => {
-          // 下载保存图片
-          console.log('背景画完');
-          return this.saveImg(ctx);
-        })
-        .then(() => {
-          // 画头像和作者||发起者
-          console.log('头像画完');
-          return this.drawAuthor(ctx);
-        })
-        .then(() => {
-          console.log(this.data.shareType)
-          if (this.data.shareType === 'works') {
-            // 分享作品的主题内容
-            console.log('主题画完');
-            return this.drawWorksGut(ctx)
-          } else {
-            return this.drawGroupGut(ctx)
+      const that = this;
+      wx.showLoading({
+        title: '海报生成中',
+        // mask: true
+      })
+      httpRequestApi.createQRCode(this.data.QRData).success(res => {
+        // 下载二维码
+        wx.downloadFile({
+          url: res.data.data,
+          success: res => {
+            this.setData({
+              QRCodeImagePath: res.tempFilePath
+            })
           }
-        })
-        .then(() => {
-          wx.getImageInfo({
-            src: this.data.QRCodeImagePath, //服务器返回的图片地址
-            success: function (res) {
-              console.log('下载content成功1')
-              console.log(res.path)
-              //res.path是网络图片的本地地址
-              ctx.drawImage(res.path, 35, 358, 90, 90);
-              console.log('下载content成功2')
-              ctx.draw(true, function (res) {
-                setTimeout(() => {
-                  wx.canvasToTempFilePath({
-                    x: 0,
-                    y: 0,
-                    width: 300,
-                    height: 525,
-                    // destWidth: 370,
-                    destWidth: 1200,
-                    // destHeight: 507,
-                    destHeight: 2100,
-                    canvasId: 'myCanvas',
-                    success: (res) => {
-                      console.log(res.tempFilePath)
-                      that.setData({
-                        imgUrls: res.tempFilePath
-                      }, () => {
-                        wx.hideLoading();
-                      })
-                    },
-                    fail: (res) => {
-                      console.log(res)
-                    }
-                  })
-                }, 200)
+        });
+        wx.downloadFile({
+          url: that.data.avatar,
+          success: res => {
+            this.setData({
+              avatar: res.tempFilePath
+            })
+          }
+        });
+        // 下载icon
+        if (this.data.shareType === 'works') {
+          wx.downloadFile({
+            url: that.data.iconImg,
+            success: res => {
+              this.setData({
+                iconImg: res.tempFilePath
               })
-            },
-            fail: function (res) {
-              //失败回调
-              console.log(res)
             }
           });
+        }
+        this.makeImage(ctx);
+      })
+    },
+    makeImage: function (ctx) {
+      // 画出背景和相同内容
+      if (this.data.shareType === 'works') {
+        ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+      } else {
+        ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+      }
+      ctx.save()
+      ctx.beginPath()
+      ctx.fill()
+      ctx.setFontSize(25)
+      ctx.setFillStyle('#fff')
+      ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
+      ctx.setFontSize(16)
+      ctx.fillText('大声朗读是语感形成的必走之路', (300 - ctx.measureText('大声朗读是语感形成的必走之路').width) / 2, 75.5)
+      ctx.setFontSize(15)
+      ctx.setFillStyle('#838383')
+      ctx.fillText('长按识别二维码', 130.5, 391)
+      ctx.setFontSize(12)
+      ctx.setFillStyle('#838383')
+      ctx.fillText('接收邀请，获得你的课程吧', 130.5, 409.5) /*  */
+      // 头像
+      console.log('画头像')
+      if (this.data.shareType === 'works') {
+        ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
+        ctx.clip(); //剪切头像区域
+        ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
+        ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
+        ctx.setFillStyle('#ff6f42')
+        ctx.fill();
+        ctx.clip(); //剪切头像区域
+        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#ff6f42')
+        ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2, 262)
+        ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
+      } else {
+        ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
+        ctx.clip(); //剪切头像区域
+        ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
+        ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
+        ctx.setFillStyle('#ff6f42')
+        ctx.fill();
+        ctx.clip(); //剪切头像区域
+        //插入图片  
+        ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+        ctx.setFontSize(18)
+        ctx.setFillStyle('#ff6f42')
+        ctx.fillText(this.data.author, 100, 143.5)
+        ctx.setFontSize(16)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
+        ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('朗朗读书声，是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声，是世界上最美妙的声音').width) / 2, 327.5)
+      }
+      console.log('花二维码')
+      console.log(this.data.QRCodeImagePath)
+      ctx.drawImage(this.data.QRCodeImagePath, 35, 353, 90, 90);
+      ctx.draw();
+      setTimeout(() => {
+        wx.canvasToTempFilePath({
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 525,
+          destWidth: 1200,
+          destHeight: 2100,
+          canvasId: 'myCanvas',
+          success: (res) => {
+            this.setData({
+              imgUrls: res.tempFilePath
+            })
+            wx.hideLoading()
+          },
+          fail: (res) => {
+            console.log(res)
+            wx.hideLoading();
+          }
         })
-
-
-
+      }, 200)
 
     },
     share: function (data) {
@@ -150,8 +206,8 @@ Component({
           groupPurchaseInfo: data.groupPurchaseInfo,
           groupType: data.groupType
         })
-        this.poster();
       }
+      this.poster();
 
       if (this.data.shareType === 'class') {
         console.log('课程分享')
@@ -188,205 +244,10 @@ Component({
           this.triggerEvent('ShareDialogClose', {})
         }, 200)
       })
-
-
     },
     nothing: function (e) {
       return
     },
-    // 保存图片到本地
-    saveImg: function () {
-      console.log('yibuububu')
-      let download = new Promise((resolve, reject) => {
-        let QRCode = () => {
-          // 生成二维码并下载
-          httpRequestApi.createQRCode(this.data.QRData).success(res => {
-            console.log(this.data.QRData);
-            this.setData({
-              QRCodeImagePath: res.data.data
-            })
-            // wx.downloadFile({
-            //   url: res,
-            //   success: (res) => {
-            //     console.log(res)
-            //     console.log('下载二维码成功')
-            //     // this.setData({
-            //     //   avatar: res.tempFilePath
-            //     // }, () => {
-
-            //     // })
-
-            //   }
-            // });
-            resolve();
-          })
-        }
-        let downAvatar = () => {
-          wx.downloadFile({
-            url: this.data.avatar,
-            success: (res) => {
-              console.log('下载头像成功')
-              console.log(this.data.avatar)
-              this.setData({
-                avatar: res.tempFilePath
-              }, () => {
-                QRCode();
-              })
-
-            }
-          });
-        }
-
-        // resolve(()=>{
-        // 下载icon
-        wx.downloadFile({
-          url: this.data.iconImg,
-          success: (res) => {
-            console.log('下载icon成功')
-            console.log(this.data.iconImg)
-            this.setData({
-              iconImg: res.tempFilePath
-            }, () => {
-              // 下载头像
-              downAvatar();
-            })
-
-          }
-        });
-      })
-      return download;
-    },
-    // 先画出背景
-    drawBg: function (ctx) {
-      let background = new Promise((resolve, reject) => {
-        wx.showLoading({
-          title: '海报生成中',
-          // mask: true
-        })
-        if (this.data.shareType === 'works') {
-          ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
-        } else {
-          ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
-        }
-        ctx.save()
-        ctx.beginPath()
-        ctx.fill()
-        resolve();
-      });
-      return background;
-    },
-    // 画头像和作者||发起者
-    drawAuthor: function (ctx) {
-      let author = new Promise((resolve, reject) => {
-        if (this.data.shareType === 'works') {
-          ctx.arc(187.5, 171, 36, 0, 2 * Math.PI, false)
-          ctx.clip(); //剪切头像区域
-          ctx.fill('red')
-          ctx.drawImage(this.data.avatar, 152, 135, 72, 72); //插入图片  
-          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-          ctx.setFontSize(18)
-          ctx.setFillStyle('#444444')
-          ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 232)
-          ctx.setFontSize(16)
-          ctx.setFillStyle('#ff9209')
-          ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 253)
-        } else {
-          ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
-          ctx.clip(); //剪切头像区域
-          ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
-          ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
-          ctx.setFillStyle('#ff6f42')
-          ctx.fill();
-          ctx.clip(); //剪切头像区域
-          //插入图片  
-          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-          ctx.setFontSize(18)
-          ctx.setFillStyle('#ff6f42')
-          ctx.fillText(this.data.author, 100, 143.5)
-          ctx.setFontSize(16)
-          ctx.setFillStyle('#434343')
-          ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
-        }
-        resolve();
-      })
-      return author;
-    },
-    // 分享作品的主题内容
-    drawWorksGut: function (ctx) {
-      let works = new Promise((resolve, reject) => {
-        // resolve(() => {
-        console.log('开始画内容')
-        ctx.setFillStyle('#fff')
-        ctx.setFontSize(18)
-        ctx.fillText('小学语文 最新全国统一教材', (300 - ctx.measureText('小学语文 最新全国统一教材').width) / 2, 55);
-        ctx.setFontSize(30)
-        ctx.fillText('课文朗读 从未如此有趣', (300 - ctx.measureText('课文朗读 从未如此有趣').width) / 2, 103);
-        ctx.setFontSize(16)
-        ctx.setFillStyle('#444')
-        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2, 297)
-        // ctx.fillText(`配了一段惊世之作`,  90, 240)
-        // ctx.setFontSize(16)
-        // ctx.setFillStyle('red')
-        ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 322)
-
-        ctx.setFontSize(16)
-        ctx.setFillStyle('#000')
-        // ctx.setFillStyle('#000')
-        ctx.setFontSize(16)
-        // ctx.setFillStyle('#c90000')
-        ctx.setFillStyle('#ff9209')
-        ctx.fillText('为TA疯狂打CALL 快去听听', (300 - ctx.measureText('为TA疯狂打CALL 快去听听').width) / 2, 401)
-        ctx.setFontSize(12)
-        ctx.setFillStyle('#666666')
-        ctx.fillText('长按识别二维码', (300 - ctx.measureText('长按识别二维码').width) / 2, 574)
-        // })
-        resolve();
-      })
-      return works;
-    },
-
-    // 分享团购的主体内容
-    drawGroupGut: function (ctx) {
-      let group = new Promise((resolve, reject) => {
-        ctx.setFontSize(25)
-        ctx.setFillStyle('#fff')
-        ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
-        ctx.setFontSize(16)
-        ctx.fillText('大声朗读是语感形成的必走之路', (300 - ctx.measureText('大声朗读是语感形成的必走之路').width) / 2, 75.5)
-        ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
-
-        ctx.setFontSize(15)
-        ctx.setFillStyle('#434343')
-        ctx.fillText('朗朗读书声，是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声，是世界上最美妙的声音').width) / 2, 327.5)
-        // if(this.data.groupType === 'IOS'){
-        //   ctx.setFillStyle('#ff670d')
-        //   ctx.fillText(`助力成功，您还可以获得本课程7天VIP`, (300 - ctx.measureText('助力成功，您还可以获得本课程7天VIP').width) / 2, 412)
-
-
-        // } else {
-        //   ctx.setFillStyle('#A95A00')
-        //   ctx.fillText(`${this.data.groupPurchaseInfo.headcount}人团`, 96, 412)
-        //   ctx.setFontSize(19)
-        //   ctx.fillText('每人仅需', 151, 412)
-        //   // ctx.fillText('元', 120, 495)
-        //   ctx.setFontSize(28)
-        //   ctx.setStrokeStyle('red')
-        //   ctx.setFillStyle('red')
-        //   ctx.fillText(`${parseFloat(this.data.groupPurchaseInfo.price / 100).toFixed(2)}元`, 235, 415)
-        // }
-
-        ctx.setFontSize(15)
-        ctx.setFillStyle('#838383')
-        ctx.fillText('长按识别二维码', 130.5, 391)
-        ctx.setFontSize(12)
-        ctx.setFillStyle('#838383')
-        ctx.fillText('接收邀请，获得你的课程吧', 130.5, 409.5)
-        //})
-        resolve();
-      })
-      return group;
-    },
-
     // 保存最终图片
     PreservationImg: function () {
       // this.getImgAuthorize()

component/share/shareTemp.js

@@ -0,0 +1,415 @@
+// component/shar-dialog/shar-dialog.js
+import httpRequestApi from '../../utils/APIClient';
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    shareType: {
+      type: 'String',
+      value: ''
+    },
+    shareId: {
+      type: 'String',
+      value: ''
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    shareFlag: false,
+    imgUrls: '',
+    avatar: '',
+    author: '',
+    iconImg: '',
+    title: '',
+    path: '',
+    QRCodeImagePath: '',
+    QRCodeImageLocalPath: '',
+    groupPurchaseInfo: {},
+    groupType: '',
+    animationData: {},
+    touchMove: true
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    touchMove: function () {
+      return false
+    },
+    poster: function () {
+      const that = this;
+      const ctx = wx.createCanvasContext('myCanvas');
+      // 先画背景
+      this.drawBg(ctx)
+        .then(() => {
+          // 下载保存图片
+          console.log('背景画完');
+          return this.saveImg(ctx);
+        })
+        .then(() => {
+          // 画头像和作者||发起者
+          console.log('头像画完');
+          return this.drawAuthor(ctx);
+        })
+        .then(() => {
+          console.log(this.data.shareType)
+          if (this.data.shareType === 'works') {
+            // 分享作品的主题内容
+            console.log('主题画完');
+            return this.drawWorksGut(ctx)
+          } else {
+            return this.drawGroupGut(ctx)
+          }
+        })
+        .then(() => {
+          wx.getImageInfo({
+            src: this.data.QRCodeImagePath, //服务器返回的图片地址
+            success: function (res) {
+              //res.path是网络图片的本地地址
+              ctx.drawImage(res.path, 35, 353, 90, 90);
+              ctx.draw(true, function (res) {
+                setTimeout(() => {
+                  wx.canvasToTempFilePath({
+                    x: 0,
+                    y: 0,
+                    width: 300,
+                    height: 525,
+                    // destWidth: 370,
+                    destWidth: 1200,
+                    // destHeight: 507,
+                    destHeight: 2100,
+                    canvasId: 'myCanvas',
+                    success: (res) => {
+                      console.log(res.tempFilePath)
+                      that.setData({
+                        imgUrls: res.tempFilePath
+                      }, () => {
+                        wx.hideLoading();
+                      })
+                    },
+                    fail: (res) => {
+                      console.log(res)
+                    }
+                  })
+                }, 200)
+              })
+            },
+            fail: function (res) {
+              //失败回调
+              console.log(res)
+            }
+          });
+        })
+
+
+
+
+    },
+    share: function (data) {
+      console.log(data)
+      if (this.data.shareType === 'works') {
+
+        this.setData({
+          shareFlag: !this.data.shareFlag,
+          avatar: data.avatar,
+          author: data.author,
+          iconImg: data.iconImg,
+          title: data.title,
+          productId: data.productId,
+          // path: data.path,
+          QRData: {
+            page: data.path,
+            scene: data.scene,
+            qrCodeId: this.data.shareId
+          }
+        })
+      }
+      if (this.data.shareType === 'group') {
+        console.log(data)
+        console.log('团购分享')
+        this.setData({
+          shareFlag: !this.data.shareFlag,
+          avatar: data.avatar,
+          author: data.author,
+          iconImg: data.iconImg,
+          title: data.title,
+          // path: data.path,
+          QRData: {
+            page: data.path,
+            scene: data.scene,
+            qrCodeId: this.data.shareId
+          },
+          groupPurchaseInfo: data.groupPurchaseInfo,
+          groupType: data.groupType
+        })
+      }
+      this.poster();
+
+      if (this.data.shareType === 'class') {
+        console.log('课程分享')
+        this.setData({
+          shareFlag: !this.data.shareFlag
+        })
+      }
+      // 动画测试
+      this.animation = wx.createAnimation({
+        duration: 700,
+        timingFunction: 'ease',
+      })
+      this.animation.bottom(0).step();
+      this.setData({
+        animationData: this.animation.export()
+      })
+      // 动画测试
+    },
+    //关闭弹框
+    close: function (e) {
+      this.animation = wx.createAnimation({
+        duration: 400,
+        timingFunction: 'ease',
+      })
+      this.animation.bottom(-300).step();
+      this.setData({
+        animationData: this.animation.export()
+      }, () => {
+        setTimeout(() => {
+          this.setData({
+            shareFlag: !this.data.shareFlag,
+            imgUrls: ''
+          })
+          this.triggerEvent('ShareDialogClose', {})
+        }, 200)
+      })
+    },
+    nothing: function (e) {
+      return
+    },
+    // 保存图片到本地
+    saveImg: function () {
+      console.log('yibuububu')
+      let download = new Promise((resolve, reject) => {
+        let QRCode = () => {
+          // 生成二维码并下载
+          httpRequestApi.createQRCode(this.data.QRData).success(res => {
+            console.log(this.data.QRData);
+            this.setData({
+              QRCodeImagePath: res.data.data
+            })
+            // wx.downloadFile({
+            //   url: res,
+            //   success: (res) => {
+            //     console.log(res)
+            //     console.log('下载二维码成功')
+            //     // this.setData({
+            //     //   avatar: res.tempFilePath
+            //     // }, () => {
+
+            //     // })
+
+            //   }
+            // });
+            resolve();
+          })
+        }
+        let downAvatar = () => {
+          wx.downloadFile({
+            url: this.data.avatar,
+            success: (res) => {
+              console.log('下载头像成功')
+              console.log(this.data.avatar)
+              this.setData({
+                avatar: res.tempFilePath
+              }, () => {
+                QRCode();
+              })
+
+            }
+          });
+        }
+
+        // resolve(()=>{
+        // 下载icon
+        wx.downloadFile({
+          url: this.data.iconImg,
+          success: (res) => {
+            console.log('下载icon成功')
+            console.log(this.data.iconImg)
+            this.setData({
+              iconImg: res.tempFilePath
+            }, () => {
+              // 下载头像
+              downAvatar();
+            })
+
+          }
+        });
+      })
+      return download;
+    },
+    // 先画出背景
+    drawBg: function (ctx) {
+      let background = new Promise((resolve, reject) => {
+        wx.showLoading({
+          title: '海报生成中',
+          // mask: true
+        })
+        if (this.data.shareType === 'works') {
+          ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+        } else {
+          ctx.drawImage('../../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+        }
+        ctx.save()
+        ctx.beginPath()
+        ctx.fill()
+        ctx.setFontSize(25)
+        ctx.setFillStyle('#fff')
+        ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
+        ctx.setFontSize(16)
+        ctx.fillText('大声朗读是语感形成的必走之路', (300 - ctx.measureText('大声朗读是语感形成的必走之路').width) / 2, 75.5)
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#838383')
+        ctx.fillText('长按识别二维码', 130.5, 391)
+        ctx.setFontSize(12)
+        ctx.setFillStyle('#838383')
+        ctx.fillText('接收邀请，获得你的课程吧', 130.5, 409.5)
+        resolve();
+      });
+      return background;
+    },
+    // 画头像和作者||发起者
+    drawAuthor: function (ctx) {
+      let author = new Promise((resolve, reject) => {
+        if (this.data.shareType === 'works') {
+          ctx.arc(150, 160, 36, 0, 2 * Math.PI, true)
+          ctx.clip(); //剪切头像区域
+          ctx.drawImage(this.data.avatar, 116, 126, 68, 68);
+          ctx.arc(150, 160, 34, 0, 2 * Math.PI, false)
+          ctx.setFillStyle('#ff6f42')
+          ctx.fill();
+          ctx.clip(); //剪切头像区域
+          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+          ctx.setFontSize(15)
+          ctx.setFillStyle('#ff6f42')
+          ctx.fillText(this.data.author, (300 - ctx.measureText(this.data.author).width) / 2, 220)
+          ctx.setFillStyle('#434343')
+          ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 243)
+        } else {
+          ctx.arc(64, 146, 29, 0, 2 * Math.PI, true)
+          ctx.clip(); //剪切头像区域
+          ctx.drawImage(this.data.avatar, 37, 119, 54, 54);
+          ctx.arc(64, 146, 27, 0, 2 * Math.PI, false)
+          ctx.setFillStyle('#ff6f42')
+          ctx.fill();
+          ctx.clip(); //剪切头像区域
+          //插入图片  
+          ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
+          ctx.setFontSize(18)
+          ctx.setFillStyle('#ff6f42')
+          ctx.fillText(this.data.author, 100, 143.5)
+          ctx.setFontSize(16)
+          ctx.setFillStyle('#434343')
+          ctx.fillText('邀您和我一起大声朗读', 100, 167.5)
+        }
+        resolve();
+      })
+      return author;
+    },
+    // 分享作品的主题内容
+    drawWorksGut: function (ctx) {
+      let works = new Promise((resolve, reject) => {
+        // resolve(() => {
+        console.log('开始画内容')
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('使出洪荒之力，声情并茂地朗诵了', (300 - ctx.measureText('使出洪荒之力，声情并茂地朗诵了').width) / 2, 262)
+        ctx.fillText(`《${this.data.title}》`, (300 - ctx.measureText(`《${this.data.title}》`).width) / 2, 284)
+        resolve();
+      })
+      return works;
+    },
+
+    // 分享团购的主体内容
+    drawGroupGut: function (ctx) {
+      let group = new Promise((resolve, reject) => {
+        ctx.drawImage(this.data.iconImg, 27, 194, 247, 103.5);
+        ctx.setFontSize(15)
+        ctx.setFillStyle('#434343')
+        ctx.fillText('朗朗读书声，是世界上最美妙的声音', (300 - ctx.measureText('朗朗读书声，是世界上最美妙的声音').width) / 2, 327.5)
+        resolve();
+      })
+      return group;
+    },
+
+    // 保存最终图片
+    PreservationImg: function () {
+      // this.getImgAuthorize()
+      wx.saveImageToPhotosAlbum({
+        filePath: this.data.imgUrls,
+        success: (res) => {
+          console.log(res)
+          const data = {};
+          console.log('productId', this.data.productId)
+          // 团购分享记录
+          if (this.data.shareType === 'group') {
+            data.shareTypeEnum = 'POSTER';
+            data.shareContentEnum = 'GROUP';
+            data.productId = this.data.groupPurchaseInfo.productId;
+          }
+          // 朗读分享记录
+          if (this.data.shareType === 'works') {
+            data.shareTypeEnum = 'POSTER';
+            data.shareContentEnum = 'READ';
+            data.productId = this.data.productId;
+          }
+          httpRequestApi.shareRecord(data).success((res) => {
+            console.log(res)
+          })
+          this.setData({
+            imgUrls: false
+          })
+        },
+        fail: res => {
+          wx.getSetting({
+            success(res) {
+              if (!res.authSetting['scope.writePhotosAlbum']) {
+                // wx.showToast({
+                //   title: '无权限操作',
+                //   icon: 'fail',
+                //   duration: 800
+                // })
+                wx.showModal({
+                  title: '无法保存分享图片到相册',
+                  content: '点击右上角浮点按钮->进入关于->点击右上角按钮->设置，进行授权',
+                  confirmText: '我知道了',
+                  showCancel: false,
+                  success(res) {
+                    console.log('用户点击确定')
+                  }
+                })
+              }
+            }
+          })
+        }
+      })
+    },
+    shareFriend: function () {
+      this.triggerEvent('customevent', {})
+    }
+  },
+  onShareAppMessage: (res) => {
+    if (res.from === 'button') {
+      // 来自页面内转发按钮
+      console.log(res.target)
+    }
+    return {
+      title: this.data.title,
+      path: this.data.path
+    }
+  },
+})

pages/social/littleFlower/littleFlower.js

@@ -4,14 +4,15 @@ import {
 } from '../../../utils/util';
 Page({
     data: {
-        misssionList: []
+        misssionList: [],
+        continuousDay: 0
     },
     onLoad: function (options) {
         wx.setNavigationBarTitle({
             title: '小红花'
         })
         httpRequestApi.getMissionList().success((res) => {
-            
+
             res.data.data.forEach(item => {
                 const temp = {}
                 temp.title = item.task.title;
@@ -23,8 +24,186 @@ Page({
             this.setData({
                 misssionList: this.data.misssionList
             })
+            this.getSignInData();
         });
     },
-    // onHide: function(){
-        
+    getSignInData: function () {
+        httpRequestApi.getSignInData().success(res => {
+            console.log(res)
+            let today = res.data.data.currentTime;
+            let continuousDay = res.data.data.continuousDay;
+            let dateList = [];
+            let myIndex = 0
+            for (let index = 0; index < 7; index++) {
+                let temp = {};
+                temp.index = index;
+                if (continuousDay <= 7) {
+                    if (continuousDay - 1 === index) {
+                        temp.isToday = true
+                        myIndex = index;
+                    } else {
+                        temp.isToday = false
+                    }
+                } else {
+                    if (6 === index) {
+                        temp.isToday = true
+                        myIndex = index;
+                    } else {
+                        temp.isToday = false
+                    }
+                }
+
+                dateList.push(temp);
+            }
+            dateList.forEach((item, index) => {
+                let pointNum = myIndex - index;
+                switch (continuousDay) {
+                    case 1:
+                        if (pointNum >= 0 && pointNum <= 5) {
+                            item.style = 'red';
+                            item.mark = '3';
+                        } else if (pointNum < 0 && pointNum >= -3) {
+                            item.style = 'white';
+                            item.mark = '3';
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 2:
+                        if (pointNum >= 0 && pointNum <= 2) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 0 && pointNum >= -2) {
+                            item.style = 'white';
+                            item.mark = '3';
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 3:
+                        if (pointNum >= 0 && pointNum <= 3) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum === -1) {
+                            item.style = 'white';
+                            item.mark = '3';
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 4:
+                        if (pointNum >= 0 && pointNum <= 4) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 5:
+                        if (pointNum >= 0 && pointNum <= 5) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 6:
+                        if (pointNum >= 1) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 1 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 7:
+                        if (pointNum >= 2) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 2 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        } else {
+                            item.style = 'white';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 8:
+                        if (pointNum >= 3) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 3 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 9:
+                        if (pointNum >= 4) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 4 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 10:
+                        if (pointNum >= 5) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 5 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        }
+                        break;
+                    case 11:
+                        if (pointNum >= 6) {
+                            item.style = 'red';
+                            item.mark = '3';
+                            // 超过今天五个圈圈
+                        } else if (pointNum < 6 && pointNum >= 0) {
+                            item.style = 'red';
+                            item.mark = '5';
+                        }
+                        break;
+                    default:
+                        item.style = 'red';
+                        item.mark = '5';
+                        break;
+                }
+                // 生成日期
+                if (pointNum < 0) {
+                    item.time = formatDate(today + (pointNum * 86400000 * -1), 6);
+                }
+                if (pointNum === 0) {
+                    item.time = '今日';
+                }
+                if (pointNum > 0) {
+                    item.time = formatDate(today  - pointNum * 86400000, 6);
+                }
+            });
+            this.setData({
+                dateList
+            })
+        });
+    },
+    countTheDay: function (item) {
+
+    }
 })

pages/social/littleFlower/littleFlower.wxml

@@ -1,10 +1,20 @@
 <view class="little-flower-box">
     <view class="green-placerholder"></view>
     <view class="sign-in-title">已连续签到1天</view>
-    <view class="sign-in-box"></view>
+    <view class="sign-in-box">
+        <view wx:for="{{dateList}}" wx:key="{{index}}" class="date-item">
+            <view class="date-left">
+                <view class="date-circle" style="background: {{item.style === 'red' ? '#f75642' : '#fff'}}; color: {{item.style === 'red' ? '#fff' : '#f75642'}} ">
+                    +{{item.mark}}
+                </view>
+                <view class="date-time">{{item.time}}</view>
+            </view>
+            <view class="cross-red-line" wx:if="{{index !== 6}}"></view>
+        </view>
+    </view>
     <view class="flower-title">小小任务条，朗读好习惯</view>
     <scroll-view class="mission-box">
-        <view class="mission-item" wx:for="{{misssionList}}">
+        <view class="mission-item" wx:for="{{misssionList}}" wx:key="{{index}}">
             <view>
                 <view>{{item.title}}</view>
                 <view class="mission-bonus">

pages/social/littleFlower/littleFlower.wxss

@@ -1,4 +1,4 @@
-.little-flower-box{
+.little-flower-box {
     background: #edf0f3;
     height: 100%;
     overflow: hidden;
@@ -12,7 +12,18 @@
     top: 0;
 }
 
-.sign-in-box{
+.sign-in-title {
+    width: 100%;
+    font-size: 24rpx;
+    font-weight: 800;
+    color: #fff;
+    text-indent: 49rpx;
+    position: relative;
+    z-index: 2;
+    margin-top: 19rpx;
+}
+
+.sign-in-box {
     width: 704rpx;
     height: 144rpx;
     margin: 0 auto;
@@ -21,18 +32,56 @@
     position: relative;
     z-index: 2;
     margin-top: 15rpx;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 23rpx 23rpx 0;
+    box-sizing: border-box;
 }
-.sign-in-title{
-    width: 100%;
-    font-size: 24rpx;
+
+.date-item {
+    /* width: 100rpx; */
+    height: 50rpx;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.date-left {
+    display: flex;
+    flex-direction: column;
+    width: 52rpx;
+}
+
+.date-time {
+    color: #717171;
+    font-size: 22rpx;
     font-weight: 800;
+    margin-top:10rpx;
+    width: 52rpx;
+    text-align: center;
+}
+
+.date-circle {
+    width: 50rpx;
+    height: 50rpx;
+    border: 2rpx solid rgba(247, 86, 66, 1);
+    border-radius: 50%;
     color: #fff;
-    text-indent: 49rpx;
-    position: relative;
-    z-index: 2;
-    margin-top: 19rpx;
+    font-size: 22rpx;
+    line-height: 50rpx;
+    text-align: center;
+}
+
+.cross-red-line {
+    width: 40rpx;
+    height: 3rpx;
+    border-top: 2rpx solid #f75642;
+    /* margin-left: 4rpx; */
+    margin-top: -44rpx;
 }
-.flower-title{
+
+.flower-title {
     color: #919191;
     font-size: 30rpx;
     font-weight: 800;
@@ -53,11 +102,11 @@
     bottom: 20rpx;
 }
 
-.explain-title{
+.explain-title {
     font-weight: 800;
 }
 
-.mission-item{
+.mission-item {
     width: 704rpx;
     height: 100rpx;
     background: #fff;
@@ -72,7 +121,7 @@
     justify-content: space-between;
 }
 
-.mission-item view{
+.mission-item view {
     color: #535353;
     font-size: 30rpx;
     font-weight: 800;
@@ -80,19 +129,21 @@
     align-items: center;
 }
 
-.mission-item  .mission-bonus{
+.mission-item .mission-bonus {
     display: block;
     color: #f75642;
     margin-left: 20rpx;
 
 }
-.mission-bonus .bonus-icon{
+
+.mission-bonus .bonus-icon {
     width: 28rpx;
     height: 33.2rpx;
     margin-right: 8rpx;
     margin-top: 1rpx;
 }
-.mission-item  .mission-status{
-   color: #f75642;
-   text-align: right; 
+
+.mission-item .mission-status {
+    color: #f75642;
+    text-align: right;
 }

pages/social/works/works.js

@@ -4,7 +4,7 @@ import {
 } from '../../../utils/util';
 import {
     getOpenidSessionKey
-  } from '../../../utils/httpUtil';
+} from '../../../utils/httpUtil';
 const app = getApp()
 Page({
     data: {
@@ -46,7 +46,8 @@ Page({
         modalBtnText: '去开团',
         isModalShow: false,
         modalCloseShow: true,
-        hide: true
+        hide: true,
+        addComeOut: ''
         // shareFlag: false
     },
     showAlert: function () {
@@ -87,7 +88,7 @@ Page({
     },
     onHide: function () {
         // this.data.stackSize >= 2
-        
+
         if (this.innerAudioContext) {
             this.innerAudioContext.pause();
         }
@@ -95,7 +96,7 @@ Page({
     },
     onUnload: function () {
         console.log(this.videoPlayTime)
-        if(this.videoPlayTime){
+        if (this.videoPlayTime) {
             const data = {
                 "title": this.data.title,
                 "lessonId": this.data.classId,
@@ -104,11 +105,11 @@ Page({
                 "userReadId": this.data.userReadId,
                 "type": 'READ',
             }
-            httpRequestApi.playLogReport(data).success(res =>{
+            httpRequestApi.playLogReport(data).success(res => {
                 console.log(res)
             })
         }
-        
+
         if (this.innerAudioContext) {
             this.innerAudioContext.destroy();
         }
@@ -186,6 +187,25 @@ Page({
         })
     },
     likeWorks: function (e) {
+        // + 1 + 1的动画
+        this.setData({
+            addComeOut: 'add-one-come-out'
+        })
+
+        setTimeout(()=>{
+            if(this.data.addComeOut){
+                this.setData({
+                    addComeOut: ''
+                })
+            }
+        },1200)
+
+
+
+        // 恭喜获得x朵小红花
+
+        this.flowerBox = this.selectComponent("#flower-box");
+        this.flowerBox.comeOut();
         if (this.data.isLike) {
             wx.showToast({
                 title: '不要重复点赞哦',
@@ -209,11 +229,6 @@ Page({
     },
     // 弹出分享框
     openShare: function (e) {
-        console.log(this.data.authorAvatar)
-        console.log(this.data.author)
-        console.log(this.data.iconImg)
-        console.log(this.data.title)
-        console.log(this.data.id)
         if (this.data.authorAvatar && this.data.author && this.data.iconImg && this.data.title && this.data.id) {
             this.shareDialog = this.selectComponent("#share-dialog");
             const data = {
@@ -223,7 +238,7 @@ Page({
                 title: this.data.title,
                 path: `pages/social/works/works`,
                 scene: this.data.id,
-                productId:this.data.productId
+                productId: this.data.productId
                 // tip: this.data.tip,
             }
             // console.log(data)
@@ -251,14 +266,14 @@ Page({
         // setTimeout(() => {
         this.innerAudioContext.play();
         // }, 800)
-        httpRequestApi.playWorks(this.uid, this.data.id).success(() => {
-            console.log('容个错')
-        });
+        // httpRequestApi.playWorks(this.uid, this.data.id).success(() => {
+        //     console.log('容个错')
+        // });
     },
     // 视频播放完毕销毁录音
     videoEnd: function (e) {
         console.log(e)
-        
+
         this.innerAudioContext.stop();
     },
     videoPause: function () {
@@ -339,10 +354,10 @@ Page({
             shareTypeEnum: 'LINK',
             shareContentEnum: 'READ',
             productId: this.data.productId
-          }
-          httpRequestApi.shareRecord(data).success((res) => {
+        }
+        httpRequestApi.shareRecord(data).success((res) => {
             console.log(res)
-          })
+        })
         return {
             title: '一样的课文，不一样的味道！我的配音表演已开始，求各位大咖围观、点评！',
             path: `pages/social/works/works?id=${this.data.id}&title=${this.data.title}&shareCard=true`,
@@ -535,8 +550,8 @@ Page({
         })
     },
     reward: function () {
-        if(this.data.isIOS){
-            return 
+        if (this.data.isIOS) {
+            return
         };
         this.setData({
             ifReward: true
@@ -661,9 +676,9 @@ Page({
         //登录页信息
         this.onLoad(this.data.onLoadOption);
     },
-    goToClass: function(){
+    goToClass: function () {
         wx.navigateTo({
-            url:`../../main/class/class?id=${this.data.classId}`
+            url: `../../main/class/class?id=${this.data.classId}`
         })
     }
-})
+})

pages/social/works/works.json

@@ -5,11 +5,12 @@
         "shareDialog": "/component/share/share",
         "popup": "/component/popup/popup",
         "goBackHome": "/component/goBackHome/goBackHome",
-        "myToast":"/component/myToast/myToast",
+        "myToast": "/component/myToast/myToast",
         "myModal": "/component/myModal/myModal",
-        "Dialog": "/component/dialog/dialog"
+        "Dialog": "/component/dialog/dialog",
+        "FlowerBox": "/component/flowerBox/flowerBox"
     },
     "window": {
         "onReachBottomDistance": 50
-      }
+    }
 }

pages/social/works/works.wxml

@@ -16,6 +16,7 @@
             <text class="followBtn">{{isFans ? '已' : ''}}关注</text>
         </view>
         <view class="like" bindtap="likeWorks" wx:if="{{authorUid !== myUid}}" style="{{authorUid === 'c7f0a8fdd3a549ea9109a7b7486775f2'? 'margin-left:160rpx' : null}}">
+            <text class="animation-flower {{addComeOut}}">+1</text>
             <image src="../../../static/image/flower_circle.png" />
             <!-- <text class="likeBtn">{{isLike ? '已' : ''}}点赞</text> -->
         </view>
@@ -89,8 +90,7 @@
         </view>
     </view>
     <!-- 分享框 -->
-    <!-- <canvas canvas-id="myCanvas" style="width:750rpx;z-index=99999; height: 1334rpx;"></canvas> -->
-    <canvas canvas-id="myCanvas" style="width:375px;z-index=99999; height: 667px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+    <canvas canvas-id="myCanvas" style="width:600rpx; height: 1050rpx; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
     <shareDialog id="share-dialog" shareType='works' bindShareDialogClose="shareDialogClose" shareId="{{id}}" />
     <!-- 评论框 -->
     <view class="replySection" wx:if="{{replyModal}}">
@@ -130,4 +130,5 @@
     <view hidden="{{hide}}">
         <Dialog bindmyevent="jurisdiction" />
     </view>
+    <FlowerBox id="flower-box" flowerNum="{{'6'}}"  />
 </view>

pages/social/works/works.wxss

@@ -1,4 +1,4 @@
-.noScroll{
+.noScroll {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -78,20 +78,48 @@
 }
 
 .readAuthorSection .like {
-    /* display: flex;
-    align-items: center;
-    justify-content: center; */
     margin-left: 20rpx;
     width: 62rpx;
     height: 62rpx;
-    /* border: 2rpx solid #FF0000; */
     font-size: 28rpx;
     border-radius: 30rpx;
     text-align: center;
-    /* line-height: 60rpx; */
     color: #FF0000;
+    position: relative;
+}
+
+@keyframes numberMove {
+    from {
+        bottom: 20rpx;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 110rpx;
+        opacity: 0;
+    }
+}
+
+.animation-flower {
+    font-size: 26rpx;
+    font-weight: 800;
+    color: #fc3b3b;
+    width: 23rpx;
+    height: 23rpx;
+    position: absolute;
+    left: 13rpx;
+    bottom: 20rpx;
+    opacity: 1;
+    
 }
 
+.add-one-come-out{
+    animation: numberMove 1.3s ease;
+    -webkit-animation: numberMove 1.3s ease;
+}
+
+
+
 .readAuthorSection .like image {
     width: 100%;
     height: 100%;
@@ -99,6 +127,8 @@
 
 }
 
+
+
 .readAuthorSection .follow {
     display: flex;
     align-items: center;
@@ -279,22 +309,25 @@
     flex-direction: row;
     align-items: center;
 }
-.commentItem .gut .gutInGut{
+
+.commentItem .gut .gutInGut {
     width: 330rpx;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: block
 }
-.whole{
+
+.whole {
     color: #61ca54
 }
+
 .commentItem .commentAll {
     margin-top: 10rpx;
     height: 44rpx;
     font-size: 32rpx;
     color: #61ca54;
-    
+
     border-radius: 12rpx;
 }
 
@@ -306,11 +339,13 @@
     align-items: center;
     /* width: 200rpx; */
 }
-.btnWrapper .hotAreaBigBigBig{
+
+.btnWrapper .hotAreaBigBigBig {
     display: flex;
     align-items: center;
     margin-left: 8rpx;
 }
+
 .btnWrapper .commentBtn {
     width: 32rpx;
     height: 30rpx;
@@ -370,9 +405,11 @@
     margin-top: 60rpx;
     position: relative;
 }
-.get-opacity{
+
+.get-opacity {
     opacity: 0;
 }
+
 /* .stop-default{
     width: 148rpx;
     height: 148rpx;

project.config.json

@@ -36,33 +36,20 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 3,
+			"current": 1,
 			"list": [
 				{
-					"id": 0,
-					"name": "自己看到",
-					"pathName": "pages/groupPage/collage-details/collage-details",
-					"query": "orderId=1546827037627100",
-					"scene": "1012"
-				},
-				{
-					"id": 1,
-					"name": "别人看到",
-					"pathName": "pages/groupPage/group-details/group-details",
-					"query": "share=true&shareId=1546827037627100",
-					"scene": "1012"
-				},
-				{
 					"id": -1,
-					"name": "别人看到",
-					"pathName": "pages/groupPage/collage-details/collage-details",
-					"query": "orderId=1547026113766239&read=true",
-					"scene": "1012"
+					"name": "小红花",
+					"pathName": "pages/social/littleFlower/littleFlower",
+					"query": ""
 				},
 				{
 					"id": -1,
-					"name": "小红花",
-					"pathName": "pages/social/littleFlower/littleFlower"
+					"name": "作品",
+					"pathName": "pages/social/works/works",
+					"query": "id=1544868253444507&title=【课文1】秋天",
+					"scene": "1012"
 				}
 			]
 		}

utils/APIClient.js

@@ -83,12 +83,12 @@ module.exports = {
     }).data(data).url(url).send();
   },
   // 作品播放了+1
-  playWorks(uid, readId) {
-    let url = getBaseUrl(`wx/userRead/play/${readId}`);
-    return request.getInstance().header({
-      uid
-    }).url(url).send();
-  },
+  // playWorks(uid, readId) {
+  //   let url = getBaseUrl(`wx/userRead/play/${readId}`);
+  //   return request.getInstance().header({
+  //     uid
+  //   }).url(url).send();
+  // },
   // 发布作品
   postWork(uid, data) {
     console.log(data);
@@ -463,5 +463,12 @@ module.exports = {
       return request.getInstance().header({
         uid: wx.getStorageSync('uid')
       }).url(url).send();
+  },
+  // 获取用户连续签到日期
+  getSignInData(){
+    let url = getBaseUrl('wx/loginLog');
+    return request.getInstance().header({
+      uid: wx.getStorageSync('uid')
+    }).url(url).send();
   }
 }

utils/util.js

@@ -48,6 +48,8 @@ function formatDate(time, flag) {
 		return year + '年' + month + '月' + day + '日';
 	}else if( flag == 5){
 		return day.toString().substring(1,2)
+	}else if( flag == 6) {
+		return month + '.' + day ;
 	}
 }
 function GetQueryString(str,name){