a5ac00baa1
This commit introduces a real-time budget estimator for event services. A new summary sidebar now displays a live, itemized breakdown of costs as the user selects options in the order form. Key changes include: - A new `OrderSummary` component to display the price breakdown and total. - Comprehensive pricing logic implemented in the `useEventOrder` composable. - A responsive two-column layout on the main page to accommodate the summary. - UI/UX improvements across the form, including clearer labels and subtle transition animations for conditional fields.
69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<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="例： ACME 集团 2025 年终晚会暨 50 周年庆典"
|
||
/>
|
||
</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>
|