thoth-frontend-test/src/views/useCase/components/useCase.vue

<template>
  <section v-if="bizId !== -1" v-loading="loading" class="case-main">
    <iframe
      id="useCaseIfr"
      :class="{ 'full-screen': fullScreen}"
      frameborder="0"
      scrolling="no"
      :src="src"
    />
  </section>
</template>
<script>
import { mapGetters } from 'vuex'
import { host } from '@/apiConfig/requestIP'
// import addDOMEventListener from 'add-dom-event-listener'
// import { EncryptId, desDecryptId } from '@/utils/crypto-js.js'
import { getUrlSearch, getUrlParamsObj } from '@/utils'
export default {
  data() {
    return {
      ifr: null,
      srcHost: '/case/caseList/zhihui/',
      loading: true,
      path: '/useCase',
      eventHandlers: '',
      fullScreen: false // 是否全屏
    }
  },
  computed: {
    ...mapGetters(['bizId']),
    src() {
      const { caseRoute, dp } = getUrlParamsObj(['caseRoute', 'dp'])
      // const bizId = EncryptId(`${this.bizId}`)
      //  host =      // const
      //   getEnv() === 'test'
      //     ? 'http://10.96.83.94:9000/index.html#'
      //     : getEnv() === 'pre'
      //     ? 'http://agiletc-pre.intra.xiaojukeji.com/#'
      //     : 'http://agiletc.intra.xiaojukeji.com/#'
      // const src = `${host}${
      //   this.$route.query.detailCaseUrl
      //     ? '/case/caseManager/zhihui/'
      //     : this.srcHost
      // }${this.$route.query.detailCaseUrl || encodeURIComponent(bizId)}`
      // const src = `http://localhost:7100/#${this.$route.query.detailCaseUrl || this.path}?bizId=${this.bizId}&hiddenNav=true&dp=${dp}&caseRoute=${caseRoute}`
      const src = `${host}/usecase/#${this.$route.query.detailCaseUrl || this.path}?bizId=${this.bizId}&hiddenNav=true&dp=${dp}&caseRoute=${caseRoute}`
      return src
    }
  },
  watch: {
    bizId: {
      handler(newV) {
        if (newV === -1) return
        this.matchObj = { params: { product_id: newV }}
      },
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('message', this.onEventListener, false)

    // window.addEventListener(
    //   'message',
    //   e => this.setRouterPath(e),
    //   false
    // )
  },
  beforeDestroy() {

  },
  // 销毁监听事件
  destroyed() {
    window.removeEventListener(
      'message',
      this.onEventListener,
      false
    )
  },
  methods: {
    onEventListener(e) {
      const { event, route, data } = e.data
      const { href } = window.location
      if (event === 'usecase-set') {
        const params = getUrlSearch(['caseRoute'], [{ key: 'caseRoute', value: route }])
        window.open(`${href.split('?')[0]}?${params}`, '_self')
      }
      if (event === 'done') {
        this.loading = false
      }
      if (event === 'detialPage') {
        const params = getUrlSearch(['dp'], [{ key: 'dp', value: data }])
        window.open(`${href.split('?')[0]}?${params}`, '_self')
      }
    }
  }
}
</script>
<style lang='less' scoped>
.case-main {
  margin: 10px 0 0 10px;
  overflow: none;
}
#useCaseIfr {
  width: 100%;
  height: calc(100vh - 60px);
}
.full-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
}
</style>