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

<template>
  <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>
        <i class="iconfont icon_close" @click="realCancel"></i>
      </div>

      <div class="content" ref="content">
        <div class="type-setting">
          <div class="remark">{{ $i18n.t("hotspot.hotspot_type") }}</div>
          <combox
            class="combox"
            :data="hotspotTypeList"
            :selected-id="hotspot.hotspotType"
            @change="onHotSpotTypeChange"
          />
        </div>

        <div class="icon-setting">
          <div class="remark">{{ $i18n.t("hotspot.hotspot_icon") }}</div>
          <combox
            class="combox"
            :data="hotspotIconTypeList"
            :selected-id="hotspot.hotspotIconType"
            @change="onHotspotIconTypeChange"
          />
          <component
            class="icon-setting-component"
            :is="iconTypeComponent"
            ref="icon-setting-component"
          />
          <div
            class="bars"
            v-if="hotspot.hotspotIconType !== 'personalized_tag'"
          >
            <RangeItem :value="rang" @input="onRangeChange" />
          </div>
        </div>

        <div
          class="title-setting"
          v-if="hotspot.hotspotIconType !== 'personalized_tag'"
        >
          <div class="remark-highlight">
            {{ $i18n.t("hotspot.hotspot_title") }}
          </div>
          <div class="title-input-wrapper">
            <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 class="remark">
            {{ $i18n.t("hotspot.title_show_mode") }}
          </div>
          <TabbarSwitcher
            class="display-mode-selector"
            :tabList="[
              // $i18n.t('hotspot.show_on_hover'),
              $i18n.t('hotspot.always_show'),
              $i18n.t('hotspot.never_show'),
            ]"
            :activeIdx="currentTitleDispayModeIdx"
            @select="onSelectTitleDisplayMode"
          />
          <div class="remark">
            {{ $i18n.t("hotspot.title_position") }}
          </div>
          <TabbarSwitcherIcon
            class="display-mode-selector"
            :tabList="[
              {
                icon: 'icon-up',
                tip: $i18n.t('hotspot.title_top'),
              },
              {
                icon: 'icon-down',
                tip: $i18n.t('hotspot.title_bottom'),
              },
              {
                icon: 'icon-left',
                tip: $i18n.t('hotspot.title_left'),
              },
              {
                icon: 'icon-right',
                tip: $i18n.t('hotspot.title_right'),
              },
              // {
              //   icon: 'icon-mobile',
              //   tip: $i18n.t('hotspot.title_custom'),
              // },
            ]"
            :activeIdx="currentTitlePositionIdx"
            @select="onSelectTitlePosition"
          />
        </div>

        <div class="effect-setting">
          <div class="title-line">
            <div
              class="remark-highlight"
              v-if="
                $i18n.t(
                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
                )
              "
            >
              {{
                $i18n.t(
                  `hotspot.hotspot_type_specific_settings_title.${hotspot.hotspotType}`
                )
              }}
            </div>
            <div class="tip" v-if="currentHotspotTypeConfigData.tip">
              {{ currentHotspotTypeConfigData.tip }}
            </div>
          </div>
          <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>
      </div>
    </div>
  </transition>
</template>

<script>
import RangeItem from "@/components/rangeItem/index.vue";
import Combox from "@/components/shared/Combox";
import { mapGetters } from "vuex";
import Switcher from "@/components/shared/Switcher.vue";
import TabbarSwitcher from "@/components/shared/TabbarSwitcher.vue";
import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
import hotspotTypeList from "./hotspotTypeList.js";
import { isValidPhoneNumber } from "libphonenumber-js/max";

