Skip to content

点餐功能设计文档.md

Latest commit

 

History

History
361 lines (306 loc) · 10.5 KB

点餐功能设计文档.md

File metadata and controls

361 lines (306 loc) · 10.5 KB
Raw

点餐功能设计文档

功能概述

点餐功能是 Food-Yun 家庭菜谱管理小程序的核心特色功能，基于好友关系实现社交化点餐体验。用户可以从好友的公开菜谱中选择菜品，按餐次（早/中/晚餐）进行点餐，支持多人协作和订单管理。

设计理念

1. 社交化点餐

  • 好友菜谱选择：只能从已添加好友的公开菜谱中选择
  • 作者信息展示：显示菜谱作者头像和昵称，增强社交属性
  • 互动体验：通过点餐与好友产生美食互动

2. 餐次导向设计

  • 三餐分类：按早餐、午餐、晚餐分类展示菜谱
  • 时间匹配：根据当前时间智能推荐合适餐次
  • 场景化体验：符合日常用餐习惯和场景

3. 简单易用

  • 一键操作：点击即可添加/移除菜品
  • 实时反馈：购物车数量实时更新
  • 批量管理：支持多菜品选择和批量操作

页面结构设计

整体布局

┌─────────────────────────┐
│ ← 点餐     🛒(2)        │ ← 头部导航
├─────────────────────────┤
│ 🌅早餐 🌞午餐 🌙晚餐    │ ← 餐次选择
├─────────────────────────┤
│ 🔍搜索 🔧筛选           │ ← 筛选栏
├─────────────────────────┤
│ 📱 好友菜谱列表         │ ← 主要内容区
│ ┌─────────────────────┐ │
│ │ 🍖 红烧肉    👤小王 │ │ ← 菜谱卡片
│ │ 香甜软糯，入口即化  │ │
│ │ ⏰45分钟 ⭐4.8 [+添加]│ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ 🍅 番茄鸡蛋  👤小李 │ │
│ │ 经典家常菜，营养丰富│ │
│ │ ⏰15分钟 ⭐4.6 [✓已添加]│ │
│ └─────────────────────┘ │
│ ...                     │
├─────────────────────────┤
│ 🛒 提交订单 (2道菜)     │ ← 底部按钮
└─────────────────────────┘

响应式设计

  • 手机端：单列布局，卡片式展示
  • 平板端：双列布局，优化空间利用
  • 横屏模式：保持单列，调整卡片宽度

数据结构设计

1. 订单数据结构

// 订单主表 (orders)
{
  _id: ObjectId,
  userId: ObjectId,           // 点餐用户ID
  mealType: String,           // 餐次类型: 'breakfast' | 'lunch' | 'dinner'
  orderDate: Date,            // 点餐日期
  recipes: [{                 // 选中的菜谱列表
    recipeId: ObjectId,       // 菜谱ID
    recipeName: String,       // 菜谱名称
    authorId: ObjectId,       // 作者ID
    authorName: String,       // 作者昵称
    authorAvatar: String,     // 作者头像
    image: String,            // 菜谱图片
    preparationTime: String,  // 制作时间
    difficulty: String,       // 难度等级
    servingSize: String       // 适合人数
  }],
  status: String,             // 订单状态: 'pending' | 'cooking' | 'completed'
  notes: String,              // 备注信息
  totalRecipes: Number,       // 总菜谱数量
  estimatedTime: Number,      // 预计制作时间(分钟)
  createdAt: Date,
  updatedAt: Date
}

2. 购物车数据结构

// 本地购物车状态
{
  currentMealType: 'breakfast' | 'lunch' | 'dinner',
  selectedRecipes: [{
    recipeId: String,
    recipeName: String,
    authorId: String,
    authorName: String,
    authorAvatar: String,
    image: String,
    preparationTime: String,
    difficulty: String,
    servingSize: String,
    addedAt: Date
  }],
  totalCount: Number,
  lastUpdated: Date
}

3. 筛选条件数据结构

// 筛选条件
{
  searchKeyword: String,      // 搜索关键词
  ingredientCategory: String, // 食材分类
  preparationTime: String,    // 制作时间范围
  difficulty: String,         // 难度等级
  sortBy: String             // 排序方式: 'time' | 'difficulty' | 'rating'
}

核心功能模块

1. 餐次选择模块

功能描述：

  • 提供早餐、午餐、晚餐三个选项
  • 当前选中餐次高亮显示
  • 切换餐次时重新加载对应菜谱

实现细节：

// 餐次选择逻辑
onMealTypeChange(mealType) {
  this.setData({
    currentMealType: mealType,
    selectedRecipes: [], // 清空当前选择
    totalCount: 0
  })
  this.loadFriendRecipes(mealType)
}

UI设计：

  • 三个等宽按钮，当前选中使用主题色
  • 图标 + 文字的组合设计
  • 平滑的切换动画效果

2. 菜谱展示模块

功能描述：

  • 展示好友的公开菜谱
  • 卡片式布局，包含完整信息
  • 支持添加/移除到购物车

