mali-applet-ui 0.0.56 → 0.0.59

package/components/ml-button/ml-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="ml-button" :class="[className || '', `type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" @tap="tapEvent" @click="clickEvent">
+  <button class="ml-button" :class="[className || '', `type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" :style="styles" @tap="tapEvent" @click="clickEvent">
     <slot>{{ content }}</slot>
   </button>
 </template>
@@ -18,10 +18,16 @@ export default {
       type: String,
       default: 'button'
     },
+    width: String,
     redirect: Boolean,
     url: String,
     className: String
   },
+  computed: {
+    styles () {
+      return this.width ? `width:${this.width};` : ''
+    }
+  },
   methods: {
     tapEvent () {
       if (this.url) {

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

@@ -4,21 +4,129 @@
       <scroll-view scroll-y>
         <slot></slot>
       </scroll-view>
-      <uni-load-more v-if="loadMore" v-show="!loading" :status="loadStatus"></uni-load-more>
+      <uni-load-more v-if="showPage" :status="loadStatus"></uni-load-more>
     </view>
   </view>
 </template>
 
 <script>
+import globalStore from '../../config/store'
+import XEUtils from 'xe-utils'
+
 export default {
   name: 'MlListGroup',
   options: {
     virtualHost: true
   },
   props: {
+    value: Array,
+    showPage: Boolean,
+    autoload: {
+      type: Boolean,
+      default: true
+    },
+    pageProps: Object,
+    requestMethod: Function,
     title: String,
-    loadMore: Boolean,
     className: String
+  },
+  data () {
+    return {
+      loading: false,
+      pageVO: {
+        pageSize: globalStore.list.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.list.pageProp, ...this.pageProps }
+    }
+  },
+  created () {
+    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(this.getParams())
+        ).then(res => {
+          let data = []
+          if (XEUtils.isFunction(globalStore.list.resProps.result)) {
+            data = globalStore.list.resProps.result({ response: res }) || []
+          } else {
+            data = Array.isArray(res) ? res : XEUtils.get(res, globalStore.list.resProps.result || 'datas')
+          }
+          if (this.showPage) {
+            if (XEUtils.isFunction(globalStore.list.resProps.total)) {
+              this.pageVO.total = XEUtils.toNumber(globalStore.list.resProps.total({ response: res }))
+            } else {
+              this.pageVO.total = XEUtils.toNumber(XEUtils.get(res, globalStore.list.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() {
+      uni.showLoading({
+        title: '加载中'
+      })
+      try {
+        const data = await this.getList()
+        uni.stopPullDownRefresh()
+        uni.hideLoading()
+        this.$emit('input', data)
+      } catch (e) {
+        uni.stopPullDownRefresh()
+        uni.hideLoading()
+        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>

package/config/store.js

@@ -28,9 +28,17 @@ const globalStore = {
       optionMethod: null
     }
   },
-  // 图表
-  echarts: {
-    color: ['#582D27', '#391085', '#13c2c2', '#04395E', '#5E503F', '#7C98B3', '#69C6DB', '#A98467', '#b37feb']
+  // 列表组件
+  list: {
+    pageSize: 30,
+    pageProp: {
+      pageSize: 'limit',
+      currentPage: 'page'
+    },
+    resProps: {
+      result: 'datas',
+      total: 'total'
+    }
   }
 }
 

package/package.json

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