编辑器-热点-添加或编辑热点-图片热点

(cherry picked from commit 4d58299154fa112506fb382a2c79808a2488111c)

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

@@ -1,42 +1,49 @@
 <template>
-  <div>
-    <div class="medias">
-    <div class="btn-push">
-      <span v-if="images.length<=0">请选择图片<br/>不超过10MB</span>
-      <ul class="image-con" v-else>
-        <li v-for="(item,i) in images" :key="i">
-          <img :src="item.icon||$thumb" alt="">
-          <div class="del">
-              <span @click="del(item)" class="ui-button submit">删除</span>
+  <div class="image-effect-setting">
+
+    <div class="image-list-wrap">
+      <button class="add-btn" v-if="images.length === 0" @click="selectHandle">
+        <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
+        <div>添加图片</div>
+      </button>
+      <ul class="image-list" v-else>
+        <button class="add-btn" @click="selectHandle">
+          <div class="inner-wrap">
+            <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
+            <div>添加</div>
           </div>
+        </button>
+        <li v-for="(item,i) in images" :key="i">
+          <img class="thumb" :src="item.icon || $thumb" alt="">
+          <button class="delete-btn" @click="del(item)">
+            <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>
         </li>
       </ul>
     </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="['image']"
+      />
+    </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:['image'],
   data(){
     return {
@@ -112,73 +119,106 @@ export default {
 }
 </script>
 
-<style lang="less" src="./style.less"></style>
-
 <style lang="less" scoped>
-.ui-button{
-  width: 100%;
-  margin-top: 10px;
-}
-.medias{
-  min-height: 216px;
-  overflow-y: auto;
-  @gap:6px;
-.image-con{
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  padding: @gap;
-  width: 100%;
-  position: relative;
-  >li{
-    width: calc((100% - (@gap * 3)) / 3);
-    height: 59px;
-    margin-bottom: @gap;
+.image-effect-setting {
+  > .image-list-wrap {
+    min-height: 242px;
+    background: #1A1B1D;
+    border-radius: 2px;
+    border: 1px solid #404040;
     position: relative;
-    overflow: hidden;
-    margin-right: @gap;
-    >img{
-      height: 100%;
-      position: absolute;
-      transform: translate(-50%,-50%);
+    padding: 8px;
+    > .add-btn {
       top: 50%;
       left: 50%;
-    }
-    .del{
-      display: none;
+      transform: translate(-50%, -50%);
       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;
-        width: auto;
-        padding: 0 10px;
-        margin: 0;
-        line-height: 24px;
-        height: 24px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%,-50%);
-        min-width: unset;
-        width: 90%;
-        font-size: 12px;
+      background: none;
+      border: none;
+      color: @color;
+      cursor: pointer;
+      > img {
+        width: 30px;
+      }
+      > div {
+        margin-top: 6px;
+        font-size: 14px;
       }
     }
-    &:nth-of-type(3n){
-      margin-right: 0;
-    }
-    &:hover{
-      .del{
-        display: block;
+    > .image-list {
+      margin-right: -4px;
+      margin-bottom: -8px;
+      > .add-btn {
+        background: none;
+        border-radius: 2px;
+        border: 2px solid #0076F6;
+        color: @color;
+        cursor: pointer;
+        display: inline-block;
+        width: 67px;
+        height: 67px;
+        margin-right: 4px;
+        margin-bottom: 8px;
+        position: relative;
+        vertical-align: bottom;
+        > .inner-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          > img {
+            width: 18px;
+          }
+          > div {
+            margin-top: 4px;
+            font-size: 12px;
+          }
+        }
+      }
+      > li {
+        display: inline-block;
+        width: 67px;
+        height: 67px;
+        margin-right: 4px;
+        margin-bottom: 8px;
+        position: relative;
+        > .thumb {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 2px;
+        }
+        > .delete-btn {
+          position: absolute;
+          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%;
+          }
+        }
       }
     }
   }
 }
-}
 </style>