邀请好友保存海报

src/palette/image-example.js

@@ -8,71 +8,30 @@ export default class ImageExample {
         {
           type: 'image',
           url: '/palette/sky.jpg',
-        },
-        {
-          type: 'text',
-          text: '未设置height、width时',
-          css: {
-            right: '0rpx',
-            top: '60rpx',
-            fontSize: '30rpx',
-          },
-        },
-        {
-          type: 'image',
-          url: '/palette/sky.jpg',
-          css: {
-            width: '200rpx',
-            height: '200rpx',
-            top: '230rpx',
-          },
-        },
-        {
-          type: 'text',
-          text: "mode: 'aspectFill' 或 无",
-          css: {
-            left: '210rpx',
-            fontSize: '30rpx',
-            top: '290rpx',
-          },
-        },
-        {
-          type: 'image',
-          url: '/palette/sky.jpg',
-          css: {
-            width: '200rpx',
-            height: '200rpx',
-            mode: 'scaleToFill',
-            top: '500rpx',
-          },
-        },
-        {
-          type: 'text',
-          text: "mode: 'scaleToFill'",
-          css: {
-            left: '210rpx',
-            top: '560rpx',
-            fontSize: '30rpx',
-          },
+          css : {
+            width: '654rpx',
+            height: '1000rpx'
+          }
         },
         {
           type: 'image',
           url: '/palette/sky.jpg',
           css: {
-            width: '200rpx',
-            height: 'auto',
-            top: '750rpx',
-          },
-        },
-        {
-          type: 'text',
-          text: '设置height为auto',
-          css: {
-            left: '210rpx',
-            top: '780rpx',
-            fontSize: '30rpx',
-          },
+            width: '100rpx',
+            height: '100rpx',
+            right: '28rpx',
+            bottom: '43rpx',
+          }
         },
+        // {
+        //   type: 'text',
+        //   text: '设置height为auto',
+        //   css: {
+        //     left: '210rpx',
+        //     top: '780rpx',
+        //     fontSize: '30rpx',
+        //   },
+        // },
       ],
     });
   }

src/palette/inviteFriends.js

+export default class InviteFriends {
+  palette(posterImg,qrcodeImg) {
+    return ({
+      width: '410rpx',
+      height: '705rpx',
+      background: '#eee',
+      views: [
+        {
+          type: 'image',
+          url: posterImg,
+          css: {
+            width: '410rpx',
+            height: '705rpx'
+          }
+        },
+        {
+          type: 'image',
+          url: qrcodeImg,
+          css: {
+            width: '100rpx',
+            height: '100rpx',
+            right: '28rpx',
+            bottom: '43rpx',
+          }
+        },
+      ],
+    });
+  }
+}

src/subPackage/page/pages/myInvite/myInvite.js

 // subPackage/page/pages/myInvite/myInvite.js
