【我的素材-图片】照搬全景图片页的修改

src/config/index.js

@@ -95,7 +95,10 @@ const config = {
         if(typeof(obj)=="undefined"||obj==null) obj="krpanoSWFObject";
         var krpano = document.getElementById(obj);
         return krpano;
-      }
+    },
+
+    // 无限滚动列表的每页数据量
+    PAGE_SIZE: 20,
 };
 
 export default config

src/views/material/image/image.js

@@ -9,7 +9,16 @@ let data = [
     key: 'name',
     name: '名称',
     en: '名称',
-    fontweight: 'bold'
+    // fontweight: 'bold'
+  },
+  {
+    key: 'detail',
+    // name: '操作',
+    // en:  '操作',
+    showWhenHover: true,
+    canclick: true,
+    width: 100,
+    textAlign:'center'
   },
   {
     key: 'fileSize',
@@ -31,14 +40,6 @@ let data = [
     name: '修改时间',
     en: '修改时间'
   },
-  {
-    key: 'detail',
-    name: '操作',
-    en:  '操作',
-    canclick: true,
-    width: 80,
-    textAlign:'center'
-  }
 ]
 
 export {

src/views/material/image/index.vue

@@ -2,50 +2,57 @@
   <div class="panorama con">
     <div class="top">
       <crumbs :list="tablist" />
+    </div>
+    <div class="second-line">
+      <div class="btn">
+        <button
+          @mouseover.stop="showList = true"
+          @click="$refs.uploadFile.click()"
+          class="ui-button ui-button-rect submit"
+        >
+          <span>上传素材</span>
+          <i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
+            <div>
+              <div class="remark">请上传120MB以内、jpg/png格式的图片</div>
+            </div>
+          </i>
+          <upload
+            ref="uploadFile"
+            :failString="'格式错误，请上传10MB以内、jpg/png格式的图片'"
+            :limitFailStr="'过大，请上传10MB以内、jpg/png格式的图片'"
+            accept-type="image/png,image/jpeg"
+            media-type="image"
+            :limit="10"
+            @file-change="onFileChange"
+          ></upload>
+          <template v-if="showList">
+            <UploadList
+              @close="
+                () => {
+                  showList = false;
+                }
+              "
+              :list="uploadList"
+              @del="delUploadItem"
+            />
+          </template>
+        </button>
+      </div>
       <div class="filter">
         <div>
+          <i
+            @click="refreshList"
+            class="iconfont icon-works_search"
+          ></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="(paging.current = 1) && getMaterialList()"
-            placeholder="搜索素材"
+            @keyup.enter="refreshList"
+            placeholder="搜索文件夹或素材"
           />
-          <i
-            @click="(paging.current = 1) && getMaterialList()"
-            class="iconfont iconbs_search"
-          ></i>
         </div>
       </div>
     </div>
-    <div class="btn">
-      <button
-        @mouseover.stop="showList = true"
-        @click="$refs.uploadFile.click()"
-        class="ui-button ui-button-rect submit"
-      >
-        <span>上传素材</span><i class="iconfont iconbs_upload"></i>
-        <upload
-          ref="uploadFile"
-          :failString="'格式错误，请上传10MB以内、jpg/png格式的图片'"
-          :limitFailStr="'过大，请上传10MB以内、jpg/png格式的图片'"
-          accept-type="image/png,image/jpeg"
-          media-type="image"
-          :limit="10"
-          @file-change="onFileChange"
-        ></upload>
-        <template v-if="showList">
-          <UploadList
-            @close="
-              () => {
-                showList = false;
-              }
-            "
-            :list="uploadList"
-            @del="delUploadItem"
-          />
-        </template>
-      </button>
-    </div>
     <div class="list">
       <tableList
         @selection-change="
@@ -53,11 +60,14 @@
             selectedArr = data;
           }
         "
+        @request-more-data="getMoreMaterialItem"
+        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
         :selection="false"
         :data="list"
         class="table-list"
+        ref="table-list"
       >
         <div slot-scope="{ data }" slot="header">
           {{ data.name }}
@@ -72,7 +82,7 @@
                 <div class="remark">重命名</div>
               </div>
             </i>
-            <i class="iconfont iconlist_delete hover-tips" @click="del(item)">
+            <i class="iconfont iconlist_delete hover-tips-warn" @click="del(item)">
               <div>
                 <div class="remark">删除</div>
               </div>
@@ -94,19 +104,16 @@
           >
         </div>
       </tableList>
