mali-applet-ui 0.2.94 → 0.2.95

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

@@ -1,7 +1,18 @@
 <template>
-  <view class="ml-load-more" :class="[className]">
-    <slot></slot>
-    <view v-if="showPage" class="ml-load-more-warpper">
+  <view class="ml-load-more" :class="[className || '', {'not-data': showNotData}]">
+    <view class="ml-load-more-content">
+      <slot></slot>
+    </view>
+    <view v-if="showNotData && !loading" class="ml-load-more-empty">
+      <slot name="empty">
+        <ml-not-data :emptyUrl="emptyUrl" :emptyText="emptyText" :emptyHint="emptyHint">
+          <template #content>
+            <slot name="emptycontent"></slot>
+          </template>
+        </ml-not-data>
+      </slot>
+    </view>
+    <view v-else-if="showPage" class="ml-load-more-warpper">
       <view v-if="loadStatus === 'more'" class="ml-load-more-status-more">上拉显示更多</view>
       <view v-if="loadStatus === 'noMore'" class="ml-load-more-status-no-more">没有更多数据了</view>
     </view>
@@ -20,6 +31,7 @@ export default {
     pageProps: Object,
     requestMethod: Function,
     filterForm: Object,
+    emptyConfig: Object,
     className: String
   },
   inject: {
@@ -35,7 +47,10 @@ export default {
         pageSize: globalStore.loadMore.pageSize,
         currPage: 1,
         total: 0
-      }
+      },
+      emptyUrl: '',
+      emptyText: '',
+      emptyHint: ''
     }
   },
   computed: {
@@ -45,8 +60,23 @@ export default {
       }
       return this.pageVO.pageSize * this.pageVO.currPage < Number(this.pageVO.total) ? 'more' : 'noMore'
     },
+    showNotData () {
+      return !this.value || !this.value.length
+    },
     pagePropOpts () {
       return { ...globalStore.loadMore.pageProp, ...this.pageProps }
+    },
+    hasFilters () {
+      console.log(this.filterForm)
+      for (let key in this.filterForm) {
+        if (this.filterForm[key]) {
+          return true
+        }
+      }
+      return false
+    },
+    emptyOpts () {
+      return Object.assign({}, this.emptyConfig)
     }
   },
   created () {
@@ -120,6 +150,7 @@ export default {
         uni.stopPullDownRefresh()
         console.error(e)
       }
+      this.updateEmptyStatus()
     },
     async loadMore() {
       if (this.showPage && !this.loading && this.loadStatus === 'more') {
@@ -132,12 +163,30 @@ export default {
           console.error(e)
         }
       }
+    },
+    updateEmptyStatus () {
+      if (this.hasFilters) {
+        this.emptyUrl = this.emptyOpts.resultUrl || globalStore.loadMore.notData.resultUrl
+        this.emptyText = XEUtils.template(this.emptyOpts.resultText || globalStore.loadMore.notData.resultText, this.filterForm)
+        this.emptyHint = XEUtils.template(this.emptyOpts.resultHint || globalStore.loadMore.notData.resultHint, this.filterForm)
+      } else {
+        this.emptyUrl = this.emptyOpts.emptyUrl || globalStore.loadMore.notData.emptyUrl
+        this.emptyText = this.emptyOpts.emptyText || globalStore.loadMore.notData.emptyText
+        this.emptyHint = this.emptyOpts.emptyHint || globalStore.loadMore.notData.emptyHint
+      }
     }
   }
 }
 </script>
 
 <style lang="scss">
+.ml-load-more {
+  &.not-data {
+    .ml-load-more-content {
+      display: none;
+    }
+  }
+}
 .ml-load-more-warpper {
   text-align: center;
   .ml-load-more-status-more,

package/components/ml-not-data/ml-not-data.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="ml-not-data">
+    <slot>
+      <view v-if="emptyUrl || $slots.icon" class="ml-not-data-image">
+        <slot name="icon">
+          <image class="ml-not-data-image-icon" :src="emptyUrl" mode="aspectFit"></image>
+        </slot>
+      </view>
+      <view v-if="emptyText || $slots.text" class="ml-not-data-text">
+        <slot name="text">
+          <text>{{ emptyText || '暂无数据！' }}</text>
+        </slot>
+      </view>
+      <view v-if="emptyHint || $slots.hint" class="ml-not-data-hint">
+        <slot name="hint">
+          <text>{{ emptyHint }}</text>
+        </slot>
+      </view>
+      <view class="ml-not-data-contnet">
+        <slot name="contnet"></slot>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+	name: 'MlNotData',
+  props: {
+    emptyUrl: String,
+    emptyText: String,
+    emptyHint: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-not-data {
+  text-align: center;
+  padding-top: 100rpx;
+  .ml-not-data-image-icon {
+    width: 400rpx;
+  }
+  .ml-not-data-text {
+    font-size: 32rpx;
+    font-weight: 700;
+  }
+  .ml-not-data-hint {
+    font-size: 26rpx;
+    padding: 0 60rpx;
+    line-height: 40rpx;
+    color: rgba(0, 0, 0, 0.45);
+  }
+  .ml-not-data-text,
+  .ml-not-data-hint {
+    margin-bottom: 20rpx;
+  }
+}
+</style>

package/components/ml-upload/ml-upload.vue

@@ -54,9 +54,8 @@
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
 import globalStore from '../../config/store'
-import { getFileSuffix } from '../../utils/file'
+import { getFileSuffix, getFileName } from '../../utils/file'
 import { uploadAllFiles, uploadImageFiles } from './file-handle'
 
 export default {
@@ -184,7 +183,7 @@ export default {
 		loadList () {
 			if (this.simpleValue) {
 				this.fileList = (this.urlList && this.urlList.length ? this.urlList : (this.value || [])).map(url => {
-          const name = this.getUrlName(url)
+          const name = getFileName(url)
 					const obj = {
 						id: null,
 						[this.nameField]: name,
@@ -246,10 +245,6 @@ export default {
         })
       }
       return item[this.urlField]
-    },
-    getUrlName (url) {
-      const urlRest = XEUtils.parseUrl(url)
-      return urlRest.pathname.split('/').slice(-1)[0] || ''
     },
 		previewImageEvent (item, index) {
 			if (!this.preview) {

package/config/store.js

@@ -47,6 +47,13 @@ const globalStore = {
     resProps: {
       result: 'datas',
       total: 'total'
+    },
+    notData: {
+      emptyUrl: '',
+      emptyText: '暂无记录',
+      resultUrl: '',
+      resultText: '暂无相关结果',
+      resultHint: '请检查输入是否正确'
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.2.94",
+  "version": "0.2.95",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"

package/utils/file.js

@@ -1,3 +1,5 @@
+import XEUtils from 'xe-utils'
+
 export function getFileSuffix (filename) {
   const pos = filename.lastIndexOf('.')
   let suffix = ''
@@ -7,6 +9,11 @@ export function getFileSuffix (filename) {
   return suffix
 }
 
+export function getFileName (url) {
+  const urlRest = XEUtils.parseUrl(url)
+  return urlRest.pathname.split('/').slice(-1)[0] || ''
+}
+
 /**
  * 下载文件
  * @param {*} url