【我的素材-音频、视频】照搬全景图片页面的改动

src/views/material/audio/audio.js

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

src/views/material/audio/index.vue

@@ -3,63 +3,72 @@
     <div class="top">
       <crumbs :list="tablist" />
       <!-- <audio controls :src="`https://houseoss.4dkankan.com/chuanshan/audio/testaudio.mp3`"></audio> -->
+    </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">请上传20MB以内、mp3格式的音频</div>
+            </div>
+          </i>
+          <upload
+            ref="uploadFile"
+            :failString="'格式错误，请上传20MB以内、mp3格式的音频'"
+            :limitFailStr="'过大，请上传20MB以内、mp3格式的音频'"
+            accept-type="audio/mp3"
+            media-type="audio"
+            :limit="20"
+            @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="'格式错误，请上传20MB以内、mp3格式的音频'"
-          :limitFailStr="'过大，请上传20MB以内、mp3格式的音频'"
-          accept-type="audio/mp3"
-          media-type="audio"
-          :limit="20"
-          @file-change="onFileChange"
-        ></upload>
-        <template v-if="showList">
-          <UploadList
-            @close="
-              () => {
-                showList = false;
-              }
-            "
-            :list="uploadList"
-            @del="delUploadItem"
-          />
-        </template>
-      </button>
-    </div>
     <div class="list">
       <tableList
-        v-if="list.length > 0"
         @selection-change="
           (data) => {
             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 }}
@@ -74,7 +83,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>
@@ -96,19 +105,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
@@ -121,19 +127,17 @@
 </template>
 
 <script>
+import config from "@/config";
 import tableList from "@/components/table";
 import crumbs from "@/components/crumbs";
 import { data } from "./audio";
 import rename from "../popup/rename";
-import Paging from "../components/paging";
 import vAudio from "@/components/audio";
 
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
 
-const TYPE = "audio";
-
 import {
   getMaterialList,
   uploadMaterial,
@@ -141,18 +145,20 @@ import {
   delMaterial,
 } from "@/api";
 
+const TYPE = "audio";
+
 export default {
   components: {
     tableList,
     crumbs,
     rename,
-    Paging,
     Upload,
     vAudio,
     UploadList,
   },
   data() {
     return {
+      config,
       showRename: false,
       showList: false,
       popupItem: "",
@@ -166,27 +172,15 @@ export default {
         },
       ],
       list: [],
+      hasMoreData: true,
+      isRequestingMoreData: false,
       uploadList: [],
       isClickSearch: "",
-      paging: {
-        pageSize: 8,
-        pageNum: 1,
-        total: 0,
-        showSize: 4,
-        current: 1,
-      },
     };
   },
   mounted() {
-    this.getMaterialList();
   },
   watch: {
-    "paging.pageNum": function () {
-      this.getMaterialList();
-    },
-    "$route.name": function (newVal) {
-      console.log(newVal);
-    },
   },
   methods: {
     stopAllAudio() {
@@ -312,35 +306,42 @@ export default {
                   }
                 }
               });
-              this.getMaterialList();
+              this.getMoreMaterialItem();
             }
           });
       });
     },
