scottpan/msh-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
314a29ea702728358b4b8312c3c710d8d0fc362a
msh-system/docs/打卡详情页_一键打卡入口设计.md

12 KiB
Raw Blame History

打卡详情页 - 一键打卡入口设计

更新日期：2025-11-20
版本：v2.2.1
核心优化：在打卡详情页增加"一键打卡"入口

🎯 优化目标

用户在查看打卡详情时，希望能快速复制该打卡内容，无需返回到列表页操作。

📱 三个主要入口

入口1：打卡历史页 → 直接复制 ⭐推荐快速打卡

我的饮食记录
┌──────────────────────────┐
│ 11月19日 早餐             │
│ ✅ 达标率92% ⭐高分        │
│ [📊 查看详情]              │
│ [⚡一键复制打卡] ←入口1    │
└──────────────────────────┘

特点：

  • ✅ 最快捷的方式
  • ✅ 无需进入详情页
  • ✅ 适合确定要复制的情况
  • ✅ 30秒完成打卡

流程：

点击"⚡一键复制打卡"
    ↓
复制确认页（预览内容）
    ↓
打卡页（内容已填充）
    ↓
修改内容（可选）
    ↓
发布完成（+5积分）

入口2：打卡详情页 → 详细查看后复制 ⭐⭐⭐本次新增

我的饮食记录
[📊 查看详情] ←先点这里
    ↓
打卡详情页
┌──────────────────────────┐
│ 📸 完整照片查看            │
│ 📊 营养数据详情            │
│ 📋 菜品清单               │
│ ┌──────────────────────┐ │
│ │ ⚡一键复制打卡 ←入口2  │ │
│ └──────────────────────┘ │
└──────────────────────────┘

特点：

  • ✅ 查看完整信息后决定
  • ✅ 可以看到所有照片和数据
  • ✅ 更了解打卡内容
  • ✅ 适合需要详细查看的情况

流程：

点击"📊 查看详情"
    ↓
进入打卡详情页
    ↓
查看照片、营养数据、菜品清单
    ↓
点击"⚡一键复制打卡"
    ↓
复制确认页
    ↓
打卡页（内容已填充）
    ↓
发布完成（+5积分）

入口3：社区打卡详情页 → 借鉴他人 ⭐学习优质内容

社区广场 → 他人的打卡
[点击帖子查看详情]
    ↓
打卡详情页（他人的）
┌──────────────────────────┐
│ 查看他人饮食方案           │
│ 营养数据参考              │
│ ┌──────────────────────┐ │
│ │ 🎬一键借鉴打卡 ←入口3  │ │
│ └──────────────────────┘ │
└──────────────────────────┘

特点：

  • ✅ 学习他人优质饮食方案
  • ✅ AI自动调整用量（根据你的情况）
  • ✅ 必须上传自己的照片
  • ✅ 原作者也会获得积分

流程：

浏览社区打卡内容
    ↓
点击感兴趣的帖子
    ↓
进入打卡详情页（他人的）
    ↓
点击"🎬一键借鉴打卡"
    ↓
借鉴确认页（AI调整用量）
    ↓
打卡页（需上传自己的照片）
    ↓
发布完成
自己+5积分，原作者+2积分

🎨 UI设计对比

场景A：查看【自己的】打卡详情页

┌────────────────────────────────┐
│  【快速操作】                    │
│  ┌──────────────────────────┐  │
│  │  ⚡ 一键复制打卡            │  │
│  │  快速复用这份饮食方案       │  │
│  └──────────────────────────┘  │
│                                │
│  点击后可以：                    │
│  ✅ 复制照片和备注到新打卡       │
│  ✅ 修改内容后重新发布           │
│  ✅ 可选生成AI视频               │
│  ✅ 获得5积分奖励                │
│                                │
│  💡 适用场景：                   │
│  • 今天吃的和之前某天一样        │
│  • 想复用高分打卡记录            │
│  • 快速打卡不想重新拍照          │
└────────────────────────────────┘

