Просмотр исходного кода

【我的作品】列表为空时提示

任一存 4 лет назад
Родитель
Сommit
aa8d13d6d3
2 измененных файлов с 31 добавлено и 41 удалено
  1. 1 0
      src/views/material/style.less
  2. 30 41
      src/views/material/works/index.vue

+ 1 - 0
src/views/material/style.less

@@ -77,6 +77,7 @@
         >span{
           color: #646566;
         }
+        // TODO: 用不到了,替换成我自己写的
         .create{
           width: 100px;
           margin: 0 auto;

+ 30 - 41
src/views/material/works/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="works con">
     <div class="tab">
-      <span>我的作品 {{paging.total>0?`(${paging.total})`:''}}</span>
+      <span>我的作品 {{list.length > 0 ? `(${list.length})`:''}}</span>
       <div class="tab-r">
          <div class="filter">
           <div :class="{active:searchKey}">
@@ -50,19 +50,14 @@
         </div>
       </li>
     </ul>
-    <div class="nodata" v-else>
-        <img :src="$noresult" alt="">
-        <span>
-          {{isClickSearch ? "未搜索到结果" : "您还没有作品,请先创建作品~"}}
-        </span>
-        <div class="create">创建作品</div>
-      </div>
-    <div class="paging">
-      <Paging
-        v-if="paging.total>0"
-        :paging="paging"
-        @changeCurrent="changeCurrent"
-      />
+    <div class="nodata" v-if="list.length == 0 && !hasMoreData && isClickSearch">
+      <img :src="$noresult" alt="" />
+      <span>未搜索到结果</span>
+    </div>
+    <div class="nodata" v-if="list.length == 0 && !hasMoreData && !isClickSearch">
+      <img :src="config.empty" alt="" />
+      <span>您还没有作品,请先创建作品~</span>
+      <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">创建作品</button>
     </div>
     <share :show='showShare' :item="shareItem" @close="showShare=false"></share>
     <preview
@@ -76,9 +71,9 @@
 </template>
 
 <script>
-import Paging from '../components/paging'
 import share from '../popup/share'
 import preview from "@/components/preview";
+import config from "@/config";
 
 import {
   addWorks,
@@ -89,26 +84,21 @@ import {
 
 export default {
   components:{
-    Paging,
     share,
     preview
   },
   data(){
     return {
+      config,
       list:[],
+      hasMoreData: true,
+      isRequestingMoreData: false,
       searchKey:'',
       showShare:false,
       showPreview:false,
       showItem:'',
       shareItem:'',
       isClickSearch: "",
-      paging: {
-        pageSize: 14,
-        pageNum: 1,
-        total: 0,
-        showSize: 4,
-        current: 1
-      }
     }
   },
   mounted(){
@@ -116,13 +106,10 @@ export default {
   
   },
   watch:{
-    'paging.pageNum':function () {
-      this.getWorksList()
-    },
-    searchKey(){
-      this.paging.current = 1
-      this.getWorksList()
-    }
+    // searchKey(){
+    //   this.paging.current = 1
+    //   this.getWorksList()
+    // }
   },
   methods:{
 
@@ -152,9 +139,6 @@ export default {
         this.showPreview=true
       })
     },
-    changeCurrent(data){
-      this.paging.pageNum = data
-    },
     add(){
       addWorks({},(data)=>{
         window.open(`./edit.html?id=${data.data.id}`)
@@ -182,21 +166,26 @@ export default {
     },
     getWorksList() {
       this.isClickSearch = !!this.searchKey;
+      this.isRequestingMoreData = true
       getWorksList(
         {
-          pageNum: this.paging.pageNum,
-          pageSize: this.paging.pageSize,
+          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+          pageSize: config.pageSize,
           searchKey: this.searchKey,
         },
         (data) => {
-          this.paging.pageNum = data.data.pageNum;
-          this.paging.pageSize = data.data.pageSize;
-          this.paging.total = data.data.total;
-          this.list =data.data.list
-
+          this.list = this.list.concat(data.data.list)
+          if (this.list.length === data.data.total) {
+            this.hasMoreData = false
+          }
+          this.isRequestingMoreData = false
+          // TODO: 这是干啥呢?
           this.$nextTick(()=>{
             this.$bus.emit('refreshTips')
           })
+        },
+        () => {
+          this.isRequestingMoreData = false
         }
       );
     }
@@ -216,7 +205,7 @@ export default {
     background: #fff;
     justify-content: space-between;
     align-items: center;
-    padding: 24px 30px;
+    padding: 20px 30px;
     >span{
       font-size: 18px;
       font-weight: bold;