liwei

src/components/buy/inviteFriends.vue

@@ -13,7 +13,7 @@
         <span>{{userNum}}</span>
         <span>人</span>
       </p>
-      <div class="invite-record-btn" @click="lookMyInviteRecords">
+      <div class="invite-record-btn" @click="lookMyInviteRecords" v-if="earnings>0&&userNum>0">
         <p>查看我的邀请记录</p>
         <img src="../../assets/inviteFriends/icon_back.png" />
       </div>
@@ -39,11 +39,11 @@
             <div class="no-record" v-if="records.length == 0">您还没有成功邀请好友，快去邀请吧！</div>
             <ul class="record" v-if="records.length > 0">
               <li v-for="(item,index) in records" :key="index">
-                <p>{{item.name}}</p>
-                <p>{{item.buy_date}}</p>
+                <p>{{item.nickname}}</p>
+                <p>{{item.pay_at}}</p>
               </li>
             </ul>
-            <div class="look-more-record" @click="lookMoreRecord" v-if="records.length >=6">
+            <div class="look-more-record" @click="lookMoreRecord" v-if="records.length > 6">
               <p>查看更多</p>
               <img src="../../assets/inviteFriends/icon_back.png" />
             </div>
@@ -54,10 +54,18 @@
     <div class="invite-friends cell">
       <img src="../../assets/inviteFriends/img_title6.png" alt />
     </div>
+    <div class="line"></div>
+    <div class="invite-btn">
+      <img src="../../assets/activity/btn.png" @click="goToInvite" />
+    </div>
   </div>
 </template>
 <script>
