uk_front/components/Bxh.vue

<template>
  <div class="iframe-main">
    <div class="iframe-dom"  :style="{height: height }" ></div>
  </div>
</template>
<script>
export default {
  head(){
		return {
			link: [
				{ rel: 'stylesheet', href: '//yun.baoxiaohe.com/openflatform/css/v1.0/sdk.css' },],
		}
	},
  props:{
    bxhType:String,
    design:Number,
    height:{
      type: String,
      default: '99vh',
    },
    link:String,
    templateArr:{
      type: Array,
      default: ()=>{
        return []
      },
    }
  },
  data() {
    return {
      iframe: null,
    }
  },
  watch:{
  },
  mounted() {
    this.$nextTick(()=>{
      this.createBxh()
    });
    window.addEventListener("message", this.receiveData)
  },
  beforeDestroy() {
    window.removeEventListener("message", this.receiveData)
  },
  methods: {
    async createBxh() {
      if(this.bxhType=='3D'){
        let companyToken = await this.$axios.get("/api/bxh/company/token")
        let design=this.design || this.link
        this.init(design,companyToken.result,this.bxhType)
      }else if(this.bxhType=='design'){
        let token = await this.$axios.get("/api/bxh/token")
        this.init(this.design,token.result,this.bxhType)
      }else if(this.bxhType=='render'){
        let token = await this.$axios.get("/api/bxh/token")
        this.init(this.design,token.result,this.bxhType)
      }
    },
    init(id,token,bxhType) {
      this.iframe = new window.BXHIframe({
        // production: false,
        // env:true,
        elCls:'iframe-dom',
        prefixCls:'detail-iframe-sdk',
        locale:"en-US",
        params: {
            id,
            token3D:token,
            token,
            project_id: id,
            isShowRotate:false,  //右下角的旋转按钮
            isShowFold:false,    //右下角的折叠按钮
            locale:"en-US"
            },
        name: bxhType,
      })
    },
 
    receiveData(event) {
      if (event) {
        try {
          if (typeof event.data === "string") {
            const { event: e, name, params,preDesignParams } = JSON.parse(
              event.data
            )
            if (e === "needLogin") {
              this.iframe.preDesign({...preDesignParams,token: ''})
            } else if (e === "viewDetails") {
              this.iframe.render({ name, params })
            }else if (e === "viewDetails") {
              this.iframe.render({ name, params })
            } else if (e === "startDesign") {
              this.iframe.render({ params: { id: params.id, token: '' }, name: "design" })
            } else if (e === "logoutSuccess") {
              console.log("logoutSuccess")
            } else if (e === "reloadParams") {
              console.log("reloadParams")
            } else if (e === "saveSuccess") {
              console.log("saveSuccess")
            } else if (e === "saveFail") {
              console.log("saveFail")
            } else if (e === "loadSuccess") {
              console.log("loadSuccess")
            } else if (e === "toPreview3d") {
              console.log("手机端编辑器进入3d页面回调")
            } else if (e === "toEditor") {
              console.log("手机端从3d页面进入编辑器回调")
            }  
          }
        } catch (error) {
          console.log(error)
        }
      }
    },
  },
}
</script>
<style scoped>
/* .iframe-main {
  width: 100%;
  height: 100%;
} */
.iframe-dom {
  position: relative;
}
</style>