440 lines
12 KiB
Markdown
440 lines
12 KiB
Markdown
# 打卡详情页 - 一键打卡入口设计
|
||
|
||
> **更新日期**：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. 判断打卡详情页的场景
|
||
|
||
```javascript
|
||
/**
|
||
* 判断打卡详情页的场景
|
||
*/
|
||
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. 一键复制自己的打卡
|
||
|
||
```javascript
|
||
/**
|
||
* 一键复制自己的打卡
|
||
*/
|
||
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. 一键借鉴他人的打卡
|
||
|
||
```javascript
|
||
/**
|
||
* 一键借鉴他人的打卡
|
||
*/
|
||
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调整菜品用量
|
||
|
||
```javascript
|
||
/**
|
||
* 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
|
||
**产品名称**：慢生活智能营养专家小程序
|
||
|
||
---
|
||
|
||
**让每个打卡详情页都成为下一次打卡的起点！** ⚡🎬
|
||
|