-import { getInviteResultApi, getInviteListApi } from "../../service/api";
+import {
+  getwechatParam,
+  getInviteResultApi,
+  getInviteListApi
+} from "../../service/api";
 
 export default {
   name: "inviteFriends",
@@ -68,28 +76,16 @@ export default {
       userNum: 0,
       records: [
         {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
+          nickname: "test",
+          pay_at: "2019.7.5"
         },
         {
-          name: "test",
-          buy_date: "2019.7.5"
+          nickname: "test1111111",
+          pay_at: "2019.7.5"
         },
         {
-          name: "test11111111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
+          nickname: "test222222222222",
+          pay_at: "2019.7.5"
         }
       ]
     };
@@ -97,15 +93,84 @@ export default {
   mounted() {
     this.getInviteResult();
     this.getInviteList();
+    this.enableShare();
   },
   methods: {
+    // 分享
+    enableShare: function() {
+      let that = this;
+      getwechatParam({
+        api_list: "onMenuShareAppMessage,onMenuShareTimeline",
+        url: window.location.href.split("#")[0]
+      }).then(wechatRes => {
+        wx.config({
+          debug: false,
+          appId: wechatRes.appId,
+          timestamp: parseInt(wechatRes.timestamp),
+          nonceStr: wechatRes.nonceStr,
+          signature: wechatRes.signature,
+          jsApiList: wechatRes.jsApiList
+        });
+        wx.ready(function() {
+          wx.onMenuShareTimeline({
+            title: that.shareTitle, // 分享标题
+            desc: that.shareDesc, // 分享描述
+            link: window.location.href, // 分享链接
+            imgUrl:
+              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+            success: function() {
+              console.log("分享成功");
+              window._hmt.push([
+                "_trackEvent",
+                "分享",
+                "商品页好友分享",
+                `id${that.shopId}`,
+                that.invite_code
+              ]); //百度统计
+            },
+            cancel: function() {
+              // alert("失败")
+              console.log("分享失败");
+            }
+          });
+          wx.onMenuShareAppMessage({
+            title: that.shareTitle, // 分享标题
+            desc: that.shareDesc, // 分享描述
+            link: window.location.href, // 分享链接
+            imgUrl:
+              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
+            success: function() {
+              window._hmt.push([
+                "_trackEvent",
+                "分享",
+                "商品页朋友圈分享",
+                `id${that.shopId}`,
+                that.invite_code
+              ]); //百度统计
+            },
+            cancel: function() {}
+          });
+        });
+      });
+    },
+    onShare: function(type) {
+      let URL = `${process.env.BUY_URL}?shopId=${this.shopId}&groupId=${this.groupId}&invite_code=${this.invite_code}`;
+      if (type === 1) {
+        URL = `${process.env.BUY_URL}?shopId=${this.shopId}&invite_code=${this.invite_code}`;
+      }
+      //        this.enableShare({
+      //          product_title: this.groupDetail.share_desc.title,
+      //          desc: this.groupDetail.share_desc.content,
+      //          shareIcon:this.groupDetail.share_desc.img[0].url,
+      //          shareUrl:URL
+      //        })
+    },
     lookMyInviteRecords() {
       this.$refs.inviteRecord.scrollIntoView();
     },
     lookMoreRecord() {},
     getInviteResult() {
       let id = this.$route.query.shopId;
-      id = 46;
       getInviteResultApi({}, id).then(res => {
         this.earnings = res.earnings;
         this.userNum = res.user_num;
@@ -117,7 +182,6 @@ export default {
         limit: 6
       };
       let id = this.$route.query.shopId;
-      id = 46;
       getInviteListApi(json, id).then(res => {
         if (res) {
           if (res.list && res.list.length > 0) {
@@ -125,6 +189,19 @@ export default {
           }
         }
       });
+    },
+    goToInvite() {
+      let query = {};
+      if (window.location.href.indexOf("shopId") > -1) {
+        query.shopId = this.$route.query.shopId;
+      }
+      if (window.location.href.indexOf("groupId") > -1) {
+        query.groupId = this.$route.query.groupId;
+      }
+      if (window.location.href.indexOf("invite_code") > -1) {
+        query.invite_code = this.$route.query.invite_code;
+      }
+      this.$router.push({ name: "activityInvite", query: query });
     }
   }
 };
@@ -248,7 +325,7 @@ export default {
                 background-color: #fff;
               }
               &:nth-child(even) {
-                background-color: #fffaf8;
+                background-color: rgba(251, 235, 227, 0.8);
               }
               p {
                 text-align: center;
@@ -280,6 +357,23 @@ export default {
       }
     }
   }
+  .line {
+    height: 50px;
+  }
+  .invite-btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding-top: 10 * @toVw;
+    box-sizing: content-box;
+    text-align: center;
+    background-color: #fff;
+    z-index: 9999;
+    img {
+      width: 504 / 2 * @toVw;
+      height: auto;
+    }
+  }
 }
 </style>
 

src/components/buy/inviteRecordList.vue

@@ -5,149 +5,95 @@
       <span>购买时间</span>
     </div>
     <scroll
-          ref="scrollItem"
-          class="scrollItem"
-          :data="list"
-          :pullup="pullup"
-          :bounce="false"
-          @pullup="onReachBottom">
-      <div class="container" >
+      ref="scrollItem"
+      class="scrollItem"
+      :data="list"
+      :pullup="pullup"
+      :bounce="false"
+      @pullup="onReachBottom"
+    >
+      <div class="container">
         <ul>
           <li v-for="(item,index) in list" :key="index">
-            <p>{{item.name}}</p>
-            <p>{{item.buy_date}}</p>
+            <p>{{item.nickname}}</p>
+            <p>{{item.pay_at}}</p>
           </li>
         </ul>
+        <div v-if="finished" class="none">没有更多了~</div>
       </div>
     </scroll>
-
   </div>
 </template>
 <script>
+import { getInviteListApi } from "../../service/api";
+
 export default {
   name: "inviteRecordList",
   data() {
     return {
       height: 0,
       pullup: true,
+      page: 1,
+      loading: true,
+      finished: false,
       list: [
         {
-          name: "test111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test11111111111111111111111",
-          buy_date: "2019.7.5"
-        },
-        {
-          name: "test",
-          buy_date: "2019.7.5"
+          nickname: "test111111111111",
+          pay_at: "2019.7.5"
         }
       ]
     };
   },
   mounted() {
-    let self = this;
     this.height =
       window.innerHeight -
       this.$refs.title.getBoundingClientRect().bottom -
       this.$refs.title.getBoundingClientRect().height;
+    this.getInviteList();
   },
   methods: {
     onReachBottom() {
-      console.log("onReachBottom");
+      if (!this.finished && this.loading) {
+        this.page++;
+        this.loading = false;
+        Toast.loading({
+          mask: true,
+          message: ""
+        });
+        this.page++;
+        let json = {
+          page: this.page,
+          limit: 20
+        };
+        getInviteListApi(json, this.id).then(res => {
+          if (res) {
+            if (res.list && res.list.length > 0) {
+              res.list.forEach(element => {
+                this.records.push(element);
+              });
+              if (res.total == this.records.length) {
+                this.finished = true;
+              }
+            }
+          }
+          Toast.clear();
+        });
+      }
+    },
+    getInviteList() {
+      let json = {
+        page: this.page,
+        limit: 6
+      };
+      let id = this.$route.query.shopId;
+      this.id = id;
+      getInviteListApi(json, this.id).then(res => {
+        if (res) {
+          if (res.list && res.list.length > 0) {
+            this.records = res.list;
+          }
+        }
+      });
     }
   }
 };
@@ -177,7 +123,7 @@ export default {
     font-weight: 400;
     color: #eb7162;
   }
-  .scrollItem{
+  .scrollItem {
     height: 80vh;
     width: 100%;
     margin-top: 0;
@@ -203,6 +149,7 @@ export default {
         }
         &:nth-child(even) {
           background-color: #fffaf8;
+          background-color: rgba(251, 235, 227, 0.8);
         }
         p {
           text-align: center;