-      <div class="nodata" v-if="list.length == 0">
+      <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && isClickSearch">
         <img :src="$noresult" alt="" />
-        <span>{{
-          isClickSearch ? "未搜索到结果" : "暂无素材，快去上传吧"
-        }}</span>
+        <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>
-    </div>
-    <div class="paging">
-      <Paging
-        v-if="paging.total > 0"
-        :paging="paging"
-        @changeCurrent="changeCurrent"
-      />
     </div>
 
     <rename
@@ -128,7 +135,6 @@ import tableList from "@/components/table";
 import crumbs from "@/components/crumbs";
 import { data } from "./image";
 import rename from "../popup/rename";
-import Paging from "../components/paging";
 import UploadList from "../components/uploadList";
 
 import Upload from "@/components/shared/uploads/UploadMultiple";
@@ -142,6 +148,8 @@ import {
   delMaterial,
 } from "@/api";
 
+import {PAGE_SIZE} from '@/config'
+
 const TYPE = "image";
 
 export default {
@@ -149,7 +157,6 @@ export default {
     tableList,
     crumbs,
     rename,
-    Paging,
     Upload,
     preview,
     UploadList,
@@ -159,7 +166,6 @@ export default {
       showPreview: false,
       showRename: false,
       showList: false,
-      isClickSearch: "",
       popupItem: "",
       tabHeader: data,
       selectedArr: [],
@@ -171,23 +177,15 @@ export default {
         },
       ],
       list: [],
+      hasMoreData: true,
+      isRequestingMoreData: false,
       uploadList: [],
-      paging: {
-        pageSize: 8,
-        pageNum: 1,
-        total: 0,
-        showSize: 4,
-        current: 1,
-      },
+      isClickSearch: "",
     };
   },
   mounted() {
-    this.getMaterialList();
   },
   watch: {
-    "paging.pageNum": function () {
-      this.getMaterialList();
-    },
   },
   methods: {
     viewImg(id) {
@@ -306,32 +304,41 @@ export default {
                   }
                 }
               });
-              this.getMaterialList();
+              this.getMoreMaterialItem();
             }
           });
       });
     },
-    changeCurrent(data) {
-      this.paging.pageNum = data;
+    refreshList() {
+      console.log('refresh');
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
     },
-    getMaterialList() {
+    getMoreMaterialItem() {
       this.isClickSearch = !!this.searchKey;
+      this.isRequestingMoreData = true
       getMaterialList(
         {
-          pageNum: this.paging.pageNum,
-          pageSize: this.paging.pageSize,
+          pageNum: Math.floor(this.list.length / PAGE_SIZE) + 1,
+          pageSize: PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
         },
         (data) => {
-          this.list = data.data.list.map((i) => {
+          const newData = data.data.list.map((i) => {
             i.fileSize = changeByteUnit(Number(i.fileSize));
             return i;
           });
-
-          this.paging.pageNum = data.data.pageNum;
-          this.paging.pageSize = data.data.pageSize;
-          this.paging.total = data.data.total;
+          this.list = this.list.concat(newData)
+          if (this.list.length === data.data.total) {
+            this.hasMoreData = false
+          }
+          this.isRequestingMoreData = false
+        },
+        () => {
+          this.isRequestingMoreData = false
         }
       );
     },
@@ -341,6 +348,22 @@ export default {
 
 <style lang="less" scoped>
 .panorama {
+  .upload-btn-in-table {
+    width: 100px;
+    height: 36px;
+    background: linear-gradient(144deg, #00AEFB 0%, #0076F6 100%);
+    border-radius: 22px;
+    border: none;
+    font-size: 14px;
+    color: #FFFFFF;
+    margin-top: 20px;
+  }
+  .hover-tips.hover-tips-upload-icon {
+    &:hover {
+      color: #fff !important;
+      cursor: default;
+    }
+  }
 }
 </style>
 <style lang="less" scoped>

src/views/material/pano/index.vue

@@ -169,7 +169,6 @@ import config from "@/config";
 
 import uploadui from "../components/uploadui";
 
-
 import {
   getMaterialList,
   uploadMaterial,
@@ -178,12 +177,12 @@ import {
   uploadCover,
   checkMStatus,
 } from "@/api";
+import {PAGE_SIZE} from '@/config'
 
 // 1切图，2失败，3成功
 
 const TYPE = "pano";
 const LONGPOLLINGTIME = 10;
-const PAGE_SIZE = 20;
 
 export default {
   name: 'Pano',