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
|
|||
|
|
**产品名称**：慢生活智能营养专家小程序
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**让每个打卡详情页都成为下一次打卡的起点！** ⚡🎬
|
|||
|
|
|