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="icon-setting">
          <div class="icon-setting-title">{{ $i18n.t('hotspot.hotspot_icon') }}</div>
          <div class="remark">{{ $i18n.t('hotspot.select_icon') }}</div>
          <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">
                  <img :src="item.thumb" alt="">
                </li>
              </ul>
            </div>
          </div>
          <div class="bars">
            <RangeItem :value="rang" @input="onRangeChange" />
          </div>
        </div>
        <div class="title-setting">
          <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>
          </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>
        <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" />
        </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";

let comparisonKey = [
  'fontSize',
  'hotspotTitle',
  'hotspotType',
  'hyperlink',
  'icontype',
  'image',
  'img',
  'link',
  'secne',
  'size',
  'textarea',
  'type',
  'video'
]


let HTMap = ''


export default {
  props: ['show', 'data', 'editTitle'],
  components: {
    RangeItem,
    Combox,
    Switcher,
  },
  data() {
    let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
    let hotStyle = []

    for (let i = 0; i < 12; i++) {
      hotStyle[i] = {
        id: 'icon' + (i + 1),
        img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,
        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',
          name: this.$i18n.t('hotspot.secne')
        },
        {
          id: 'link',
          name: this.$i18n.t('hotspot.link')
        },
        {
          id: 'textarea',
          name: this.$i18n.t('hotspot.textarea')
        },
        {
          id: 'image',
          name: this.$i18n.t('hotspot.image')
        },
        {
          id: 'audio',
          name: this.$i18n.t('hotspot.audio')
        },
        {
          id: 'video',
          name: this.$i18n.t('hotspot.video')
        }
      ],
      hotStyle,
      rang: {
        label: this.$i18n.t('hotspot.icon_size'),
        unit: this.$i18n.t('hotspot.unit'),
        gradient: 0.5,
        value: 1,
        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)
    },
    '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;`)
      }
    },
    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]

      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'),
        // });
        return false
      }

      if (!this.hotspot[item.key] || (item.type == 'Array' && this.hotspot[item.key].length <= 0)) {
        // return this.$alert({
        //   content: `${item.errortxt}`,
        // });
        return false
      }

      return true
    }
  },
  mounted() {
    this.selectItem = {
      sceneCode: this.infoItem.link
    }
    this.$bus.on('selectUrl', this.listerFn)
    this.$bus.on('resethotspotTitle', this.listerFnReset)

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


    this.$nextTick(() => {
      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 })
      }
      this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
    })
  },

  methods: {
    handleSceneSelect(data) {
      this.hotspot.secne = {
        ...data,
        someData: {}
      }
    },
    onhotSpotTypeChange(data) {
      this.hotspot.hotspotType = 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:
          this.hotspot.fontSize = 12
          break;
        case 1:
          this.hotspot.fontSize = 14
          break;
        case 1.5:
          this.hotspot.fontSize = 17
          break;
        case 2:
          this.hotspot.fontSize = 20
          break;
        default:
          console.error('unexpected range value: ', data.value);
          break;
      }
    },
    listerFnReset() {
      if (this.hotspot.hotspotTitle == '单击确定热点位置'||this.hotspot.hotspotTitle == this.$i18n.t('hotspot.click_to_comfirm')) {
        this.hotspot.hotspotTitle = ''
      }
    },

    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", {
        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) {

      console.log(this.isAdd, 'this.isAdd');

      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 {
        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)
      }
    }
  }
};
</script>
<style lang="less" scoped>
.hots-panel {
  background: #1A1B1D;
  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: 20px 20px 14px 20px;
    background: #252526;
    flex: 1 0 1px;
    overflow: auto;

    .icon-setting {
      .icon-setting-title {
        font-size: 18px;
        color: #FFFFFF;
      }

      .remark {
        margin-top: 16px;
        font-size: 14px;
        color: #ababab;
      }

      .icon-list {
        margin-top: 16px;
        height: 158px;
        background: #1A1B1D;
        border-radius: 2px;
        border: 1px solid #404040;
        overflow: auto;
        padding: 4px;

        >.margin-handler-layer {
          overflow: hidden;

          ul {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-right: -17px;
            margin-bottom: -17px;

            li {
              cursor: pointer;
              margin-right: 17px;
              margin-bottom: 17px;
              width: 38px;
              height: 38px;
              border: solid 2px transparent;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;

              &::after {
                position: absolute;
                content: '';
                height: 100%;
                width: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background-image: url(~@/assets/images/icons/gif@2x.png);
                background-size: 100% auto;
                z-index: 999;
                pointer-events: none;
              }

              &.active {
                border-color: #0076f6;
              }
            }
          }
        }
      }

      .bars {
        margin-top: 16px;
      }
    }

    .title-setting {
      margin-top: 24px;

      .title-setting-title {
        font-size: 18px;
        color: #FFFFFF;
      }

      .switch-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18px;

        .label {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
      }

      >.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);
        }
      }
    }

    .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>