上拉加载、下拉刷新

config/dev.js

@@ -9,8 +9,8 @@ module.exports = {
     // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
     // HOST: '"https://lt.pawoma.cn"',
     // WSS_HOST: '"wss://lt.pawoma.cn"',
-    HOST: '"http://192.168.0.84:8080"',
-    WSS_HOST: '"ws://192.168.0.84:8080"',
+    HOST: '"http://192.168.0.170:8080"',
+    WSS_HOST: '"ws://192.168.0.170:8080"',
   },
   weapp: {},
   h5: {}

src/pages/person/customerAnalysis/followUpCustomer/index.js

@@ -42,19 +42,21 @@ export default class transactionCustomer extends Taro.Component {
 
   }
 
-  loadList = (page) => {
+  loadList(pageNumber) {
     const payload = {
       type: 'follow',
-      pageNumber: page,
+      pageNumber,
       pageSize: 10
     }
     queryCustomerList(payload.type, payload).then(res => {
-
+      const {records, list, total, current, pages} = res || {}
+      const _list = records || list || []
+      const newList = current <= 1 ? _list: this.state.customerList.concat(_list)
       this.setState({
-        customerList: res.records || [],
-        isEmpty: res.total == 0,
-        hasMore: res.current < res.page,
-        pageIndex: res.current >= res.pages ? res.pages : res.current
+        customerList: newList,
+        isEmpty: total == 0,
+        hasMore: current < pages,
+        pageIndex: current >= pages ? pages : current
       })
       Taro.hideLoading()
     })

src/pages/person/customerAnalysis/index.scss

@@ -6,8 +6,6 @@
   height:100vh;
 }
 
-
-
 .tab-box{
   .at-tabs__header{
     width: 86%;

src/pages/person/customerAnalysis/myCustomer.js

@@ -1,5 +1,6 @@
 import Taro, { Component } from '@tarojs/taro';
 import { AtTabs, AtTabsPane } from 'taro-ui'
+import ListView from '@components/ListView'
 import "taro-ui/dist/style/components/tabs.scss"
 import { savePoint, updatePoint } from '@services/common'
 import { getCustomerDetail, getVisitRecord, getActivityList, getFollowRecord, addFollowRecord, commitCustomerInfo } from '@services/person'
@@ -31,7 +32,15 @@ export default class myCustomer extends Taro.Component {
     followRecord: [],
     visitRecord: [],
     baseInfo: {}, // 完善信息弹框数据
-
+    hasMore: true,
+    isEmpty: false,
+    pageIndex: 1,
+    hasMore2: true,
+    isEmpty2: false,
+    pageIndex2: 1,
+    hasMore3: true,
+    isEmpty3: false,
+    pageIndex3: 1,
   }
 
   componentWillUnmount() {
@@ -45,52 +54,112 @@ export default class myCustomer extends Taro.Component {
       current: value
     })
     if (value == 1) {
-      this.queryVisitRecord();
+      this.queryVisitRecord(1);
     } else if (value == 2) {
-      this.queryActivityList();
+      this.queryActivityList(1);
     } else if (value == 3) {
-      this.queryFollowRecord();
+      this.queryFollowRecord(1);
     }
   }
+  // 访问记录上拉加载下拉刷新
+  onScrollToLower = async (fn) => {
+    const { pageIndex } = this.state;
+    this.queryVisitRecord(pageIndex + 1)
+    fn && fn();
+  }
+  onPullDownRefresh = (rest) => {
+    // debugger
+    if (this.refreshing) return
+    this.refreshing = true
+    this.queryVisitRecord(1)
+    rest && rest()
+    this.refreshing = false
+  }
+  // 活动信息上拉加载下拉刷新
+  onScrollToLower2 = async (fn) => {
+    const { pageIndex2 } = this.state;
+    this.queryActivityList(pageIndex2 + 1)
+    fn && fn();
+  }
+  onPullDownRefresh2 = (rest) => {
+    // debugger
+    if (this.refreshing) return
+    this.refreshing = true
+    this.queryActivityList(1)
+    rest && rest()
+    this.refreshing = false
+  }
+  // 跟进记录上拉加载下拉刷新
+  onScrollToLower3 = async (fn) => {
+    const { pageIndex3 } = this.state;
+    this.queryFollowRecord(pageIndex3 + 1)
+    fn && fn();
+  }
+  onPullDownRefresh3 = (rest) => {
+    // debugger
+    if (this.refreshing) return
+    this.refreshing = true
+    this.queryFollowRecord(1)
+    rest && rest()
+    this.refreshing = false
+  }
   // 获取访问记录
-  queryVisitRecord() {
+  queryVisitRecord(pageNumber) {
     const { customerId } = this.$router.params
     const payload = {
-      pageNumber: '0',
+      pageNumber,
       pageSize: '10',
       customerId,
     }
     getVisitRecord(payload).then(res => {
+      const { records, list, total, current, pages } = res || {}
+      const _list = records || list || []
+      const newList = current <= 1 ? _list : this.state.visitRecord.concat(_list)
       this.setState({
-        visitRecord: res.records || []
+        visitRecord: newList,
+        isEmpty: total == 0,
+        hasMore: current < pages,
+        pageIndex: current >= pages ? pages : current
       })
     })
   }
   // 获取活动信息
-  queryActivityList() {
+  queryActivityList(pageNumber) {
     const { customerId } = this.$router.params
     const payload = {
-      pageNumber: '0',
+      pageNumber,
       pageSize: '10',
       customerId,
     }
     getActivityList(payload).then(res => {
+      const { records, list, total, current, pages } = res || {}
+      const _list = records || list || []
+      const newList = current <= 1 ? _list : this.state.activityList.concat(_list)
       this.setState({
-        activityList: res.records || []
+        activityList: newList,
+        isEmpty2: total == 0,
+        hasMore2: current < pages,
+        pageIndex2: current >= pages ? pages : current
       })
     })
   }
   // 获取跟进记录
-  queryFollowRecord() {
+  queryFollowRecord(pageNumber) {
     const { customerId } = this.$router.params
     const payload = {
-      pageNumber: '0',
-      pageSize: '30',
+      pageNumber,
+      pageSize: '10',
       customerId,
     }
     getFollowRecord(payload).then(res => {
+      const { records, list, total, current, pages } = res || {}
+      const _list = records || list || []
+      const newList = current <= 1 ? _list : this.state.followRecord.concat(_list)
       this.setState({
-        followRecord: res.records
+        followRecord: newList,
+        isEmpty3: total == 0,
+        hasMore3: current < pages,
+        pageIndex3: current >= pages ? pages : current
       })
     })
   }
@@ -251,9 +320,6 @@ export default class myCustomer extends Taro.Component {
       }
     })
   }
-
-
-
   onChange = e => {
     this.setState({
       baseInfo: {
@@ -262,7 +328,6 @@ export default class myCustomer extends Taro.Component {
       }
     })
   }
-
   onBaseTextareaChange(e) {
     this.setState({
       baseInfo: {
@@ -371,7 +436,7 @@ export default class myCustomer extends Taro.Component {
   render() {
 
     const tabList = [{ title: '基本信息' }, { title: '访问记录' }, { title: '活动信息' }, { title: '跟进记录' }]
-    const { customerDetail, visitRecord, activityList, followRecord, followVisible, baseVisible, } = this.state
+    const { customerDetail, visitRecord, activityList, followRecord, followVisible, baseVisible, isEmpty, hasMore, isEmpty2, hasMore2, isEmpty3, hasMore3 } = this.state
     return (
       <View>
         {followVisible && this.renderFollowBox()}
@@ -404,69 +469,102 @@ export default class myCustomer extends Taro.Component {
           </AtTabsPane>
           <AtTabsPane current={this.state.current} index={1}>
             <View className="tab-pane2 pane">
-              {visitRecord.length && visitRecord.map(item => (
-                <View className="record-item">
-                  <View className="title" >{item.activity}</View>
-                  <View className="time">{dayjs(item.visitTime).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
-                </View>
-              ))
-              }
-              {!visitRecord.length &&
-                <View className="empty">
-                  <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
-                  <View className="empty__text">暂无访问记录~</View>
+              <ListView
+                className="wrap"
+                needInit
+                isEmpty={isEmpty}
+                emptyText="暂无访问记录~"
+                hasMore={hasMore}
+                onPullDownRefresh={fn => this.onPullDownRefresh(fn)}
+                onScrollToLower={fn => this.onScrollToLower(fn)}
+              >
+                <View className="list">
+                  {visitRecord.length && visitRecord.map(item => (
+                    <View className="record-item">
+                      <View className="title" >{item.activity}</View>
+                      <View className="time">{dayjs(item.visitTime).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
+                    </View>
+                  ))
+                  }
+                  {!visitRecord.length &&
+                    <View className="empty">
+                      {/* <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
+                  <View className="empty__text">暂无访问记录~</View> */}
+                    </View>
+                  }
                 </View>
-              }
-
+              </ListView>
             </View>
           </AtTabsPane>
           <AtTabsPane current={this.state.current} index={2}>
             <View className="tab-pane3 pane">
-              {!activityList.length &&
-                <View className="empty">
-                  <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
-                  <View className="empty__text">暂无活动信息~</View>
+              <ListView
+                className="wrap"
+                needInit
+                isEmpty={isEmpty2}
+                emptyText="暂无活动信息~"
+                hasMore={hasMore2}
+                onPullDownRefresh={fn => this.onPullDownRefresh2(fn)}
+                onScrollToLower={fn => this.onScrollToLower2(fn)}
+              >
+                <View className="list">
+                  {!activityList.length &&
+                    <View className="empty">
+                      {/* <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
+                  <View className="empty__text">暂无活动信息~</View> */}
+                    </View>
+                  }
+                  {activityList.length &&
+                    activityList.map(item => (
+                      <ActivityItem
+                        data={item}
+                        key={item.id}
+                        onClick={this.handleItemClick}>
+                      </ActivityItem>
+                    ))
+                  }
                 </View>
-              }
-              {activityList.length &&
-                activityList.map(item => (
-                  <ActivityItem
-                    data={item}
-                    key={item.id}
-                    onClick={this.handleItemClick}>
-                  </ActivityItem>
-                ))
-              }
+              </ListView>
             </View>
           </AtTabsPane>
           <AtTabsPane current={this.state.current} index={3}>
-            <View style="padding:10px 20px 120px 20px">
-              {followRecord.length && followRecord.map(item => (
-                <View>
-                  <View style=" display:flex;justify-content: space-between;align-items: center;color: #333;font-size: 16px; margin-bottom:20rpx;">
-                    <View style=" display: flex;align-items: center;"><View style="width:8px;height:8px;margin-right:20rpx;display:inline-block;background:rgba(246,182,29,1);border-radius: 50%;"></View>{item.recordType}</View>
-                    <View classNam="time" style=" font-size: 26rpx;color: #999;">{dayjs(item.createDate).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
-                  </View>
-                  {
-                    item.recordContent &&
-                    <View style="font-size:28rpx;color:#666;padding-left:32rpx;margin-bottom:20rpx;">
-                      {item.recordContent}
+            <View style="padding:10px 20px 20px 20px">
+              <ListView
+                className="wrap"
+                needInit
+                style="height:40vh"
+                isEmpty={isEmpty3}
+                emptyText="暂无跟进记录~"
+                hasMore={hasMore3}
+                onPullDownRefresh={fn => this.onPullDownRefresh3(fn)}
+                onScrollToLower={fn => this.onScrollToLower3(fn)} >
+                <View className="list">
+                  {followRecord.length && followRecord.map(item => (
+                    <View>
+                      <View style=" display:flex;justify-content: space-between;align-items: center;color: #333;font-size: 16px; margin-bottom:20rpx;">
+                        <View style=" display: flex;align-items: center;"><View style="width:8px;height:8px;margin-right:20rpx;display:inline-block;background:rgba(246,182,29,1);border-radius: 50%;"></View>{item.recordType}</View>
+                        <View classNam="time" style=" font-size: 26rpx;color: #999;">{dayjs(item.createDate).format('YYYY年MM月DD日 HH:mm:ss') || '　'}</View>
+                      </View>
+                      {
+                        item.recordContent &&
+                        <View style="font-size:28rpx;color:#666;padding-left:32rpx;margin-bottom:20rpx;">
+                          {item.recordContent}
+                        </View>
+                      }
+
+                    </View>
+                  ))
+                  }
+                  {!followRecord.length &&
+                    <View className="empty">
+                      {/* <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
+                  <View className="empty__text">暂无跟进记录~</View> */}
                     </View>
                   }
-
-                </View>
-              ))
-              }
-              {!followRecord.length &&
-                <View className="empty">
-                  <Image className="empty__img" mode="widthFix" src={emptyImg}></Image>
-                  <View className="empty__text">暂无跟进记录~</View>
                 </View>
-              }
-
+              </ListView>
               <View className="btn" onClick={this.addFollow}>添加跟进</View>
             </View>
-
           </AtTabsPane>
         </AtTabs>
       </View>

src/pages/person/customerAnalysis/transactionCustomer/index.js

@@ -29,21 +29,24 @@ export default class transactionCustomer extends Taro.Component {
   }
   componentDidShow() {
     Taro.showLoading()
-    this.loadList()
+    this.loadList(1)
 
   }
-  loadList() {
+  loadList(pageNumber) {
     const payload = {
       type: 'clinch',
-      pageNumber: 0,
+      pageNumber,
       pageSize: 9999
     }
     queryCustomerList(payload.type, payload).then(res => {
+      const {records, list, total, current, pages} = res || {}
+      const _list = records || list || []
+      const newList = current <= 1 ? _list: this.state.customerList.concat(_list)
       this.setState({
-        customerList: res.records || [],
-        isEmpty: res.total == 0,
-        hasMore: res.current < res.page,
-        pageIndex: res.current >= res.pages ? res.pages : res.current
+        customerList: newList,
+        isEmpty: total == 0,
+        hasMore: current < pages,
+        pageIndex: current >= pages ? pages : current
       })
       Taro.hideLoading()
     })