015/front/components/Drawer/PickupShareDrawer.vue

<script setup lang="ts">
import VeeForm from '@/components/VeeForm.vue';
import FormButton from '@/components/Field/FormButton.vue';
import PinInputField from '@/components/Field/PinInputField.vue';
import type { FormContext, GenericObject } from 'vee-validate';
import { toast } from 'vue-sonner';
const router = useRouter()
const props = defineProps<{
    hide: () => void
}>()
const handleSubmit = async (form: FormContext<GenericObject, GenericObject>) => {
    try {
        const code = form.values.code
        const data = await $fetch<{
            data: {
                share_id: string
            }
        }>(`/api/share/pickup/${code}`)
        if (!data.data.share_id) {
            toast.error('取件码错误')
            form.resetForm()
            return
        }
        const { share_id } = data.data
        props.hide()
        router.push({
            path: `/s/${share_id}`
        })
        return
    } catch (error) {
        toast.error('取件码错误')
        form.resetForm()
    }
}
</script>

<template>
    <VeeForm>
        <div class="flex flex-col gap-5">
            <div class="text-xl font-bold">输入取件码</div>
            <PinInputField name="code" :rules="(value) => {
                if (value.length !== 4) {
                    return false
                }
                return true
            }" />
            <FormButton @click="handleSubmit">提交</FormButton>
        </div>
    </VeeForm>
</template>