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}}热点</span>
        <i class="iconfont icon_close" @click="confirmCancel"></i>
      </div>
      <div class="content" ref="content">
        <div class="icon-setting">
          <div class="icon-setting-title">热点图标</div>
          <div class="remark">选择图标</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">标题设置</div>
          <div class="switch-wrapper">
            <span class="label">是否显示标题</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="15"
              placeholder="请输入标题，限15字"
            />
            <span class="count">{{hotspot.hotspotTitle.length}}/15</span>
          </div>
        </div>
        <div class="effect-setting">
          <div class="effect-setting-title">效果设置</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"

            @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="confirmCancel">取消</button>
        <button class="ui-button submit"  :class="{disable: false}" @click="save">完成</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 HTMap = {
  scene:{
    key:'secne',
    type:'Object',
    errortxt:'请选择场景'
  },
  audio:{
    key:'audio',
    type:'String',
    errortxt:'请选择音频'
  },
   video:{
    key:'video',
    type:'String',
    errortxt:'请选择视频'
  },
   image:{
    key:'image',
    type:'Array',
    errortxt:'请选择图片'
  },
  link:{
    key:'hyperlink',
    type:'String',
    errortxt:'请输入超链接'
  },
  textarea:{
    key:'textarea',
    type:'String',
    errortxt:'请输入文本'
  }
}

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`
      }
    }
    return {
      canSave:false,
      hotSpotTypeList:[
        {
          id:'scene',
          name:'场景切换'
        },
        {
          id:'link',
          name:'超链接'
        },
        {
          id:'textarea',
          name:'文本'
        },
        {
          id:'image',
          name:'图片'
        },
        {
          id:'audio',
          name:'音频'
        },
        {
          id:'video',
          name:'视频'
        }
      ],
      hotStyle,
      rang: {
        label: '图标大小',
        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)
  },
  computed:{
    ...mapGetters({
      hotspot:'hotspot',
      backupHotSpot:'backupHotSpot'
    }),
    effectSettingComponent(){
      let tmp = this.hotspot.hotspotType
      return () => import(`./hotspotType/${tmp}.vue`);
    },
  },
  mounted(){
      this.selectItem = {
        sceneCode: this.infoItem.link
      }
      this.$bus.on('selectUrl',this.listerFn)
      this.$bus.on('delhotspot',()=>{
        this.cancel()
      }) 

    this.$nextTick(()=>{
      if (this.editTitle != '编辑') {
        this.addhotspot(this.hotStyle[0])
      }
      this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
    })
  },

  methods: {
    handleSceneSelect(data){
      this.hotspot.secne= data
    },
    onhotSpotTypeChange(data){
      this.hotspot.hotspotType = data.id
    },
    onRangeChange(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;
      }
    },
    listerFn(data){
      this.selectItem = {
        sceneCode: data.sceneCode
      }
      this.infoItem.link = data.sceneCode
      this.infoItem.thumb = data.icon  
    },
    confirmCancel(){
      this.$confirm({
            content: "热点内容未编辑完，确定要关闭吗",
            ok: () => {
              this.cancel()
            }
        });
    },
    cancel() {
      this.$store.commit("SetHotspot", this.backupHotSpot);
      this.$emit("close",{
        type:this.editTitle=='编辑'?'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() {
      let {img,hotspotTitle,hotspotType} = this.hotspot
      let item = HTMap[hotspotType]

      if (!img) {
        return this.$alert({
          content: "请选择热点图标",
        });
      }

       if (!hotspotTitle.trim()) {
        return this.$alert({
          content: "请输入热点标题",
        });
      }

       if (!this.hotspot[item.key]||(item.type == 'Array'&&this.hotspot[item.key].length<=0)) {
        return this.$alert({
          content: `${item.errortxt}`,
        });
      }
      this.$store.commit("SetHotspot", this.hotspot);
      this.$emit("close");
      this.$emit("save",this.hotspot);
    },
    addhotspot(data){

      if (this.isAdd) {
        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;
              &.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>