小红花页面

app.json

@@ -4,6 +4,7 @@
     "pages/social/works/works",
     "pages/social/insideMessage/insideMessage",
     "pages/social/replyDetail/replyDetail",
+    "pages/social/littleFlower/littleFlower",
     "pages/main/class/class",
     "pages/main/books/books",
     "pages/main/week/week",

component/my/my.wxml

@@ -23,7 +23,7 @@
         </view>
       </view>
       <!-- ios只显示红花 -->
-      <view class="only-flower" wx:if="{{myData.isIOS}}">
+      <view class="only-flower" wx:if="{{myData.isIOS}}" bindtap="goToFlower">
         <view class="grey-point"></view>
         <view class="flower-amount">
           <image class="" src='../../static/image/flower_small.png' />
@@ -35,7 +35,7 @@
         </view>
       </view>
       <!-- android 显示两个 -->
-      <view class="wallet-section" wx:if="{{!myData.isIOS}}">
+      <view class="wallet-section" wx:if="{{!myData.isIOS}}" bindtap="goToFlower">
         <view class="wallet-box" bindtap="toWalletDetail">
           <view class="grey-point"></view>
           <image class="wallet-icon" src='../../static/image/wallet.png' />

component/share/share.js

@@ -29,7 +29,7 @@ Component({
     QRCodeImagePath: '',
     QRCodeImageLocalPath: '',
     groupPurchaseInfo: {},
-    groupType:'',
+    groupType: '',
     animationData: {},
     touchMove: true
   },
@@ -73,7 +73,7 @@ Component({
               console.log('下载content成功1')
               console.log(res.path)
               //res.path是网络图片的本地地址
-              ctx.drawImage(res.path, 127, 423, 121, 121);
+              ctx.drawImage(res.path, 35, 358, 90, 90);
               console.log('下载content成功2')
               ctx.draw(true, function (res) {
                 setTimeout(() => {
@@ -150,6 +150,7 @@ Component({
           groupPurchaseInfo: data.groupPurchaseInfo,
           groupType: data.groupType
         })
+        this.poster();
       }
 
       if (this.data.shareType === 'class') {
@@ -217,8 +218,6 @@ Component({
 
             //   }
             // });
-            console.log(this.data.QRCodeImagePath)
-            console.log(res)
             resolve();
           })
         }
@@ -262,7 +261,7 @@ Component({
       let background = new Promise((resolve, reject) => {
         wx.showLoading({
           title: '海报生成中',
-          mask: true
+          // mask: true
         })
         if (this.data.shareType === 'works') {
           ctx.drawImage('../../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
@@ -292,16 +291,21 @@ Component({
           ctx.setFillStyle('#ff9209')
           ctx.fillText('播音主持特长生', (300 - ctx.measureText('播音主持特长生').width) / 2, 253)
         } else {
-          ctx.arc(52, 58, 36, 0, 2 * Math.PI, false)
+          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.fill('ff6f42')
-          ctx.drawImage(this.data.avatar, 16, 22, 72, 72); //插入图片  
+          //插入图片  
           ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
-          ctx.setFontSize(20)
-          ctx.setFillStyle('#fff')
-          ctx.fillText(this.data.author, 97, 49)
-          ctx.setFontSize(22)
-          ctx.fillText('邀您一起来拼团', 97, 77)
+          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();
       })
@@ -344,43 +348,39 @@ Component({
     // 分享团购的主体内容
     drawGroupGut: function (ctx) {
       let group = new Promise((resolve, reject) => {
-        ctx.setFontSize(28)
-        ctx.setFillStyle('#ff670d')
-        ctx.fillText('小学语文 朗读配音', (300 - ctx.measureText('小学语文 朗读配音').width) / 2, 152)
+        ctx.setFontSize(25)
+        ctx.setFillStyle('#fff')
+        ctx.fillText('课文朗读 每天5分钟', (300 - ctx.measureText('课文朗读 每天5分钟').width) / 2, 54.5)
         ctx.setFontSize(16)
-        ctx.setFillStyle('#444')
-        ctx.fillText('朗朗读书声，是世上最美的声音', (300 - ctx.measureText('朗朗读书声，是世上最美的声音').width) / 2, 351)
-        // if (this.data.groupPurchaseInfo.productId === 1) {
-          ctx.drawImage(this.data.iconImg, 12, 176, 351, 145);
-        // }
-        // if (this.data.groupPurchaseInfo.productId === 2) {
-        //   ctx.drawImage('../../../static/share/poster_2.jpg', 12, 176, 351, 145);
-        // }
-        // if (this.data.groupPurchaseInfo.productId === 3) {
-        //   ctx.drawImage('../../../static/share/poster_3.jpg', 12, 176, 351, 145);
+        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(17)
-        console.log(this.data.groupType)
-        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('#666666')
-        ctx.fillText('长按识别二维码', (300 - ctx.measureText('长按识别二维码').width) / 2, 574)
+        ctx.setFillStyle('#838383')
+        ctx.fillText('接收邀请，获得你的课程吧', 130.5, 409.5)
         //})
         resolve();
       })
@@ -395,20 +395,20 @@ Component({
         success: (res) => {
           console.log(res)
           const data = {};
-          console.log('productId',this.data.productId)
+          console.log('productId', this.data.productId)
           // 团购分享记录
-          if(this.data.shareType === 'group'){
+          if (this.data.shareType === 'group') {
             data.shareTypeEnum = 'POSTER';
             data.shareContentEnum = 'GROUP';
             data.productId = this.data.groupPurchaseInfo.productId;
           }
           // 朗读分享记录
-          if(this.data.shareType === 'works'){
+          if (this.data.shareType === 'works') {
             data.shareTypeEnum = 'POSTER';
             data.shareContentEnum = 'READ';
             data.productId = this.data.productId;
           }
-          httpRequestApi.shareRecord(data).success((res)=>{
+          httpRequestApi.shareRecord(data).success((res) => {
             console.log(res)
           })
           this.setData({

component/share/share.wxml

@@ -1,23 +1,25 @@
 <view class="share" bindtap="close" wx:if="{{shareFlag}}" catchtouchmove="touchMove">
-   <view class="btn" animation="{{animationData}}" wx:if="{{!imgUrls}}" id="btnArea" catchtap="nothing">
-       <image class="bg" src="../../static/groupImg/share.png"></image>
+   <view class="btn" animation="{{animationData}}"  id="btnArea" catchtap="nothing">
+       <!-- <image class="bg" src="../../static/groupImg/share.png"></image> -->
+       <view class="corss-line"></view>
+       <view class="invite-text">邀请助力</view>
        <view class="share-btn">
             <button class="share-friend" open-type="share" catchtap="shareFriend">
                <image  src="../../static/groupImg/weixin.png"></image>
                <text>群/好友</text>
             </button>
-            <view class="share-circle" catchtap="poster">
+            <view class="share-circle" catchtap="PreservationImg">
                <image  src="../../static/groupImg/circle.png"></image>
-               <text>生成海报</text>
+               <text>朋友圈</text>
             </view>           
        </view>
    </view>
    <cover-view class="share-img" wx:if="{{imgUrls}}" id="imgArea">
        <cover-image class="img" src="{{imgUrls}}"  catchtap="nothing"></cover-image>
-       <cover-view class="Preservation" bindtap="PreservationImg" style="{{shareType === 'works' ?'background:#ff9209' :'background:#70CA2D'}}">
+       <!-- <cover-view class="Preservation" bindtap="PreservationImg" style="{{shareType === 'works' ?'background:#ff9209' :'background:#70CA2D'}}">
            <!-- <image class="PreservationBg" src="../../static/groupImg/Preservation.png"></image> -->
            <!-- <text bindtap="PreservationImg">保存到相册中，快去分享吧</text> -->
-           保存到相册中，快去分享吧!
-       </cover-view>
+           <!-- 保存到相册中，快去分享吧! -->
+       <!-- </cover-view> --> -->
    </cover-view>
 </view>

component/share/share.wxss

@@ -9,12 +9,36 @@
     z-index:999999;
     
 }
+.corss-line{
+    width: 90%;
+    position: absolute;
+    height: 39rpx;
+    border-bottom: 2rpx solid #f2f2f2;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.invite-text{
+    width: 120rpx;
+    height: 30rpx;
+    color: #262626;
+    font-size: 30rpx;
+    position: absolute;
+    top: 19rpx;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 2;
+}
 
 .btn {
     position: fixed;
-    bottom: -300rpx;
+    bottom: -200rpx;
     width: 100%;
-    height: 290rpx;
+    height: 200rpx;
     background: #fff;
 }
 
@@ -30,21 +54,24 @@
 .share-btn {
     display: flex;
     justify-content: space-around;
+    margin-top: 65rpx;
 }
 
 .share-btn image {
-    width: 68rpx;
-    height: 68rpx;
+    width: 76rpx;
+    height: 76rpx;
 }
 
 .share-btn view {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     align-items: center;
-    font-size: 32rpx;
+    font-size: 24rpx;
     height: 120rpx;
-    width: 180rpx
+    width: 180rpx;
+    line-height: 0;
+    line-height: 33rpx;
 }
 
 .img {
@@ -52,9 +79,9 @@
     /* position: absolute; */
     /* left: 5rpx; */
     /* top: 30rpx; */
-    width: 80%;
-    height: 80%;
-    margin: 50rpx auto;
+    width: 510rpx;
+    height: 893rpx;
+    margin: 63rpx auto;
     /* width: 375rpx; */
     /* height: 667rpx; */
 }
@@ -82,14 +109,15 @@
     padding:0;
     margin:0;
     border-radius:0;    
-    height: 140rpx;
+    height: 145rpx;
     font-size:32rpx;
-    width: 180rpx;  
+    width: 180rpx;
+    line-height: 33rpx;
 }
 
 .share-friend image {
-    width: 68rpx;
-    height: 68rpx;
+    width: 76rpx;
+    height: 76rpx;
 }
 
 button::after{ border: none; } 

pages/index/index.js

@@ -256,5 +256,10 @@ Page({
     }
     
   },
+  goToFlower: function(){
+    wx.navigateTo({
+      url: `../../pages/social/littleFlower/littleFlower`
+    });
+  }
 
 })

pages/social/littleFlower/littleFlower.js

@@ -0,0 +1,30 @@
+import httpRequestApi from '../../../utils/APIClient';
+import {
+    formatDate
+} from '../../../utils/util';
+Page({
+    data: {
+        misssionList: []
+    },
+    onLoad: function (options) {
+        wx.setNavigationBarTitle({
+            title: '小红花'
+        })
+        httpRequestApi.getMissionList().success((res) => {
+            
+            res.data.data.forEach(item => {
+                const temp = {}
+                temp.title = item.task.title;
+                temp.type = item.task.type;
+                temp.type = item.task.type;
+                temp.bonus = item.task.award;
+                this.data.misssionList.push(temp)
+            });
+            this.setData({
+                misssionList: this.data.misssionList
+            })
+        });
+    },
+    // onHide: function(){
+        
+})

pages/social/littleFlower/littleFlower.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/social/littleFlower/littleFlower.wxml

@@ -0,0 +1,24 @@
+<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="flower-title">小小任务条，朗读好习惯</view>
+    <scroll-view class="mission-box">
+        <view class="mission-item" wx:for="{{misssionList}}">
+            <view>
+                <view>{{item.title}}</view>
+                <view class="mission-bonus">
+                    <image class="bonus-icon" src="../../../static/image/flower_small.png" />
+                    {{item.bonus}}
+                </view>
+            </view>
+            <view class="mission-status">{{item.ifFinished ? '已完成' : '未完成'}}</view>
+        </view>
+    </scroll-view>
+    <view class="explain">
+        <view class="explain-gut">小红花有什么用？</view>
+        <view class="explain-gut">我们会启动很多好玩的活动，</view>
+        <view class="explain-gut">到时候你将会有大大的惊喜哦！</view>
+        <view class="explain-gut">请继续积攒小红花吧！</view>
+    </view>
+</view>

pages/social/littleFlower/littleFlower.wxss

@@ -0,0 +1,98 @@
+.little-flower-box{
+    background: #edf0f3;
+    height: 100%;
+    overflow: hidden;
+}
+
+.green-placerholder {
+    width: 100%;
+    height: 132rpx;
+    background: #12c962;
+    position: absolute;
+    top: 0;
+}
+
+.sign-in-box{
+    width: 704rpx;
+    height: 144rpx;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 40rpx;
+    position: relative;
+    z-index: 2;
+    margin-top: 15rpx;
+}
+.sign-in-title{
+    width: 100%;
+    font-size: 24rpx;
+    font-weight: 800;
+    color: #fff;
+    text-indent: 49rpx;
+    position: relative;
+    z-index: 2;
+    margin-top: 19rpx;
+}
+.flower-title{
+    color: #919191;
+    font-size: 30rpx;
+    font-weight: 800;
+    width: 100%;
+    text-align: center;
+    height: 93rpx;
+    line-height: 113rpx;
+}
+
+.explain {
+    color: #8E8B8C;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    position: absolute;
+    bottom: 20rpx;
+}
+
+.explain-title{
+    font-weight: 800;
+}
+
+.mission-item{
+    width: 704rpx;
+    height: 100rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+
+    margin: 0 auto 15rpx;
+    padding-left: 36rpx;
+    padding-right: 36rpx;
+    box-sizing: border-box;
+    justify-content: space-between;
+}
+
+.mission-item view{
+    color: #535353;
+    font-size: 30rpx;
+    font-weight: 800;
+    display: flex;
+    align-items: center;
+}
+
+.mission-item  .mission-bonus{
+    display: block;
+    color: #f75642;
+    margin-left: 20rpx;
+
+}
+.mission-bonus .bonus-icon{
+    width: 28rpx;
+    height: 33.2rpx;
+    margin-right: 8rpx;
+    margin-top: 1rpx;
+}
+.mission-item  .mission-status{
+   color: #f75642;
+   text-align: right; 
+}

project.config.json

@@ -36,7 +36,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 1,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -51,6 +51,18 @@
 					"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"
+				},
+				{
+					"id": -1,
+					"name": "小红花",
+					"pathName": "pages/social/littleFlower/littleFlower"
 				}
 			]
 		}

utils/APIClient.js

@@ -457,4 +457,11 @@ module.exports = {
       uid: wx.getStorageSync('uid')
     }).data(data).url(url).method('POST').send();
   },
+  // 小红花 获取任务列表
+  getMissionList(){
+      let url = getBaseUrl('wx/task');
+      return request.getInstance().header({
+        uid: wx.getStorageSync('uid')
+      }).url(url).send();
+  }
 }