素材选择弹窗加无限滚动状态提示

packages/qjkankan-editor/src/api/index.js

@@ -123,9 +123,7 @@ export function getPanoInfo(data, ok, no) {
  * @param {*} no 
  */
  export function getSceneList(data, ok, no) {
-    $waiting.show()
     return http.postJson(`${URL_FILL}/manage/work/select/4dkk/${data.workId || number()}`, data, (result)=>{
-        $waiting.hide()
         return ok(result)
     }, no)
 }
@@ -475,9 +473,7 @@ export function setListSort(data, ok, no) {
     // if (data.urlSelect) {
     //     url = `${URL_FILL}/manage/fodder/select/${data.type}/${number()}`
     // }
-    $waiting.show()
     return http.postJson(url, data, (result)=>{
-        $waiting.hide()
         console.log(result);
         // 处理旧版本时上传的素材没有新版本新加入的字段的问题
         if (result && result.code === 0 && result.data.list) {
@@ -492,7 +488,6 @@ export function setListSort(data, ok, no) {
         }
         return ok(result)
     }, (err) => {
-      $waiting.hide()
       return no(err)
     })
 }

packages/qjkankan-editor/src/components/materialListInMaterialSelector.vue

@@ -206,6 +206,13 @@
             </span>
           </span>
         </div>
+        <LoadingPoints
+          v-show="isRequestingMoreData"
+          :isDarkTheme="isDarkTheme"
+        />
+        <div class="no-more-data" v-show="!hasMoreData">
+          - {{$i18n.t('gather.no_more_data')}} -
+        </div>
       </div>
       <!-- 无数据时的提示 -->
       <div v-show="!(listLocalLength !== 0 || hasMoreData)" class="no-data">
@@ -259,6 +266,7 @@ import config from "@/config";
 
 import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
 import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
+import LoadingPoints from "@/components/shared/LoadingPoints.vue";
 
 import folderMixin from "./materialSelectorFolderMixin.js";
 
@@ -266,6 +274,7 @@ export default {
   components: {
     FileInput,
     RadioOrCheckbox,
+    LoadingPoints,
   },
   mixins: [
     folderMixin,
@@ -762,6 +771,13 @@ export default {
           }
         }
       }
+      .no-more-data {
+        margin-top: 16px;
+        margin-bottom: 16px;
+        text-align: center;
+        font-size: 12px;
+        color: #969799;
+      }
     }
 
     >.no-data {

packages/qjkankan-editor/src/components/materialSelectorFromWorkForEditor.vue

@@ -60,6 +60,9 @@
             <span class="ellipsis" v-else v-title="item.sceneTitle">{{item.sceneTitle}}</span>
           </span>
         </div>
+        <div class="no-more-data">
+          - {{$i18n.t('gather.no_more_data')}} -
+        </div>
       </div>
       <!-- 无数据时的提示 -->
       <div v-show="!(panoList.length !== 0)" class="no-data">
@@ -105,6 +108,9 @@
             <span class="ellipsis" v-else v-title="item.sceneTitle">{{item.sceneTitle}}</span>
           </span>
         </div>
+        <div class="no-more-data">
+          - {{$i18n.t('gather.no_more_data')}} -
+        </div>
       </div>
       <!-- 无数据时的提示 -->
       <div v-show="!(scene3DList.length !== 0)" class="no-data">
@@ -398,6 +404,13 @@ export default {
         }
       }
     }
+    .no-more-data {
+      margin-top: 16px;
+      margin-bottom: 16px;
+      text-align: center;
+      font-size: 12px;
+      color: #969799;
+    }
   }
   > .no-data {
     height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);

packages/qjkankan-editor/src/components/shared/LoadingPoints.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="loading-points"
+    :class="{
+      dark: isDarkTheme
+    }"
+  >
+    <div
+      v-for="n in 4"
+      :key="n"
+      :class="{
+        active: currentIdx === n
+      }"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isDarkTheme: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      currentIdx: 1,
+      intervalId: null,
+    }
+  },
+  mounted() {
+    this.intervalId = setInterval(() => {
+      this.currentIdx++
+      if (this.currentIdx === 5) {
+        this.currentIdx = 1
+      }
+    }, 250);
+  },
+  beforeDestroy() {
+    clearInterval(this.intervalId)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.loading-points {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  > div {
+    width: 6px;
+    height: 6px;
+    background: rgba(0,118,246,0.2);
+    border-radius: 50%;
+    &.active {
+      background: @color;
+    }
+  }
+}
+
+.loading-points.dark {
+  > div {
+    background: rgba(255,255,255,0.3);
+    &.active {
+      background: #fff;
+    }
+  }
+}
+</style>

packages/qjkankan-editor/src/lang/_zh.json

@@ -650,7 +650,9 @@
     "at_least_one_scene": "至少添加一个场景才可预览，请前往“场景导航”添加",
     "exitVr": "退出VR模式",
 
-    "root_dir": "根目录"
+    "root_dir": "根目录",
+
+    "no_more_data": "没有更多数据了"
   },
   "personal_center": {
     "personal_center": "个人中心",

packages/qjkankan-editor/src/views/hotspot/hotspotType/scene.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import Selector from "@/components/materialSelectorFromWorkForEditor.vue";
+import Selector from "@/components/materialSelectorFromWork.vue";
 
 export default {
   props:['scene'],

packages/qjkankan-editor/src/views/navigation/initialSceneSettings.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { mapGetters } from "vuex";
-import Selector from "@/components/materialSelectorFromWorkForEditor.vue";
+import Selector from "@/components/materialSelectorFromWork.vue";
 
 export default {
   components:{