qjkankan_v1.1.1/packages/code/src/views/hotspot/index.vue

<template>
  <!-- 编辑器-热点 -->
  <div>
    <!-- 内嵌的全景场景预览区域 -->
    <div
      class="app-player"
      ref="layer"
    >
      <Core/>
    </div>
    <!-- 初始和热点 底部的 全景场景列表 -->
    <toolbar></toolbar>
    <setting @select="handleSelectScene"></setting>
    <!-- <toolbar></toolbar> -->
    <div class="dialog" v-if="show">
        <Select
        @updateList="undatePano"
        :panos="list"
        :current="activeItem"
        @cancle="show = false"
        :title="'选择场景'"
        :name="'scene'"
        @submit="handelSelect"
      >
        <template slot="list" slot-scope="{ data }">
          <div class="pano-con">
            <div class="ui-remark">{{ data.name }}</div>
            <ul>
              <li
                v-for="(item, i) in data.arr"
                @click="activeItem = item"
                :class="{ 'li-active': item.id == activeItem.id }"
                :key="i"
              >
                <div class="typeli">
                  <i class="iconfont iconedit_type_3d" :class="{'iconedit_type_panorama':item.type!=='house'}"></i>
                </div>
                <div class="img">
                  <img :src="item.icon" alt="">
                </div>
                <div class="ui-title">
                  <span>{{item.sceneTitle}}</span>
                </div>
              </li>
            </ul>
          </div>
        </template>
      </Select>
    </div>
  </div>
</template>
<script>
import Setting from "./Setting";
import Select from "@/components/select";
import Core from "@/framework/core/index.vue";
import Toolbar from "@/framework/Toolbar.vue";

export default {
  name: "home",
  components: {
    Setting,
    Select,
    Core,
    Toolbar,
  },
  mounted(){
    
  },
  watch: {
    show(newVal){
      if (newVal) {
        this.searchKey = ''
      }
      else{
        this.activeWebsite = ''
      }
    },
    activeWebsite(newVal){
      if (!newVal||!newVal.sceneCode) {
        return
      }
      let tmp = ''
      this.list.forEach(item=>{
         if (!tmp) {
            tmp = item.arr.find(i=>{
              return newVal.sceneCode==i.sceneCode
          })
        }
      })

      this.activeItem = tmp || this.activeItem
    }
  },
  data(){
    return {
      show:false,
      list:[],
      activeItem: "",
      searchKey: "",
      activeWebsite:''
    }
  },
  methods:{
    undatePano(data){
      this.searchKey = data
    },
    handleSelectScene(data){
      this.activeWebsite = data
      this.show=true
    },
    handelSelect() {
      this.$bus.emit('selectUrl',this.activeItem)
      this.show = false
    }
  }
};
</script>


<style lang="less" scoped>
.app-player {
  padding: 10px;
  position: relative;
  display: flex;
  height: calc(100% - 260px); // 260: 底部toolbar的高度
  flex-direction: column;
  &.page-guide {
    height: calc(100% - 210px);
  }
}
.dialog {
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.pano-con{
  height: auto;
  background: none;
  padding: 10px 0;
  .ui-remark{
    padding-left: 10px;
  }
}

</style>