feat: initialize project with event order form
This commit establishes the initial structure of the Nuxt application, centered around a new event order form. Key changes include: - Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui. - Creating a multi-part event order form on the index page. - Introducing a `useEventOrder` composable to manage form state and validation with Zod. - Adding modular form components under `app/components/eventOrder`. - Including project configuration files for pnpm, VSCode, and global CSS.
This commit is contained in:
68
app/components/eventOrder/MetaDetails.vue
Normal file
68
app/components/eventOrder/MetaDetails.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
|
||||
<p class="text-muted text-sm">
|
||||
您提供的联系方式与活动信息仅用于沟通与履约,本工作室将妥善保护,不会未经同意向第三方公开或出售。
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<UFormField name="contactName" label="联络人姓名" required>
|
||||
<UInput v-model="orderState.contactName" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="contactNumber" label="联系方式(推荐 WhatsApp)">
|
||||
<div class="flex items-center gap-2">
|
||||
<UCheckbox
|
||||
v-model="orderState.isSameContact"
|
||||
label="当前手机号码?"
|
||||
class="whitespace-nowrap"
|
||||
/>
|
||||
<UInput
|
||||
v-model="orderState.contactNumber"
|
||||
:disabled="orderState.isSameContact"
|
||||
:class="[
|
||||
'w-full transition-opacity duration-300',
|
||||
orderState.isSameContact ? 'opacity-0 pointer-events-none' : '',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- 活动信息 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<UFormField name="eventName" label="活动名称" required>
|
||||
<UInput
|
||||
v-model="orderState.eventName"
|
||||
class="w-full"
|
||||
placeholder="如果可能,请写上活动全名"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="eventDate" label="活动日期" required>
|
||||
<UInput type="date" v-model="orderState.eventDate" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="eventLocation" label="地点" required>
|
||||
<USelect
|
||||
v-model="orderState.eventLocation"
|
||||
:items="eventLocationItems"
|
||||
placeholder="请选择地点"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { sectionIndex, orderState, eventLocationItems } = useEventOrder();
|
||||
|
||||
const secIdx = ref(++sectionIndex.value);
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user