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="cancel"></i>
      </div>
      
      <div class="content" ref="content">
        
        <div class="type-setting">
          <div class="remark">热点类型</div>
          <combox
            class="combox"
            :data="hotspotTypeList"
            :selected-id="hotspot.hotspotType"
            :bottomSpace="comboxBottomSpace"
            @change="onHotSpotTypeChange"
          />
        </div>
        
        <div class="icon-setting">
          <div class="remark">{{ $i18n.t('hotspot.select_icon') }}</div>
          <combox
            class="combox"
            :data="hotspotIconTypeList"
            :selected-id="hotspot.hotspotIconType"
            :bottomSpace="comboxBottomSpace"
            @change="onHotspotIconTypeChange"
          />
          <component
            class="icon-setting-component"
            :is="iconSettingComponent"
            ref="icon-setting-component"
            @addHotspot="addhotspot"
          />
          <div class="bars">
            <RangeItem :value="rang" @input="onRangeChange" />
          </div>
        </div>

        <div class="title-setting">
          <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
          <div class="title-input-wrapper">
            <input
              v-model.trim="hotspot.hotspotTitle"
              type="text" maxlength="15"
              :placeholder="$i18n.t('hotspot.title_placeholder')"
            />
            <span class="count">{{ hotspot.hotspotTitle.length }}/15</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">
          <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";

export default {
  props: ['show', 'data', 'editTitle'],
  components: {
    RangeItem,
    Combox,
    Switcher,
    TabbarSwitcher,
    TabbarSwitcherIcon,
  },
  data() {
    return {
      hotspotTypeList,
      hotspotIconTypeList: [
        {
          name: '系统图标',
          id: 'system',
        },
        {
          name: '自定义图标',
          id: 'custom',
        },
        {
          name: '个性标签',
          id: 'personalized',
        },
      ],
      rang: {
        label: this.$i18n.t('hotspot.icon_size'),
        unit: this.$i18n.t('hotspot.unit'),
        gradient: 0.1,
        value: 1,
        min: 0.5,
        max: 2,
      },
      isAdd: true,
      comboxBottomSpace: 0,
    }
  },
  watch: {
    'hotspot.hotspotTitle': function () {
      this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
    },
    // '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;`)
      }
    },
  },
  beforeDestroy() {
    this.$bus.removeListener('resethotspotTitle', this.listerFnReset)
  },
  computed: {
    ...mapGetters({
      hotspot: 'hotspot',
      backupHotSpot: 'backupHotSpot',
    }),
    iconSettingComponent() {
      let tmp = this.hotspot.hotspotIconType
      return () => import(`./hotspotIconType/${tmp}.vue`);
    },
    currentTitleDispayModeIdx() {
      switch (this.hotspot.titleDisplayMode) {
        case 'hover':
          return 0
        case 'always':
          return 1
        case 'never':
          return 2
        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() {
      let { img, hotspotTitle } = this.hotspot

      if (!img) {
        return false
      }

      if (!hotspotTitle.trim()) {
        return false
      }

      if (this.hotspot.hotspotType == 'image' && this.hotspot.image.length <= 0) {
        return false
      }

      return true
    }
  },
  mounted() {
    this.$bus.on('resethotspotTitle', this.listerFnReset)

    this.$bus.on('delhotspot', () => {
      this.cancel()
    })

    setTimeout(() => {
      if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
        this.addhotspot(this.$refs['icon-setting-component'].hotspotIconList[0])
        this.rang.value = window.g_hotspotCurrentScale
        this.onRangeChange({ value: window.g_hotspotCurrentScale })
      }
      this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
    }, 300)
  },

  methods: {
    handleSceneSelect(data) {
      this.hotspot.secne = {
        ...data,
        someData: {}
      }
    },
    onHotSpotTypeChange(data) {
      this.hotspot.hotspotType = data.id
    },
    onHotspotIconTypeChange(data) {
      this.hotspot.hotspotIconType = data.id
    },
    onRangeChange(data) {
      console.log(data);
      this.rang = { ...this.rang, value: data.value }
      this.hotspot.size = data.value
      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 1:
          this.hotspot.titleDisplayMode = 'always'
          break;
        case 2:
          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() {
      this.$store.commit("SetHotspot", this.backupHotSpot);
      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);
    },
    addhotspot(data) {
      if (this.isAdd && (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit'))) {
        this.isAdd = false
        this.hotspot.img = data.img
        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 {
        this.hotspot.img = data.img
        this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
        this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)
      }
    }
  }
};
</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;
      .effect-setting-title {
        font-size: 18px;
        color: #FFFFFF;
      }
      .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>