编辑器-热点-添加或编辑热点-视频热点

(cherry picked from commit 656accc9c6d749f9415772634de267c59d4ead81)

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

@@ -14,7 +14,11 @@
       </a>
       <a v-if="selectableType.includes('audio')" class="material-tab-item" @click.prevent="currentMaterialType = 'audio'">
         <span class="text">音频</span>
-        <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
+        <div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
+      </a>
+      <a v-if="selectableType.includes('video')" class="material-tab-item" @click.prevent="currentMaterialType = 'video'">
+        <span class="text">视频</span>
+        <div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
       </a>
       <a v-if="selectableType.includes('3D')" class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
         <span class="text">三维场景</span>
@@ -170,6 +174,53 @@
       </div>
     </div>
 
+    <div class="table table-video" v-show="currentMaterialType === 'video'">
+      <div class="table-head-row">
+        <span class="table-head">1</span>
+        <span class="table-head" v-for="(item,i) in tableHeadersForVideo" :key="i">{{item.name}}</span>
+      </div>
+      <div
+        v-if="videoList.length !== 0 || hasMoreVideoData"
+        class="table-body"
+        v-infinite-scroll="requestMoreVideoData"
+        :infinite-scroll-disabled="!hasMoreVideoData || isRequestingMoreVideoData"
+      >
+        <div class="table-body-row" v-for="(item,i) in videoList" :key="i">
+          <span class="table-data">
+            <div class="checkbox">
+              <!-- 负责功能 -->
+              <input
+                type="checkbox"
+                @change="e => selectItem(item, e)"
+                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
+              >
+              <!-- 负责外观 -->
+              <span class="for-outer-circle"></span>
+              <span class="for-inner-circle"></span>
+            </div>
+          </span>
+          <span class="table-data" v-for="(sub,idx) in tableHeadersForVideo" :key="idx">
+            <div v-if="sub.type=='image'" class="list-img">
+              <img :src="item[sub.key]" alt="">
+            </div>
+            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- 无数据时的提示 -->
+      <div v-if="videoList.length === 0 && !hasMoreVideoData" class="no-data">
+        <div v-if="latestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
+          <span>{{'未搜索到结果~'}}</span>
+        </div>
+        <div v-if="!latestUsedSearchKey">
+          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
+          <span>{{'暂无素材~'}}</span>
+        </div>
+      </div>
+    </div>
+
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
       <div class="table-head-row">
         <span class="table-head">1</span>
@@ -258,6 +309,7 @@ export default {
           'image',
           'pano',
           'audio',
+          'video',
           '3D',
         ]
       },
@@ -288,6 +340,8 @@ export default {
           this.refreshMaterialList('pano')
         } else if (newVal === 'audio' && this.audioList.length === 0) {
           this.refreshMaterialList('audio')
+        } else if (newVal === 'video' && this.videoList.length === 0) {
+          this.refreshMaterialList('video')
         } else if (newVal === '3D' && this.scene3DList.length === 0) {
           this.refreshMaterialList('3D')
         }
@@ -311,6 +365,11 @@ export default {
         return ['ossPath', 'name', 'fileSize'].includes(item.key)
       })
     },
