|
|
@@ -51,18 +51,19 @@ const panelConfig = reactive({
|
|
|
onError() {},
|
|
|
onComplete(event?: Event) {},
|
|
|
});
|
|
|
+const pageHeader = useTemplateRef('page-header');
|
|
|
const container = useTemplateRef('container');
|
|
|
const getHeightAndScrollTop = (value?: HTMLElement | string) => {
|
|
|
const el = typeof value === 'string' ? container.value?.querySelector<HTMLDivElement>(`#${value}`) : value;
|
|
|
if (!el) return true;
|
|
|
el.scrollIntoView({ behavior: 'instant', block: 'start' });
|
|
|
- const rect = el.getBoundingClientRect();
|
|
|
- const maxHeight = window.innerHeight - rect.top;
|
|
|
- const height = maxHeight - rect.height;
|
|
|
+ const maxHeight = window.innerHeight - (pageHeader.value?.getBoundingClientRect().height ?? 0);
|
|
|
+ const height = window.innerHeight - el.getBoundingClientRect().bottom - Number.parseFloat(getComputedStyle(el).marginBottom);
|
|
|
panelConfig.anchors = [0, height, maxHeight];
|
|
|
panelConfig.height = height;
|
|
|
panelConfig.fullHeight = maxHeight;
|
|
|
};
|
|
|
+let lastFrameSrc: string;
|
|
|
async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
|
|
|
if (panelConfig.goods === goods) {
|
|
|
panelConfig.height = panelConfig.anchors[panelConfig.anchors.length - 1];
|
|
|
@@ -70,16 +71,18 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
|
|
|
}
|
|
|
|
|
|
if (goods.type === 'link') {
|
|
|
- const toast = Toast.loading(500);
|
|
|
+ const toast = lastFrameSrc !== goods.value ? Toast.loading(500) : void 0;
|
|
|
+ lastFrameSrc = goods.value;
|
|
|
panelConfig.goods = goods;
|
|
|
panelConfig.onComplete = () => {
|
|
|
- toast.close();
|
|
|
+ toast?.close();
|
|
|
panelConfig.height = panelConfig.anchors[panelConfig.anchors.length - 1];
|
|
|
};
|
|
|
panelConfig.onError = () => {
|
|
|
Toast.error(`链接加载错误`)
|
|
|
panelConfig.height = 0;
|
|
|
};
|
|
|
+ if (!toast) setTimeout(panelConfig.onComplete, 100);
|
|
|
} else {
|
|
|
Toast.warning(`暂不支持该操作 (${goods.type})`);
|
|
|
return;
|
|
|
@@ -89,13 +92,13 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
|
|
|
const height = window.innerHeight * 0.8;
|
|
|
panelConfig.anchors = [0, height];
|
|
|
panelConfig.height = height;
|
|
|
- panelConfig.fullHeight = window.innerHeight;
|
|
|
+ panelConfig.fullHeight = window.innerHeight - (pageHeader.value?.getBoundingClientRect().height ?? 0);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="page-header flex py-4 px-4">
|
|
|
+ <div ref="page-header" class="page-header flex py-4 px-4">
|
|
|
<div class="grow shrink-0 h-full min-w-16"></div>
|
|
|
<div class="grow-[3] shrink mx-2 flex flex-col justify-center overflow-hidden">
|
|
|
<div class="font-bold text-3xl text-nowrap text-center tracking-wide overflow-ellipsis overflow-hidden">
|
|
|
@@ -145,7 +148,7 @@ async function openGoodsPanel(goods: SchemeGoodsProps, event?: Event | string) {
|
|
|
</div>
|
|
|
|
|
|
<PreviewLinkSlot v-slot="{ src, complete, error }">
|
|
|
- <iframe v-if="src" :src="src" @load="complete!" @error="error!"></iframe>
|
|
|
+ <iframe v-if="src" :src="src" :style="{ maxHeight: panelConfig.height - 30 + 'px' }" @load="complete!" @error="error!"></iframe>
|
|
|
</PreviewLinkSlot>
|
|
|
<van-floating-panel
|
|
|
ref="panel-wrapper-ref"
|