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.
81 lines
2.2 KiB
Vue
81 lines
2.2 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 grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<UCheckbox
|
||
v-model="orderState.backgroundDesign"
|
||
label="需要"
|
||
description="默认按 1920 × 1080 交付，可增配动效"
|
||
/>
|
||
|
||
<Transition name="fade">
|
||
<div
|
||
v-if="orderState.backgroundDesign"
|
||
:class="['grid', 'grid-cols-1', 'gap-4']"
|
||
>
|
||
<UFormField name="backgroundType" label="类型">
|
||
<URadioGroup
|
||
v-model="orderState.backgroundType"
|
||
color="primary"
|
||
variant="table"
|
||
default-value="static"
|
||
:items="backgroundTypeSelection"
|
||
orientation="horizontal"
|
||
/>
|
||
</UFormField>
|
||
<div class="flex gap-4">
|
||
<UFormField
|
||
label="宽"
|
||
name="backgroundWidthOverride"
|
||
class="flex-1"
|
||
>
|
||
<UInput
|
||
type="number"
|
||
v-model="orderState.backgroundWidthOverride"
|
||
placeholder="1920"
|
||
class="w-full"
|
||
/>
|
||
</UFormField>
|
||
<span class="text-2xl">×</span>
|
||
<UFormField
|
||
label="高"
|
||
name="backgroundHeightOverride"
|
||
class="flex-1"
|
||
>
|
||
<UInput
|
||
type="number"
|
||
v-model="orderState.backgroundHeightOverride"
|
||
placeholder="1080"
|
||
class="w-full"
|
||
/>
|
||
</UFormField>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</UCard>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import type { RadioGroupItem } from "@nuxt/ui";
|
||
|
||
const { sectionIndex, orderState } = useEventOrder();
|
||
|
||
const secIdx = ref(++sectionIndex.value);
|
||
|
||
const backgroundTypeSelection = ref<RadioGroupItem[]>([
|
||
{ label: "静态", value: "static" },
|
||
{
|
||
label: "动效",
|
||
value: "dynamic",
|
||
description: "适配现场屏幕规格，含基础动效",
|
||
},
|
||
]);
|
||
</script>
|
||
|
||
<style></style>
|