+    tableHeadersForVideo() {
+      return this.$MAPTABLEHEADER['video'].filter(item => {
+        return ['icon', 'name', 'fileSize'].includes(item.key)
+      })
+    },
     tableHeadersFor3D() {
       return this.$MAPTABLEHEADER['scene'].filter(item => {
         return ['thumb', 'sceneName', 'createTime'].includes(item.key)
@@ -322,6 +381,7 @@ export default {
       imageList: [],
       panoList: [],
       audioList: [],
+      videoList: [],
       scene3DList: [],
       
       select: [],
@@ -333,10 +393,12 @@ export default {
       isRequestingMoreImageData: false,
       isRequestingMorePanoData: false,
       isRequestingMoreAudioData: false,
+      isRequestingMoreVideoData: false,
       isRequestingMore3DData: false,
       hasMoreImageData: true,
       hasMorePanoData: true,
       hasMoreAudioData: true,
+      hasMoreVideoData: true,
       hasMore3DData: true,
     }
   },
@@ -457,6 +519,37 @@ export default {
         }
       );
     },
+    requestMoreVideoData() {
+      this.isRequestingMoreVideoData = true
+      const latestUsedSearchKey = this.searchKey
+      getMaterialList(
+        {
+          pageNum: Math.floor(this.videoList.length / config.PAGE_SIZE) + 1,
+          pageSize: config.PAGE_SIZE,
+          searchKey: this.searchKey,
+          type: 'video',
+        },
+        (data) => {
+          const newData = data.data.list.map((i) => {
+            i.fileSize = changeByteUnit(Number(i.fileSize));
+            i.icon = i.ossPath + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto';
+            i.createTime = i.createTime.substring(0, i.createTime.length - 3)
+            i.updateTime = i.updateTime.substring(0, i.updateTime.length - 3)
+            return i;
+          });
+          this.videoList = this.videoList.concat(newData)
+          if (this.videoList.length === data.data.total) {
+            this.hasMoreVideoData = false
+          }
+          this.isRequestingMoreVideoData = false
+          this.latestUsedSearchKey = latestUsedSearchKey
+        },
+        () => {
+          this.isRequestingMoreVideoData = false
+          this.latestUsedSearchKey = latestUsedSearchKey
+        }
+      );
+    },
     requestMore3DData() {
       this.isRequestingMore3DData = true
       const latestUsedSearchKey = this.searchKey
@@ -748,6 +841,24 @@ export default {
   }
 }
 
+.table-video .table-head,
+.table-video .table-data {
+  &:nth-of-type(1) {
+    width: 50px;
+    color: transparent;
+  }
+  &:nth-of-type(2) {
+    width: calc(116px - 50px);
+  }
+  &:nth-of-type(3) {
+    width: calc(416px - 116px);
+    padding-right: 30px;
+  }
+  &:nth-of-type(4) {
+    width: calc(100% - 416px);
+  }
+}
+
 .table-3D .table-head,
 .table-3D .table-data {
   &:nth-of-type(1) {

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

@@ -1,40 +1,48 @@
 <template>
-  <div>
-    <div class="medias">
-    <div class="btn-push">
-      <span v-if="!tVideo.id">请选择视频素材</span>
-      <div class="video-con" v-else>
-          <img :src="tVideo.icon||$thumb" alt="">
-          <div class="del">
-              <span @click="del" class="ui-button submit">删除</span>
-          </div>
+  <div class="video-hotspot-setting">
+
+    <div class="add-btn-wrap" v-if="!tVideo.id">
+      <button @click="selectHandle">
+        <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
+        <div>添加视频</div>
+      </button>
+    </div>
+
+    <div class="has-video-wrap" v-else>
+      <div class="thumb-wrap">
+        <img class="thumb" :src="tVideo.icon||$thumb" alt="">
+        <button class="delete-btn" @click="del">
+          <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
+          <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
+        </button>
       </div>
+      <button class="change-btn" @click="selectHandle">
+        <i class="iconfont icon-editor_update"></i>
+        更换视频
+      </button>
     </div>
-  </div>
-  <button class="ui-button submit" @click="selectHandle">选择视频</button>
-  <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
-      <Table
-        :list="list"
-        :tabHeader="$MAPTABLEHEADER[type]"
-        @updateList="update"
+
+    <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
+      <MaterialSelectorForEditor
+        title="选择视频"
         @cancle="isShowSelect = false"
-        :title="`选择${$MARERIALSTR[type]}`"
-        @changeCurrent="changeCurrent"
-        :paging="paging"
         @submit="handleSelect"
-      >
-    </Table>
-  </div>
+        :selectableType="['video']"
+        initialMaterialType="video"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import { getMaterialList} from "@/api";
-import Table from "@/components/tableSelect";
 import { changeByteUnit } from '@/utils/file'
+import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
 
 export default {
-  components:{Table},
+  components:{
+    MaterialSelectorForEditor,
+  },
   props:['video'],
   data(){
     return {
@@ -108,60 +116,96 @@ export default {
 }
 </script>
 
-<style lang="less" src="./style.less"></style>
-
 <style lang="less" scoped>
-.ui-button{
-  width: 100%;
-  margin-top: 10px;
-}
-.medias{
-  min-height: 122px;
-  overflow-y: auto;
-.video-con{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  >img{
-    position: absolute;
-    transform: translate(-50%,-50%);
-    top: 50%;
-    left: 50%;
-    height: 100%;
-    color: @color;
-  }
-  .del{
-      display: none;
+.video-hotspot-setting {
+  > .add-btn-wrap {
+    height: 120px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    position: relative;
+    > button {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       position: absolute;
-      left: 0;
-      top: 0;
+      background: none;
+      border: none;
+      color: @color;
+      cursor: pointer;
+      > img {
+        width: 30px;
+      }
+      > div {
+        margin-top: 6px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  > .has-video-wrap {
+    > .thumb-wrap {
+      border-radius: 2px;
+      overflow: hidden;
       width: 100%;
-      height: 100%;
-      z-index: 9;
-      background: rgba(0, 0, 0, 0.5);
-      >.ui-button{
-        display: flex;
-        align-items: center;
-        width: auto;
-        padding: 0 10px;
-        margin: 0;
-        line-height: 24px;
-        height: 24px;
+      height: 132px;
+      background: #1A1B1D;
+      border-radius: 2px;
+      border: 1px solid #404040;
+      position: relative;
+      > .thumb {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .delete-btn {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        justify-content: center;
-        transform: translate(-50%,-50%);
+        top: 0;
+        right: 0;
+        width: 20px;
+        height: 20px;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        &:hover {
+          .normal {
+            display: none;
+          }
+          .hover {
+            display: initial;
+          }
+        }
+        .normal {
+          display: initial;
+          width: 100%;
+          height: 100%;
+        }
+        .hover {
+          display: none;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
-    &:nth-of-type(3n){
-      margin-right: 0;
-    }
-    &:hover{
-      .del{
-        display: block;
+    > .change-btn {
+      margin-top: 16px;
+      width: 100%;
+      height: 40px;
+      background: #1A1B1D;
+      border-radius: 2px;
+      border: 1px solid #404040;
+      display: block;
+      color: #0076F6;
+      font-size: 14px;
+      cursor: pointer;
+      &:hover {
+        border-color: @color;
+      }
+      i {
+        font-size: 14px;
       }
     }
-}
+  }
 }
 </style>