按钮样式：

  • 颜色：绿色渐变（#4CAF50 → #45B649）
  • 大小：宽度100%，高度56px
  • 字体：18px，加粗
  • 图标：⚡（闪电，表示快速）
  • 圆角：12px
  • 阴影：0 4px 12px rgba(76, 175, 80, 0.3)

场景B：查看【他人的】打卡详情页

┌────────────────────────────────┐
│  【一键借鉴】                    │
│  ┌──────────────────────────┐  │
│  │  🎬 一键借鉴打卡            │  │
│  │  学习这份营养方案           │  │
│  └──────────────────────────┘  │
│                                │
│  点击后可以：                    │
│  ✅ 复制菜品清单到我的打卡       │
│  ✅ 根据我的情况调整用量         │
│  ✅ AI生成适合我的食谱           │
│  ✅ 获得5积分奖励                │
│                                │
│  💡 适用场景：                   │
│  • 看到他人的优质打卡想学习      │
│  • 发现适合自己的饮食方案        │
│  • 需要新的饮食灵感              │
└────────────────────────────────┘

按钮样式：

  • 颜色：蓝色渐变（#2196F3 → #1E88E5）
  • 大小：宽度100%，高度56px
  • 字体：18px，加粗
  • 图标：🎬（摄像机，表示学习和记录）
  • 圆角：12px
  • 阴影：0 4px 12px rgba(33, 150, 243, 0.3)

💻 技术实现

1. 判断打卡详情页的场景

/**
 * 判断打卡详情页的场景
 */
function getCheckInDetailScene(recordId, currentUserId) {
  const record = getCheckInRecordById(recordId);
  
  if (record.user_id === currentUserId) {
    // 场景A：查看自己的打卡
    return {
      scene: 'self',
      buttonText: '⚡ 一键复制打卡',
      buttonColor: 'green',
      buttonClass: 'copy-btn-self',
      action: 'copyOwnCheckIn'
    };
  } else {
    // 场景B：查看他人的打卡
    return {
      scene: 'others',
      buttonText: '🎬 一键借鉴打卡',
      buttonColor: 'blue',
      buttonClass: 'copy-btn-others',
      action: 'learnFromOthers'
    };
  }
}

2. 一键复制自己的打卡

/**
 * 一键复制自己的打卡
 */
function copyOwnCheckIn(recordId) {
  const record = getCheckInRecordById(recordId);
  
  // 复制数据
  const copiedData = {
    photos_json: record.photos_json, // 照片URL数组
    notes: record.notes, // 备注说明
    voice_url: record.voice_url, // 语音备注（如果有）
    copied_from_record_id: recordId, // 记录复制来源
    is_copied: 1 // 标记为复制的打卡
  };
  
  // 保存到临时存储
  wx.setStorageSync('tempCheckInData', copiedData);
  
  // 跳转到打卡页
  wx.navigateTo({
    url: '/pages/check-in/check-in?from=copy&recordId=' + recordId
  });
  
  // 埋点统计
  trackEvent('copy_own_check_in', {
    record_id: recordId,
    source: 'detail_page'
  });
}

3. 一键借鉴他人的打卡

/**
 * 一键借鉴他人的打卡
 */
function learnFromOthers(recordId, currentUserId) {
  const record = getCheckInRecordById(recordId);
  
  // 获取用户自己的营养计划
  const myPlan = getNutritionPlan(currentUserId);
  
  // AI自动调整菜品用量
  const adjustedDishes = adjustDishesForUser(
    record.actual_dishes_json,
    myPlan
  );
  
  // 准备借鉴数据
  const learnedData = {
    dishes_json: adjustedDishes, // AI调整后的菜品清单
    reference_record_id: recordId, // 参考来源
    reference_user_id: record.user_id, // 原作者ID
    is_learned_from_others: 1 // 标记为借鉴的打卡
  };
  
  // 保存到临时存储
  wx.setStorageSync('tempCheckInData', learnedData);
  
  // 跳转到打卡页
  wx.navigateTo({
    url: '/pages/check-in/check-in?from=learn&recordId=' + recordId
  });
  
  // 给原作者增加积分（+2分）
  addPointsToUser(record.user_id, 2, 'content_learned', recordId);
  
  // 埋点统计
  trackEvent('learn_from_others', {
    record_id: recordId,
    original_user_id: record.user_id,
    source: 'detail_page'
  });
}

