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.
77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
||
<UCard>
|
||
<template #header>
|
||
<h2 class="text-xl font-bold">{{ secIdx }}. 流程 / 投影 PPT</h2>
|
||
<p class="text-muted text-sm">按页计价，适配现场投影比例与风格。</p>
|
||
</template>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
<UCheckbox v-model="orderState.flowBackgroundDesign" label="需要" />
|
||
|
||
<Transition name="fade">
|
||
<UFormField
|
||
v-if="orderState.flowBackgroundDesign"
|
||
name="backgroundSourceProvided"
|
||
label="背景素材（原设计稿）"
|
||
>
|
||
<USwitch
|
||
v-model="orderState.backgroundSourceProvided"
|
||
:label="
|
||
orderState.backgroundSourceProvided
|
||
? '客户已提供素材'
|
||
: '需要我们准备素材'
|
||
"
|
||
:description="
|
||
orderState.backgroundSourceProvided
|
||
? '我们会规范与适配投影比例'
|
||
: '包含底图搜集/选型'
|
||
"
|
||
required
|
||
:disabled="orderState.backgroundDesign"
|
||
/>
|
||
</UFormField>
|
||
</Transition>
|
||
|
||
<Transition name="fade">
|
||
<UFormField
|
||
v-if="orderState.flowBackgroundDesign"
|
||
name="pptDesignQty"
|
||
label="页数"
|
||
>
|
||
<UInput
|
||
type="number"
|
||
v-model="orderState.pptDesignQty"
|
||
placeholder="请输入页数"
|
||
:class="['w-full']"
|
||
min="1"
|
||
max="20"
|
||
/>
|
||
</UFormField>
|
||
</Transition>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<p class="text-muted text-sm">
|
||
交付包含可编辑源文件（可选），如需加急请提前沟通排期。
|
||
</p>
|
||
</template>
|
||
</UCard>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
const { sectionIndex, orderState } = useEventOrder();
|
||
|
||
const secIdx = ref(++sectionIndex.value);
|
||
|
||
watch(
|
||
() => orderState.backgroundDesign,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
orderState.backgroundSourceProvided = false;
|
||
}
|
||
}
|
||
);
|
||
</script>
|
||
|
||
<style></style>
|