d151bd78ca
Refactored the service configuration to reduce code duplication and separate data from logic. - Created a shared `useWhatsappMsgSender` composable to handle WhatsApp URL generation and opening. - Introduced `createService` and `createPlan` helper functions to programmatically add button actions. - This eliminates the need to manually define `onClick` handlers for every pricing plan, making the service data purely declarative and easier to maintain.
236 lines
7.1 KiB
TypeScript
236 lines
7.1 KiB
TypeScript
import type { TabsItem, PricingPlanProps } from "@nuxt/ui";
|
||
|
||
interface Service extends TabsItem {
|
||
plans: PricingPlanProps[];
|
||
}
|
||
|
||
const { sendMessage } = useWhatsappMsgSender();
|
||
|
||
function generateWhatsAppMessage(
|
||
service: string,
|
||
plan: PricingPlanProps
|
||
): string {
|
||
const featureList = plan.features?.slice(0, 3).join("、");
|
||
return `您好！我对您的【${service}】服务中的【${plan.title}】方案感兴趣。
|
||
|
||
方案详情：
|
||
💰 价格：${plan.price}
|
||
📋 描述：${plan.description}
|
||
✨ 主要功能：${featureList}${
|
||
plan.features?.length ?? 0 > 3 ? `等${plan.features?.length}项功能` : ""
|
||
}
|
||
|
||
请提供更多详细信息，谢谢！`;
|
||
}
|
||
|
||
// --- 通用创建函数 ---
|
||
function createPlan(service: string, plan: PricingPlanProps): PricingPlanProps {
|
||
return {
|
||
...plan,
|
||
button: {
|
||
label: plan.button?.label || "立即咨询",
|
||
onClick: () => sendMessage(generateWhatsAppMessage(service, plan)),
|
||
},
|
||
};
|
||
}
|
||
|
||
function createService(service: Service): Service {
|
||
const serviceName = service.label ? service.label : "网页网站开发";
|
||
return {
|
||
...service,
|
||
plans: service.plans.map((p) => createPlan(serviceName, p)),
|
||
};
|
||
}
|
||
|
||
// --- 数据配置（纯数据） ---
|
||
export const services: Service[] = [
|
||
createService({
|
||
id: "landing-page",
|
||
label: "Landing Page",
|
||
icon: "lucide:mouse-pointer-click",
|
||
plans: [
|
||
{
|
||
title: "基础版",
|
||
description: "适合个人、小型商家，快速上线单页展示网站。",
|
||
price: "RM499 起",
|
||
tagline: "含域名与服务器",
|
||
features: [
|
||
"单页面结构（1-3 屏）",
|
||
"响应式设计（手机 / 平板 / 桌面）",
|
||
"基本图文排版",
|
||
"联系表单或 WhatsApp 按钮",
|
||
"Google Analytics 整合",
|
||
"1 次免费修改",
|
||
"7 日内交付",
|
||
],
|
||
},
|
||
{
|
||
title: "标准版",
|
||
description: "为品牌与创业项目打造高转化页面。",
|
||
price: "RM1,499 起",
|
||
tagline: "含域名与服务器",
|
||
highlight: true,
|
||
features: [
|
||
"多区块结构（4-6 屏）",
|
||
"品牌定制风格与配色",
|
||
"轻量动画与动效展示",
|
||
"SEO 优化 + 加载性能优化",
|
||
"整合追踪代码（GA / Pixel）",
|
||
"2 次免费修改",
|
||
"14 日内交付",
|
||
],
|
||
button: { label: "预约报价" },
|
||
},
|
||
{
|
||
title: "高级定制",
|
||
description: "为成熟品牌提供全面视觉与营销升级方案。",
|
||
price: "RM2,999 起",
|
||
features: [
|
||
"专属视觉设计与交互体验",
|
||
"完整品牌风格系统",
|
||
"A/B 测试与转化优化",
|
||
"营销工具整合（邮件、统计、CRM）",
|
||
"多语言 / 动态内容支持",
|
||
],
|
||
button: { label: "预约定制方案" },
|
||
},
|
||
],
|
||
}),
|
||
|
||
createService({
|
||
id: "official-web",
|
||
label: "Official Website",
|
||
icon: "lucide:globe",
|
||
plans: [
|
||
{
|
||
title: "基础官网",
|
||
description: "为中小型企业建立专业在线形象。",
|
||
price: "RM4,999 起",
|
||
tagline: "含域名与服务器",
|
||
features: [
|
||
"最多 5 个页面（首页、关于、服务、联系等）",
|
||
"响应式设计（桌面 / 平板 / 手机）",
|
||
"基础 SEO 设置",
|
||
"联系表单 + 地图 + 社交媒体链接",
|
||
],
|
||
},
|
||
{
|
||
title: "标准官网",
|
||
description: "适合品牌升级与内容扩展型企业。",
|
||
price: "RM8,999 起",
|
||
tagline: "含域名与服务器",
|
||
highlight: true,
|
||
features: [
|
||
"约 8-12 个页面（案例、博客、团队等）",
|
||
"品牌定制风格 + UI/UX 优化",
|
||
"轻量 CMS 后台管理系统",
|
||
"进阶 SEO 优化与性能加速",
|
||
],
|
||
button: { label: "预约标准方案" },
|
||
},
|
||
{
|
||
title: "企业定制",
|
||
description: "专属视觉、功能与交互体验整合。",
|
||
price: "RM15,000 起",
|
||
features: [
|
||
"完全定制 UI / 动效设计",
|
||
"多语言支持 / 客户登录模块",
|
||
"API / 第三方系统整合",
|
||
"增强安全与自动备份机制",
|
||
],
|
||
button: { label: "预约企业方案" },
|
||
},
|
||
],
|
||
}),
|
||
|
||
createService({
|
||
id: "web-tools",
|
||
label: "Web 工具 / 内部系统",
|
||
icon: "lucide:cpu",
|
||
plans: [
|
||
{
|
||
title: "自动化工具开发",
|
||
description: "简化工作流程，提升效率的内部工具。",
|
||
price: "RM3,000 起",
|
||
features: [
|
||
"定制化前端逻辑与交互",
|
||
"数据处理 / 报表系统",
|
||
"轻量 API 与后端支持",
|
||
"导出功能（Excel / CSV / PDF）",
|
||
],
|
||
button: { label: "提交需求" },
|
||
},
|
||
{
|
||
title: "Web App 项目",
|
||
description: "打造实用、可持续扩展的轻量 Web 应用。",
|
||
price: "RM5,000 起",
|
||
highlight: true,
|
||
features: [
|
||
"完整 SPA 结构（Vue / Nuxt）",
|
||
"用户系统 / 登录 / 权限控制",
|
||
"API 整合与动态数据展示",
|
||
],
|
||
button: { label: "预约开发" },
|
||
},
|
||
{
|
||
title: "企业系统方案",
|
||
description: "大型模块化系统或跨平台整合项目。",
|
||
price: "RM20,000+",
|
||
features: [
|
||
"多模块架构（CMS / ERP / Dashboard）",
|
||
"API、数据库与外部服务整合",
|
||
"专属后端与数据安全机制",
|
||
],
|
||
button: { label: "申请合作" },
|
||
},
|
||
],
|
||
}),
|
||
|
||
createService({
|
||
id: "game-dev",
|
||
label: "游戏展示 / 交互项目",
|
||
icon: "lucide:gamepad-2",
|
||
plans: [
|
||
{
|
||
title: "展示页",
|
||
description: "专为游戏作品打造的宣传与展示网站。",
|
||
price: "RM1,999 起",
|
||
tagline: "含域名与服务器",
|
||
highlight: true,
|
||
features: [
|
||
"游戏介绍与截图展示区",
|
||
"视频 / 预告片嵌入",
|
||
"交互式 Canvas 动画或 WebGL 特效",
|
||
],
|
||
button: { label: "预约展示开发" },
|
||
},
|
||
{
|
||
title: "互动式 Demo",
|
||
description: "用于作品集、游戏原型或活动宣传。",
|
||
price: "RM3,999 起",
|
||
features: [
|
||
"玩家交互逻辑（Canvas / WebGL / Three.js）",
|
||
"音效与动画系统整合",
|
||
"数据记录或排行榜系统",
|
||
],
|
||
button: { label: "提交项目需求" },
|
||
},
|
||
{
|
||
title: "完整游戏项目",
|
||
description: "定制游戏系统开发与跨平台发布。",
|
||
price: "价格面议",
|
||
features: [
|
||
"多人协作开发",
|
||
"完整引擎与关卡系统",
|
||
"发布至多平台（Web / 桌面 / 移动）",
|
||
],
|
||
button: { label: "咨询游戏项目" },
|
||
},
|
||
],
|
||
}),
|
||
];
|
||
|
||
// --- 全局备注 ---
|
||
export const note =
|
||
"所有方案均含基础域名与服务器部署（首年）。若服务器负载过高，将协助迁移至更稳定的第三方环境。";
|