下拉刷新，上拉加载更多完成

后端研发-倪永富
1 parent 7e0c9671
Showing 3 changed files with 126 additions and 47 deletions
packageA/pages/liveStream/liveStream.js
packageA/pages/liveStream/liveStream.json
packageA/pages/liveStream/liveStream.wxml
 // pages/liveStream/liveStream.js
-
 var t = require("../../../utils/util"),
   ut = t,
   e = require("../../../utils/common.js"),
@@ -10,20 +9,19 @@ var t = require(&quot;../../../utils/util&quot;),
   oo = s.globalData,
   o = s.globalData.setting,
   os = o;
-var utils = require('../../../utils/util.js'),ut=utils;
 var regeneratorRuntime = require('../../../utils/runtime.js');
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
-    goodsList: [],
-    imghost: '',
-    liveList: {}
+    curPage: 1,
+    pageNum: 0,
+    list: [],
+    live: {}
   },
-  
+
   // 点击直播列表项
   clickItem: function (e) {
     // id：列表项id
@@ -32,66 +30,117 @@ Page({
       url: '/packageA/pages/liveStreamDetails/liveStreamDetails?id=' + e.currentTarget.dataset.id + '&live=' + e.currentTarget.dataset.live
     })
     console.log('options-->');
-  }, 
+  },
   // 点击 订阅/观看直播/观看回放 按钮，跳转直播组件
   clickLive: function (e) {
-    console.log('当前房间号roomid：',e.currentTarget.dataset.roomid);
+    console.log('当前房间号roomid：', e.currentTarget.dataset.roomid);
     let roomId = e.currentTarget.dataset.roomid;
-    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 }));
+    let customParams = encodeURIComponent(JSON.stringify({
+      path: 'pages/index/index',
+      pid: 1
+    }));
     wx.navigateTo({
       url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
     })
   },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
+  updateLiveList: function () {
+    return new Promise((resolve, reject) => {
+      let self = this;
+      getApp().request.put("/api/weshop/wx/livelist/updatelivelist", {
+        data: {
+          storeId: 1
+        },
+        success: function (res) {
+          console.log('我发起了PUT请求,请求结果：', res.data);
+          resolve();
+        }
+      });
+    });
+  },
+
+  loadLiveList: function (curPage) {    
+    // console.log('---->curPage', curPage);
     var live = {};
     live.toBegin = []; // 即将开始
-    live.ing = [];     // 直播中
-    live.over = [];    // 已结束
+    live.ing = []; // 直播中
+    live.over = []; // 已结束
+    var that = this;
+    var storeId = o.stoid;
     // 请求数据
-    var that = this;
-    getApp().request.promiseGet("/api/weshop/wx/livelist/page", {}).then(res=>{
-        console.log('ressss--->',res);
-          if(res.data.code==0){
-            that.setData({
-              goodsList: res.data.data.pageData
-            })
-          }
-          // console.log(goodsList);
-        
-      var result = res.data.data.pageData;
-      var liveStatus;
-      if(res.data.code == 0) {
-        for(var i in result) {
-          console.log(i + '当前直播状态：', result[i].live_status);
-          liveStatus = result[i].live_status;
-          // 这里只显示101/102/103状态
+    getApp().request.promiseGet("/api/weshop/wx/livelist/page", {
+      data: {
+        storedId: storeId,
+        page: curPage
+      }
+    }).then(res => {
+      if (res.data.code == 0) {
+        // 计算总页数
+        var total = res.data.data.total;
+        var pageSize = res.data.data.pageSize;
+        var pageNum = total % pageSize;
+        that.setData({
+          pageNum: pageNum
+        });
+
+        // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值
+        if(curPage == 1) {
+          that.setData({
+            list: res.data.data.pageData
+            // 测试
+            // list: that.data.list.concat(res.data.data.pageData)
+          });
+        } else {
+          that.setData({
+            list: that.data.list.concat(res.data.data.pageData)
+          });
+        };
+    
+        var list = that.data.list;
+        for(var i in list) {
+          var liveStatus = list[i].live_status;
           if (liveStatus == '101') {
-            live.ing.push(result[i]);
+            live.ing.push(list[i]);
           } else if (liveStatus == '102') {
-            live.toBegin.push(result[i]);
+            live.toBegin.push(list[i]);
           } else if (liveStatus == '103') {
-            live.over.push(result[i]);
+            live.over.push(list[i]);
           }
         }
-        // console.log('live--->', live);
+
         that.setData({
           live
         });
+
+        curPage ++;
+        that.setData({
+          curPage
+        });
+
+      } else {
+        console.error('请求失败！！！！！');
       }
     })
   },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    var self = this;
+    this.updateLiveList().then(() => {
+      self.loadLiveList(1);
+    });
   },
   /**
@@ -119,14 +168,38 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {
-
+    var self = this;
+    wx.showNavigationBarLoading(); //在标题栏中显示加载
+    setTimeout(function() {
+      self.loadLiveList(1);
+      wx.hideNavigationBarLoading(); //完成停止加载
+      wx.stopPullDownRefresh(); //停止下拉刷新 
+    }, 500);  
   },
-
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-
+    var self = this;
+    var curPage = this.data.curPage;
+    var pageNum = this.data.pageNum;
+
+    if(curPage <= pageNum) {
+      wx.showLoading({
+        title: '加载中...',
+      })
+      setTimeout(function() {
+        self.loadLiveList(curPage);
+        wx.hideLoading();
+      }, 500);
+      
+    } else {
+      wx.showToast({
+        title: '已经到底啦~',
+        duration: 1000
+      })
+    }
+    console.log('当前curpage',curPage);
   },
   /**
@@ -152,5 +225,6 @@ Page({
       title: '直播列表'
       // path: '/page/user?id=123'
     }
-  }
+  },
+
 })
 \ No newline at end of file
@@ -2,5 +2,10 @@
   "usingComponents": {
       "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
   },
-  "navigationBarTitleText": "直播"
-}
 \ No newline at end of file
+  "navigationBarTitleText": "直播",
+  "enablePullDownRefresh": true,
+  "backgroundColor": "#eee",
+  "backgroundTextStyle": "dark",
+  "onReachBottomDistance": 300
+}
+  
 \ No newline at end of file
@@ -6,7 +6,7 @@
 	<block wx:if="{{live.toBegin.length > 0}}">
 		<view class="title">即将开始</view>
 		<view class="list">
-			<block wx:for="{{live.toBegin}}">
+			<block wx:for="{{live.toBegin}}" wx:key="item">
 				<view class="list-item" data-id="{{item.id}}" data-live="toBegin" catchtap="clickItem">
 					<view class="list-item-left">
 						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
@@ -30,7 +30,7 @@
 	<block wx:if="{{live.ing.length > 0}}">
 		<view class="title">直播中</view>
 		<view class="list">
-			<block wx:for="{{live.ing}}">
+			<block wx:for="{{live.ing}}"  wx:key="item">
 				<view class="list-item" catchtap="clickItem" data-id="{{item.id}}" data-live="ing">
 					<view class="list-item-left">
 						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
@@ -53,7 +53,7 @@
 	<block wx:if="{{live.over.length > 0}}">
 		<view class="title">精彩回放</view>
 		<view class="list">
-			<block wx:for="{{live.over}}">
+			<block wx:for="{{live.over}}"  wx:key="item">
 				<view class="list-item" bindtap="clickItem" data-id="{{item.id}}"  data-live="over">
 					<view class="list-item-left">
 						<image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>