|
|
@@ -10,6 +10,7 @@ import { getURLSearchParamsByUrl } from '@/tools';
|
|
|
import HandLeft from '@/assets/images/pulse-hand-left.png?url';
|
|
|
import HandRight from '@/assets/images/pulse-hand-right.png?url';
|
|
|
import { useVisitor } from '@/stores';
|
|
|
+import { Toast } from '@/platform';
|
|
|
|
|
|
type Props = Partial<SimplePulseModel> & { title?: string; results?: string; disabled?: boolean; simple?: boolean };
|
|
|
|
|
|
@@ -117,18 +118,33 @@ const load = async (panel: 'left' | 'right' | boolean = true, simple = false) =>
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+const panelWrapperRef = useTemplateRef('panel-wrapper-ref');
|
|
|
const open = async (panel?: 'left' | 'right', scroll = true) => {
|
|
|
if (disabled) return;
|
|
|
|
|
|
+ toast = Toast.loading(500);
|
|
|
await load(panel);
|
|
|
- if (scroll) getHeightAndScrollTop();
|
|
|
- else {
|
|
|
+ if (scroll) {
|
|
|
+ const last = panelConfig.height;
|
|
|
+ getHeightAndScrollTop();
|
|
|
+ if (last === panelConfig.height) {
|
|
|
+ const el = panelWrapperRef.value?.$el?.querySelector(`.van-floating-panel__content`);
|
|
|
+ el.scroll({ top: 0, behavior: 'smooth' });
|
|
|
+ console.log(panelWrapperRef.value.$el);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
const height = window.innerHeight * 0.8;
|
|
|
panelConfig.anchors = [0, height];
|
|
|
panelConfig.height = height;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+let toast;
|
|
|
+function iframeLoaded() {
|
|
|
+ toast?.close();
|
|
|
+}
|
|
|
+
|
|
|
tryOnMounted(() => {
|
|
|
if (!slots.exception) load(false, simple);
|
|
|
preview.clickMainPanelPreviewable = !!slots.exception;
|
|
|
@@ -147,7 +163,7 @@ watchPostEffect(() => {
|
|
|
<template>
|
|
|
<van-skeleton class="analysis" :row="5" :loading="report?.results == null" v-if="report?.results !== ''">
|
|
|
<PreviewSlot v-slot="{ src }">
|
|
|
- <iframe v-if="src" :src="src" :class="{ simple: !src.includes('Hand=true') }"></iframe>
|
|
|
+ <iframe v-if="src" :src="src" :class="{ simple: !src.includes('Hand=true') }" @load="iframeLoaded()"></iframe>
|
|
|
</PreviewSlot>
|
|
|
<slot>
|
|
|
<div ref="card" class="card m-6 text-lg" @click="panelConfig.height = 0">
|
|
|
@@ -155,7 +171,7 @@ watchPostEffect(() => {
|
|
|
<slot name="content" :report="report">
|
|
|
<div class="card__content">
|
|
|
<div v-if="report?.summaryLabel" class="flex justify-evenly">
|
|
|
- <div v-if="report?.summaryLabel?.left" class="flex flex-row-reverse justify-center" @click.stop="preview.clickMainPanelPreviewable && open('left')">
|
|
|
+ <div v-if="report?.summaryLabel?.left" class="part flex flex-row-reverse justify-center" @click.stop="preview.clickMainPanelPreviewable && open('left')">
|
|
|
<img style="width: 100px; height: 200px" :src="HandLeft" alt="左手" />
|
|
|
<div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl" :class="{ highlight: preview.showLeftPanel }">
|
|
|
<div>寸:<span style="letter-spacing: 4px">{{ report.summaryLabel.left.cun }}</span></div>
|
|
|
@@ -163,14 +179,16 @@ watchPostEffect(() => {
|
|
|
<div>尺:<span style="letter-spacing: 4px">{{ report.summaryLabel.left.chi }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="!disabled && preview.clickMainPanelPreviewable" class="absolute bottom-2 text-primary text-sm">查看脉象详情</div>
|
|
|
</div>
|
|
|
- <div v-if="report?.summaryLabel?.right" class="flex justify-center" @click.stop="preview.clickMainPanelPreviewable && open('right')">
|
|
|
+ <div v-if="report?.summaryLabel?.right" class="part flex justify-center" @click.stop="preview.clickMainPanelPreviewable && open('right')">
|
|
|
<img style="width: 100px; height: 200px" :src="HandRight" alt="右手" />
|
|
|
<div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl" :class="{ highlight: preview.showRightPanel }">
|
|
|
<div>寸:<span style="letter-spacing: 4px">{{ report.summaryLabel.right.cun }}</span></div>
|
|
|
<div>关:<span style="letter-spacing: 4px">{{ report.summaryLabel.right.guan }}</span></div>
|
|
|
<div>尺:<span style="letter-spacing: 4px">{{ report.summaryLabel.right.chi }}</span></div>
|
|
|
</div>
|
|
|
+ <div v-if="!disabled && preview.clickMainPanelPreviewable" class="absolute bottom-2 text-primary text-sm">查看脉象详情</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p v-if="report?.results" class="text-2xl text-center" @click.stop="preview.clickMainPanelPreviewable && open()">
|
|
|
@@ -202,7 +220,7 @@ watchPostEffect(() => {
|
|
|
</div>
|
|
|
</slot>
|
|
|
</slot>
|
|
|
- <van-floating-panel class="pulse-info-panel" :content-draggable="false" :lock-scroll="true" :anchors="panelConfig.anchors" v-model:height="panelConfig.height">
|
|
|
+ <van-floating-panel ref="panel-wrapper-ref" class="pulse-info-panel" :content-draggable="false" :lock-scroll="true" :anchors="panelConfig.anchors" v-model:height="panelConfig.height">
|
|
|
<template #header>
|
|
|
<div class="van-floating-panel__header !justify-between">
|
|
|
<div></div>
|
|
|
@@ -210,11 +228,11 @@ watchPostEffect(() => {
|
|
|
<van-icon class="pr-2" name="cross" @click="panelConfig.height = 0" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="area" :class="{ last: !preview.showRightPanel }" v-if="report?.summaryLabel?.left" v-show="preview.showLeftPanel">
|
|
|
+ <div class="area" :class="{ last: !preview.showRightPanel }" v-if="preview.showLeftPanel && report?.summaryLabel?.left">
|
|
|
<div class="title">左手脉象: {{ report.summaryLabel.left.summary?.join('、') }}</div>
|
|
|
<ReusePreview :src="preview.leftPanelUrl"></ReusePreview>
|
|
|
</div>
|
|
|
- <div class="area" v-if="report?.summaryLabel?.right" v-show="preview.showRightPanel">
|
|
|
+ <div class="area" v-if="preview.showRightPanel && report?.summaryLabel?.right">
|
|
|
<div class="title">右手脉象: {{ report.summaryLabel.right.summary?.join('、') }}</div>
|
|
|
<ReusePreview :src="preview.rightPanelUrl"></ReusePreview>
|
|
|
</div>
|
|
|
@@ -223,8 +241,15 @@ watchPostEffect(() => {
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.part {
|
|
|
+ position: relative;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
.highlight {
|
|
|
color: rgb(52 167 107 / var(--tw-text-opacity, 1));
|
|
|
+ & + div {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
$h: 1660px;
|