|
@@ -57,8 +57,7 @@ const { loading: uploading, send: update, abort: stop } = useRequest((file: File
|
|
|
|
|
|
const handle = () => {
|
|
|
if ( submitting.value ) return;
|
|
|
- if ( !showExample.value ) { snapshot.value = cameraRef.value?.handle(); }
|
|
|
- showExample.value = false;
|
|
|
+ snapshot.value = cameraRef.value?.handle();
|
|
|
stop();
|
|
|
};
|
|
|
const next = async () => {
|
|
@@ -106,22 +105,17 @@ tryOnUnmounted(() => {
|
|
|
<template>
|
|
|
<div class="flex flex-col">
|
|
|
<header class="flex flex-col justify-center px-24">
|
|
|
- <div class="text-3xl text-center" :class="{ required: config?.required }">{{ config?.label }}</div>
|
|
|
+ <div class="text-3xl text-center">{{ config?.label }}</div>
|
|
|
<div class="mt-8 text-lg text-center tracking-wider leading-10">{{ config?.description }}</div>
|
|
|
</header>
|
|
|
<main class="flex justify-center items-center">
|
|
|
<Camera ref="camera" v-bind="config?.video" @loaded="step = 1;">
|
|
|
<template #shade="{scale}">
|
|
|
<component :is="config?.shade" :scale="scale"></component>
|
|
|
- <img v-if="showExample && config?.example" :src="config.example" alt="示例" @click="showExample = false" />
|
|
|
</template>
|
|
|
</Camera>
|
|
|
- <div v-if="config?.example"
|
|
|
- class="size-40 absolute -top-8 right-2 cursor-pointer hover:text-primary"
|
|
|
- @click="showExample = !showExample"
|
|
|
- >
|
|
|
+ <div v-if="config?.example" class="size-40 absolute -top-8 right-2 cursor-pointer hover:text-primary">
|
|
|
<img class="size-full object-scale-down" :src="config?.example" alt="示例" />
|
|
|
- <div class="mt-2 text-xl text-center">示例</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
<footer class="flex flex-col justify-center items-center">
|
|
@@ -134,7 +128,7 @@ tryOnUnmounted(() => {
|
|
|
</div>
|
|
|
<div v-else-if="step" class="h-min text-center cursor-pointer hover:text-primary" @click="handle()">
|
|
|
<button class="size-28 border-8 rounded-full hover:border-primary"></button>
|
|
|
- <div class="mt-8 text-3xl">{{ showExample ? '开始拍照' : '点击拍照' }}</div>
|
|
|
+ <div class="mt-8 text-3xl">点击拍照</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
@@ -148,13 +142,4 @@ main {
|
|
|
position: relative;;
|
|
|
flex: 1 1 40%;
|
|
|
}
|
|
|
-
|
|
|
-.required {
|
|
|
- &::before {
|
|
|
- content: "*";
|
|
|
- margin-right: 4px;
|
|
|
- color: #f53030;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
</style>
|