菜谱卡片信息：

  • 菜谱图片（80x80px，圆角设计）
  • 菜谱名称（加粗显示）
  • 作者信息（头像 + 昵称）
  • 菜谱描述（1-2行，超出省略）
  • 制作信息（时间 + 难度 + 评分）
  • 操作按钮（添加/已添加状态）

交互设计：

  • 点击卡片查看菜谱详情
  • 点击添加按钮切换状态
  • 长按显示更多操作选项

3. 购物车模块

功能描述：

  • 右上角购物车图标显示数量
  • 点击查看已选菜品详情
  • 支持删除已选菜品

购物车弹窗设计：

┌─────────────────────────┐
│ 已选菜品 (2)        ✕   │
├─────────────────────────┤
│ 🍖 红烧肉        👤小王 │
│ ⏰45分钟 ⭐4.8    [删除] │
├─────────────────────────┤
│ 🍅 番茄鸡蛋      👤小李 │
│ ⏰15分钟 ⭐4.6    [删除] │
├─────────────────────────┤
│ 预计制作时间: 60分钟     │
│ [清空购物车] [确认订单]  │
└─────────────────────────┘

4. 筛选搜索模块

功能描述：

  • 按关键词搜索菜谱名称
  • 按食材分类筛选
  • 按制作时间筛选
  • 按难度等级筛选

筛选选项：

  • 食材分类：肉类、水产、蛋类、蔬菜、汤类、主食
  • 制作时间：10分钟内、30分钟内、1小时内、2小时以上
  • 难度等级：简单、中等、困难
  • 排序方式：按时间、按难度、按评分

5. 订单提交模块

功能描述：

  • 确认订单详情
  • 添加备注信息
  • 提交到云数据库

订单确认页面：

┌─────────────────────────┐
│ 订单确认                │
├─────────────────────────┤
│ 餐次：🌅 早餐           │
│ 日期：2024-01-15        │
├─────────────────────────┤
│ 选中菜品：              │
│ • 红烧肉 (小王) 45分钟  │
│ • 番茄鸡蛋 (小李) 15分钟│
├─────────────────────────┤
│ 备注：                  │
│ [输入框]                │
├─────────────────────────┤
│ 预计制作时间：60分钟     │
│ [取消] [确认提交]        │
└─────────────────────────┘

技术实现方案

1. 前端技术栈

  • 框架：微信小程序原生开发
  • UI库：Vant Weapp 组件库
  • 状态管理：页面级状态管理
  • 数据存储：本地存储 + 云数据库

2. 后端技术栈

  • 云函数：Node.js 运行时
  • 云数据库：MongoDB 文档数据库
  • 云存储：图片存储和CDN加速

3. 核心API设计

获取好友菜谱列表：

// 云函数: getFriendRecipes
{
  action: 'getFriendRecipes',
  mealType: 'breakfast' | 'lunch' | 'dinner',
  filters: {
    searchKeyword: String,
    ingredientCategory: String,
    preparationTime: String,
    difficulty: String,
    sortBy: String
  },
  page: Number,
  pageSize: Number
}

创建订单：

// 云函数: createOrder
{
  action: 'createOrder',
  orderData: {
    mealType: String,
    recipes: Array,
    notes: String
  }
}

获取订单列表：

// 云函数: getOrders
{
  action: 'getOrders',
  status: String, // 可选筛选
  page: Number,
  pageSize: Number
}

4. 性能优化策略

图片优化：

  • 使用云存储CDN加速
  • 图片懒加载
  • 压缩图片尺寸

数据优化：

  • 分页加载菜谱列表
  • 缓存好友菜谱数据
  • 防抖搜索输入

交互优化：

  • 添加/移除菜品的即时反馈
  • 平滑的动画过渡
  • 加载状态提示

用户体验设计

1. 交互流程

进入点餐页 → 选择餐次 → 浏览菜谱 → 添加菜品 → 查看购物车 → 确认订单 → 提交成功

2. 状态反馈

  • 加载状态：显示骨架屏或加载动画
  • 空状态：无菜谱时显示引导文案
  • 错误状态：网络错误时显示重试按钮
  • 成功状态：操作成功时显示确认提示

3. 错误处理

  • 网络错误：显示重试按钮
  • 权限错误：提示重新登录
  • 数据错误：显示友好错误信息
  • 操作错误：提供撤销操作

开发计划

第一阶段：基础功能开发 (2天)

  • 页面布局和样式
  • 餐次选择功能
  • 菜谱列表展示
  • 基础交互逻辑

第二阶段：核心功能开发 (2天)

  • 购物车功能
  • 筛选搜索功能
  • 订单提交功能
  • 云函数开发

第三阶段：优化完善 (1天)

  • 性能优化
  • 用户体验优化
  • 错误处理完善
  • 测试和调试

成功指标

  • 用户可以正常选择餐次和浏览菜谱
  • 购物车功能正常工作
  • 订单可以成功提交到数据库
  • 页面加载速度 < 2秒
  • 用户操作响应时间 < 500ms
  • 错误率 < 1%

后续扩展功能

  • 智能推荐：基于用户喜好推荐菜谱
  • 营养分析：计算订单的营养成分
  • 分享功能：分享订单给好友
  • 历史记录：查看历史点餐记录
  • 评价系统：对菜谱和订单进行评价