webview/src/modules/camera/camera-result.page.vue

<script setup lang="ts">
import { useRouteQuery } from '@vueuse/router';
import { useRouter }     from 'vue-router';


defineOptions({
  name: 'CameraResult',
});

const router = useRouter();
const to = useRouteQuery('to', '/screen');
const tips = computed(() => to.value.includes('screen') ? '返回首页' : '下一步');
const countdown = ref(5);

let timer: ReturnType<typeof setInterval>;

function done() {
  clearInterval(timer);
  router.replace({ path: to.value });
}

onMounted(() => {
  timer = setInterval(() => {
    const _countdown = countdown.value - 1;
    if ( _countdown <= 0 ) { done(); } else { countdown.value = _countdown; }
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>
<template>
  <div class="flex flex-col">
    <header class="flex flex-col justify-center px-24" style="flex: 1 1 20%">
      <div class="text-3xl text-center">拍摄完成</div>
    </header>
    <main class="flex flex-col justify-evenly px-24" style="flex: 1 1 50%">
      <img class="size-40 mx-auto" src="@/assets/images/tips.png">
      <div>
        <div class="text-3xl text-center">恭喜您！</div>
        <div class="text-3xl text-center my-8">完成舌面象的采集</div>
      </div>
    </main>
    <footer class="flex justify-evenly items-start" style="flex: 1 1 30%">
      <van-button class="decorate !text-xl !text-primary-400" @click="done()">
        {{ tips }}({{ countdown }})
      </van-button>
    </footer>
  </div>
</template>
<style scoped lang="scss">
</style>