|
|
@@ -7,6 +7,8 @@ import { getReportMethod, updateReportMethod } from '@/request/api/report.api';
|
|
|
import { useRouteParams } from '@vueuse/router';
|
|
|
import { useRequest, useWatcher } from 'alova/client';
|
|
|
|
|
|
+import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
|
|
|
+
|
|
|
|
|
|
const id = useRouteParams<string>('id');
|
|
|
const { data, loading } = useWatcher(() => getReportMethod(id.value), [ id ], {
|
|
|
@@ -16,7 +18,9 @@ const { data, loading } = useWatcher(() => getReportMethod(id.value), [ id ], {
|
|
|
face: {},
|
|
|
},
|
|
|
immediate: true,
|
|
|
-});
|
|
|
+}).onSuccess(({ data }) => {
|
|
|
+ if (data?.miniProgramURL) panelOpen(data.payLock ? panelProps.anchors[1] : 100);
|
|
|
+})
|
|
|
|
|
|
const { loading: uploading, send: upload } = useRequest(() => updateReportMethod(id.value, data.value), {
|
|
|
immediate: false,
|
|
|
@@ -54,12 +58,23 @@ async function miniProgram() {
|
|
|
Notify.warning(`未获取到小程序地址，请联系管理员或重试`);
|
|
|
return;
|
|
|
}
|
|
|
- ReportPreview = defineAsyncComponent(() => import('./ReportPreview.vue'));
|
|
|
- reportPreviewProps.mode = 'img';
|
|
|
- reportPreviewProps.title = '微信 扫一扫';
|
|
|
- reportPreviewProps.url = url;
|
|
|
- reportPreviewProps.show = true;
|
|
|
+ panelOpen();
|
|
|
}
|
|
|
+
|
|
|
+const panelHeight = ref(0);
|
|
|
+const panelProps = reactive({
|
|
|
+ anchors: [0, window.innerWidth],
|
|
|
+ contentDraggable: false,
|
|
|
+ lockScroll: true,
|
|
|
+
|
|
|
+ show: false,
|
|
|
+});
|
|
|
+const panelOpen = (min?: number) => {
|
|
|
+ if (panelProps.show && min) panelProps.anchors[0] = min;
|
|
|
+ panelHeight.value = panelProps.anchors[1];
|
|
|
+};
|
|
|
+
|
|
|
+const scrollable = computed(() => panelHeight.value < panelProps.anchors[1] || panelHeight.value === 0);
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="report-wrapper">
|
|
|
@@ -70,11 +85,15 @@ async function miniProgram() {
|
|
|
健康分析报告
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="grow shrink-0 h-full min-w-16"></div>
|
|
|
+ <div class="grow shrink-0 h-full min-w-16">
|
|
|
+ <router-link :to="{ path: '/screen' }" replace>
|
|
|
+ <img class="size-8 object-scale-down" :src="NavHomeSelect" alt="返回首页" />
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="page-content flex flex-col overflow-hidden">
|
|
|
<van-skeleton class="flex-auto" title :row="3" :loading>
|
|
|
- <div class="flex-auto overflow-y-auto">
|
|
|
+ <div class="flex-auto" :class="{ 'overflow-y-auto': scrollable }">
|
|
|
<div class="my-6 text-primary text-2xl text-center">报告日期：{{ data.date }}</div>
|
|
|
<div class="card m-6 text-lg">
|
|
|
<div class="card__title text-primary text-3xl font-bold"></div>
|
|
|
@@ -167,6 +186,23 @@ async function miniProgram() {
|
|
|
</van-skeleton>
|
|
|
<NavBar class="flex-none" :uploading @print="print" @mini="miniProgram"></NavBar>
|
|
|
<Component :is="ReportPreview" v-bind="reportPreviewProps" v-model:show="reportPreviewProps.show"></Component>
|
|
|
+
|
|
|
+ <van-floating-panel v-model:height="panelHeight" v-bind="panelProps">
|
|
|
+ <Transition>
|
|
|
+ <div class="panel-content">
|
|
|
+ <img
|
|
|
+ class="size-full object-contain"
|
|
|
+ v-if="panelHeight === panelProps.anchors[1] || panelHeight > panelProps.anchors[0] * 1.5"
|
|
|
+ :src="data.miniProgramURL"
|
|
|
+ alt="小程序码"
|
|
|
+ />
|
|
|
+ <div class="flex justify-center items-center" v-else @click="panelOpen()">
|
|
|
+ <img class="h-10 w-10" src="@/assets/images/mini-program.svg" alt="小程序" />
|
|
|
+ <span class="text-lg ml-2">小程序</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </van-floating-panel>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -182,6 +218,26 @@ async function miniProgram() {
|
|
|
.text-grey {
|
|
|
color: #e3e3e3;
|
|
|
}
|
|
|
+
|
|
|
+.report-wrapper {
|
|
|
+ .panel-content {
|
|
|
+ padding: 0 var(--van-floating-panel-header-height) var(--van-floating-panel-header-height);
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-enter-active,
|
|
|
+ .v-leave-active {
|
|
|
+ transition: opacity 0.5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-enter-from,
|
|
|
+ .v-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.overflow-y-auto {
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.report-wrapper .card {
|
kumu
