mali-applet-ui 0.1.49 → 0.1.50

package/components/ml-list-group/ml-list-group.vue

@@ -38,7 +38,7 @@ export default {
     return {
       loading: false,
       pageVO: {
-        pageSize: globalStore.list.pageSize,
+        pageSize: globalStore.loadMore.pageSize,
         currPage: 1,
         total: 0
       }
@@ -55,7 +55,7 @@ export default {
       return this.pageVO.pageSize * this.pageVO.currPage < Number(this.pageVO.total) ? 'more' : 'noMore'
     },
     pagePropOpts () {
-      return { ...globalStore.list.pageProp, ...this.pageProps }
+      return { ...globalStore.loadMore.pageProp, ...this.pageProps }
     }
   },
   created () {
@@ -84,16 +84,16 @@ export default {
           this.requestMethod.call(this.currVM, this.getParams())
         ).then(res => {
           let data = []
-          if (XEUtils.isFunction(globalStore.list.resProps.result)) {
-            data = globalStore.list.resProps.result({ response: res }) || []
+          if (XEUtils.isFunction(globalStore.loadMore.resProps.result)) {
+            data = globalStore.loadMore.resProps.result({ response: res }) || []
           } else {
-            data = Array.isArray(res) ? res : XEUtils.get(res, globalStore.list.resProps.result || 'datas')
+            data = Array.isArray(res) ? res : XEUtils.get(res, globalStore.loadMore.resProps.result || 'datas')
           }
           if (this.showPage) {
-            if (XEUtils.isFunction(globalStore.list.resProps.total)) {
-              this.pageVO.total = XEUtils.toNumber(globalStore.list.resProps.total({ response: res }))
+            if (XEUtils.isFunction(globalStore.loadMore.resProps.total)) {
+              this.pageVO.total = XEUtils.toNumber(globalStore.loadMore.resProps.total({ response: res }))
             } else {
-              this.pageVO.total = XEUtils.toNumber(XEUtils.get(res, globalStore.list.resProps.total || 'total'))
+              this.pageVO.total = XEUtils.toNumber(XEUtils.get(res, globalStore.loadMore.resProps.total || 'total'))
             }
           }
           this.loading = false

package/components/ml-load-more/ml-load-more.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="ml-load-more" :class="[className]">
+    <slot></slot>
+    <view v-if="showPage" class="ml-load-more-warpper">
+      <view v-if="loadStatus === 'more'" class="ml-load-more-more">上拉显示更多</view>
+      <view v-if="loadStatus === 'noMore'" class="ml-load-more-no-more">没有更多数据了</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import globalStore from '../../config/store'
+import XEUtils from 'xe-utils'
+
+export default {
+  props: {
+    value: Array,
+    autoload: Boolean,
+    showPage: Boolean,
+    pageProps: Object,
+    requestMethod: Function,
+    className: String
+  },
+  inject: {
+    currVM: {
+      from: '$pageVM',
+      default: null
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      pageVO: {
+        pageSize: globalStore.loadMore.pageSize,
+        currPage: 1,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    loadStatus () {
+      if (this.loading) {
+        return 'loading'
+      }
+      return this.pageVO.pageSize * this.pageVO.currPage < Number(this.pageVO.total) ? 'more' : 'noMore'
+    },
+    pagePropOpts () {
+      return { ...globalStore.loadMore.pageProp, ...this.pageProps }
+    }
+  },
+  created () {
+    this.$nextTick(() => {
+      if (this.autoload && this.requestMethod) {
+        this.reload()
+      }
+    })
+  },
+  methods: {
+    getParams () {
+      return this.showPage ? {
+        pageObj: this.pageVO,
+        data: {
+          [this.pagePropOpts.currentPage || 'page']: this.pageVO.currPage,
+          [this.pagePropOpts.pageSize || 'limit']: this.pageVO.pageSize
+        }
+      } : {
+        data: {}
+      }
+    },
+    getList () {
+      this.loading = true
+      if (this.requestMethod) {
+        return Promise.resolve(
+          this.requestMethod.call(this.currVM, this.getParams())
+        ).then(res => {
+          let data = []
+          if (XEUtils.isFunction(globalStore.loadMore.resProps.result)) {
+            data = globalStore.loadMore.resProps.result({ response: res }) || []
+          } else {
+            data = Array.isArray(res) ? res : XEUtils.get(res, globalStore.loadMore.resProps.result || 'datas')
+          }
+          if (this.showPage) {
+            if (XEUtils.isFunction(globalStore.loadMore.resProps.total)) {
+              this.pageVO.total = XEUtils.toNumber(globalStore.loadMore.resProps.total({ response: res }))
+            } else {
+              this.pageVO.total = XEUtils.toNumber(XEUtils.get(res, globalStore.loadMore.resProps.total || 'total'))
+            }
+          }
+          this.loading = false
+          return data
+        }).catch(() => {
+          this.loading = false
+          return []
+        })
+      }
+      return Promise.resolve([])
+    },
+    reload () {
+      this.pageVO.currPage = 1
+      return this.load()
+    },
+    async load() {
+      if (this.$loading) {
+        this.$loading.show()
+      }
+      try {
+        const data = await this.getList()
+        if (this.$loading) {
+          this.$loading.hide()
+        }
+        uni.stopPullDownRefresh()
+        this.$emit('input', data)
+      } catch (e) {
+        if (this.$loading) {
+          this.$loading.hide()
+        }
+        uni.stopPullDownRefresh()
+        console.error(e)
+      }
+    },
+    async loadMore() {
+      if (this.showPage && !this.loading && this.loadStatus === 'more') {
+        try {
+          this.pageVO.currPage++
+          const data = await this.getList()
+          const moreList = (this.value || []).concat(data)
+          this.$emit('input', moreList)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-load-more-warpper {
+  text-align: center;
+  .ml-load-more-more,
+  .ml-load-more-no-more {
+    padding: 20rpx;
+    color: rgb(119, 119, 119);
+  }
+}
+</style>

package/config/store.js

@@ -37,8 +37,8 @@ const globalStore = {
       { value: 6, label: '已完成', color: '#2497FF' }
     ]
   },
-  // 列表组件
-  list: {
+  // 上拉加载更多
+  loadMore: {
     pageSize: 30,
     pageProp: {
       pageSize: 'limit',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "description": "码里云小程序组件库",
   "files": [
     "components",