|
@@ -0,0 +1,69 @@
|
|
|
+<template>
|
|
|
+ <section v-if="bizId !== -1" class="case-main">
|
|
|
+ <iframe
|
|
|
+ id="useCaseIframe"
|
|
|
+ frameborder="0"
|
|
|
+ scrolling="no"
|
|
|
+ :src="src"
|
|
|
+ />
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { EncryptId } from '@/utils/crypto-js.js'
|
|
|
+import { getEnv } from '@/apiConfig/requestIP.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ifr: null,
|
|
|
+ srcHost: '/case/caseList/zhihui/'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['bizId']),
|
|
|
+ src() {
|
|
|
+ const bizId = EncryptId(`${this.bizId}`)
|
|
|
+ const host = getEnv() === 'test' ? 'http://10.96.83.94:9000/index.html#' : 'http://agiletc.intra.xiaojukeji.com/#'
|
|
|
+ const src = `${host}${this.srcHost}${bizId}`
|
|
|
+ return src
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ bizId: {
|
|
|
+ handler(newV) {
|
|
|
+ if (newV === -1) return
|
|
|
+ this.matchObj = { params: { product_id: newV }}
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('message', (e) => {
|
|
|
+ if (e.data === 'useCaseDone') {
|
|
|
+ this.loaded()
|
|
|
+ }
|
|
|
+ }, false)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loaded() {
|
|
|
+ const ifr = document.getElementById('useCaseIframe')
|
|
|
+ if (ifr) {
|
|
|
+ ifr.contentWindow.postMessage({ user: localStorage.getItem('username') }, '*')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.case-main {
|
|
|
+ // padding: 20px 0 20px 18px;
|
|
|
+ margin: 10px;
|
|
|
+ // border-radius: 10px;
|
|
|
+ overflow: scroll;
|
|
|
+}
|
|
|
+#useCaseIframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+</style>
|