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

(cherry picked from commit 0ac0a31a2162865dbca057e95b42ea58c0abe3ea)

packages/qjkankan-editor/src/views/base/backgroundMusicSettings.vue

@@ -103,6 +103,9 @@ export default {
     color: #0076F6;
     font-size: 14px;
     cursor: pointer;
+    &:hover {
+      border-color: @color;
+    }
     i {
       font-size: 14px;
     }
@@ -120,6 +123,7 @@ export default {
     position: relative;
     &:hover {
       color: #0076F6;
+      border-color: @color;
       > .audio-control {
         display: inline-block;
       }

packages/qjkankan-editor/src/views/explanation/explanationSettings.vue

@@ -110,6 +110,9 @@ export default {
   > button {
     width: 100%;
     margin-top: 16px;
+    &:hover {
+      border-color: @color;
+    }
     i {
       font-size: 14px;
     }
@@ -127,6 +130,7 @@ export default {
     position: relative;
     &:hover {
       color: #0076F6;
+      border-color: @color;
       > .audio-control {
         display: inline-block;
       }

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

@@ -1,42 +1,48 @@
 <template>
-  <div>
-    <div class="medias">
-    <div class="btn-push">
-      <span v-if="!tAudio.id">请选择音频素材</span>
-      <div class="audio-con" v-else>
-          <span>{{tAudio.name}}</span>
-          <div class="del">
-              <span @click="del" class="ui-button submit">删除</span>
-          </div>
+  <div class="audio-hotspot-setting">
+    <button class="add-btn" v-if="!tAudio.id" @click="selectHandle">
+      <i class="iconfont icon-editor_add"></i>
+      添加音频
+    </button>
+    <template v-else>
+      <div class="music-display" @click.self="onClickCurrentMusic">
+        <Audio ref="my-audio" class="audio-control" :backgroundColor="'#1A1B1D'" :myAudioUrl="tAudio.ossPath"></Audio>
+        <div class="name" v-title="tAudio.name" @click="onClickCurrentMusic">{{tAudio.name}}</div>
+        <i class="iconfont icon-editor_list_delete" @click.stop="del"></i>
       </div>
-    </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"
+      <button class="change-btn" @click="selectHandle">
+        <i class="iconfont icon-editor_update"></i>
+        更换音频
+      </button>
+    </template>
+
+    <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="['audio']"
+        initialMaterialType="audio"
+      />
+    </div>
+
   </div>
 </template>
 
 <script>
 import { getMaterialList} from "@/api";
-import Table from "@/components/tableSelect";
 import { changeByteUnit } from '@/utils/file'
+import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
+import Audio from "@/components/audio/audioForEditor.vue";
+
 
 export default {
-  components:{Table},
   props:['audio'],
-  data(){
+  components: {
+    MaterialSelectorForEditor,
+    Audio,
+  },
+  data() {
     return {
       type:'audio',
       tAudio:{...this.audio},
@@ -52,6 +58,11 @@ export default {
     }
   },
   methods:{
+    onClickCurrentMusic() {
+      if (this.$refs['my-audio']) {
+        this.$refs['my-audio'].switchPlayPause()
+      }
+    },
     del(){
       this.tAudio = ''
     },
@@ -69,6 +80,7 @@ export default {
     handleSelect(data){
       this.tAudio = {...data[0]}
       this.isShowSelect = false
+      console.log(this.tAudio);
     },
     getMaterialList() {
       getMaterialList(
@@ -109,63 +121,93 @@ export default {
 }
 </script>
 
-<style lang="less" src="./style.less"></style>
-
 <style lang="less" scoped>
-.ui-button{
-  width: 100%;
-  margin-top: 10px;
-}
-.medias{
-  min-height: 70px;
-  overflow-y: auto;
-.audio-con{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  >span{
-    position: absolute;
-    transform: translate(-50%,-50%);
-    top: 50%;
-    left: 50%;
-    width: 90%;
-    color: @color;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+.audio-hotspot-setting {
+  > .add-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;
+    }
   }
-  .del{
+  > .music-display {
+    cursor: pointer;
+    margin-top: 16px;
+    width: 100%;
+    height: 40px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
+    color: #fff;
+    font-size: 14px;
+    position: relative;
+    &:hover {
+      color: #0076F6;
+      border-color: @color;
+      > .audio-control {
+        display: inline-block;
+      }
+      > i {
+        display: inline-block;
+      }
+    }
+    > .audio-control {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 18px;
       display: none;
+    }
+    > .name {
       position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 9;
-      background: rgba(0, 0, 0, 0.5);
-      >.ui-button{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        padding: 0 10px;
-        margin: 0;
-        line-height: 24px;
-        height: 24px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%);
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 65%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+    }
+    > i {
+      display: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 18px;
+      &:hover {
+        color: #FA5555;
       }
     }
-    &:nth-of-type(3n){
-      margin-right: 0;
+  }
+  > .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;
     }
-    &:hover{
-      .del{
-        display: block;
-      }
+    i {
+      font-size: 14px;
     }
-}
+  }
 }
 </style>