-Page({
+const app = getApp()
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
+const { memberId } = wx.getStorageSync('_baseUserInfo')
+import { Integer } from '../../../../utils/integerDigitalConvertion'
+
+wxService.page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    currentInviteNum:'', //当前邀请人数
+    yesterdayInviteNum:'', //昨日邀请新增
+    pageNo: 1,
+    pageSize: 50,
+    inviteMemberList: [],
+    inviteBanner: ''
   },
 
   /**
-   * 生命周期函数--监听页面加载
+   * 生命周期函数--监听页面显示
    */
-  onLoad: function (options) {
-
+  onShow: function () {
+    this.getInviteNumber()
+    this.getYesterdayInviteNumber()
+    this.getInviteMemberList()
+    this.getInviteBanner()
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
+  // 获取当前邀请人数
+  getInviteNumber(){
+    wxService.post(`/member/share/inviteFriends/buyer/count`,{
+      userId: memberId,
+      tentacleType: 3
+    }).then(res => {
+      const { result, data } = res.data
+      if (result == 0) {
+        this.setData({
+          currentInviteNum: data
+        })
+      }
+    }).finally(() => {
+    })
+  },
 
+  // 获取昨日邀请人数
+  getYesterdayInviteNumber() {
+    // 昨天的时间
+    var day1 = new Date();
+    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
+    var yesterday = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() +' ' +  '00:00:00';
+
+    //今天的时间
+    var day2 = new Date();
+    day2.setTime(day2.getTime());
+    var today = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + ' ' + '00:00:00';
+
+    let params = {
+      userId: memberId,
+      activateEndTime: today,
+      activateStartTime: yesterday,
+      tentacleType: 3
+    }
+    wxService.post(`/member/share/inviteFriends/buyer/count`, params).then(res => {
+      const { result, data } = res.data
+      if (result == 0) {
+        this.setData({
+          yesterdayInviteNum: data
+        })
+      }
+    }).finally(() => {
+    })
   },
 
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
+  // 邀请会员列表
+  getInviteMemberList(){
+    let params = {
+      userId: memberId,
+      tentacleType: 3
+    }
+    wx.showLoading({
+      title: '加载中',
+      mask: true
+    })
+    wxService.post(`/member/share/inviteFriends/buyer/findPage?pageNo=${this.data.pageNo}&pageSize=${this.data.pageSize}`, params).then(res => {
+      if (res) {
+        const { result, data } = res.data
+        if (result == 0) {
+          wx.hideLoading()
+          this.setData({
+            inviteMemberList: data
+          }, () => {
+          })
+        }
+      }
+    })
+  },
 
+  // 获取邀请页面banner
+  getInviteBanner(){
+    wxService.get(`/member/share/inviteFriends/buyer/getValid`).then(res => {
+      if (res) {
+        const { result, data } = res.data
+        if (result == 0) {
+          wx.hideLoading()
+          this.setData({
+            inviteBanner: data.gradientAwardPage
+          }, () => {
+          })
+        }
+      }
+    })
   },
 
   /**
@@ -50,12 +135,6 @@ Page({
 
   },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
 
   /**
    * 用户点击右上角分享

src/subPackage/page/pages/myInvite/myInvite.json

 {
+  "enablePullDownRefresh": true,
   "navigationBarTitleText": "我的邀请",
   "usingComponents": {}
 }
\ No newline at end of file

src/subPackage/page/pages/myInvite/myInvite.wxml

@@ -2,28 +2,33 @@
 <view class="page-my-invite">
   <view class="release-num weui-flex df-j--bt">
     <view class="num-invite df-1 border_box">
-      <view class="share-number">1287</view>
+      <view class="share-number">{{currentInviteNum}}</view>
         <view class="share-title">当前邀请人数</view>
       </view>
       <view class="extension-line"></view>
       <view class="num-invite-yesterday df-1 border_box">
-        <view class="share-number">87</view>
+        <view class="share-number">{{yesterdayInviteNum}}</view>
         <view class="share-title">昨日邀请新增</view>
       </view>
   </view>
+  <navigator url="/subPackage/page/pages/share/share" hover-class="none">
     <view class="invite-banner">
-    <image ></image>
+      <image src="{{inviteBanner}}"></image>
     </view>
+  </navigator>
   <view class="order-benefit-wrap">
-    <view class="order-benefit-list">
+    <view class="order-benefit-list" wx:for="{{inviteMemberList}}" wx:key="{{index}}">
       <view class="top-info">
-        <image class="invite-avatar"></image>
+        <image class="invite-avatar" src="{{item.headimgurl}}"></image>
         <view class="invite-phone">
-          <view class="order-num">18355407690</view>
-          <view class="order-date">2019-03-24 至 2019-06-23</view>
+          <view class="order-num">{{item.mobile}}</view>
+          <view class="order-date">{{item.activateWxCardTime}}</view>
         </view>
+        <view class="look-benefit">
+          <button class="btn btn-primary btn-outline">查看收益</button>
         </view>
-      <view class="bottom-info">
+      </view>
+      <!-- <view class="bottom-info">
         <view>
           <image src="/assets/imgs/7_1_0/integral-icon.png" class="integral-icon" mode="widthFix"></image>
           <text class="benefit-num">100</text>
@@ -40,7 +45,7 @@
           <image src="/assets/imgs/7_1_0/share-value.png" class="share-value" mode="widthFix"></image>
           <text class="benefit-num">100</text>
         </view>
-      </view>
+      </view> -->
     </view>
   </view>
   <view class="benefit-tips">

src/subPackage/page/pages/myInvite/myInvite.wxss

@@ -45,13 +45,14 @@
   border-radius: 10rpx;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
-  padding: 33rpx 20rpx 36rpx;
+  padding: 34rpx 20rpx;
   margin-top: 20rpx;
 }
 .top-info{
-  border-bottom: 1px solid rgba(151,151,151,0.3);
-  padding: 0 0 15rpx 29rpx;
+  padding: 0 0 0 31rpx;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .order-num{
   color: #333333;
@@ -61,34 +62,6 @@
   font-size: 20rpx;
   margin-top: 5rpx;
 }
-.bottom-info{
-  padding: 16rpx 60rpx 0 29rpx;
-  display: flex;
-  justify-content: space-between;
-}
-.integral-icon{
-  width: 36rpx;
-  vertical-align: middle;
-}
-.coupon-icon{
-  width: 29rpx;
-  height: 29rpx;
-  vertical-align: middle;
-}
-.experience-icon{
-  width: 51rpx;
-  vertical-align: middle;
-}
-.share-value{
-  width: 40rpx;
-  vertical-align: middle;
-}
-.benefit-num{
-  color: #333333;
-  font-size: 18rpx;
-  vertical-align: middle;
-  margin-left: 15rpx;
-}
 .benefit-tips{
   width: 750rpx;
   height: 53rpx;
@@ -111,4 +84,15 @@
 .invite-phone{
   vertical-align: middle;
   margin-left: 32rpx;
+  width: 429rpx;
+}
+.look-benefit{
+  width: 107rpx;
+
+}
+.look-benefit button{
+  height: 35rpx;
+  border-radius: 17rpx;
+  line-height: 35rpx;
+  font-size: 18rpx;
 }

src/subPackage/page/pages/share/share.js

-import Card from '../../../../palette/card';
+import Card from '../../../../palette/inviteFriends';
+var app = getApp()
+const wxService = require('../../../../utils/wxService')
+const utils = require('../../../../utils/util')
 
 // src/pages/xml2can/xml2can.js
-Page({
-  imagePath: '',
-
-  /**
-   * 页面的初始数据
-   */
-  // data: {
-  //   template: {},
-  // },
+wxService.page({
+  // imagePath: '',
 
   data: {
     //轮播图
-    swiperCurrent: 1,
+    swiperCurrent: 0,
     currentTab: 0,
-    navData: [{
-      label: '1'
-    },
-      {
-        label: '2'
-      },
-      {
-        label: '3'
-      },
-      {
-        label: '4'
-      },
-      {
-        label: '5'
-      },
-      {
-        label: '6'
-      },
-      {
-        label: '7'
-      },
-      {
-        label: '8'
-      },
-      {
-        label: '9'
-      }],
-    arr: [{
-      images: 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640'
-    },
-    {
-      images: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2854956166,1658664264&fm=26&gp=0.jpg'
-    },
-    {
-      images: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2857172539,3231616089&fm=26&gp=0.jpg'
-    },
-    {
-      images: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=222247294,2919493301&fm=26&gp=0.jpg'
-    }
-    ],
     indicatorDots: false,
     autoplay: false,
     interval: 2000,
@@ -64,25 +20,113 @@ Page({
     afterColor: "coral",//当前选中的指示点颜色 
     previousmargin: '142rpx',//前边距
     nextmargin: '142rpx',//后边距
+    posterImgData:[],
+    currentPosterImg: '',
+    codeImg:'', //二维码
+    template :{},
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  onShow: function () {
+    this.getShareImg()
+    this.getMiniCode()
   },
 
   //轮播图的切换事件 
   swiperChange: function (e) {
-    console.log(e.detail.current);
     this.setData({
-      swiperCurrent: e.detail.current  //获取当前轮播图片的下标
+      swiperCurrent: e.detail.current, //获取当前轮播图片的下标
+      currentTab: e.detail.current,
+      currentPosterImg: this.data.posterImgData[e.detail.current]
+    },() => {
+      this.generatePoster();
     })
   },
-  //滑动图片切换 
-  chuangEvent: function (e) {
+
+  // 点击更换海报
+  switchPoster(e){
+    console.log(e)
     this.setData({
-      swiperCurrent: e.currentTarget.id
+      currentTab: e.currentTarget.dataset.current,
+      swiperCurrent: e.currentTarget.dataset.current,
+      currentPosterImg: e.currentTarget.dataset.img
+    },() => {
+      this.generatePoster();
     })
   },
-  // onImgOK(e) {
-  //   this.imagePath = e.detail.path;
-  //   console.log(e);
-  // },
+
+  //生成海报
+  generatePoster(){
+    console.log(this.data.currentPosterImg)
+    console.log(this.data.codeImg)
+    this.setData({
+      template: new Card().palette(this.data.currentPosterImg, this.data.codeImg),
+    });
+  },
+  
+  // 获取海报图片
+  getShareImg() {
+    wxService.get(`/member/share/inviteFriends/buyer/getValid`).then(res => {
+      if (res) {
+        const { result, data } = res.data
+        if (result == 0) {
+          wx.hideLoading()
+          let initiatorPage = JSON.parse(data.initiatorPage)
+          this.setData({
+            posterImgData: initiatorPage
+          }, () => {
+          })
+        }
+      }
+    })
+  },
+
+  //获取二维码
+  getMiniCode() {
+    const urls = utils.getCurrentPageUrlWithArgs()
+
+    let data = {
+      "autoColor": true,
+      "page": 'pages/userCenter/userCenter',
+      "scene": '123',
+      "width": 100
+    }
+    wxService.post(`/marketing/quickMark/getAppQrCodePicture`, data).then(res => {
+      const { result, data } = res.data
+      if (result == 0) {
+        this.setData({
+          // codeImg: app.globalData.imageUrl + data
+          codeImg: "https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg"
+        })
+      }
+    })
+  },
+
+  // 保存海报
+  savePoster(){
+    let content = {
+      currentPosterImg: this.data.currentPosterImg
+    }
+    let tentacleInfo = {
+      content: JSON.stringify(content),
+      contentType: 3, //内容类型 1.文章 2.商品 3.页面
+      title: '首页', //标题
+      type: 3// 1:门店,2:员工(暂时不做),3:会员,4:第三方外部渠道,5:智能营销
+    }
+
+    wxService.getTentacleContent(tentacleInfo).then(res => {
+      if (res && res.tentacleId) {
+        wx.saveImageToPhotosAlbum({
+          filePath: this.imagePath,
+        });
+      }
+    })
+  },
+  onImgOK(e) {
+    this.imagePath = e.detail.path;
+  },
 
   // saveImage() {
   //   wx.saveImageToPhotosAlbum({
@@ -93,9 +137,9 @@ Page({
   // /**
   //  * 生命周期函数--监听页面初次渲染完成
   //  */
-  // onReady: function () {
+  onReady: function () {
     // this.setData({
-  //     template: new Card().palette(),
+    //   template: new Card().palette('http://testimg3.bigaka.com/group3/M00/00/1B/Cv6CBF1kypiAHc11AAAJmPBsWAo215.png', 'https://hwimagecdn.ihotwind.cn/usr/201908/miniQrCode-f00c5051fef7479395efb193431762c4.jpg'),
     // });
-  // },
+  },
 });
\ No newline at end of file

src/subPackage/page/pages/share/share.wxml

@@ -4,23 +4,24 @@
   <view class="page-share">
     <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' 
   indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' 
-  previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
-      <block wx:for="{{arr}}" wx:key="key"> 
-      <swiper-item class="">
-        <image class="slide-image {{swiperCurrent == index ? 'active' : ''}}" src="{{item.images}}" 
-  bindchange="chuangEvent" id="{{index}}"></image>
+  previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange">
+      <block wx:for="{{posterImgData}}" wx:key="{{index}}"> 
+      <swiper-item class="swiper-item">
+        <image class="slide-image {{swiperCurrent == index ? 'active' : ''}}" src="{{item}}" 
+  id="{{index}}"></image>
+        <image wx:if="{{swiperCurrent == index}}" class="code-img" src="{{codeImg}}"></image>
       </swiper-item>
       </block> 
     </swiper>
-    <view class="save-btn">
+    <view class="save-btn" bindtap="savePoster">
       <button class="btn btn-primary ">保存海报</button>
       <view class="save-tips">适用于朋友圈分享</view>
     </view>
 
-    <view class="tab-sort" wx:if="{{navData}}">
+    <view class="tab-sort" wx:if="{{posterImgData}}">
         <scroll-view scroll-x class="scroll-view_H" scroll-with-animation="{{true}}">
           <block
-          wx:for="{{navData}}"
+          wx:for="{{posterImgData}}"
           wx:for-index="idx"
           wx:for-item="navItem"
           wx:key="idx"
@@ -29,13 +30,16 @@
             <view
             class="scroll-view-item {{currentTab == idx ?'poster-active':''}}"
             data-current="{{idx}}"
-            data-startTimeStr="{{navItem.startTimeStr}}"
-            data-endTimeStr="{{navItem.endTimeStr}}"
-            data-btnText="{{navItem.buttonText}}"
-            data-id="{{navItem.id}}"
-            bindtap="switchNav"
+            data-img="{{navItem}}"
+            bindtap="switchPoster"
+           
             >
-              <view>{{navItem.label}}</view>
+              <image class="poster-img" src="{{navItem}}"></image>
+                <view class="select-plus" wx:if="{{idx == currentTab}}">
+                <view class="circle-radio theme-color">
+                  <image class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
+                </view>
+              </view>
             </view>
           </block>
         </scroll-view> 
@@ -45,3 +49,8 @@
       <image src="/assets/imgs/7_1_0/poster-tips.png" mode="widthFix"></image>
     </view>
  </view>
+
+ <!-- 测试 -->
+ <view class="test" >
+  <painter customStyle='margin-left:40rpx' palette="{{template}}" bind:imgOK="onImgOK" />
+ </view>
\ No newline at end of file

src/subPackage/page/pages/share/share.wxss

 /* subPackage/page/pages/share/share.wxss */
+page{
+  width: 100%;
+}
 .banner-swiper {
  width: 410rpx;
  height: 705rpx;
@@ -23,6 +26,16 @@ swiper-item{
  box-shadow: 0px 4rpx 17rpx 0px rgba(0, 0, 0, 0.12);
 
 }
+.swiper-item{
+  position: relative;
+}
+.code-img{
+  position: absolute;
+  width: 100rpx;
+  height: 100rpx;
+  bottom: 43rpx;
+  right: 50rpx;
+}
 .active{
  margin-top:0rpx;
  height:705rpx !important;
@@ -66,6 +79,7 @@ swiper-item{
   height: 215rpx;
   background-color: #d8d8d8;
   margin-right: 23rpx;
+  position: relative;
 }
 .poster-tips{
   position: fixed;
@@ -75,4 +89,31 @@ swiper-item{
 .poster-tips image{
   width: 362rpx;
 }
+.poster-img{
+  width: 100%;
+}
+.select-plus{
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+}
+.tick-success{
+  width: 18rpx;
+}
+.circle-radio{
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  /* border: 1rpx solid rgba(0, 0, 0, 0.2); */
+  line-height: 26rpx;
+  text-align: center;
+}
 
+/* 测试 */
+.test{
+  position: absolute;
+  transform: translateX(100%);
+  width: 100vw;
+  height: 100vh;
+  background: #ffffff;
+}
\ No newline at end of file