|
@@ -0,0 +1,112 @@
|
|
|
+<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 } = getUrlParamsObj(['caseRoute'])
|
|
|
+ // 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&caseRoute=${caseRoute}`
|
|
|
+ const src = `${host}/usecase/#${this.$route.query.detailCaseUrl || this.path}?bizId=${this.bizId}&hiddenNav=true&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) {
|
|
|
+ console.log(e.data)
|
|
|
+ const { event, route } = 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|