编辑器-热点列表页面布局更新；热点设置界面冗余代码删除

packages/qjkankan-editor/src/views/base/coverBase copy.vue

@@ -1,840 +0,0 @@
-<template>
-  <!-- 
-  info里面的数据介绍
-
-封面类型下拉框 coverSelect
-	videoAndImg：图片+视频
-	img：图片
-	video：视频
-
-----------图片
-
-pc端图片地址 coverPc
-
-pc端图片位置 coverPcLoc
-	centen：居中
-	full：全屏
-
-移动端图片地址 coverMo
-
-移动端图片位置 coverMoLoc
-	centen：居中
-	full：全屏
-
-图片的背景设置下拉框 coverImgBac
-	colorFill：纯色填充
-	imgTile：图片平铺
-
-图片背景颜色选择纯色填充的色值 imgColorSelec
-
-图片背景选择图片平铺的图片地址 coverBac
-
---------视频
-
-pc端视频地址 videoPc
-
-pc端视频位置 videoPcLoc
-	centen：居中
-	full：全屏
-
-移动端视频地址 videoMo
-
-移动端视频位置 videoMoLoc
-	centen：居中
-	full：全屏
-
-视频的背景设置下拉框 coverVideoBac
-	colorFill：纯色填充
-	imgTile：图片平铺
-
-视频背景颜色选择纯色填充的色值 videoColorSelec
-
-视频背景选择图片平铺的图片地址 videoBacImg
-
-视频的进入方式 coverVideoInWay
-	0：播放完不自动进入
-	1：播放完自动进入
-
-视频控件是否显示 coverVideoControl 
-	0：不显示
-	1：显示
-
-视频的出场顺序 coverVideoOrder
-	before：开场图片前
-	later：开场图片后
- -->
-  <div class="coverBase">
-    <!-- 顶上标题 -->
-    <span class="title">{{ coverBase_button }}</span>
-    <i
-      class="iconfont icon-material_prompt tool-tip-for-editor"
-      v-tooltip="coverBase_button_tips"
-    >
-    </i>
-    <br />
-    <div class="cover_pull">
-      <!-- 封面类型选择下拉框 -->
-      <div class="cover_pull_tit">{{ cover_pull_tit }}</div>
-      <Select v-model="coverInfo.coverSelect">
-        <Option
-          v-for="item in selecList"
-          :key="item.type"
-          :label="item.txt"
-          :value="item.type"
-        >
-        </Option>
-      </Select>
-
-      <!-- 关于图片 -->
-      <div class="mainImgBox" v-show="coverInfo.coverSelect !== 'video'">
-        <div class="coverImgTit">{{ coverImgTit }}</div>
-        <div class="coverImgBox">
-          <!-- pc图片 -->
-          <div class="coverImgBox_ll">
-            <div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
-            <div class="coverImgMain">
-              <SelectedImage
-                :imgSrc="info.coverInfo.coverPc"
-                :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
-                @cancel="onCancelPcTip"
-              ></SelectedImage>
-              <div class="imgRight">
-                <!-- 上传图片按钮 -->
-                <button
-                  class="ui-button submit"
-                  @click="
-                    (isShowSelectionWindow = true),
-                      (selectingFor = 'pc'),
-                      (upType = 'image'),
-                      (upTypeSta = 'imgBac')
-                  "
-                >
-                  {{ $i18n.t(`edit_settings.select_image`) }}
-                </button>
-                <!-- 上传提示 -->
-                <div
-                  class="ui-remark"
-                  v-html="$i18n.t(`edit_settings.coverUpTit1`)"
-                ></div>
-                <!-- 选择居中和全屏 -->
-                <div class="coverImglocBox">
-                  <div
-                    :class="{ active: coverInfo.coverPcLoc === 'centen' }"
-                    @click="coverInfo.coverPcLoc = 'centen'"
-                  >
-                    <div class="inco"></div>
-                    <div class="txt">{{ coverImgLoc1 }}</div>
-                  </div>
-                  <div
-                    :class="{ active: coverInfo.coverPcLoc === 'full' }"
-                    @click="coverInfo.coverPcLoc = 'full'"
-                  >
-                    <div class="inco inco2"></div>
-                    <div class="txt">{{ coverImgLoc2 }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="coverImgBox_rr">
-            <div class="tit">{{ $i18n.t(`edit_settings.mobile`) }}</div>
-            <!-- 移动端图片 -->
-            <div class="coverImgMain">
-              <SelectedImage
-                :imgSrc="info.coverInfo.coverMo"
-                :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
-                @cancel="onCancelAppTip"
-              ></SelectedImage>
-              <div class="imgRight">
-                <!-- 上传图片按钮 -->
-                <button
-                  class="ui-button submit"
-                  @click="
-                    (isShowSelectionWindow = true),
-                      (selectingFor = 'mobile'),
-                      (upType = 'image'),
-                      (upTypeSta = 'imgBac')
-                  "
-                >
-                  {{ $i18n.t(`edit_settings.select_image`) }}
-                </button>
-                <!-- 上传提示 -->
-                <div
-                  class="ui-remark"
-                  v-html="$i18n.t(`edit_settings.coverUpTit2`)"
-                ></div>
-                <!-- 选择居中和全屏 -->
-                <div class="coverImglocBox">
-                  <div
-                    :class="{ active: coverInfo.coverMoLoc === 'centen' }"
-                    @click="coverInfo.coverMoLoc = 'centen'"
-                  >
-                    <div class="inco"></div>
-                    <div class="txt">{{ coverImgLoc1 }}</div>
-                  </div>
-                  <div
-                    :class="{ active: coverInfo.coverMoLoc === 'full' }"
-                    @click="coverInfo.coverMoLoc = 'full'"
-                  >
-                    <div class="inco inco2"></div>
-                    <div class="txt">{{ coverImgLoc2 }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 图片背景设置 -->
-        <div class="coverImgBacBox">
-          <div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
-          <Select v-model="coverInfo.coverImgBac">
-            <Option
-              v-for="item in coverImgBacList"
-              :key="item.type"
-              :label="item.txt"
-              :value="item.type"
-            >
-            </Option>
-          </Select>
-          <!-- 选择颜色 -->
-          <div class="imgColorSelec" v-show="coverInfo.coverImgBac === 'colorFill'">
-            <div class="ll">{{ coverInfo.imgColorSelec }}</div>
-            <div
-              class="rr"
-              :style="`background-color: ${coverInfo.imgColorSelec};`"
-            ></div>
-            <ColorPicker
-              @change="imgColorSelecChange"
-              v-model="coverInfo.imgColorSelec"
-              :predefine="predefineColors"
-            >
-            </ColorPicker>
-          </div>
-          <!-- 选择背景图片 -->
-          <div class="imgClolrBacImg" v-show="coverInfo.coverImgBac === 'imgTile'">
-            <SelectedImage
-              :imgSrc="info.coverInfo.coverBac"
-              :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
-              @cancel="onCancelBac"
-            ></SelectedImage>
-            <!-- 上传图片按钮 -->
-            <div class="imgRight">
-              <button
-                class="ui-button submit"
-                @click="
-                  (isShowSelectionWindow = true),
-                    (selectingFor = 'bac'),
-                    (upType = 'image'),
-                    (upTypeSta = 'imgBac')
-                "
-              >
-                {{ $i18n.t(`edit_settings.select_image`) }}
-              </button>
-              <div
-                class="ui-remark"
-                v-html="$i18n.t(`edit_settings.coverUpTit3`)"
-              ></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 关于视频 -->
-      <div class="mainVideoBox" v-show="coverInfo.coverSelect !== 'img'">
-        <div class="coverImgTit">
-          {{ $i18n.t(`edit_settings.coverVideoTit`) }}
-        </div>
-        <div class="coverImgBox">
-          <!-- pc视频 -->
-          <div class="coverImgBox_ll">
-            <div class="tit">{{ $i18n.t(`edit_settings.pc`) }}</div>
-            <div class="coverImgMain">
-              <SelectedImage
-                :imgSrc="info.coverInfo.videoPc"
-                :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
-                @cancel="clearVideoPc"
-              ></SelectedImage>
-              <div class="imgRight">
-                <!-- 上传视频按钮 -->
-                <button
-                  class="ui-button submit"
-                  @click="
-                    (isShowSelectionWindow = true),
-                      (selectingFor = 'pc'),
-                      (upType = 'video'),
-                      (upTypeSta = 'videoBac')
-                  "
-                >
-                  {{ $i18n.t(`edit_settings.select_video`) }}
-                </button>
-                <!-- 上传提示 -->
-                <div
-                  class="ui-remark"
-                  v-html="$i18n.t(`edit_settings.coverUpTit4`)"
-                ></div>
-                <!-- 选择居中和全屏 -->
-                <div class="coverImglocBox">
-                  <div
-                    :class="{ active: coverInfo.videoPcLoc === 'centen' }"
-                    @click="coverInfo.videoPcLoc = 'centen'"
-                  >
-                    <div class="inco"></div>
-                    <div class="txt">{{ coverImgLoc1 }}</div>
-                  </div>
-                  <div
-                    :class="{ active: coverInfo.videoPcLoc === 'full' }"
-                    @click="coverInfo.videoPcLoc = 'full'"
-                  >
-                    <div class="inco inco2"></div>
-                    <div class="txt">{{ coverImgLoc2 }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="coverImgBox_rr">
-            <div class="tit">{{ $i18n.t(`edit_settings.mobile`) }}</div>
-            <!-- 移动端视频 -->
-            <div class="coverImgMain">
-              <SelectedImage
-                :imgSrc="info.coverInfo.videoMo"
-                :defaultImgSrc="require('@/assets/img/coverUpTit2.png')"
-                @cancel="claerVideoMo"
-              ></SelectedImage>
-              <div class="imgRight">
-                <!-- 上传视频按钮 -->
-                <button
-                  class="ui-button submit"
-                  @click="
-                    (isShowSelectionWindow = true),
-                      (selectingFor = 'mobile'),
-                      (upType = 'video'),
-                      (upTypeSta = 'videoBac')
-                  "
-                >
-                  {{ $i18n.t(`edit_settings.select_video`) }}
-                </button>
-                <!-- 上传提示 -->
-                <div
-                  class="ui-remark"
-                  v-html="$i18n.t(`edit_settings.coverUpTit5`)"
-                ></div>
-                <!-- 选择居中和全屏 -->
-                <div class="coverImglocBox">
-                  <div
-                    :class="{ active: coverInfo.videoMoLoc === 'centen' }"
-                    @click="coverInfo.videoMoLoc = 'centen'"
-                  >
-                    <div class="inco"></div>
-                    <div class="txt">{{ coverImgLoc1 }}</div>
-                  </div>
-                  <div
-                    :class="{ active: coverInfo.videoMoLoc === 'full' }"
-                    @click="coverInfo.videoMoLoc = 'full'"
-                  >
-                    <div class="inco inco2"></div>
-                    <div class="txt">{{ coverImgLoc2 }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 视频背景设置 -->
-        <div class="coverImgBacBox">
-          <div class="tit">{{ $i18n.t(`edit_settings.coverImgBacTit`) }}</div>
-          <Select v-model="coverInfo.coverVideoBac">
-            <Option
-              v-for="item in coverImgBacList"
-              :key="item.type"
-              :label="item.txt"
-              :value="item.type"
-            >
-            </Option>
-          </Select>
-          <!-- 选择颜色 -->
-          <div class="imgColorSelec" v-show="coverInfo.coverVideoBac === 'colorFill'">
-            <div class="ll">{{ coverInfo.videoColorSelec }}</div>
-            <div
-              class="rr"
-              :style="`background-color: ${coverInfo.videoColorSelec};`"
-            ></div>
-            <ColorPicker
-              @change="videoColorSelecChange"
-              v-model="coverInfo.videoColorSelec"
-              :predefine="predefineColors"
-            >
-            </ColorPicker>
-          </div>
-          <!-- 选择背景图片 -->
-          <div class="imgClolrBacImg" v-show="coverInfo.coverVideoBac === 'imgTile'">
-            <SelectedImage
-              :imgSrc="info.coverInfo.videoBacImg"
-              :defaultImgSrc="require('@/assets/img/coverUpTit1.png')"
-              @cancel="onCancelBac2"
-            ></SelectedImage>
-            <!-- 上传图片按钮 -->
-            <div class="imgRight">
-              <button
-                class="ui-button submit"
-                @click="
-                  (isShowSelectionWindow = true),
-                    (selectingFor = 'bac'),
-                    (upType = 'image'),
-                    (upTypeSta = 'videoBac')
-                "
-              >
-                {{ $i18n.t(`edit_settings.select_image`) }}
-              </button>
-              <div
-                class="ui-remark"
-                v-html="$i18n.t(`edit_settings.coverUpTit3`)"
-              ></div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 进入方式 -->
-        <div class="coverImgTit">
-          {{ $i18n.t(`edit_settings.coverVideoInWay`) }}
-        </div>
-        <div class="VideoTit">
-          <div class="VideoTitL">
-            {{ $i18n.t(`edit_settings.coverVideoInWayTit`) }}
-          </div>
-          <div class="VideoTitR">
-            <Switcher
-              :value="coverInfo.coverVideoInWay"
-              @change="coverVideoInWayChange"
-            ></Switcher>
-          </div>
-        </div>
-        <!-- 视频控件 -->
-        <div class="coverImgTit">
-          {{ $i18n.t(`edit_settings.coverVideoControl`) }}
-        </div>
-        <div class="VideoTit">
-          <div class="VideoTitL">
-            {{ $i18n.t(`edit_settings.coverVideoControlTit`) }}
-          </div>
-          <div class="VideoTitR">
-            <Switcher
-              :value="coverInfo.coverVideoControl"
-              @change="coverVideoControlChange"
-            ></Switcher>
-          </div>
-        </div>
-        <!-- 出现顺序 -->
-        <div class="coverImgTit">
-          {{ $i18n.t(`edit_settings.coverVideoOrder`) }}
-        </div>
-        <Select v-model="coverInfo.coverVideoOrder">
-          <Option
-            v-for="item in coverVideoOrderList"
-            :key="item.type"
-            :label="item.txt"
-            :value="item.type"
-          >
-          </Option>
-        </Select>
-      </div>
-      <br />
-      <br />
-    </div>
-    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
-      <MaterialSelector
-        :title="$i18n.t(`gather.select_material`)"
-        :isMultiSelection="false"
-        @cancle="isShowSelectionWindow = false"
-        @submit="handleSubmitFromMaterialSelector"
-        :selectableType="[upType]"
-        :initialMaterialType="upType"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import Switcher from "@/components/shared/Switcher";
-import { Select, Option, ColorPicker } from "element-ui";
-import { i18n } from "@/lang";
-import { mapGetters } from "vuex";
-import SelectedImage from "@/components/selectedImageInEditor.vue";
-import MaterialSelector from "@/components/materialSelector.vue";
-export default {
-  name: "coverBase",
-  components: {
-    Select,
-    Option,
-    ColorPicker,
-    Switcher,
-    MaterialSelector,
-    SelectedImage,
-  },
-  data() {
-    return {
-      coverBase_button: i18n.t("edit_settings.coverBase_button"),
-      coverBase_button_tips: i18n.t("edit_settings.coverBase_button_tips"),
-      cover_pull_tit: i18n.t("edit_settings.cover_pull_tit"),
-      coverImgTit: i18n.t("edit_settings.coverImgTit"),
-      coverImgLoc1: i18n.t("edit_settings.coverImgLoc1"),
-      coverImgLoc2: i18n.t("edit_settings.coverImgLoc2"),
-
-      upType: "",
-      upTypeSta: "",
-
-      selecList: [
-        {
-          txt: i18n.t("edit_settings.coverSelecVideoAndImg"),
-          type: "videoAndImg",
-        },
-        { txt: i18n.t("edit_settings.coverSelecImg"), type: "img" },
-        { txt: i18n.t("edit_settings.coverSelecVideo"), type: "video" },
-      ],
-
-      coverInfo: {
-        // 封面类型下拉框数据
-        coverSelect: "img",
-        // 图片pc端位置
-        coverPcLoc: "centen",
-        // 图片移动端位置
-        coverMoLoc: "centen",
-        // 图片的背景设置
-        coverImgBac: "colorFill",
-        // 图片的背景颜色
-        imgColorSelec: "#000000",
-
-        // 有关上传视频
-        // 视频pc端位置
-        videoPcLoc: "centen",
-        // 视频移动端位置
-        videoMoLoc: "centen",
-        // 视频的背景设置
-        coverVideoBac: "colorFill",
-        videoColorSelec: "#000000",
-        // 视频的进入方式
-        coverVideoInWay: 0,
-        // 视频控件是否显示
-        coverVideoControl: 0,
-        // 视频的出现顺序
-        coverVideoOrder: "before",
-      },
-      coverImgBacList: [
-        { txt: i18n.t("edit_settings.coverImgBacSelec1"), type: "colorFill" },
-        { txt: i18n.t("edit_settings.coverImgBacSelec2"), type: "imgTile" },
-      ],
-
-      predefineColors: [
-        "#000000",
-        "#ff4500",
-        "#ff8c00",
-        "#ffd700",
-        "#90ee90",
-        "#00ced1",
-        "#1e90ff",
-        "#c71585",
-      ],
-
-      isShowSelectionWindow: false,
-      selectingFor: "", // 'pc', 'mobile'
-
-      coverVideoOrderList: [
-        { txt: i18n.t("edit_settings.coverVideoOrderTit1"), type: "before" },
-        { txt: i18n.t("edit_settings.coverVideoOrderTit2"), type: "later" },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      info: "info",
-    }),
-  },
-  watch: {
-
-    'coverInfo.coverVideoOrder'(val) {
-      this.info.coverInfocoverVideoOrder = val;
-    },
-
-    'coverInfo.coverSelect'(val) {
-      this.info.coverInfo.coverSelect = val;
-    },
-    'coverInfo.coverPcLoc'(val) {
-      this.info.coverInfo.coverPcLoc = val;
-    },
-    'coverInfo.coverMoLoc'(val) {
-      this.info.coverInfo.coverMoLoc = val;
-    },
-    'coverInfo.coverImgBac'(val) {
-      this.info.coverInfo.coverImgBac = val;
-    },
-    'coverInfo.coverVideoBac'(val) {
-      this.info.coverInfo.coverVideoBac = val;
-    },
-    'coverInfo.videoPcLoc'(val) {
-      this.info.coverInfo.videoPcLoc = val;
-    },
-    'coverInfo.videoMoLoc'(val) {
-      this.info.coverInfo.videoMoLoc = val;
-    },
-  },
-  methods: {
-    // 视频的进入方式
-    coverVideoInWayChange(val) {
-      this.coverInfo.coverVideoInWay = this.info.coverInfo.coverVideoInWay = val;
-    },
-    coverVideoControlChange(val) {
-      this.coverInfo.coverVideoControl = this.info.coverInfo.coverVideoControl = val;
-    },
-    // 图片的颜色选择器改变事件
-    imgColorSelecChange(val) {
-      this.coverInfo.imgColorSelec = val;
-      this.info.coverInfo.imgColorSelec = val;
-    },
-    videoColorSelecChange(val) {
-      this.coverInfo.videoColorSelec = val;
-      this.info.coverInfo.videoColorSelec = val;
-    },
-    handleSubmitFromMaterialSelector(selected) {
-      // 点击确定的时候是选择的图片上传
-      if (this.upTypeSta === "imgBac") {
-        if (this.selectingFor === "pc") this.info.coverInfo.coverPc = selected[0].icon;
-        else if (this.selectingFor === "mobile")
-          this.info.coverInfo.coverMo = selected[0].icon;
-        else this.info.coverInfo.coverBac = selected[0].icon;
-      } else {
-        // 视频上传
-        if (this.selectingFor === "pc") this.info.coverInfo.videoPc = selected[0].icon;
-        else if (this.selectingFor === "mobile")
-          this.info.coverInfo.videoMo = selected[0].icon;
-        else this.info.coverInfo.videoBacImg = selected[0].icon;
-      }
-      this.isShowSelectionWindow = false;
-    },
-    onCancelPcTip() {
-      this.info.coverInfo.coverPc = "";
-    },
-    onCancelAppTip() {
-      this.info.coverInfo.coverMo = "";
-    },
-    onCancelBac() {
-      this.info.coverInfo.coverBac = "";
-    },
-    // 关于视频
-    clearVideoPc() {
-      this.info.coverInfo.videoPc = "";
-    },
-    claerVideoMo() {
-      this.info.coverInfo.videoMo = "";
-    },
-    onCancelBac2() {
-      this.info.coverInfo.videoBacImg = "";
-    },
-  },
-  created() {
-    if(!this.info.coverInfo){
-      this.info.coverInfo={...this.coverInfo}
-    }else{
-      this.coverInfo={...this.info.coverInfo}
-    }
-  },
-  mounted() {
-
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.coverBase {
-  padding: 24px 30px;
-  background: #252526;
-  height: 520px;
-  overflow-y: auto;
-  .title {
-    font-size: 18px;
-    color: #ffffff;
-  }
-  .tool-tip-for-editor {
-    margin-left: 4px;
-    font-size: 12px;
-    cursor: default;
-    position: relative;
-    top: -2px;
-  }
-  .cover_pull {
-    margin-top: 10px;
-    .cover_pull_tit {
-      margin-bottom: 10px;
-      font-size: 14px;
-      color: rgba(255, 255, 255, 0.5);
-    }
-    /deep/.el-select {
-      background: #1a1b1d;
-      border-radius: 4px;
-      border: 1px solid #404040;
-      width: 300px;
-      height: 36px;
-    }
-    /deep/.el-input {
-      height: 36px;
-      line-height: 36px;
-    }
-    /deep/.el-input__inner {
-      color: #fff;
-      height: 36px;
-      line-height: 36px;
-      background-color: transparent;
-      border-color: transparent !important;
-    }
-  }
-
-  .coverImgTit {
-    font-size: 18px;
-    color: #ffffff;
-    margin-top: 16px;
-    margin-bottom: 10px;
-  }
-  .coverImgBox {
-    display: flex;
-    justify-content: space-between;
-    & > div {
-      width: 48%;
-      .tit {
-        font-size: 14px;
-        opacity: 0.5;
-        margin-bottom: 10px;
-      }
-      .coverImgMain {
-        display: flex;
-        .imgBox {
-          width: 136px;
-          height: 136px;
-          background: #1a1b1d;
-          border-radius: 4px;
-          border: 1px solid #404040;
-        }
-        .ui-remark {
-          margin: 12px 0;
-          font-size: 14px;
-        }
-        .coverImglocBox {
-          display: flex;
-          width: 140px;
-          height: 36px;
-          background: #1a1b1d;
-          border-radius: 4px;
-          border: 1px solid #404040;
-          & > div {
-            cursor: pointer;
-            width: 50%;
-            font-size: 14px;
-            color: #fff;
-            opacity: 0.5;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            .inco {
-              margin-top: 2px;
-              width: 16px;
-              height: 16px;
-              position: relative;
-              border: 1px solid #fff;
-              margin-right: 3px;
-              &::before {
-                content: "";
-                position: absolute;
-                top: 1px;
-                left: 3px;
-                width: 8px;
-                height: 12px;
-                background-color: #fff;
-              }
-            }
-            .inco2 {
-              &::before {
-                content: "";
-                position: absolute;
-                top: 1px;
-                left: 1px;
-                width: 12px;
-                height: 12px;
-                background-color: #fff;
-              }
-            }
-          }
-          .active {
-            opacity: 1;
-            background-color: #0076f6;
-          }
-        }
-      }
-    }
-  }
-  .coverImgBacBox {
-    margin-top: 16px;
-    .tit {
-      font-size: 14px;
-      opacity: 0.5;
-      margin-bottom: 10px;
-    }
-  }
-  .imgColorSelec {
-    cursor: pointer;
-    width: 300px;
-    height: 36px;
-    margin-top: 10px;
-    background: #1a1b1d;
-    border-radius: 4px;
-    border: 1px solid #404040;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 12px;
-    align-items: center;
-    position: relative;
-    .rr {
-      width: 20px;
-      height: 20px;
-    }
-    /deep/.el-color-picker {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 10;
-      width: 298px;
-      height: 36px;
-    }
-    /deep/.el-color-picker__trigger {
-      opacity: 0;
-      width: 298px;
-      height: 36px;
-    }
-  }
-  .imgClolrBacImg {
-    margin-top: 10px;
-    width: 334px;
-    display: flex;
-    .ui-remark {
-      margin: 12px 0;
-      font-size: 14px;
-    }
-  }
-  .mainVideoBox {
-    .VideoTit {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      .VideoTitL {
-        font-size: 14px;
-        color: rgba(255, 255, 255, 0.5);
-      }
-    }
-  }
-}
-</style>

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -1,6 +1,10 @@
 <template>
-  <transition appear name="custom-classes-transition" enter-active-class="animated slideInRight speed"
-    leave-active-class="animated slideOutRight speed">
+  <transition
+    appear
+    name="custom-classes-transition"
+    enter-active-class="animated slideInRight speed"
+    leave-active-class="animated slideOutRight speed"
+  >
     <div class="hots-panel" v-show="show">
       <div class="ui-between header">
         <span>{{ editTitle }}{{ $i18n.t('hotspot.hotspot_name') }}</span>
@@ -13,8 +17,11 @@
           <div class="icon-list">
             <div class="margin-handler-layer">
               <ul>
-                <li :class="{ active: item.id == hotspot.icontype }" v-for="(item, i) in hotStyle"
-                  @click="addhotspot(item)" :key="i">
+                <li
+                  :class="{ active: item.id == hotspot.icontype }"
+                  v-for="(item, i) in hotStyle"
+                  @click="addhotspot(item)" :key="i"
+                >
                   <img :src="item.thumb" alt="">
                 </li>
               </ul>
@@ -28,29 +35,64 @@
           <div class="title-setting-title">{{ $i18n.t('hotspot.title_setting') }}</div>
           <div class="switch-wrapper">
             <span class="label">{{ $i18n.t('hotspot.isshow_title') }}</span>
-            <Switcher :value="hotspot.visible" @change="hotspot.visible = !hotspot.visible"></Switcher>
+            <Switcher
+              :value="hotspot.visible"
+              @change="hotspot.visible = !hotspot.visible"
+            />
           </div>
           <div class="title-input-wrapper">
-            <input v-model.trim="hotspot.hotspotTitle" type="text" maxlength="50" :placeholder="$i18n.t('hotspot.title_placeholder')" />
+            <input
+              v-model.trim="hotspot.hotspotTitle"
+              type="text" maxlength="50"
+              :placeholder="$i18n.t('hotspot.title_placeholder')"
+            />
             <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
           </div>
         </div>
         <div class="effect-setting">
           <div class="effect-setting-title">{{$i18n.t('hotspot.effect_settings')}}</div>
-          <combox class="combox" :data="hotSpotTypeList" :selected-id="hotspot.hotspotType"
-            :bottomSpace="comboxBottomSpace" @change="onhotSpotTypeChange"></combox>
-          <component class="effect-setting-component" @sceneSelect="handleSceneSelect" :scene="hotspot.secne"
-            @imageChange="data => { hotspot.image = data }" :image="hotspot.image"
-            @linkChange="data => { hotspot.hyperlink = data }" :link="hotspot.hyperlink"
-            @linkOpenType="data => { hotspot.linkOpenType = data }" :linkOpenType="hotspot.linkOpenType"
-            @textChange="data => { hotspot.textarea = data }" :textarea="hotspot.textarea"
-            @audioChange="data => { hotspot.audio = data }" :audio="hotspot.audio"
-            @videoChange="data => { hotspot.video = data }" :video="hotspot.video" :is="effectSettingComponent" />
+          <combox
+            class="combox"
+            :data="hotSpotTypeList"
+            :selected-id="hotspot.hotspotType"
+            :bottomSpace="comboxBottomSpace"
+            @change="onhotSpotTypeChange"
+          />
+          <component
+            class="effect-setting-component"
+            @sceneSelect="handleSceneSelect"
+            :scene="hotspot.secne"
+            @imageChange="data => { hotspot.image = data }"
+            :image="hotspot.image"
+            @linkChange="data => { hotspot.hyperlink = data }"
+            :link="hotspot.hyperlink"
+            @linkOpenType="data => { hotspot.linkOpenType = data }"
+            :linkOpenType="hotspot.linkOpenType"
+            @textChange="data => { hotspot.textarea = data }"
+            :textarea="hotspot.textarea"
+            @audioChange="data => { hotspot.audio = data }"
+            :audio="hotspot.audio"
+            @videoChange="data => { hotspot.video = data }"
+            :video="hotspot.video"
+            :is="effectSettingComponent"
+          />
         </div>
       </div>
       <div class="ui-between footer" app-border dir-top>
-        <button class="ui-button deepcancel" :class="{ disable: false }" @click="cancel">{{$i18n.t('hotspot.cancel')}}</button>
-        <button class="ui-button submit" :class="{ disable: !canSubmit }" @click="save">{{$i18n.t('hotspot.finish')}}</button>
+        <button 
+          class="ui-button deepcancel"
+          :class="{ disable: false }"
+          @click="cancel"
+        >
+          {{$i18n.t('hotspot.cancel')}}
+        </button>
+        <button 
+          class="ui-button submit"
+          :class="{ disable: !canSubmit }"
+          @click="save"
+        >
+          {{$i18n.t('hotspot.finish')}}
+        </button>
       </div>
     </div>
   </transition>
@@ -62,26 +104,6 @@ import Combox from "@/components/shared/Combox";
 import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher.vue";
 
-let comparisonKey = [
-  'fontSize',
-  'hotspotTitle',
-  'hotspotType',
-  'hyperlink',
-  'icontype',
-  'image',
-  'img',
-  'link',
-  'secne',
-  'size',
-  'textarea',
-  'type',
-  'video'
-]
-
-
-let HTMap = ''
-
-
 export default {
   props: ['show', 'data', 'editTitle'],
   components: {
@@ -100,40 +122,7 @@ export default {
         thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`
       }
     }
-    HTMap = {
-      scene: {
-        key: 'secne',
-        type: 'Object',
-        errortxt: this.$i18n.t('hotspot.secne_errortxt')
-      },
-      audio: {
-        key: 'audio',
-        type: 'String',
-        errortxt: this.$i18n.t('hotspot.audio_errortxt')
-      },
-      video: {
-        key: 'video',
-        type: 'String',
-        errortxt: this.$i18n.t('hotspot.video_errortxt')
-      },
-      image: {
-        key: 'image',
-        type: 'Array',
-        errortxt: this.$i18n.t('hotspot.image_errortxt')
-      },
-      link: {
-        key: 'hyperlink',
-        type: 'String',
-        errortxt: this.$i18n.t('hotspot.link_errortxt')
-      },
-      textarea: {
-        key: 'textarea',
-        type: 'String',
-        errortxt: this.$i18n.t('hotspot.textarea_errortxt')
-      }
-    }
     return {
-      canSave: false,
       hotSpotTypeList: [
         {
           id: 'scene',
@@ -169,15 +158,10 @@ export default {
         min: 0.5,
         max: 2,
       },
-      selectItem: '',
-      styIcon: '',
-      linkicon: '',
-      infoItem: '',
       isAdd: true,
       comboxBottomSpace: 0,
     }
   },
-
   watch: {
     'hotspot.hotspotTitle': function () {
       this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
@@ -204,8 +188,6 @@ export default {
           offset = '-100%'
         }
         this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].y', `${offset}`)
-
-
       }
     },
     'hotspot.fontSize': {
@@ -214,49 +196,31 @@ export default {
           font-family:STXihei;font-size:${newVal}px;`)
       }
     },
-    show(newVal) {
-      if (!newVal) {
-        this.$bus.removeListener('selectUrl', this.listerFn)
-      }
-    }
   },
   beforeDestroy() {
-    this.$bus.removeListener('selectUrl', this.listerFn)
     this.$bus.removeListener('resethotspotTitle', this.listerFnReset)
   },
   computed: {
     ...mapGetters({
       hotspot: 'hotspot',
       backupHotSpot: 'backupHotSpot',
-      currentHPName: "tags/currentHPName"
-
     }),
     effectSettingComponent() {
       let tmp = this.hotspot.hotspotType
       return () => import(`./hotspotType/${tmp}.vue`);
     },
     canSubmit() {
-      let { img, hotspotTitle, hotspotType } = this.hotspot
-      let item = HTMap[hotspotType]
+      let { img, hotspotTitle } = this.hotspot
 
       if (!img) {
-        // return this.$alert({
-        //   content: this.$i18n.t('hotspot.select_hotspot_icon'),
-        // });
         return false
       }
 
-      if (!(hotspotTitle.trim()/* && (hotspotTitle.trim() != this.$i18n.t('hotspot.click_to_comfirm'))*/)) {
-        // return this.$alert({
-        //   content: this.$i18n.t('hotspot.input_hotspot_title'),
-        // });
+      if (!hotspotTitle.trim()) {
         return false
       }
 
-      if (!this.hotspot[item.key] || (item.type == 'Array' && this.hotspot[item.key].length <= 0)) {
-        // return this.$alert({
-        //   content: `${item.errortxt}`,
-        // });
+      if (this.hotspot.hotspotType == 'image' && this.hotspot.image.length <= 0) {
         return false
       }
 
@@ -264,10 +228,6 @@ export default {
     }
   },
   mounted() {
-    this.selectItem = {
-      sceneCode: this.infoItem.link
-    }
-    this.$bus.on('selectUrl', this.listerFn)
     this.$bus.on('resethotspotTitle', this.listerFnReset)
 
     this.$bus.on('delhotspot', () => {
@@ -276,7 +236,7 @@ export default {
 
 
     this.$nextTick(() => {
-      if (this.editTitle != '编辑'&&this.editTitle != this.$i18n.t('hotspot.edit')) {
+      if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
         this.addhotspot(this.hotStyle[0])
         this.rang.value = window.g_hotspotCurrentScale
         this.onRangeChange({ value: window.g_hotspotCurrentScale })
@@ -323,36 +283,6 @@ export default {
       }
     },
 
-    listerFn(data) {
-      this.selectItem = {
-        sceneCode: data.sceneCode
-      }
-      this.infoItem.link = data.sceneCode
-      this.infoItem.thumb = data.icon
-    },
-    isDiffHotSpot() {
-      let flag = false
-      comparisonKey.forEach(item => {
-        if (JSON.stringify(this.hotspot[item]) != JSON.stringify(this.backupHotSpot[item])) {
-          flag = true
-        }
-      })
-      return flag
-    },
-
-    isAddChange() {
-      let flag = false
-      let { hotspotTitle, hotspotType } = this.hotspot
-      let item = HTMap[hotspotType]
-      if (
-        (hotspotTitle.trim() && (hotspotTitle.trim() != '单击确定热点位置'&&hotspotTitle.trim() != this.$i18n.t('hotspot.click_to_comfirm')))
-        || this.hotspot[item.key]
-        || (item.type == 'Array' && this.hotspot[item.key].length > 0)
-      ) {
-        flag = true
-      }
-      return flag
-    },
     cancel() {
       this.$store.commit("SetHotspot", this.backupHotSpot);
       this.$emit("close", {
@@ -371,22 +301,16 @@ export default {
       this.$emit("save", this.hotspot);
     },
     addhotspot(data) {
-
-      console.log(this.isAdd, 'this.isAdd');
-
-      if (this.isAdd && (this.editTitle != '编辑'&&this.editTitle != this.$i18n.t('hotspot.edit'))) {
+      if (this.isAdd && (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit'))) {
         this.isAdd = false
         this.hotspot.img = data.img
         this.hotspot.icontype = data.id
-        this.styIcon = data.id
         this.$bus.emit('addhotspot', this.hotspot)
         this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
           font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
-      }
-      else {
+      } else {
         this.hotspot.img = data.img
         this.hotspot.icontype = data.id
-        this.styIcon = data.id
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)
       }
@@ -394,6 +318,7 @@ export default {
   }
 };
 </script>
+
 <style lang="less" scoped>
 .hots-panel {
   background: #1A1B1D;

packages/qjkankan-editor/src/views/hotspot/HotSpotList.vue

@@ -1,12 +1,30 @@
 <template>
   <div class="hot-spot-list" app-border dir-left>
     <div class="title">
-      {{$i18n.t('hotspot.hotspot_setting')}}
+      {{$i18n.t('hotspot.add_hotspot')}}
       <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="$i18n.t('hotspot.hotspot_tips')" />
     </div>
-    <button class="ui-button submit" :class="{ disable: !currentScene || currentScene.type ==='4dkk' }" @click="open(null)">
-      {{$i18n.t('hotspot.add_hotspot')}}
-    </button>
+    <ul class="hotspot-type-list">
+      <li
+        class="hotspot-type-item"
+        v-for="(item, index) in hotspotTypeList"
+        :key="index"
+        @click="open({
+          isAdd: true,
+          type: item.id,
+        })"
+      >
+        <img class="icon" :src="item.icon" alt="" draggable="false">
+        <div class="type-name">{{item.name}}</div>
+        <img
+          v-if="item.isExperience"
+          class="exp-tag"
+          src="@/assets/img/experience.png"
+          alt=""
+          draggable="false"
+        >
+      </li>
+    </ul>
 
     <div class="total-count">{{$i18n.t('hotspot.current_hotspots')}}
       <span class="number">({{ someData.hotspots.length }})</span>
@@ -16,7 +34,11 @@
         <li v-for="(item, key) in someData.hotspots" :key="key" @click="open(item)">
           <img class="hot-spot-thumb" :src="item.img" alt="">
           <span class="hot-spot-title" v-title="item.hotspotTitle">{{ item.hotspotTitle }}</span>
-          <i class="iconfont icon-editor_list_delete icon-delete" v-tooltip="$i18n.t('hotspot.delete')" @click.stop="deleIndex = key" />
+          <i
+            class="iconfont icon-editor_list_delete icon-delete"
+            v-tooltip="$i18n.t('hotspot.delete')"
+            @click.stop="deleIndex = key"
+          />
           <div class="deletion-confirm-wrap">
             <div class="deletion-confirm" :class="deleIndex == key ? 'show' : 'hide'" v-clickoutside="clickoutside"
               @click.stop="deleteHot(item)">
@@ -30,8 +52,14 @@
         <div>{{$i18n.t('hotspot.no_hotspot')}}</div>
       </div>
     </div>
-    <EditPanel class="adding-hotspot-panel" v-if="showPanel" :editTitle="editTitle" @save="save" :show="showPanel"
-      @close="close"></EditPanel>
+    <EditPanel
+      class="adding-hotspot-panel"
+      v-if="showPanel"
+      :editTitle="editTitle"
+      :show="showPanel"
+      @save="save"
+      @close="close"
+    />
   </div>
 </template>
 
@@ -43,7 +71,6 @@ import browser from "@/utils/browser"
 
 let mapFontSize = {
   12: 0.5,
-  14: 1,
   17: 1.5,
   20: 2,
 }
@@ -62,11 +89,80 @@ export default {
   },
   data() {
     return {
+      hotspotTypeList: [
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '切换场景',
+          id: 'scene',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '图片',
+          id: 'image',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '视频',
+          id: 'video',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '音频',
+          id: 'audio',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '链接',
+          id: 'link',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '文本',
+          id: 'textarea',
+          isExperience: false,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '标签',
+          id: 'tag',
+          isExperience: true,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '图文',
+          id: 'imgText',
+          isExperience: true,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '文章',
+          id: 'article',
+          isExperience: true,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: 'PDF',
+          id: 'pdf',
+          isExperience: true,
+        },
+        {
+          icon: require('@/assets/images/icons/hotspot-type/link.png'),
+          name: '电话',
+          id: 'phone',
+          isExperience: true,
+        },
+      ],
+      
       editLink: "",
       showPanel: false,
       someData: { hotspots: [] },
       deleIndex: -1,
-      editTitle: this.$i18n.t('hotspot.edit'),
+      editTitle: '',
     }
   },
   watch: {
@@ -203,33 +299,38 @@ export default {
       this.$msg.success(this.$i18n.t('hotspot.delete')+this.$i18n.t('hotspot.success'))
     },
     open(data) {
-      this.editTitle = this.$i18n.t('hotspot.add')
-      let temp = data ? browser.CloneObject(data)  : {
-        name: "_" + this.$randomWord(true, 8, 8),
-        hotspotTitle: this.$i18n.t('hotspot.click_to_comfirm'),
-        fontSize: 12,
-        type: '',
-        img: '',
-        link: '',
-        visible: true,
-        ath: '',
-        atv: '',
-        icontype: 'ditu',
-        size: 1,
-        hotspotType: 'scene',
-        secne: '',
-        hyperlink: '',
-        textarea: '',
-        image: [],
-        audio: '',
-        video: ''
+      let hotspotData = null
+      if (data.isAdd) {
+        this.editTitle = this.$i18n.t('hotspot.add')
+        hotspotData = {
+          name: "_" + this.$randomWord(true, 8, 8),
+          hotspotTitle: this.$i18n.t('hotspot.click_to_comfirm'),
+          fontSize: 12,
+          type: '',
+          img: '',
+          link: '',
+          visible: true,
+          ath: '',
+          atv: '',
+          icontype: 'ditu',
+          size: 1,
+          hotspotType: 'scene', // todo
+          secne: '',
+          hyperlink: '',
+          textarea: '',
+          image: [],
+          audio: '',
+          video: ''
+        }
+      } else {
+        hotspotData = browser.CloneObject(data)
       }
 
-      this.$store.commit("SetHotspot", temp)
+      this.$store.commit("SetHotspot", hotspotData)
       this.showPanel = true
 
-      if (data) {
-        this.editLink = temp.link
+      if (data.isAdd) {
+        this.editLink = hotspotData.link
         this.editTitle =  this.$i18n.t('hotspot.edit')
         window.__krfn.utils.looktohotspot(this.$getKrpano(), data.name)
       }
@@ -251,10 +352,12 @@ export default {
   background: #252526;
   position: relative;
 
-  >.title {
+  > .title {
+    flex: 0 0 auto;
     font-size: 18px;
     color: #fff;
     flex: 0 0 auto;
+    margin-bottom: 24px;
 
     >i {
       font-size: 12px;
@@ -263,13 +366,39 @@ export default {
     }
   }
 
-  >button {
+  > .hotspot-type-list {
     flex: 0 0 auto;
-    width: 100%;
-    margin-top: 16px;
-
-    i {
-      font-size: 14px;
+    margin-right: -10px;
+    > .hotspot-type-item {
+      position: relative;
+      display: inline-flex;
+      flex-direction: column;
+      // justify-content: center;
+      align-items: center;
+      width: 72px;
+      height: 72px;
+      background: #313131;
+      border-radius: 2px;
+      border: 1px solid #404040;
+      margin-right: 9px;
+      margin-bottom: 9px;
+      cursor: pointer;
+      > .icon {
+        width: 50px;
+        height: 50px;
+        margin-bottom: -5px;
+      }
+      > .type-name {
+        font-size: 12px;
+        color: #FFFFFF;
+      }
+      > .exp-tag {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 30px;
+        height: 30px;
+      }
     }
   }