gaoxinqu_tangjia/src/pages/external/index.vue

<template>
  <div class="iframe-layout"  :class="{mobile: ismobile}">
    <template v-if="ismobile">
      <div class="top-layer">
          <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
          <template  v-if="$route.params.id">
            <a @click="exitHandle" class="xiangce" v-if="key" :class="{active: big}">{{isHangpai?'航拍':'大场景'}}</a>
            <!-- <a @click="xiangceHandle" class="xiangce" v-if="key&&imgs" :class="{active: !big}">相册</a> -->
            <div @click="showQuestion = true" class="dati">开始答题</div>
          </template>
      </div>
    </template>

    <template v-else>
      <a @click="clickHandle" class="rad"><i class="iconfont icon-left"></i>返回</a>
      <!-- <a @click="xiangceHandle" class="xiangce" v-if="key">相册</a> -->
        <select @change="changeHandle" class="ncxihiasj" v-model="asdasd" v-if="key">
          <option value="big">{{isHangpai?'航拍':'大场景'}}</option>
          <option v-if="imgs" value="xiangce">相册</option>
        </select>
        <div v-if="introduce" class="r-aside" :class="{'show':show}" @click.stop>
          <div class="image-title">{{name}}</div>
          <div class="image-detail">
            <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
          </div>
          <div class="switch" @click="show = !show" @touchmove.prevent>
            <i class="iconfont" :class="show ? 'icon-left' : 'icon-right'"></i>
          </div>
        </div>
        <div @click="showQuestion = true" class="dati">开始答题</div>
    </template>

    <template v-if="ismobile">
      <iframe :src="url" frameborder="0" v-if="big"></iframe>

      <div class="asjdfioasfhuioasfh" v-else >
        <img class="cls" :src="require('@/assets/images/close.png')" @click="handleExit" alt="">
        <div class="image-layout">
          <Slide :screens="screensa" :current="0">
            <i class="iconfont icon-left" slot="up"></i>
            <div slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data.img}) no-repeat center center`,backgroundSize:`${data.size}`}"  @click.stop></div>
            <!-- <img slot="item" slot-scope="{data}" :src="data" class="image-item"> -->
            <i class="iconfont icon-right" slot="next"></i>
          </Slide>
          <div class="image-introduce" v-if="introduce">
            <div class="intro-title">{{name}}</div>
            <div class="intro-detail">
              <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <iframe :src="url" frameborder="0"></iframe>
      <imageQuery :show="show" :screens="screens" @exitHandle="exitHandle" />
    </template>

    <question v-if="showQuestion"  @close="showQuestion=false" :show="showQuestion"></question>
  </div>
</template>

<script>
import Vue from 'vue'
import data from '@/data.js'
import imageQuery from '@/pages/imageQuery'
import browser from '@/util/browser'
import Slide from '@/components/Slide'
import question from '@/components/question'

export default {
  components: { imageQuery, Slide, question },
  data () {
    let key = Object.keys(data.data).find(id => this.$route.params.id === id)

    if (!key) {
      key = null
    }
    return {
      showQuestion: false,
      asdasd: 'big',
      urls: [],
      key,
      big: true,
      show: false,
      ismobile: browser.mobile,
      screens: null,
      screensa: []
    }
  },
  computed: {
    url () {
      return this.$route.params.url
    },
    isHangpai () {
      let id = this.key
      let isTrue = id && data.data[id].showType.find((item) => {
        return item === 'leixing_hangpai'
      })
      return isTrue
    },
    imgs () {
      let id = this.key
      return id ? data.data[id].data : null
    },
    name () {
      let id = this.key
      return id ? data.data[id].name : null
    },
    introduce () {
      let id = this.key
      return id ? data.data[id].introduce : null
    }
  },
  watch: {
    screens (newVal) {
      let arr = newVal && newVal.map((info, i) => {
        let item = {}
        var img = new Image()
        var handle = () => {
          if (img.width > img.height) {
            item.size = '100% auto'
          } else {
            item.size = 'auto 100%'
          }
          this.screensa && Vue.set(this.screensa, i, item)
        }
        item.img = info
        img.src = info

        if (img.complete) {
          handle()
        } else {
          img.onload = handle
        }
        return item
      })
      this.screensa = arr
    }
  },
  methods: {
    changeHandle () {
      if (this.asdasd === 'xiangce') {
        if (data.data[this.key]) {
          this.screens = data.data[this.key].data
          this.big = false
        }
      }
    },
    xiangceHandle () {
      if (data.data[this.key]) {
        this.screens = data.data[this.key].data
        this.big = false
      }
    },
    handleExit () {
      if (!this.$route.params.id) {
        this.exitHandle()
      }
    },
    exitHandle () {
      this.screens = null
      this.big = true
      this.asdasd = 'big'
      if (!this.$route.params.id) {
        this.key = null
      }
    },
    clickHandle () {
      if (this.$route.query.show) {
        let {show, title, type} = this.$route.query
        this.$router.push({
          name: 'item',
          params: {
            show, title, type
          }
        })
      } else {
        this.$router.back()
      }
      // while (global.paths.length !== 0) {
      //   let path = global.paths.pop()

      //   if (path.name !== 'external' && path.name) {
      //     return this.$router.push({path: path.path})
      //   }
      // }
      // this.$router.push({name: 'home'})
    }
  },
  mounted () {
    window.addEventListener('message', res => {
      if (res.data.event === 'openHotspot') {
        let tmp = Object.keys(data.data).find(key => {
          return data.data[key].name === res.data.data
        })
        let m = data.data[tmp]
        this.key = tmp
        this.screens = m.data
        this.big = false
        // this.show = true
      }
    })
  }
}
</script>

<style scoped>
.top-layer {
  padding-top: 4px;
  height: 42px;
}
.iframe-layout {
  position: relative;
  width: 100%;
  height: 100%;
}

.iframe-layout iframe {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.iframe-layout a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 20px 10px 16px;
  cursor: pointer;
  z-index: 999;
}

.iframe-layout a.xiangce {
  left: 100px;
}

.mobile a {
  margin-right: 20px;
  padding: 4px 10px;
}

.mobile .top-layer{
  height: 15px;
  padding: 10px;
  background-color: #f1f2f3;
  position: relative;
}

.mobile .dati {
  height: 29px;
  padding: 0 10px;
  line-height: 29px;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

.asjdfioasfhuioasfh {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8)
}

.iframe-layout a i {
  font-size: 0.8em;
  vertical-align: middle;
}

.top-layer a{
  position: relative;
}

.top-layer a.xiangce {
  background: none;
  color: #000;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 5px;
  margin-right: 5px
}

.top-layer a.xiangce.active {
  color: #fa3800;
}

.mobile a {
  left: inherit !important;
  top: inherit !important;
}

.mobile iframe {
  height: calc(100% - 35px);
}

.ncxihiasj {
  position: absolute;
  left: 112px;
  border: 1px solid #fff;
  z-index: 999;
  font-size: 1em;
  /* background: url('~@/assets/images/xiala.png') center right 6px no-repeat; */
  background: none;
  background-size: 20%;
  color: #fff;
  top: 10px;
  width: 90px;
  border-radius: 3px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  padding: 0 10px;
  cursor: pointer;
}

.ncxihiasj option{
  color: black;
  background: #fff;
  line-height: 20px;
}

.dati{
    position: absolute;
    color: #fff;
    background-color: #fa3800;
    left: 220px;
    top: 10px;
    padding: 8px 20px 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
}

</style>

<style scoped>
  @media screen and (max-width: 1024px) {
    .dati{
      left:180px;
      top:0px;
    }
   }
</style>

<style scoped>

.image-dialog {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
}

.image-dialog a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 3px;
}

.image-layout {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: calc(50% + 15px);
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.asjdfioasfhuioasfh .cls{
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 999;
}

.image-item {
  width: 100%;
  height: 100%;
}

.r-aside{
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 350px;
  height: 100%;
  background-color: #fffbf8;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-left: 1px solid #f1c4a3;
  z-index: 999999;
  transform: translateX(0);
  transition: transform .3s ease;
}

.r-aside.show{
  transform: translateX(350px);
  transition: transform .3s ease;
}

.r-aside .image-title{
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1c4a3;
  margin: 0 20px;
}
.r-aside .image-detail{
  padding: 15px 0;
  height: 100%;
  overflow-y: scroll;
  margin: 0 10px 0 20px;
}

.r-aside .image-detail p{
  text-indent: 32px;
  line-height: 1.8;
}

.switch {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fa3800;
  width: 14px;
  height: 80px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  z-index: 9999999;
}

.image-introduce{
  color:#fff;
  padding:20px 10px;
  line-height:1.5;
}
.image-introduce .intro-title{
  font-size:18px;
  font-weight:bold;
  margin-bottom:20px;
  text-align: center;
}
.image-introduce .intro-detail{
  height: 32vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.image-introduce .intro-detail p{
  text-indent:32px;
}

.asjdfioasfhuioasfh >>> .ctrl{
  top:25%;
}

</style>