4. AI调整菜品用量

/**
 * AI调整菜品用量（根据用户的营养计划）
 */
function adjustDishesForUser(originalDishes, userPlan) {
  // 计算原始菜品的总营养
  const originalNutrition = calculateTotalNutrition(originalDishes);
  
  // 计算调整比例
  const proteinRatio = userPlan.target_protein / originalNutrition.protein;
  const energyRatio = userPlan.target_energy / originalNutrition.energy;
  
  // 取平均比例
  const avgRatio = (proteinRatio + energyRatio) / 2;
  
  // 调整每个菜品的用量
  return originalDishes.map(dish => {
    const newAmount = Math.round(dish.amount * avgRatio);
    
    return {
      ...dish,
      amount: newAmount, // 调整后的用量
      adjusted: true, // 标记为AI调整过的
      original_amount: dish.amount, // 保留原始用量供参考
      adjustment_ratio: avgRatio.toFixed(2) // 调整比例
    };
  });
}

📊 页面路径说明

页面 路径 参数 说明
打卡历史页 /pages/check-in-history/history - 显示用户的打卡记录列表
打卡详情页（自己的） /pages/check-in-detail/detail ?id={recordId}&type=self 查看自己的打卡详情
打卡详情页（他人的） /pages/check-in-detail/detail ?id={recordId}&type=others 查看他人的打卡详情
复制确认页 /pages/copy-confirm/confirm ?from={recordId} 复制自己的打卡确认页
借鉴确认页 /pages/learn-confirm/confirm ?from={recordId} 借鉴他人的打卡确认页
打卡页 /pages/check-in/check-in ?from=copy&recordId={id} 或 ?from=learn&recordId={id} 填写打卡内容

🎁 积分规则

行为 积分 说明
一键复制打卡（自己的） +5分 从历史记录快速复制
一键借鉴打卡（他人的） +5分 学习他人的饮食方案
内容被借鉴（原作者） +2分 自己的打卡被他人借鉴

📈 预期效果

指标 优化前 优化后 提升
详情页停留时长 15秒 30秒 +100%
从详情页发起的打卡 5% 20% +300%
一键复制打卡使用率 25% 40% +60%
打卡转化率 30% 45% +50%

数据支持：

  • 用户在详情页查看完整信息后，打卡意愿更强
  • 详情页提供更多上下文，用户更愿意复制高质量打卡
  • 减少操作步骤，提升转化率

💡 设计亮点

1. 场景区分 ⭐⭐⭐

  • 智能判断是"自己的打卡"还是"他人的打卡"
  • 不同场景显示不同的按钮文案和颜色
  • 提供差异化的体验

2. 三重入口 ⭐⭐⭐

  • 历史列表页：快速直接复制
  • 详情页：查看后再复制
  • 社区详情页：学习他人

3. AI智能调整 ⭐⭐⭐

  • 借鉴他人打卡时，AI自动调整菜品用量
  • 根据用户的营养计划个性化调整
  • 降低借鉴门槛，提升使用率

4. 积分激励 ⭐⭐⭐

  • 借鉴者获得+5分
  • 原作者获得+2分
  • 形成"创作-分享-学习"的正向循环

🚀 下一步优化

  1. 智能推荐复制

    • 在详情页根据历史数据推荐"您可能也想复制这几条"
    • 提供相似打卡记录推荐

  2. 批量复制

    • 支持一次性复制一天的三餐
    • 生成"一日食谱计划"

  3. 收藏夹功能

    • 收藏优质打卡记录
    • 从收藏夹快速复制

  4. 打卡模板

    • 将高分打卡保存为模板
    • 模板库供用户选择

文档版本：v2.2.1
更新日期：2025-11-20
产品名称：慢生活智能营养专家小程序

让每个打卡详情页都成为下一次打卡的起点！ ⚡🎬

Reference in New Issue View Git Blame Copy Permalink