export default {
  props: ["show", "data", "editTitle"],
  components: {
    RangeItem,
    Combox,
    Switcher,
    TabbarSwitcher,
    TabbarSwitcherIcon,
  },
  data() {
    return {
      hotspotTypeList,
      hotspotIconTypeList: [
        {
          name: this.$i18n.t("hotspot.hotspot_icon_type.system_icon"),
          id: "system_icon",
        },
        {
          name: this.$i18n.t("hotspot.hotspot_icon_type.custom_image"),
          id: "custom_image",
        },
        {
          name: this.$i18n.t("hotspot.hotspot_icon_type.serial_frame"),
          id: "serial_frame",
        },
        {
          name: this.$i18n.t("hotspot.hotspot_icon_type.personalized_tag"),
          id: "personalized_tag",
        },
      ],
      rang: {
        label: this.$i18n.t("hotspot.icon_size"),
        unit: this.$i18n.t("hotspot.unit"),
        gradient: 0.1,
        value: 1,
        min: 0.5,
        max: 2,
      },
    };
  },
  watch: {
    "hotspot.fontSize": {
      handler(val) {
        const rangeValue = val / 12;
        // console.log("rangeValue", rangeValue);
        this.rang.value = rangeValue.toFixed(1);
      },
      immediate: true,
    },
    hotspot: {
      handler(val) {
        console.warn("hotspot", val);
        this.$bus.emit("edithotspot", val);
      },
      deep: true,
    },
    // hotspotIcon: {
    //   handler(val) {
    //     console.error("this.hotspotIcon", val);
    //     val.img.length > 0 &&
    //       this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, val.img);
    //   },
    //   deep: true,
    // },
    // "hotspot.img": function () {
    //   console.log("this.hotspot.img", this.hotspot.img);
    //   this.$getKrpano().set(
    //     `hotspot[${this.hotspot.name}].url`,
    //     this.hotspot.img
    //   );
    // },
    // "hotspot.titlePosition": function (val) {
    //   console.log("111", val);
    //   if (val === "bottom") {
    //     this.$getKrpano().set("layer[tooltip_" + this.hotspot.name + "].css");
    //   }
    // },
    // "hotspot.hotspotTitle": function () {
    //   this.$getKrpano().set(
    //     "layer[tooltip_" + this.hotspot.name + "].html",
    //     `<span style="color:white">${this.hotspot.hotspotTitle}</span>`
    //   );
    // },
    // 'hotspot.visible': function () {
    //   this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
    // },
    // "hotspot.size": {
    //   immediate: true,
    //   handler: function (newVal) {
    //     let h = 52;
    //     let scaleH = h * newVal;

    //     let offset = "-130%";

    //     this.rang = { ...this.rang, value: newVal };
    //     this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH);

    //     if (newVal < 1) {
    //       offset = "-200%";
    //     }

    //     if (newVal > 1) {
    //       offset = "-100%";
    //     }
    //     this.$getKrpano().set(
    //       "layer[tooltip_" + this.hotspot.name + "].y",
    //       `${offset}`
    //     );
    //   },
    // },
    // "hotspot.fontSize": {
    //   handler: function (newVal) {
    //     this.$getKrpano().set(
    //       "layer[tooltip_" + this.hotspot.name + "].css",
    //       `text-align:center; color:#FFFFFF;
    //       font-family:STXihei;font-size:${newVal}px;`
    //     );
    //   },
    // },
  },
  computed: {
    ...mapGetters({
      hotspot: "hotspot",
      backupHotSpot: "backupHotSpot",
      hotspotIcon: "hotspotIcon",
    }),
    iconTypeComponent() {
      let tmp = this.hotspot.hotspotIconType;
      return () => import(`./hotspotIconType/${tmp}.vue`);
    },
    currentTitleDispayModeIdx() {
      switch (this.hotspot.titleDisplayMode) {
        // case "hover":
        //   return 0;
        case "always":
          return 0;
        case "never":
          return 1;
        default:
          return 0;
      }
    },
    currentTitlePositionIdx() {
      switch (this.hotspot.titlePosition) {
        case "top":
          return 0;
        case "bottom":
          return 1;
        case "left":
          return 2;
        case "right":
          return 3;
        case "custom":
          return 4;
        default:
          return 0;
      }
    },
    effectSettingComponent() {
      let tmp = this.hotspot.hotspotType;
      return () => import(`./hotspotType/${tmp}.vue`);
    },
    canSubmit() {
      // 热点类型相关设置项
      switch (this.hotspot.hotspotType) {
        case "scene":
          if (!(this.hotspot.secne && this.hotspot.secne.id)) {
            return false;
          }
          break;
        case "image":
          if (!this.hotspot.image || this.hotspot.image.length === 0) {
            return false;
          }
          break;
        case "video":
          if (!this.hotspot.video) {
            return false;
          }
          break;
        case "audio":
          if (!this.hotspot.audio) {
            return false;
          }
          break;
        case "link":
          if (!this.hotspot.hyperlink) {
            return false;
          }
          break;
        case "textarea":
          if (!this.hotspot.textarea) {
            return false;
          }
          break;
        case "tag":
          break;
        case "imageText":
          if (
            this.hotspot.imageTextInfo.imageList.length === 0 ||
            this.hotspot.imageTextInfo.text.length === 0
          ) {
            return false;
          }

          break;
        case "article":
          if (!this.hotspot.articleInfo.html) {
            return false;
          }
          break;
        case "pdf":
          if (!this.hotspot.pdfInfo.name || !this.hotspot.pdfInfo.url) {
            return false;
          }
          break;
        case "phone":
          if (
            !isValidPhoneNumber(this.hotspot.phoneInfo.phone) &&
            !isValidPhoneNumber("+86" + this.hotspot.phoneInfo.phone)
          ) {
            return false;
          }
          break;
        default:
          break;
      }

      // 热点图标类型相关设置项
      switch (this.hotspot.hotspotIconType) {
        case "system_icon":
          break;
        case "custom_image":
          if (!this.hotspot.customIconInfo.img) {
            return false;
          }
          break;
        case "serial_frame":
          if (
            !this.hotspot.serialFrameInfo.img ||
            this.hotspot.serialFrameInfo.img.length === 0
          ) {
            return false;
          }
          break;
        case "personalized_tag":
          if (
            this.hotspot.personalizedTagInfo.isTextWrap &&
            this.hotspot.personalizedTagInfo.textNumPerLine <= 0
          ) {
            return false;
          }
          break;
        default:
          break;
      }

      // 其他设置项
      if (!this.hotspot.hotspotTitle) {
        return false;
      }

      return true;
    },
    currentHotspotTypeConfigData() {
      return hotspotTypeList.find((item) => {
        return item.id === this.hotspot.hotspotType;
      });
    },
  },
  beforeDestroy() {
    this.$bus.removeListener("resethotspotTitle", this.listerFnReset);
    this.$bus.off("edithotspot", this.handleEditHotspot);
    this.$bus.off("delhotspot", this.cancel);
  },
  mounted() {
    this.$bus.on("resethotspotTitle", this.listerFnReset);

    this.$bus.on("delhotspot", this.cancel);
    this.$bus.on("edithotspot", this.handleEditHotspot);

    setTimeout(() => {
      if (
        this.editTitle != "编辑" &&
        this.editTitle != this.$i18n.t("hotspot.edit")
      ) {
        this.rang.value = window.g_hotspotCurrentScale;
        this.onRangeChange({ value: window.g_hotspotCurrentScale });
      }
    }, 300);
  },

  methods: {
    handleEditHotspot(data) {
      const krpano = document.getElementById("krpanoSWFObject");
      __krfn.utils.edithotspot(krpano, data);
    },
    handleSceneSelect(data) {
      this.hotspot.secne = {
        ...data,
        someData: {},
      };
    },
    onHotSpotTypeChange(data) {
      this.hotspot.hotspotType = data.id;
    },
    onHotspotIconTypeChange(data) {
      this.hotspot.hotspotIconType = data.id;
    },
    clamp(num, min, max) {
      return num <= min ? min : num >= max ? max : num;
    },
    onRangeChange(data) {
      console.log(data);
      this.rang = { ...this.rang, value: data.value };
      this.hotspot.size = data.value;
      const fontsize = data.value * 12;
      const updateSize = Math.floor(fontsize);
      this.hotspot.fontSize = updateSize;
      console.log("updateSize", updateSize);
      // switch (data.value) {
      //   case 0.5:
      //   case 0.6:
      //   case 0.7:
      //     this.hotspot.fontSize = 12;
      //     break;
      //   case 0.8:
      //   case 0.9:
      //   case 1.0:
      //   case 1.1:
      //   case 1.2:
      //     this.hotspot.fontSize = 14;
      //     break;
      //   case 1.3:
      //   case 1.4:
      //   case 1.5:
      //   case 1.6:
      //   case 1.7:
      //     this.hotspot.fontSize = 17;
      //     break;
      //   case 1.8:
      //   case 1.9:
      //   case 2:
      //     this.hotspot.fontSize = 20;
      //     break;
      //   default:
      //     break;
      // }
    },
    onSelectTitleDisplayMode(idx) {
      switch (idx) {
        // case 0:
        //   this.hotspot.titleDisplayMode = "hover";
        //   break;
        case 0:
          this.hotspot.titleDisplayMode = "always";
          break;
        case 1:
          this.hotspot.titleDisplayMode = "never";
          break;
        default:
          break;
      }
    },
    onSelectTitlePosition(idx) {
      switch (idx) {
        case 0:
          this.hotspot.titlePosition = "top";
          break;
        case 1:
          this.hotspot.titlePosition = "bottom";
          break;
        case 2:
          this.hotspot.titlePosition = "left";
          break;
        case 3:
          this.hotspot.titlePosition = "right";
          break;
        case 4:
          this.hotspot.titlePosition = "custom";
          break;
        default:
          break;
      }
    },
    listerFnReset() {
      if (
        this.hotspot.hotspotTitle == "单击确定热点位置" ||
        this.hotspot.hotspotTitle == this.$i18n.t("hotspot.click_to_comfirm")
      ) {
        this.hotspot.hotspotTitle = "";
      }
    },

    cancel() {
      // if (!(this.editTitle == this.$i18n.t("hotspot.edit"))) {
      this.$confirm({
        title: this.$i18n.t("tips.title"),
        content: this.$i18n.t("hotspot.cancel_add_hotspot"),
        ok: () => {
          this.realCancel();
        },
      });

      // }
    },
    realCancel() {
      this.$store.commit("SetHotspot", this.backupHotSpot);
      console.log("cancel", this.backupHotSpot);
      this.$getKrpano().call(
        "cancelJQHotspot(" + this.backupHotSpot.name + ");"
      );
      this.$emit("close", {
        type: this.editTitle == this.$i18n.t("hotspot.edit") ? "edit" : "add",
        data: this.backupHotSpot,
      });
    },
    reset(data) {
      this.$bus.emit("edithotspotTitle", data);
      this.$bus.emit("edithotspotTitleisShow", data);
      // this.$getKrpano().set(`hotspot[${data.name}].url`, data.img);
    },
    save() {
      this.$store.commit("SetHotspot", this.hotspot);
      this.$emit("close");
      this.$emit("save", this.hotspot);
    },
  },
};
</script>

