adweb3-web/src/views/adweb/sohoeb2b/Order.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" v-if="isShowSelect">
      <select-site ref="selectSiteRef" @set-site-info="setSiteInfo" select-width="100%" label="站点选择" />
    </div>
    <!-- 查询区域-END -->

    <a-spin :spinning="confirmLoading">
      <iframe
        v-if="showiIrame"
        ref="iframeRef"
        :src="srcUrl"
        height="100%"
        width="100%"
        :style="{ height: iframeHeight + 'px', border: 0, 'overflow-y': 'scroll' }"
      >
      </iframe>

      <a-result
        status="403"
        v-else-if="showNoResult"
        title="网站尚未设置用于处理订单的URL"
        :style="{ height: iframeHeight + 'px', border: 0, 'overflow-y': 'scroll' }"
      />
    </a-spin>
  </a-card>
</template>

<script lang="ts" name="SiteOrderData" setup>
  import { getAction } from '/@/api/manage/manage';
  import { computed, nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue';
  import { RoleEnum } from '@/enums/roleEnum';
  import { getTenantById } from '@/views/system/tenant/tenant.api';
  import { getAuthCache } from '@/utils/auth';
  import { TENANT_ID } from '@/enums/cacheEnum';
  import { useUserStore } from '/src/store/modules/user';
  import SelectSite from '@/components/Adweb/selectSite.vue';

  const srcUrl = ref('');
  const showiIrame = ref(false);
  const showNoResult = ref(false);
  const confirmLoading = ref(false);
  const isShowSelect = ref(false);
  const windowHeight = ref(window.innerHeight);
  const iframeHeight = ref(window.innerHeight);
  const userStore = useUserStore();
  const iframeRef = ref();

  // 管理员角色
  const isAdmin = computed(() => {
    return (
      userStore.getRoleList.includes(RoleEnum.ADWEB_CHANNEL_ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.SEO_ADMIN) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_SITE_MANAGER) ||
      userStore.getRoleList.includes(RoleEnum.ADWEB_SEO_MANAGER)
    );
  });

  // 是否是苏豪纺织的租户
  const isSohoeb2b = ref(false);

  onBeforeMount(async () => {
    isSohoeb2bTenant();
  });

  onMounted(() => {
    window.addEventListener('resize', () => {
      windowHeight.value = window.innerHeight;
      iframeHeight.value = isShowSelect.value ? windowHeight.value - 59 - 24 - 24 - 20 - 44 : windowHeight.value - 59 - 24 - 24 - 20;
    });

    iframeHeight.value = isShowSelect.value ? windowHeight.value - 59 - 24 - 24 - 20 - 44 : windowHeight.value - 59 - 24 - 24 - 20;
  });

  // 判断当前登录的租户是否是苏豪通的租户
  function isSohoeb2bTenant() {
    getTenantById({ id: getAuthCache(TENANT_ID) }).then((res) => {
      isSohoeb2b.value = res.name.includes('苏豪纺织集团');

      // 针对租户管理员，并且是苏豪纺织的租户
      if (isAdmin.value && isSohoeb2b.value) {
        isShowSelect.value = true;
      }
    });
  }

  // 调用方法
  function iframeLoad() {
    nextTick(() => {
      confirmLoading.value = true;
      const iframe = iframeRef.value;

      iframe.onload = () => {
        confirmLoading.value = false;
      };
    });
  }

  function setSiteInfo() {
    confirmLoading.value = true;
    let url = location.href;
    let i = url.lastIndexOf('/');
    let siteId = url.substring(i + 1, url.length);
    let siteCode = '';
    if (localStorage.getItem('siteCode') !== null) {
      siteCode = localStorage.getItem('siteCode');
    }
    getAction('/adweb/adwebSiteManage/getSiteOrderInfo?siteCode=' + siteCode, {}).then(function (res) {
      if (res.code == 200) {
        showiIrame.value = true;
        srcUrl.value = res.result.orderUrl;
        iframeLoad();
      } else {
        showiIrame.value = false;
        showNoResult.value = true;
        confirmLoading.value = false;
      }
    });
  }
</script>
<style scoped>
  .table-page-search-wrapper {
    margin-bottom: 20px;

    :deep(.ant-form-item-label) {
      width: 100px;
      text-align: left;
    }

    :deep(.ant-form-item-control) {
      width: 30%;
      min-width: 200px;
      flex-grow: initial;
    }
  }
</style>