diantou/src_product/iam/cube/textContrast/cube-text-contrast.vue

<template>
  <div :class="$style.mainDiv">
    <div v-show="loading" :class="$style.loadingDiv">
      <a-spin :spinning="loading" tip="单点认证中..."></a-spin>
    </div>
    <div v-show="!loading" :class="$style.frameDiv">
      <!-- <a-card> -->
      <iframe v-show="showFrame" :src="frameSrc" frameborder="0"></iframe>
      <!-- </a-card> -->
    </div>
  </div>
</template>

<script>
import cubeServices from '@product/iam/cube/cube-services'
import axios from '@/common/services/axios-instance'
import { sdLocalStorage } from '@/common/services/storage-service'
import { Modal } from '@/common/one-ui'
import components from './_import-components/cube-text-contrast-import'

export default {
  name: 'CubeTextContrast',
  metaInfo: {
    title: '文本对比',
  },
  components,
  data() {
    return {
      loading: true, // 默认先显示加载中
      showFrame: false, // 默认不显示frame，拼接好url才显示
      frameSrc: '',
    }
  },
  mounted() {
    // 加载时，获取token
    setTimeout(() => {
      this.loading = false
    }, 2000)
    this.getFrameUrl()
  },
  methods: {
    // 获取要素提取页面地址，主要是拼接token
    getFrameUrl() {
      cubeServices.checkCubeToken('textdiff').then((res) => {
        if (!res) {
          Modal.warning({
            title: '提示',
            content: '未开启CUBE集成功能参数或单点认证失败，请联系管理员',
          })
          return false
        }
        const cubeJson = JSON.parse(sdLocalStorage.getItem('cube') || '{}')
        // 项目修改
        axios.get('api/xcoa-mobile/v1/iamcubecontract/getCubeWebUrl').then((res) => {
          if (res.data !== '') {
            this.frameSrc =
              res.data +
              `/projects/10/textdiff/o/textdiff_promote?access_token=${cubeJson.textdiff_token}&banner=false`
            this.showFrame = true
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  width: 100%;
  height: 100%;
  text-align: center;
  background: #fff;
  .loading-div {
    padding-top: 15%;
  }
}
.frame-div {
  width: 100%;
  height: 100%;
  :global(.ant-card) {
    width: 100%;
    height: 100%;
  }
  :global(.ant-card-body) {
    width: 100%;
    height: 100%;
  }

  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>