feat(pricing): introduce real-time budget estimator
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.
This commit is contained in:
@@ -1,2 +1,13 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
/* Subtle fade/slide for conditional reveals */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 200ms ease, transform 200ms ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 您的活动信息</h2>
|
||||
<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>
|
||||
<UFormField name="contactName" label="联系人" required>
|
||||
<UInput v-model="orderState.contactName" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="contactNumber" label="联系方式(推荐 WhatsApp)">
|
||||
<UFormField name="contactNumber" label="联系电话(或 WhatsApp)">
|
||||
<div class="flex items-center gap-2">
|
||||
<UCheckbox
|
||||
v-model="orderState.isSameContact"
|
||||
label="当前手机号码?"
|
||||
label="同活动联系人"
|
||||
class="whitespace-nowrap"
|
||||
/>
|
||||
<UInput
|
||||
@@ -38,7 +38,7 @@
|
||||
<UInput
|
||||
v-model="orderState.eventName"
|
||||
class="w-full"
|
||||
placeholder="如果可能,请写上活动全名"
|
||||
placeholder="例: ACME 集团 2025 年终晚会暨 50 周年庆典"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
|
||||
77
app/components/eventOrder/OrderSummary.vue
Normal file
77
app/components/eventOrder/OrderSummary.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<UCard class="lg:sticky lg:top-24">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold">预算估算</h2>
|
||||
<UBadge color="primary" variant="soft">实时</UBadge>
|
||||
</div>
|
||||
<p class="text-muted text-sm">基于所选服务动态计算</p>
|
||||
</template>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-if="items.length === 0" class="text-muted text-sm">
|
||||
当前未选择任何可计价项目。
|
||||
</div>
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-for="(it, idx) in items"
|
||||
:key="idx"
|
||||
class="flex items-start justify-between gap-3 border-b border-[--ui-border] pb-2"
|
||||
>
|
||||
<div>
|
||||
<div class="font-medium">{{ it.label }}</div>
|
||||
<div v-if="it.note" class="text-muted text-xs">{{ it.note }}</div>
|
||||
</div>
|
||||
<div class="font-semibold">{{ money.format(it.amount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-lg font-bold">合计</div>
|
||||
<div class="text-2xl font-extrabold tracking-tight">
|
||||
{{ money.format(total) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<UButton
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
:disabled="total === 0"
|
||||
icon="lucide:send"
|
||||
@click="onRequestQuote"
|
||||
>
|
||||
获取详细报价
|
||||
</UButton>
|
||||
</div>
|
||||
<UAlert
|
||||
class="mt-3"
|
||||
title="说明"
|
||||
color="neutral"
|
||||
variant="subtle"
|
||||
description="该预算为参考价,具体以需求细化及工期排期为准。"
|
||||
/>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { priceBreakdown, estimatedTotal, money } = useEventOrder();
|
||||
|
||||
const items = computed(() => priceBreakdown.value);
|
||||
const total = computed(() => estimatedTotal.value);
|
||||
|
||||
function onRequestQuote() {
|
||||
// Placeholder interaction (no backend). Could open mailto or copy summary.
|
||||
const lines = items.value.map(
|
||||
(i) =>
|
||||
`${i.label}:${money.format(i.amount)}${i.note ? `(${i.note})` : ""}`
|
||||
);
|
||||
const text = `预算合计:${money.format(total.value)}\n\n` + lines.join("\n");
|
||||
if (navigator?.clipboard) navigator.clipboard.writeText(text).catch(() => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,59 +1,61 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 背景设计</h2>
|
||||
<p class="text-muted text-sm">自研动态背景效果,可以自定义形象动态图。</p>
|
||||
<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。须和屏幕供应单位获取详细尺寸,确保展示无误。"
|
||||
label="需要"
|
||||
description="默认按 1920 × 1080 交付,可增配动效"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="orderState.backgroundDesign"
|
||||
:class="['grid', 'grid-cols-1', 'gap-4']"
|
||||
>
|
||||
<UFormField name="backgroundType">
|
||||
<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"
|
||||
<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>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
@@ -66,11 +68,11 @@ const { sectionIndex, orderState } = useEventOrder();
|
||||
const secIdx = ref(++sectionIndex.value);
|
||||
|
||||
const backgroundTypeSelection = ref<RadioGroupItem[]>([
|
||||
{ label: "静态背景图", value: "static" },
|
||||
{ label: "静态", value: "static" },
|
||||
{
|
||||
label: "动态背景图",
|
||||
label: "动效",
|
||||
value: "dynamic",
|
||||
description: "由于技术原因,不能保证每次都能对成果进行微调。",
|
||||
description: "适配现场屏幕规格,含基础动效",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
@@ -1,40 +1,49 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 宴会竞标大屏</h2>
|
||||
<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-3 gap-4 items-center">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<UCheckbox
|
||||
v-model="orderState.biddingSystem"
|
||||
label="订阅服务"
|
||||
label="需要"
|
||||
description="包含图片处理 & 宴会当日技术支持(场控 / 协调)"
|
||||
/>
|
||||
|
||||
<UCheckbox
|
||||
v-model="orderState.biddingSystemProvideImage"
|
||||
label="提供照片?"
|
||||
description="活动方将发送标品图片给予本工作室"
|
||||
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||||
:disabled="!orderState.biddingSystem"
|
||||
/>
|
||||
|
||||
<UFormField
|
||||
name="estimatedBidItemCount"
|
||||
label="标品数量预估"
|
||||
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
|
||||
>
|
||||
<USelect
|
||||
v-model="orderState.estimatedBidItemCount"
|
||||
:items="itemCountRanges"
|
||||
placeholder="请选择预估数量区间"
|
||||
:class="['w-full']"
|
||||
:disabled="!orderState.biddingSystem"
|
||||
<Transition name="fade">
|
||||
<USwitch
|
||||
v-if="orderState.biddingSystem"
|
||||
v-model="orderState.biddingSystemProvideImage"
|
||||
:label="
|
||||
orderState.biddingSystemProvideImage ? '素材自备' : '请求拍摄'
|
||||
"
|
||||
:description="
|
||||
orderState.biddingSystemProvideImage
|
||||
? '您提供图片(我们进行后处理)'
|
||||
: '我们需要到您单位去拍摄标品'
|
||||
"
|
||||
/>
|
||||
</UFormField>
|
||||
</Transition>
|
||||
|
||||
<Transition name="fade">
|
||||
<UFormField
|
||||
v-if="orderState.biddingSystem"
|
||||
name="estimatedBidItemCount"
|
||||
label="估算件数"
|
||||
description="不影响计价"
|
||||
>
|
||||
<USelect
|
||||
v-model="orderState.estimatedBidItemCount"
|
||||
:items="itemCountRanges"
|
||||
placeholder="请选择件数区间"
|
||||
:class="['w-full']"
|
||||
/>
|
||||
</UFormField>
|
||||
</Transition>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
@@ -1,56 +1,58 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 流程 PPT 设计</h2>
|
||||
<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 items-center">
|
||||
<UCheckbox
|
||||
v-model="orderState.flowBackgroundDesign"
|
||||
label="订阅服务"
|
||||
description="包含图片处理 & 宴会当日技术支持(场控 / 协调)"
|
||||
/>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<UCheckbox v-model="orderState.flowBackgroundDesign" label="需要" />
|
||||
|
||||
<UFormField
|
||||
name="backgroundSourceProvided"
|
||||
label="是否提供背景设计稿?"
|
||||
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
|
||||
>
|
||||
<USwitch
|
||||
v-model="orderState.backgroundSourceProvided"
|
||||
:label="
|
||||
orderState.backgroundSourceProvided
|
||||
? '我将提供背景图片'
|
||||
: '需要重新临摹设计'
|
||||
"
|
||||
:description="
|
||||
orderState.backgroundSourceProvided
|
||||
? '活动方将发送背景设计稿给予本工作室'
|
||||
: '需要工作室重新设计背景图'
|
||||
"
|
||||
:disabled="!orderState.flowBackgroundDesign"
|
||||
required
|
||||
/>
|
||||
</UFormField>
|
||||
<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>
|
||||
|
||||
<UFormField
|
||||
name="pptDesignQty"
|
||||
label="标品数量预估"
|
||||
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
v-model="orderState.pptDesignQty"
|
||||
placeholder="请选择预估数量区间"
|
||||
:class="['w-full']"
|
||||
:disabled="!orderState.flowBackgroundDesign"
|
||||
/>
|
||||
</UFormField>
|
||||
<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>
|
||||
@@ -60,6 +62,15 @@
|
||||
const { sectionIndex, orderState } = useEventOrder();
|
||||
|
||||
const secIdx = ref(++sectionIndex.value);
|
||||
|
||||
watch(
|
||||
() => orderState.backgroundDesign,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
orderState.backgroundSourceProvided = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 赞助商名册</h2>
|
||||
<h2 class="text-xl font-bold">{{ secIdx }}. 赞助商位</h2>
|
||||
<p class="text-muted text-sm">
|
||||
可制作<strong>赞助页</strong>,含标志排版与统一风格。
|
||||
附送一个<strong>基础款</strong>手机端电子征信录,可定制(另计)
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
|
||||
<UCheckbox
|
||||
v-model="orderState.sponsorListDesign"
|
||||
label="订阅服务"
|
||||
/>
|
||||
<UCheckbox v-model="orderState.sponsorListDesign" label="需要" />
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as z from "zod";
|
||||
import { createSharedComposable } from "@vueuse/core";
|
||||
import * as z from "zod";
|
||||
|
||||
export const _useEventOrder = () => {
|
||||
const sectionIndex = ref(0);
|
||||
@@ -68,7 +68,9 @@ export const _useEventOrder = () => {
|
||||
isSameContact: true,
|
||||
contactNumber: "",
|
||||
eventName: "",
|
||||
eventDate: formatLocalDate(new Date()),
|
||||
eventDate: formatLocalDate(
|
||||
new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
|
||||
), // 默认一周后
|
||||
eventLocation: EVENT_LOCATIONS[0],
|
||||
biddingSystem: false,
|
||||
biddingSystemProvideImage: false,
|
||||
@@ -83,11 +85,182 @@ export const _useEventOrder = () => {
|
||||
sponsorListDesign: false,
|
||||
});
|
||||
|
||||
// --- Pricing logic (editable) ---
|
||||
const PRICE = {
|
||||
bidding: 550, // base for bidding system
|
||||
biddingProvideImageDiscount: 50, // discount if client provides all images
|
||||
biddingLocationTierAdjustment: {
|
||||
[EVENT_LOCATIONS[0]]: { adj: -100, reason: "同乡折扣" },
|
||||
[EVENT_LOCATIONS[1]]: { adj: 0, reason: "" },
|
||||
[EVENT_LOCATIONS[2]]: { adj: 200, reason: "含差旅费" },
|
||||
[EVENT_LOCATIONS[3]]: { adj: 400, reason: "含差旅费" },
|
||||
},
|
||||
// biddingTierAdditions: [
|
||||
// { range: [10, 20], add: 0 },
|
||||
// { range: [20, 30], add: 200 },
|
||||
// { range: [30, 40], add: 400 },
|
||||
// { range: [40, 50], add: 600 },
|
||||
// ],
|
||||
background: {
|
||||
static: 100,
|
||||
dynamic: 250,
|
||||
// highResSurcharge: 200, // if dimensions exceed 1920x1080
|
||||
},
|
||||
// 背景设计加急
|
||||
// 静态背景:倒数 2 天 + 20,倒数 1 天 + 50
|
||||
// 动态背景:倒数 5 天 + 50,倒数 1 天 + 100,中间 Lerp 计算
|
||||
backgroundRush: (daysLeft: number, isDynamic: boolean) => {
|
||||
if (isDynamic) {
|
||||
if (daysLeft >= 5) return 0;
|
||||
if (daysLeft <= 1) return 100;
|
||||
return Math.round(((5 - daysLeft) / 4) * 50 + 50);
|
||||
} else {
|
||||
if (daysLeft >= 2) return 0;
|
||||
if (daysLeft <= 1) return 50;
|
||||
return Math.round(((2 - daysLeft) / 1) * 30 + 20);
|
||||
}
|
||||
},
|
||||
flowPptDesign: {
|
||||
base: 90,
|
||||
perSlide: 10,
|
||||
slideAfterTen: 5,
|
||||
providedSourceDiscount: 0.5, // 20% off if background sources provided
|
||||
},
|
||||
sponsorList: 100,
|
||||
} as const;
|
||||
|
||||
// function parseRange(range?: string | null): [number, number] | null {
|
||||
// if (!range) return null;
|
||||
// const m = String(range).match(/(\d+)\s*[-~]\s*(\d+)/);
|
||||
// if (!m) return null;
|
||||
// return [Number(m[1]), Number(m[2])];
|
||||
// }
|
||||
|
||||
const priceBreakdown = computed(() => {
|
||||
const items: { label: string; amount: number; note?: string }[] = [];
|
||||
|
||||
// Bidding system
|
||||
if (orderState.biddingSystem) {
|
||||
let amount = PRICE.bidding;
|
||||
amount -= orderState.biddingSystemProvideImage
|
||||
? PRICE.biddingProvideImageDiscount
|
||||
: 0;
|
||||
// const r = parseRange(orderState.estimatedBidItemCount);
|
||||
// if (r) {
|
||||
// const tier = PRICE.biddingTierAdditions.find(
|
||||
// (t) => r[0] >= t.range[0] && r[1] <= t.range[1]
|
||||
// );
|
||||
// if (tier) amount += tier.add;
|
||||
// }
|
||||
items.push({
|
||||
label: "竞价系统",
|
||||
amount,
|
||||
note:
|
||||
`${orderState.estimatedBidItemCount} 件区间` +
|
||||
(orderState.biddingSystemProvideImage
|
||||
? ",素材由客户提供"
|
||||
: ",包含素材拍摄") +
|
||||
",图片处理,现场技术支持",
|
||||
});
|
||||
const locationAdj =
|
||||
PRICE.biddingLocationTierAdjustment[orderState.eventLocation];
|
||||
if (locationAdj.adj) {
|
||||
items.push({
|
||||
label: locationAdj.reason,
|
||||
amount: locationAdj.adj,
|
||||
note: `活动地点:${orderState.eventLocation}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Stage background design
|
||||
if (orderState.backgroundDesign) {
|
||||
let amount =
|
||||
orderState.backgroundType === "dynamic"
|
||||
? PRICE.background.dynamic
|
||||
: PRICE.background.static;
|
||||
const w = Number(orderState.backgroundWidthOverride || 1920);
|
||||
const h = Number(orderState.backgroundHeightOverride || 1080);
|
||||
// if (w > 1920 || h > 1080) amount += PRICE.background.highResSurcharge;
|
||||
items.push({
|
||||
label: `舞台背景设计(${
|
||||
orderState.backgroundType === "dynamic" ? "动效" : "静态"
|
||||
})`,
|
||||
amount,
|
||||
note: `${w}×${h}`,
|
||||
});
|
||||
}
|
||||
// Background design rush fee
|
||||
if (orderState.backgroundDesign) {
|
||||
const eventDate = new Date(orderState.eventDate);
|
||||
const today = new Date();
|
||||
// 计算剩余天数(向上取整)
|
||||
const diffTime = eventDate.getTime() - today.getTime();
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
const rushFee = PRICE.backgroundRush(
|
||||
diffDays,
|
||||
orderState.backgroundType === "dynamic"
|
||||
);
|
||||
if (rushFee > 0) {
|
||||
items.push({
|
||||
label: "背景设计加急费",
|
||||
amount: rushFee,
|
||||
note: `距离活动仅剩 ${diffDays} 天`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Flow/PPT design
|
||||
if (orderState.flowBackgroundDesign) {
|
||||
const qty = Number(orderState.pptDesignQty || 0);
|
||||
// 如果客户有要求背景设计,Base Price 不算
|
||||
let amount = orderState.backgroundDesign ? 0 : PRICE.flowPptDesign.base;
|
||||
if (qty > 0) {
|
||||
amount += Math.min(qty, 10) * PRICE.flowPptDesign.perSlide;
|
||||
if (qty > 10) {
|
||||
amount += (qty - 10) * PRICE.flowPptDesign.slideAfterTen;
|
||||
}
|
||||
}
|
||||
if (orderState.backgroundSourceProvided) {
|
||||
amount = Math.round(
|
||||
amount * (1 - PRICE.flowPptDesign.providedSourceDiscount)
|
||||
);
|
||||
}
|
||||
items.push({
|
||||
label: "流程/PPT设计",
|
||||
amount,
|
||||
note:
|
||||
`${qty} 张幻灯片设计` +
|
||||
(orderState.backgroundSourceProvided ? ",客户提供背景素材" : ""),
|
||||
});
|
||||
}
|
||||
|
||||
// Sponsor list
|
||||
if (orderState.sponsorListDesign) {
|
||||
items.push({ label: "赞助商位设计", amount: PRICE.sponsorList });
|
||||
}
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const estimatedTotal = computed(() =>
|
||||
priceBreakdown.value.reduce((sum, i) => sum + (i.amount || 0), 0)
|
||||
);
|
||||
|
||||
const money = new Intl.NumberFormat("zh-CN", {
|
||||
style: "currency",
|
||||
currency: "MYR",
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
|
||||
return {
|
||||
sectionIndex,
|
||||
eventLocationItems,
|
||||
orderSchema,
|
||||
orderState,
|
||||
priceBreakdown,
|
||||
estimatedTotal,
|
||||
money,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -6,24 +6,40 @@
|
||||
/>
|
||||
|
||||
<UContainer>
|
||||
<UForm :schema="orderSchema" :state="orderState" class="space-y-4">
|
||||
<!-- 联系人信息 -->
|
||||
<EventOrderMetaDetails />
|
||||
<!-- 竞标大屏 -->
|
||||
<EventOrderProductBidding />
|
||||
<!-- 背景设计 -->
|
||||
<EventOrderProductBackgroundDesign />
|
||||
<!-- 致辞 / 流程 PPT 设计 -->
|
||||
<EventOrderProductFlowDesign />
|
||||
<!-- 赞助商名册 -->
|
||||
<EventOrderProductSponsor />
|
||||
</UForm>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2">
|
||||
<UForm :schema="orderSchema" :state="orderState" class="space-y-4">
|
||||
<!-- 基本信息 -->
|
||||
<EventOrderMetaDetails />
|
||||
<!-- 竞价系统 -->
|
||||
<EventOrderProductBidding />
|
||||
<!-- 舞台背景设计 -->
|
||||
<EventOrderProductBackgroundDesign />
|
||||
<!-- 流程 / 投影 PPT 设计 -->
|
||||
<EventOrderProductFlowDesign />
|
||||
<!-- 赞助商位设计 -->
|
||||
<EventOrderProductSponsor />
|
||||
</UForm>
|
||||
</div>
|
||||
<div class="lg:col-span-1">
|
||||
<EventOrderSummary />
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const { orderSchema, orderState } = useEventOrder();
|
||||
|
||||
useSeoMeta({
|
||||
title: "Tootaio · 活动价目估算",
|
||||
description:
|
||||
"在线选择服务,实时获得预算估算,包括竞价系统、舞台背景设计、流程/投影PPT与赞助商位设计。",
|
||||
ogTitle: "Tootaio · 活动价目估算",
|
||||
ogDescription: "在线选择服务,实时获得预算估算:竞价系统、舞台背景、PPT等。",
|
||||
twitterCard: "summary_large_image",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user