webview/src/modules/pulse/pulse.page.vue

<script setup lang="ts">
import { Notify } from '@/platform';
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';

import { useRequest } from 'alova/client';
import { putPulseMethod } from '@/request/api/pulse.api';
import { processMethod3 } from '@/request/api';
import type { Flow } from '@/request/model';

import { useVisitor } from '@/stores';

import NavHomeSelect from '@/assets/images/nav-home.select.png?url';
import HandLeft from '@/assets/images/pulse-hand-left.png?url';
import HandRight from '@/assets/images/pulse-hand-right.png?url';

const router = useRouter();
const Visitor = useVisitor();

const pending = ref(false);
const finished = ref(false);
const supported = ref(true);

async function handle() {
  if (pending.value) return;
  pending.value = true;
  clearInterval(timer);

  const patientId = Visitor.patientId;
  try {
    await load();
    const result = await Bridge.pulse(patientId!!);
    await submit(patientId, result);
  } catch (e: any) {
    let message = e.message;
    if (e instanceof ReferenceError) {
      supported.value = false;
      message = '当前环境不支持脉诊设备，请联系管理员';
    }
    if (!supported.value || process.value?.current?.optional) {
      done.value = next.value?.optional
        ? { ...next.value, countdown: 5 }
        : {
            title: '返回首页',
            route: '/screen',
            countdown: 5,
          };
      next.value = void 0;
      start();
    } else {
      done.value = void 0;
      message = '请再次测量脉诊';
    }
    Notify.warning(message);
  }
  pending.value = false;
}

const done = shallowRef<Partial<Flow> & { countdown: number }>();
const next = shallowRef<Partial<Flow>>();

const {
  data: process,
  loading,
  send: load,
} = useRequest(processMethod3, { immediate: false }).onSuccess(({ data }) => {
  if (data.next.route === '/screen') {
    done.value = { title: '返回首页', route: '/screen', countdown: 30 };
    next.value = void 0;
  } else if (data.next.route === '/pulse/result') {
    done.value = data.next.optional ? { title: '返回首页', route: '/screen', countdown: 10 } : void 0;
    next.value = { title: data.next.title || '查看报告', route: data.next.route };
  } else {
    done.value = { title: data.next.title || '获取健康调理方案', route: data.next.route, countdown: 10 };
    next.value = void 0;
  }
});

const {
  data: report,
  loading: submitting,
  send: submit,
} = useRequest((id, result) => putPulseMethod(id, result), { immediate: false }).onSuccess(() => {
  finished.value = true;
  start();
});

let timer: ReturnType<typeof setInterval>;
const countdown = ref(5);

function start(value?: number) {
  if (!done.value) return;
  countdown.value = value ?? done.value.countdown ?? 3;
  timer = setInterval(() => {
    const _countdown = countdown.value - 1;
    if (_countdown <= 0) {
      replace(done.value?.route);
    } else {
      countdown.value = _countdown;
    }
  }, 1000);
}

function replace(path: string = '/screen') {
  return router.replace({ path });
}

tryOnMounted(() => {
  setTimeout(() => handle(), 300);
});
tryOnUnmounted(() => {
  clearInterval(timer);
});
</script>
<template>
  <div>
    <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">
        <div class="font-bold text-3xl text-nowrap text-center tracking-wide overflow-ellipsis overflow-hidden">
          {{ finished ? '完成脉诊采集' : '脉诊采集' }}
        </div>
      </div>
      <div class="grow shrink-0 h-full min-w-16 flex items-center justify-end overflow-hidden">
        <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">
      <header></header>
      <main class="flex flex-col justify-evenly px-8">
        <template v-if="finished && report">
          <img class="size-40 mx-auto" src="@/assets/images/tips.png" alt="" />
          <div>
            <div class="text-3xl text-center">恭喜您！</div>
            <div class="text-3xl text-center my-8">完成脉诊采集</div>
          </div>
          <div v-if="report">
            <div v-if="report.summaryLabel" class="flex justify-evenly">
              <div v-if="report.summaryLabel?.left" class="flex flex-row-reverse justify-center">
                <img style="width: 100px;height: 200px;" :src="HandLeft" alt="左手" />
                <div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl">
                  <div>
                    寸：<span style="letter-spacing: 4px">{{ report.summaryLabel.left.cun }}</span>
                  </div>
                  <div>
                    关：<span style="letter-spacing: 4px">{{ report.summaryLabel.left.guan }}</span>
                  </div>
                  <div>
                    尺：<span style="letter-spacing: 4px">{{ report.summaryLabel.left.chi }}</span>
                  </div>
                </div>
              </div>
              <div v-if="report.summaryLabel?.right">
                <div class="flex justify-center">
                  <img style="width: 100px;height: 200px;"  :src="HandRight" alt="右手" />
                  <div class="flex flex-col justify-evenly translate-y-2 h-40 text-xl">
                    <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>
              </div>
            </div>
            <p v-if="report.results" class="text-2xl text-center">
              总体脉象：<span class="text-primary-400" style="letter-spacing: 4px">{{ report.results }}</span>
            </p>
          </div>
        </template>
      </main>
      <footer class="flex flex-col justify-center items-center">
        <van-button
          v-if="!pending && finished && next"
          class="decorate !text-xl !text-primary-400"
          @click="replace(next.route)"
        >
          {{ next.title }}
        </van-button>
        <van-button
          v-if="!pending && done"
          class="decorate !text-xl !text-primary-400 !mb-6"
          @click="replace(done.route)"
        >
          {{ done.title }}({{ countdown }})
        </van-button>
        <div v-if="supported && !finished" class="van-button decorate" @click="handle()">
          <div class="van-button__content">
            <van-loading v-if="loading || pending || submitting" />
            <span v-else class="van-button__text">连接脉诊</span>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<style scoped lang="scss">
header {
  flex: 1 1 10%;
}

footer {
  flex: 1 1 30%;
}

main {
  position: relative;
  flex: 1 1 50%;
}

.decorate {
  margin: 24px 0;
}
</style>