-    changeCurrent(data) {
-      this.paging.pageNum = data;
+    refreshList() {
+      console.log('refresh');
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      console.log(this.$refs);
+      this.$refs['test'].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 / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
         },
         (data) => {
-          this.list = [];
-          setTimeout(() => {
-            this.list = 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;
+          const newData = data.data.list.map((i) => {
+            i.fileSize = changeByteUnit(Number(i.fileSize));
+            return i;
           });
+          this.list = this.list.concat(newData)
+          if (this.list.length === data.data.total) {
+            this.hasMoreData = false
+          }
+          this.isRequestingMoreData = false
+        },
+        () => {
+          this.isRequestingMoreData = false
         }
       );
     },
@@ -349,8 +350,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.panorama {
-}
 </style>
 <style lang="less" scoped>
 @import "../style.less";

src/views/material/image/index.vue

@@ -131,6 +131,7 @@
 </template>
 
 <script>
+import config from "@/config";
 import tableList from "@/components/table";
 import crumbs from "@/components/crumbs";
 import { data } from "./image";
@@ -148,8 +149,6 @@ import {
   delMaterial,
 } from "@/api";
 
-import {PAGE_SIZE} from '@/config'
-
 const TYPE = "image";
 
 export default {
@@ -163,6 +162,7 @@ export default {
   },
   data() {
     return {
+      config,
       showPreview: false,
       showRename: false,
       showList: false,
@@ -321,8 +321,8 @@ export default {
       this.isRequestingMoreData = true
       getMaterialList(
         {
-          pageNum: Math.floor(this.list.length / PAGE_SIZE) + 1,
-          pageSize: PAGE_SIZE,
+          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
         },
@@ -347,24 +347,6 @@ export default {
 </script>
 
 <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>
 @import "../style.less";

src/views/material/pano/index.vue

@@ -156,6 +156,7 @@
 </template>
 
 <script>
+import config from "@/config";
 import tableList from "@/components/table/index.vue";
 import crumbs from "@/components/crumbs/index.vue";
 import { data } from "./pano";
@@ -165,7 +166,6 @@ import cover from "../popup/cover";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
-import config from "@/config";
 
 import uploadui from "../components/uploadui";
 
@@ -177,7 +177,6 @@ import {
   uploadCover,
   checkMStatus,
 } from "@/api";
-import {PAGE_SIZE} from '@/config'
 
 // 1切图，2失败，3成功
 
@@ -438,8 +437,8 @@ export default {
       this.isRequestingMoreData = true
       getMaterialList(
         {
-          pageNum: Math.floor(this.list.length / PAGE_SIZE) + 1,
-          pageSize: PAGE_SIZE,
+          pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
           islongpolling
@@ -465,24 +464,6 @@ export default {
 </script>
 
 <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>
 @import "../style.less";

src/views/material/style.less

@@ -332,3 +332,24 @@
     color: #FA5555!important;
   }
 }
+
+// 素材列表为空时，表格里的上传素材按钮的样式
+.upload-btn-in-table {
+  cursor: pointer;
+  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;
+}
+
+// 左上角上传素材按钮的提示icon，hover时的样式和一般的有tooltip的元素不一样
+.hover-tips.hover-tips-upload-icon {
+  &:hover {
+    color: #fff !important;
+    cursor: default;
+  }
+}

src/views/material/video/index.vue

@@ -2,49 +2,56 @@
   <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">请上传200MB以内、mp4格式的视频</div>
+            </div>
+          </i>
+          <upload
+            ref="uploadFile"
+            :failString="'格式错误，请上传200MB以内、mp4格式的视频'"
+            :limitFailStr="'过大，请上传200MB以内、mp4格式的视频'"
+            accept-type="video/mp4"
+            media-type="video"
+            :limit="200"
+            @file-change="onFileChange"
+          ></upload>
+          <template v-if="showList">
+            <UploadList
+              @close="
+                () => {
+                  showList = false;
+                }
+              "
+              :list="uploadList"
+              @del="delUploadItem"
+            />
+          </template>
+        </button>
+      </div>
       <div class="filter">
-        <div>
-          <input
-            type="text"
-            v-model="searchKey"
-            @keyup.enter="(paging.current = 1) && getMaterialList()"
-            placeholder="搜索素材"
-          />
-          <i
-            @click="(paging.current = 1) && getMaterialList()"
-            class="iconfont iconbs_search"
-          ></i>
+          <div>
+            <i
+              @click="refreshList"
+              class="iconfont icon-works_search"
+            ></i>
+            <input
+              type="text"
+              v-model="searchKey"
+              @keyup.enter="refreshList"
+              placeholder="搜索文件或素材"
+            />
+          </div>
         </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="'格式错误，请上传200MB以内、mp4格式的视频'"
-          :limitFailStr="'过大，请上传200MB以内、mp4格式的视频'"
-          accept-type="video/mp4"
-          media-type="video"
-          :limit="200"
-          @file-change="onFileChange"
-        ></upload>
-        <template v-if="showList">
-          <UploadList
-            @close="
-              () => {
-                showList = false;
-              }
-            "
-            :list="uploadList"
-            @del="delUploadItem"
-          />
-        </template>
-      </button>
     </div>
     <div class="list">
       <tableList
@@ -53,6 +60,8 @@
             selectedArr = data;
           }
         "
+        @request-more-data="getMoreMaterialItem"
+        :canRequestMoreData="hasMoreData && !isRequestingMoreData"
         :header="tabHeader"
         :showLine="true"
         :selection="false"
@@ -72,7 +81,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>
@@ -95,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
@@ -125,11 +131,11 @@
 </template>
 
 <script>
+import config from "@/config";
 import tableList from "@/components/table";
 import crumbs from "@/components/crumbs";
 import { data } from "./video";
 import rename from "../popup/rename";
-import Paging from "../components/paging";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
@@ -150,17 +156,16 @@ export default {
     preview,
     crumbs,
     rename,
-    Paging,
     UploadList,
     Upload,
   },
   data() {
     return {
+      config,
       showRename: false,
       showList: false,
       showPreview: false,
       popupItem: "",
-      isClickSearch: "",
       tabHeader: data,
       selectedArr: [],
       searchKey: "",
@@ -171,23 +176,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: {
     handleRename(data) {
@@ -300,33 +297,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 / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
           searchKey: this.searchKey,
           type: TYPE,
         },
         (data) => {
-          this.list = data.data.list.map((i) => {
-            i.icon = i.ossPath + this.$videoImg;
+          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
         }
       );
     },
@@ -335,8 +340,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.panorama {
-}
 </style>
 <style lang="less" scoped>
 @import "../style.less";

src/views/material/video/video.js

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