112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<template>
|
|
<div class="app-bsch-iframe tc base-mask" v-if="isLoadding">
|
|
<img class="align-middle" style="width: 100px" :src="requireImg('page-loading.svg')" alt="" />
|
|
</div>
|
|
<div
|
|
:class="{
|
|
'app-bsch-iframe base-mask': true,
|
|
'app-bsch-iframe__header': isHeader,
|
|
}"
|
|
v-if="!!url"
|
|
v-show="!isLoadding"
|
|
>
|
|
<AppHeader :app-name="appName" v-if="!!isHeader" @on-back-click="onBackClick"></AppHeader>
|
|
<iframe id="app_bsch_iframe" :src="url" @load="onIframeLoad"></iframe>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useDefaultStore } from "@/store";
|
|
import { BaseLoadEnum, BschIframeType, IframePageParmas, StateEnum } from "@/types";
|
|
import { computed, ref, nextTick, onMounted, onUnmounted } from "vue";
|
|
import AppHeader from "./AppHeader.vue";
|
|
import mittBus from "@/utils/mitt";
|
|
import { bschRoleEncode, bschRoleParamsEncode } from "@/utils/bschRoleEncode";
|
|
import { requireImg } from "@/utils/hook/useImg";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const isLoadding = ref(true),
|
|
isHeader = ref(false),
|
|
appUrl = ref<string>(),
|
|
appName = ref<string>();
|
|
const store = useDefaultStore();
|
|
const url = computed(() => {
|
|
if (!!isHeader.value) {
|
|
if (!appUrl.value || !isValidUrl(appUrl.value)) return null;
|
|
let uri = new URL(appUrl.value);
|
|
if (!!isHeader.value) {
|
|
let { childId, roleId, schId } = store.curRoleInfo;
|
|
uri.searchParams.set("role", bschRoleParamsEncode(JSON.stringify({ childId, roleId, schId })));
|
|
}
|
|
return uri.href;
|
|
} else return appUrl.value;
|
|
});
|
|
|
|
const isValidUrl = (urlString: string) => {
|
|
try {
|
|
return Boolean(new URL(urlString));
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
};
|
|
async function openPage(params: IframePageParmas) {
|
|
isLoadding.value = true;
|
|
appUrl.value = "";
|
|
await nextTick();
|
|
isHeader.value = params.isHeader ?? false;
|
|
appUrl.value = params.url;
|
|
appName.value = params.appName;
|
|
|
|
setTimeout(() => {
|
|
isLoadding.value = false;
|
|
}, 500);
|
|
}
|
|
|
|
function onIframeLoad() {
|
|
const ele: any = document.getElementById("app_bsch_iframe");
|
|
if (!ele || !isHeader.value) return false;
|
|
const msgObj = {
|
|
roleInfo: store.curRoleInfo,
|
|
};
|
|
const msgStr = bschRoleEncode(msgObj);
|
|
ele.contentWindow.postMessage(msgStr, "*");
|
|
// isLoadding.value = true;
|
|
}
|
|
|
|
onMounted(function () {
|
|
window.addEventListener("message", iframeCallback);
|
|
});
|
|
|
|
onUnmounted(function () {
|
|
window.removeEventListener("message", iframeCallback);
|
|
});
|
|
|
|
function iframeCallback(ev: MessageEvent<any>) {
|
|
const { id, code } = JSON.parse(ev.data);
|
|
if (Number(code) == BaseLoadEnum.GoBack) {
|
|
router.push({ name: "index" });
|
|
setTimeout(() => {
|
|
mittBus.emit("updateState", StateEnum.Desktop);
|
|
}, 10);
|
|
} else if (Number(code) == BaseLoadEnum.UserInfo) {
|
|
showUserInfo();
|
|
}
|
|
}
|
|
function showUserInfo() {
|
|
mittBus.emit("showUserInfoModal", true);
|
|
}
|
|
|
|
function onBackClick() {
|
|
if (route.name === "AppDetails") router.push({ name: "index" });
|
|
setTimeout(() => {
|
|
mittBus.emit("updateState", StateEnum.Desktop);
|
|
}, 10);
|
|
}
|
|
defineExpose({ openPage });
|
|
</script>
|
|
|
|
<style></style>
|