<style lang="less" scoped>
.hots-panel {
  background: #252526;
  z-index: 10;
  display: flex;
  flex-direction: column;
  .header {
    padding: 20px;
    display: flex;
    font-size: 18px;
    color: #fff;
    flex: 0 0 auto;
    .icon_close {
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
    }
  }
  .content {
    padding: 0 20px 14px 20px;
    flex: 1 0 1px;
    overflow: auto;
    .type-setting {
      .remark {
        font-size: 14px;
        color: #ababab;
      }
      .combox {
        margin-top: 16px;
      }
    }
    .icon-setting {
      .icon-setting-title {
        font-size: 18px;
        color: #ffffff;
      }
      .remark {
        margin-top: 16px;
        font-size: 14px;
        color: #ababab;
      }
      .combox {
        margin-top: 16px;
      }
      .icon-setting-component {
        margin-top: 16px;
      }

      .bars {
        margin-top: 16px;
      }
    }
    .title-setting {
      .remark-highlight {
        margin-top: 16px;
        font-size: 18px;
        color: #ffffff;
      }
      > .title-input-wrapper {
        position: relative;
        border: 1px solid rgba(151, 151, 151, 0.2);
        padding: 0 16px;
        background: #1a1b1d;
        border-radius: 2px;
        height: 36px;
        width: 100%;
        margin-top: 18px;
        &:focus-within {
          border-color: #0076f6;
        }
        > input {
          border: none;
          background: transparent;
          outline: none;
          height: 100%;
          width: calc(100% - 50px);
          padding: 0;
          color: #fff;
          letter-spacing: 1px;
          font-size: 14px;
        }
        > .count {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 16px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.2);
        }
      }
      .remark {
        margin-top: 18px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
      }
      .display-mode-selector {
        margin-top: 18px;
      }
    }
    .effect-setting {
      margin-top: 16px;
      > .title-line {
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > .remark-highlight {
          font-size: 18px;
          color: #ffffff;
        }
        > .tip {
          font-size: 14px;
          color: #ffffff;
          opacity: 0.6;
        }
      }
      .combox {
        margin-top: 16px;
      }
      .effect-setting-component {
        margin-top: 16px;
      }
    }
  }
  .footer {
    flex: 0 0 auto;
    padding: 15px;
    background: #252526;
    .deepcancel {
      margin-right: 10px;
    }
    .ui-button {
      width: 112px;
    }
  }
}
</style>