|
|
@@ -7,18 +7,20 @@ 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 ], {
|
|
|
initialData: {
|
|
|
descriptionsTable: { column: [], data: [] },
|
|
|
- tongueTable: { column: [], data: [] },
|
|
|
- tongueException: [],
|
|
|
- tongueAnalysis: {},
|
|
|
- faceAnalysis: {},
|
|
|
+ tongue: {},
|
|
|
+ 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,
|
|
|
@@ -56,15 +58,26 @@ 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>
|
|
|
+ <div class="report-wrapper">
|
|
|
<div 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">
|
|
|
@@ -72,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>
|
|
|
@@ -127,56 +144,18 @@ async function miniProgram() {
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="card m-6 text-lg">
|
|
|
- <div class="card__title mb-3 text-primary text-2xl font-bold">舌象分析</div>
|
|
|
- <div class="card__content">
|
|
|
- <table class="mt-8 mb-2 w-full table-auto border border-collapse border-primary">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th class="py-4 px-2 text-primary border border-primary"
|
|
|
- v-for="(value, i) in data.tongueTable.column" :key="i"
|
|
|
- v-html="value"
|
|
|
- >
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="item in data.tongueTable?.data" :key="item[0]">
|
|
|
- <td class="py-4 px-2 border border-primary text-center text-grey"
|
|
|
- v-for="(value, i) in item" :key="i"
|
|
|
- v-html="value"
|
|
|
- ></td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="grid grid-rows-1 grid-cols-2 gap-8 m-6">
|
|
|
- <div class="card text-lg" v-for="item in data.tongueException">
|
|
|
- <div class="card__title mb-3 text-primary text-2xl font-bold">{{ item.title }}</div>
|
|
|
- <div class="card__content">
|
|
|
- <div class="flex my-6 justify-center">
|
|
|
- <img class="flex-none w-2/4 object-scale-down" :src="item.cover" alt="舌象">
|
|
|
- <div class="flex-none ml-8">
|
|
|
- <div class="my-2 px-4 py-2 rounded-lg border border-primary-400 text-primary"
|
|
|
- v-for="value in item.tags" :key="value"
|
|
|
- >{{ value }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <AnalysisComponent title="舌象分析" v-bind="data.tongue" :cover="[]"></AnalysisComponent>
|
|
|
+ <AnalysisComponent title="面象分析" v-bind="data.face">
|
|
|
+ <template #content="{result, cover}">
|
|
|
+ <div class="card__content flex">
|
|
|
+ <div class="flex-auto text-grey mt-6">{{ result }}</div>
|
|
|
+ <div class="flex-none w-2/4 max-h-96 ml-4">
|
|
|
+ <img class="size-full object-scale-down" v-for="src in cover" :key="src" :src="src" alt="面象">
|
|
|
</div>
|
|
|
- <div class="my-2 text-grey" v-for="value in item.descriptions" :key="value">{{ value }}</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card m-6 text-lg" v-if="data.faceAnalysis?.['结果']">
|
|
|
- <div class="card__title mb-3 text-primary text-2xl font-bold">面象分析</div>
|
|
|
- <div class="card__content flex">
|
|
|
- <div class="flex-auto text-grey mt-6">{{ data.faceAnalysis?.[ '结果' ] }}</div>
|
|
|
- <div class="flex-none w-2/4 max-h-96 ml-4">
|
|
|
- <img class="size-full object-scale-down" :src="data.faceAnalysis?.['面象']" alt="面象">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <template #exception><div><!--空占位符--></div></template>
|
|
|
+ </AnalysisComponent>
|
|
|
<div class="card m-6 text-lg" v-if="data['中医证素']?.length">
|
|
|
<div class="card__title mb-3 text-primary text-2xl font-bold">中医证素</div>
|
|
|
<div class="card__content">
|
|
|
@@ -207,16 +186,27 @@ 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>
|
|
|
<style scoped lang="scss">
|
|
|
-.card {
|
|
|
- padding: 24px;
|
|
|
- border-radius: 24px;
|
|
|
- box-shadow: inset 0 0 80px 0 #34a76b60;
|
|
|
-}
|
|
|
-
|
|
|
.van-button.decorate {
|
|
|
font-size: 20px;
|
|
|
height: 62px;
|
|
|
@@ -228,4 +218,31 @@ 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 {
|
|
|
+ padding: 24px;
|
|
|
+ border-radius: 24px;
|
|
|
+ box-shadow: inset 0 0 80px 0 #34a76b60;
|
|
|
+}
|
|
|
+</style>
|