Bläddra i källkod

修复购买链接弹窗尺寸

cc12458 1 dag sedan
förälder
incheckning
e0ac1ce6b7
1 ändrade filer med 11 tillägg och 8 borttagningar
  1. 11 8
      src/modules/report/scheme.page.vue

+ 11 - 8
src/modules/report/scheme.page.vue

@@ -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"