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:
xiaomai
2025-10-16 21:14:44 +08:00
parent eb69f6c48e
commit a5ac00baa1
12 changed files with 449 additions and 136 deletions

2
.gitignore vendored
View File

@@ -22,3 +22,5 @@ logs
.env
.env.*
!.env.example
repomix-output.xml

View File

@@ -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);
}

View File

@@ -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>

View 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>

View File

@@ -1,22 +1,23 @@
<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 &times; 1080。须和屏幕供应单位获取详细尺寸确保展示无误。"
label="需要"
description="默认 1920 × 1080 交付,可增配动效"
/>
<Transition name="fade">
<div
v-if="orderState.backgroundDesign"
:class="['grid', 'grid-cols-1', 'gap-4']"
>
<UFormField name="backgroundType">
<UFormField name="backgroundType" label="类型">
<URadioGroup
v-model="orderState.backgroundType"
color="primary"
@@ -28,7 +29,7 @@
</UFormField>
<div class="flex gap-4">
<UFormField
label="宽"
label="宽"
name="backgroundWidthOverride"
class="flex-1"
>
@@ -39,9 +40,9 @@
class="w-full"
/>
</UFormField>
<span class="text-2xl">&times;</span>
<span class="text-2xl">×</span>
<UFormField
label="高"
label="高"
name="backgroundHeightOverride"
class="flex-1"
>
@@ -54,6 +55,7 @@
</UFormField>
</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>

View File

@@ -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
<Transition name="fade">
<USwitch
v-if="orderState.biddingSystem"
v-model="orderState.biddingSystemProvideImage"
label="提供照片?"
description="活动方将发送标品图片给予本工作室"
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
:disabled="!orderState.biddingSystem"
:label="
orderState.biddingSystemProvideImage ? '素材自备' : '请求拍摄'
"
:description="
orderState.biddingSystemProvideImage
? '您提供图片(我们进行后处理)'
: '我们需要到您单位去拍摄标品'
"
/>
</Transition>
<Transition name="fade">
<UFormField
v-if="orderState.biddingSystem"
name="estimatedBidItemCount"
label="标品数量预估"
:class="[orderState.biddingSystem ? '' : 'opacity-0']"
label="估算件数"
description="不影响计价"
>
<USelect
v-model="orderState.estimatedBidItemCount"
:items="itemCountRanges"
placeholder="请选择预估数量区间"
placeholder="请选择件数区间"
:class="['w-full']"
:disabled="!orderState.biddingSystem"
/>
</UFormField>
</Transition>
</div>
</UCard>
</template>

View File

@@ -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="需要" />
<Transition name="fade">
<UFormField
v-if="orderState.flowBackgroundDesign"
name="backgroundSourceProvided"
label="是否提供背景设计稿"
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
label="背景素材(原设计稿"
>
<USwitch
v-model="orderState.backgroundSourceProvided"
:label="
orderState.backgroundSourceProvided
? '我将提供背景图片'
: '需要重新临摹设计'
? '客户已提供素材'
: '需要我们准备素材'
"
:description="
orderState.backgroundSourceProvided
? '活动方将发送背景设计稿给予本工作室'
: '需要工作室重新设计背景图'
? '我们会规范与适配投影比例'
: '包含底图搜集/选型'
"
:disabled="!orderState.flowBackgroundDesign"
required
:disabled="orderState.backgroundDesign"
/>
</UFormField>
</Transition>
<Transition name="fade">
<UFormField
v-if="orderState.flowBackgroundDesign"
name="pptDesignQty"
label="标品数量预估"
:class="[orderState.flowBackgroundDesign ? '' : 'opacity-0']"
label="页数"
>
<UInput
type="number"
v-model="orderState.pptDesignQty"
placeholder="请选择预估数量区间"
placeholder="请输入页数"
:class="['w-full']"
:disabled="!orderState.flowBackgroundDesign"
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>

View File

@@ -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>

View File

@@ -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,
};
};

View File

@@ -6,24 +6,40 @@
/>
<UContainer>
<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 设计 -->
<!-- 流程 / 投影 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>

View File

@@ -15,5 +15,8 @@
"typescript": "^5.9.3",
"vue": "^3.5.22",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@iconify-json/lucide": "^1.2.69"
}
}

11
pnpm-lock.yaml generated
View File

@@ -23,6 +23,10 @@ importers:
vue-router:
specifier: ^4.5.1
version: 4.6.0(vue@3.5.22(typescript@5.9.3))
devDependencies:
'@iconify-json/lucide':
specifier: ^1.2.69
version: 1.2.69
packages:
@@ -368,6 +372,9 @@ packages:
'@floating-ui/vue@1.1.9':
resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
'@iconify-json/lucide@1.2.69':
resolution: {integrity: sha512-xOhNf74m+C+nSCObfEqYi34dXk1GMfMUcOB+gfqKY/bn0RcsPLinGfgouOvrUFEreDEFbCti7sdheTf5HESLTA==}
'@iconify/collections@1.0.605':
resolution: {integrity: sha512-1bZnGya+UpCWtMBvZbopsNr5ktnQquwPl01yjwSF5b09sU2rgNIPpEBJPQuNJp5oB6fwqZs/h1Q3/cGsB9SecQ==}
@@ -4084,6 +4091,10 @@ snapshots:
- '@vue/composition-api'
- vue
'@iconify-json/lucide@1.2.69':
dependencies:
'@iconify/types': 2.0.0
'@iconify/collections@1.0.605':
dependencies:
'@iconify/types': 2.0.0