Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 nepiedg
|
bd85fbfa53 | ||
|
nepiedg
|
88c78fac55 | ||
|
nepiedg
|
4d68477a13 | ||
|
nepiedg
|
a39f1371a3 | ||
|
nepiedg
|
203f97385b | ||
|
nepiedg
|
895f5e6d09 | ||
|
nepiedg
|
374168d959 | ||
|
nepiedg
|
e28854b97d | ||
|
nepiedg
|
ba0a712306 | ||
|
nepiedg
|
4bd79ded0c | ||
|
nepiedg
|
4f29658afe |
@@ -1,309 +0,0 @@
|
||||
# Phase 3: 记录与历史 - 开发完成 ✅
|
||||
|
||||
## 🎉 项目状态
|
||||
|
||||
**Phase 3 已全部完成！**
|
||||
|
||||
- ✅ Day 1: 记录表单组件 (100%)
|
||||
- ✅ Day 2: 历史记录页 (100%)
|
||||
- ✅ 所有功能已实现并测试通过
|
||||
- ✅ 文档已完善
|
||||
|
||||
---
|
||||
|
||||
## 📦 核心功能
|
||||
|
||||
### 1. 记录抽烟 / 想抽忍住了
|
||||
|
||||
**组件**: `components/smoke-record-dialog/smoke-record-dialog.vue`
|
||||
|
||||
- 底部弹出表单
|
||||
- 时间、数量、等级、备注
|
||||
- 支持两种模式（抽烟/忍住）
|
||||
- 支持编辑现有记录
|
||||
- easycom 自动导入
|
||||
|
||||
### 2. 历史记录查看
|
||||
|
||||
**页面**: `pages/logs/index.vue`
|
||||
**Store**: `stores/logs.js`
|
||||
|
||||
- 时间轴展示
|
||||
- 按日期分组
|
||||
- 筛选功能（全部/抽烟/忍住）
|
||||
- 下拉刷新/上拉加载
|
||||
- 编辑和删除功能
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ 文件结构
|
||||
|
||||
```
|
||||
smt/
|
||||
├── components/
|
||||
│ └── smoke-record-dialog/
|
||||
│ ├── smoke-record-dialog.vue ✅ 记录弹框组件
|
||||
│ └── README.md ✅ 组件文档
|
||||
│
|
||||
├── pages/
|
||||
│ ├── index/
|
||||
│ │ └── index.vue ✅ 首页（集成记录功能）
|
||||
│ └── logs/
|
||||
│ └── index.vue ✅ 历史记录页
|
||||
│
|
||||
├── stores/
|
||||
│ ├── index.js ✅ Store 导出
|
||||
│ └── logs.js ✅ Logs Store（新增）
|
||||
│
|
||||
└── docs/
|
||||
├── DEVELOPMENT.md ✅ 开发计划（已更新）
|
||||
├── PHASE3_SUMMARY.md ✅ 阶段总结
|
||||
├── PHASE3_TODO.md ✅ 待办清单
|
||||
├── PHASE3_COMPLETED.md ✅ 完成报告
|
||||
├── PHASE3_USER_GUIDE.md ✅ 使用指南
|
||||
└── README_PHASE3.md ✅ 本文档
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. 查看文档
|
||||
|
||||
- **开发文档**: `docs/DEVELOPMENT.md` - Phase 3 部分
|
||||
- **完成报告**: `docs/PHASE3_COMPLETED.md` - 详细功能清单
|
||||
- **使用指南**: `docs/PHASE3_USER_GUIDE.md` - 用户操作说明
|
||||
- **组件文档**: `components/smoke-record-dialog/README.md`
|
||||
|
||||
### 2. 运行项目
|
||||
|
||||
```bash
|
||||
# 微信开发者工具中打开项目
|
||||
# 或使用命令行
|
||||
npm run dev:mp-weixin
|
||||
```
|
||||
|
||||
### 3. 测试功能
|
||||
|
||||
#### 测试记录功能
|
||||
1. 打开首页
|
||||
2. 点击「记录抽烟」或「想抽忍住了」
|
||||
3. 填写表单并提交
|
||||
4. 验证首页数据更新
|
||||
|
||||
#### 测试历史记录
|
||||
1. 切换到「记录」标签页
|
||||
2. 查看记录列表
|
||||
3. 测试筛选功能
|
||||
4. 测试编辑和删除
|
||||
|
||||
---
|
||||
|
||||
## 📊 功能对照表
|
||||
|
||||
| 功能 | 状态 | 文件位置 |
|
||||
|------|------|---------|
|
||||
| 记录抽烟弹框 | ✅ | `components/smoke-record-dialog/` |
|
||||
| 记录忍住弹框 | ✅ | `components/smoke-record-dialog/` |
|
||||
| 编辑记录 | ✅ | `pages/logs/index.vue` + 组件 |
|
||||
| 删除记录 | ✅ | `pages/logs/index.vue` |
|
||||
| 历史记录列表 | ✅ | `pages/logs/index.vue` |
|
||||
| 筛选功能 | ✅ | `pages/logs/index.vue` |
|
||||
| 日期分组 | ✅ | `stores/logs.js` (getter) |
|
||||
| 下拉刷新 | ✅ | `pages/logs/index.vue` |
|
||||
| 上拉加载 | ✅ | `pages/logs/index.vue` |
|
||||
| 骨架屏 | ✅ | `pages/logs/index.vue` |
|
||||
| 空状态 | ✅ | `pages/logs/index.vue` |
|
||||
| Logs Store | ✅ | `stores/logs.js` |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 UI 主题
|
||||
|
||||
### 明亮主题配色
|
||||
|
||||
```javascript
|
||||
{
|
||||
background: 'linear-gradient(#D1FAE5, #F0FDF4, #FFFFFF)',
|
||||
card: '#FFFFFF',
|
||||
primary: '#10B981', // 翡翠绿
|
||||
text: '#1F2937', // 深灰
|
||||
textSecondary: '#6B7280', // 中灰
|
||||
border: '#E5E7EB', // 浅灰
|
||||
|
||||
// 语义色
|
||||
success: '#10B981', // 绿色（忍住）
|
||||
danger: '#EF4444', // 红色（抽烟）
|
||||
info: '#3B82F6' // 蓝色（编辑）
|
||||
}
|
||||
```
|
||||
|
||||
### 组件样式
|
||||
|
||||
- **弹框**: 底部弹出，白色背景，圆角顶部
|
||||
- **卡片**: 白色背景，阴影，彩色左边框
|
||||
- **按钮**: 圆角，清晰的视觉层级
|
||||
- **标签**: 圆角，柔和的背景色
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术栈
|
||||
|
||||
- **框架**: uni-app (Vue 3)
|
||||
- **状态管理**: Pinia
|
||||
- **组件规范**: Options API
|
||||
- **命名规范**: kebab-case
|
||||
- **样式**: Scoped CSS
|
||||
- **构建工具**: Vite
|
||||
|
||||
---
|
||||
|
||||
## 📱 功能截图
|
||||
|
||||
### 首页 - 记录按钮
|
||||
```
|
||||
[🚬 记录抽烟] [💪 想抽忍住了]
|
||||
```
|
||||
|
||||
### 记录弹框
|
||||
```
|
||||
┌──────────────────┐
|
||||
│ 记录抽烟 × │
|
||||
├──────────────────┤
|
||||
│ 时间 │
|
||||
│ [日期] [时间] │
|
||||
│ 数量 [-] 1 [+] │
|
||||
│ 等级 [1-5] │
|
||||
│ 备注 [输入框] │
|
||||
├──────────────────┤
|
||||
│ [取消] [确定] │
|
||||
└──────────────────┘
|
||||
```
|
||||
|
||||
### 历史记录页
|
||||
```
|
||||
[全部] [已抽烟] [已忍住]
|
||||
|
||||
今天 1月25日
|
||||
● 💪 想抽忍住了 [编辑] [删除]
|
||||
14:30
|
||||
距上次 2小时15分
|
||||
|
||||
● 🚬 记录抽烟 [编辑] [删除]
|
||||
12:15 3支 等级2
|
||||
压力大
|
||||
距上次 1小时30分
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验收清单
|
||||
|
||||
### 功能完整性
|
||||
- [x] 记录提交功能
|
||||
- [x] 记录编辑功能
|
||||
- [x] 记录删除功能
|
||||
- [x] 列表查看功能
|
||||
- [x] 筛选功能
|
||||
- [x] 刷新加载功能
|
||||
|
||||
### 性能指标
|
||||
- [x] 弹框动画 < 300ms
|
||||
- [x] 列表首次加载 < 1s
|
||||
- [x] 滚动流畅度 60fps
|
||||
- [x] 无内存泄漏
|
||||
|
||||
### 用户体验
|
||||
- [x] 操作反馈及时
|
||||
- [x] 加载状态清晰
|
||||
- [x] 错误提示友好
|
||||
- [x] 空状态有引导
|
||||
|
||||
### 代码质量
|
||||
- [x] 无 Lint 错误
|
||||
- [x] 代码注释完整
|
||||
- [x] 组件职责清晰
|
||||
- [x] 命名规范统一
|
||||
|
||||
---
|
||||
|
||||
## 🐛 已知问题
|
||||
|
||||
**无已知问题** ✅
|
||||
|
||||
所有功能已测试通过，运行正常。
|
||||
|
||||
---
|
||||
|
||||
## 📈 下一步计划
|
||||
|
||||
Phase 3 已完成，建议进入 **Phase 4: 统计与图表**
|
||||
|
||||
### Phase 4 主要任务
|
||||
|
||||
1. **统计页基础**
|
||||
- 时间范围切换（周/月/年）
|
||||
- 数据请求和处理
|
||||
|
||||
2. **吸烟趋势图**
|
||||
- 集成图表库（uCharts/ECharts）
|
||||
- 柱状图/折线图展示
|
||||
|
||||
3. **健康与储蓄**
|
||||
- 节省金额计算
|
||||
- 肺部功能恢复
|
||||
|
||||
4. **成就系统**
|
||||
- 连续记录天数
|
||||
- 已拒绝次数
|
||||
|
||||
详见 `docs/DEVELOPMENT.md` Phase 4 部分
|
||||
|
||||
---
|
||||
|
||||
## 💬 开发心得
|
||||
|
||||
### 成功经验
|
||||
|
||||
1. **组件化思维**
|
||||
- smoke-record-dialog 高度复用
|
||||
- 职责单一，易于维护
|
||||
|
||||
2. **状态管理**
|
||||
- Pinia Store 集中管理
|
||||
- Getters 处理计算逻辑
|
||||
|
||||
3. **用户体验**
|
||||
- 乐观更新提升响应速度
|
||||
- 骨架屏改善加载体验
|
||||
|
||||
### 改进建议
|
||||
|
||||
1. **性能优化**
|
||||
- 考虑虚拟列表（大数据量）
|
||||
- 添加请求缓存
|
||||
|
||||
2. **功能增强**
|
||||
- 支持批量删除
|
||||
- 支持数据导出
|
||||
|
||||
3. **视觉优化**
|
||||
- 添加更多动画效果
|
||||
- 优化深色模式适配
|
||||
|
||||
---
|
||||
|
||||
## 📞 联系方式
|
||||
|
||||
如有问题或建议，请通过以下方式联系：
|
||||
|
||||
- **项目仓库**: [GitHub]
|
||||
- **文档位置**: `docs/`
|
||||
- **开发者**: AI Assistant
|
||||
|
||||
---
|
||||
|
||||
**版本**: Phase 3 完整版
|
||||
**更新时间**: 2025-01-25
|
||||
**状态**: ✅ 已完成并测试通过
|
||||
**下一阶段**: Phase 4 - 统计与图表
|
||||
@@ -0,0 +1,89 @@
|
||||
设计原则
|
||||
整合四位专家的核心诉求：
|
||||
|
||||
冷静但不冷漠、有趣但不幼稚、净化而非刺激
|
||||
|
||||
最终界面布局（完整结构）
|
||||
📐 整体高度：约手机一屏半，单页垂直流
|
||||
【顶部区】个人状态栏（高度 30%）
|
||||
*.txt
|
||||
Plaintext
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ [头像] 意志骑士 Lv.3 💰 ×24 │ ← 毛玻璃背景
|
||||
│ │ backdrop-blur: 12px
|
||||
│ ╭─────────────────────────────────────────────╮ │
|
||||
│ │ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ← HP生命槽
|
||||
│ │ HP: 72% 浊→清 视觉语言 │ │ 渐变填充 #6EE7B7→#67E8F9
|
||||
│ ╰─────────────────────────────────────────────╯ │ 24px高，12px圆角
|
||||
│ │
|
||||
│ ✦ 深度含氧（已坚持 2 小时 17 分） │ ← Buff标签
|
||||
│ [薰衣草紫边框] │ 胶囊形
|
||||
└─────────────────────────────────────────────────────┘
|
||||
设计决策说明：
|
||||
|
||||
保留游戏化元素（等级/称号），但降低视觉优先级——置于次要位置
|
||||
采用色彩心理学专家的"浊清动效"替代碎裂动效，保护用户情绪
|
||||
毛玻璃背景融合未来主义美学，但保持经典主义的秩序感
|
||||
【中部区】核心控制台（高度 35%）
|
||||
*.txt
|
||||
Plaintext
|
||||
【中下区】健康仪表盘（高度 20%）
|
||||
*.txt
|
||||
Plaintext
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ╭─────────╮ ╭────────────────────────╮ │
|
||||
│ │ ◐ │ │ 呼吸系统 +12% │ │
|
||||
│ │ 84% │ │ 心脏功能 +8% │ │
|
||||
│ │ 健康 │ │ 血液纯净 +15% │ │
|
||||
│ ╰─────────╯ │ ──────────────────── │ │
|
||||
│ 健康指数 │ +3.2 小时 │ │ ← 生命回收
|
||||
│ (圆环图) │ 生命已回收 │ │ 强调色24px
|
||||
│ ╰────────────────────────╯ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
设计决策说明：
|
||||
|
||||
健康指数圆环图代替多个独立卡片，符合极简主义减法原则
|
||||
生命回收概念来自未来主义，成为核心数据展示
|
||||
【底部区】成长曲线（高度 15%）
|
||||
*.txt
|
||||
Plaintext
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ 7 天趋势 │
|
||||
│ │ │
|
||||
│ 5 ├ ● │ ← 琥珀金转折点
|
||||
│ │ ●────────────╱ │
|
||||
│ 3 ├──●────────────────╱ │
|
||||
│ │╱ │
|
||||
│ 0 └──┬────┬────┬────┬────┬────┬────┬────→ │
|
||||
│ 周一 周二 周三 周四 周五 周六 周日 │
|
||||
│ │
|
||||
│ 背景：极淡青绿渐变 (#ECFDF5 → #F0F9FF) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
最终色板
|
||||
用途 色值 来源 说明
|
||||
HP高填充 #67E8F9 心理学专家调整 降低饱和度，更持久
|
||||
HP低填充 #D97706 暗琥珀 心理学专家 警示非恐惧
|
||||
主渐变起 #6EE7B7 心理学专家调整 生命力、成长
|
||||
SOS/里程碑 #FBBF24 全场共识 温暖、成就
|
||||
Buff标签 #A78BFA 薰衣草紫 心理学专家原创 成长、过渡
|
||||
背景 #F8FAFC 微蓝白 经典主义 干净、呼吸感
|
||||
文字主色 #1E293B 深蓝灰 经典主义 冷静、专业
|
||||
动效规范
|
||||
动效 实现 周期 意义
|
||||
HP呼吸闪烁 微弱明度变化 ±5% 4-6秒 与身体节奏共振
|
||||
浊清过渡 颜色从暗琥珀→清澈渐变 2秒 非破坏性反馈
|
||||
呼吸线脉动 顶部细线不透明度 10-20% 6秒 身体自愈暗示
|
||||
设计决策摘要
|
||||
问题 最终决策 采纳来源
|
||||
HP碎裂动效 ❌ 取消 → 改用"浊清"视觉语言 色彩心理学专家
|
||||
等级/称号 ✅ 保留，但降低视觉优先级 未来主义
|
||||
金币奖励 ✅ 保留图标形式，删除独立卡片 极简主义融合
|
||||
游戏化整体 ⚠️ 保留数值化反馈，删除幼稚外壳 经典主义+未来主义融合
|
||||
布局风格 瑞士网格+毛玻璃 经典主义+未来主义融合
|
||||
配色饱和度 降低15-20% 经典主义+色彩心理学
|
||||
一句话总结
|
||||
"一个冷静的生物数据仪表盘，用颜色的语言告诉用户：你的每一次选择，都在让生命更加清澈。"
|
||||
+2
-2
@@ -254,9 +254,9 @@ function calculateMoneySaved(packPriceCent, cigsPerPack, baselineCigsPerDay, act
|
||||
|
||||
---
|
||||
|
||||
## 7. 激励语生成（后端统一）
|
||||
## 7. 激励语生成（首页内联返回）
|
||||
|
||||
接口：`GET /api/v1/smoke/motivation`（详见 `docs/smoke/API.md`）
|
||||
接口：`GET /api/v1/smoke/home` 的 `motivation` 字段。
|
||||
|
||||
根据用户状态生成不同的激励语：
|
||||
|
||||
|
||||
+16
-43
@@ -60,18 +60,14 @@
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ 0ms ─ 页面骨架屏渲染 │
|
||||
│ │ │
|
||||
│ ├──── 并行请求 ──────────────────────────────────── │
|
||||
│ ├──── 串行守卫 + 单接口数据 ──────────────────────── │
|
||||
│ │ ├── /profile (检查用户状态) │
|
||||
│ │ ├── /dashboard (核心数据) │
|
||||
│ │ └── /next_smoke_time (建议时间) │
|
||||
│ │ └── /home (首页核心数据) │
|
||||
│ │ │
|
||||
│ 200ms ─ 核心数据返回，渲染计时器+统计卡片 │
|
||||
│ │ │
|
||||
│ 300ms ─ 首屏渲染完成 │
|
||||
│ │ │
|
||||
│ │ ┌── 延迟加载 ────────────────────────────── │
|
||||
│ │ └── /ai/advice (AI提示卡片) │
|
||||
│ │ │
|
||||
│ 500ms ─ 完整页面渲染 │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
@@ -79,29 +75,14 @@
|
||||
### 3.2 缓存策略
|
||||
|
||||
```javascript
|
||||
// stores/dashboard.js
|
||||
import { defineStore } from 'pinia'
|
||||
// 首页使用 /smoke/home 单接口返回当前屏所需字段。
|
||||
// 页面级刷新由 onShow 触发，避免维护额外 dashboard store 和重复请求。
|
||||
const homeData = ref(null)
|
||||
|
||||
export const useDashboardStore = defineStore('dashboard', {
|
||||
state: () => ({
|
||||
todayCount: 0,
|
||||
minutesSinceLast: 0,
|
||||
weekly: [],
|
||||
nextSmokeTime: null,
|
||||
lastFetchTime: 0,
|
||||
cacheExpiry: 30 * 1000
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async fetchDashboard(forceRefresh = false) {
|
||||
const now = Date.now()
|
||||
if (!forceRefresh && now - this.lastFetchTime < this.cacheExpiry) {
|
||||
return
|
||||
}
|
||||
// 发起请求...
|
||||
}
|
||||
}
|
||||
})
|
||||
async function fetchRecordHomeData() {
|
||||
const res = await api.getHome()
|
||||
homeData.value = res.data || {}
|
||||
}
|
||||
```
|
||||
|
||||
### 3.3 计时器优化
|
||||
@@ -240,35 +221,27 @@ export const request = {
|
||||
```javascript
|
||||
// pages/index/index.vue
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useDashboardStore } from '@/stores/dashboard'
|
||||
import * as api from '@/api/smoke'
|
||||
import * as api from '@/api'
|
||||
|
||||
const loading = ref(true)
|
||||
const dashboardStore = useDashboardStore()
|
||||
const homeData = ref(null)
|
||||
|
||||
async function initPage() {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const [profileRes, dashboardRes, nextTimeRes] = await Promise.all([
|
||||
api.getProfile(),
|
||||
api.getDashboard(),
|
||||
api.getNextSmokeTime()
|
||||
])
|
||||
|
||||
if (!profileRes.data.exists || !profileRes.data.is_completed) {
|
||||
const profileRes = await api.getSmokeProfile()
|
||||
if (!profileRes.exists || !profileRes.is_completed) {
|
||||
uni.redirectTo({ url: '/pages/onboarding/index' })
|
||||
return
|
||||
}
|
||||
|
||||
dashboardStore.setDashboard(dashboardRes.data)
|
||||
dashboardStore.setNextSmokeTime(nextTimeRes.data)
|
||||
|
||||
const homeRes = await api.getHome()
|
||||
homeData.value = homeRes.data || {}
|
||||
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
setTimeout(loadAiAdvice, 300)
|
||||
}
|
||||
|
||||
onMounted(initPage)
|
||||
|
||||
+62
-279
@@ -54,18 +54,7 @@ curl -X POST 'http://127.0.0.1:8080/api/v1/smoke/logs' \
|
||||
}
|
||||
```
|
||||
|
||||
## 2) 获取单条记录
|
||||
|
||||
`GET /api/v1/smoke/logs/:id`
|
||||
|
||||
curl 示例：
|
||||
|
||||
```bash
|
||||
curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
-H 'Authorization: Bearer wx-session-key'
|
||||
```
|
||||
|
||||
## 3) 列表查询（分页）
|
||||
## 2) 列表查询（分页）
|
||||
|
||||
`GET /api/v1/smoke/logs?page=1&page_size=20&start=2025-12-01&end=2025-12-31&type=all`
|
||||
|
||||
@@ -93,71 +82,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
}
|
||||
```
|
||||
|
||||
## 4) 获取看板概览
|
||||
|
||||
`GET /api/v1/smoke/dashboard?start=2026-01-01&end=2026-01-07`
|
||||
|
||||
参数：
|
||||
- `start`：起始日期（含，格式 `YYYY-MM-DD`），默认“本周一”
|
||||
- `end`：截止日期（含，格式 `YYYY-MM-DD`），默认“本周日”。若只传 `start`，`end` 默认为 `start + 6 天`。
|
||||
|
||||
成功响应示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"today_count": 6,
|
||||
"minutes_since_last": 42,
|
||||
"weekly": [
|
||||
{ "date": "2026-01-01", "count": 2, "is_today": false },
|
||||
{ "date": "2026-01-02", "count": 1, "is_today": false },
|
||||
{ "date": "2026-01-03", "count": 0, "is_today": false },
|
||||
{ "date": "2026-01-04", "count": 0, "is_today": false },
|
||||
{ "date": "2026-01-05", "count": 3, "is_today": true },
|
||||
{ "date": "2026-01-06", "count": 0, "is_today": false },
|
||||
{ "date": "2026-01-07", "count": 0, "is_today": false }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
字段说明：
|
||||
- `today_count`：当天吸烟总支数（累加 `num`）
|
||||
- `minutes_since_last`：距最后一次“实际抽烟”（忽略 `level=0 && num=0` 的忍住记录）的分钟数，通过最近一条 `smoke_at/smoke_time/createtime` 计算；若历史为空则字段不存在
|
||||
- `weekly`：起止日期内每日汇总，`count` 为当日总支数，`is_today` 标记当前日期（即便不在 `start/end` 范围内也会标记为 `false`）
|
||||
|
||||
## 5) 最近记录列表（轻量版）
|
||||
|
||||
`GET /api/v1/smoke/logs/latest?limit=20`
|
||||
|
||||
参数：
|
||||
- `limit`：返回条数，默认 `20`，最大 `100`
|
||||
|
||||
成功响应示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": 123,
|
||||
"smoke_time": "2026-01-05T00:00:00+08:00",
|
||||
"smoke_at": "2026-01-05T09:12:00+08:00",
|
||||
"remark": "压力大",
|
||||
"level": 3,
|
||||
"num": 2,
|
||||
"createtime": 1736049120
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 6) 更新记录
|
||||
## 3) 更新记录
|
||||
|
||||
`POST /api/v1/smoke/logs/:id`
|
||||
|
||||
@@ -178,7 +103,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
- 如果你想“清空 smoke_at”，请传空字符串：`{"smoke_at":""}`。
|
||||
- 如果传 `null` 或者不传 `smoke_time`，后端会认为你没有修改该字段。
|
||||
|
||||
## 7) 删除记录（软删除）
|
||||
## 4) 删除记录（软删除）
|
||||
|
||||
`DELETE /api/v1/smoke/logs/:id`
|
||||
|
||||
@@ -194,157 +119,51 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
}
|
||||
```
|
||||
|
||||
## 8) 获取 AI 戒烟建议（会员 + 广告解锁并行）
|
||||
|
||||
`GET /api/v1/smoke/ai/advice?date=2026-01-02`
|
||||
|
||||
说明：
|
||||
- `date` 可选，默认“昨天”（建议针对哪一天的数据）。
|
||||
- 权限：会员用户直接可用；非会员需要先对该 `date` 完成“看广告解锁”（见下一个接口）。
|
||||
- 建议结果会按 `uid + date + prompt_version` 缓存（表：`fa_smoke_ai_advice`）。
|
||||
|
||||
## 9) 首页整合接口（Home Dashboard）
|
||||
## 5) 首页整合接口（Home）
|
||||
|
||||
`GET /api/v1/smoke/home`
|
||||
|
||||
此接口把首页 UI 所需核心模块一次返回，避免前端串行请求多个接口。返回示例：
|
||||
此接口只返回首页、AI 时间页和 AI 日总结页正在消费的核心字段，避免生成或传递无用模块。返回示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"greeting": {
|
||||
"title": "早安，Alex",
|
||||
"subtitle": "今天也是清爽的一天",
|
||||
"nickname": "Alex",
|
||||
"time_of_day": "morning",
|
||||
"avatar_url": "https://example.com/avatar.jpg"
|
||||
},
|
||||
"profile": {
|
||||
"exists": true,
|
||||
"is_completed": true,
|
||||
"awake_minutes": 900,
|
||||
"baseline_interval_minutes": 60,
|
||||
"profile": {
|
||||
"baseline_cigs_per_day": 10,
|
||||
"pack_price_cent": 3200,
|
||||
"wake_up_time": "07:20",
|
||||
"sleep_time": "23:30"
|
||||
}
|
||||
},
|
||||
"advice_card": {
|
||||
"title": "智能控烟建议",
|
||||
"date": "2026-01-04",
|
||||
"message": "根据你的习惯，下午2点是烟瘾高峰，可以试试短暂散步。",
|
||||
"status": "available"
|
||||
},
|
||||
"campaign_card": {
|
||||
"title": "绿色生活，从戒烟开始",
|
||||
"subtitle": "BRAND CAMPAIGN",
|
||||
"badge": "广告"
|
||||
},
|
||||
"timer": {
|
||||
"label": "距上次抽烟",
|
||||
"last_smoke_at": "2026-01-05T07:42:00+08:00",
|
||||
"seconds_since_last": 9900,
|
||||
"next_suggested_at": "2026-01-05T10:30:00+08:00",
|
||||
"next_suggested_clock": "10:30",
|
||||
"not_before_at": "2026-01-05T10:30:00+08:00",
|
||||
"suggestion_source": "default",
|
||||
"suggestion_algorithm": "staircase_delay_v1"
|
||||
"suggestion_source": "default"
|
||||
},
|
||||
"summary": {
|
||||
"summary": {
|
||||
"today_count": 3,
|
||||
"daily_target": 10,
|
||||
"resisted_count": 1,
|
||||
"reduced_from_yesterday": 2,
|
||||
"exceeded_yesterday": false,
|
||||
"profile_completed": true
|
||||
"exceeded_yesterday": false
|
||||
},
|
||||
"motivation": {
|
||||
"message": "太棒了！你刚刚成功抵抗了一次烟瘾",
|
||||
"type": "praise"
|
||||
},
|
||||
"quick_actions": [
|
||||
{ "type": "log_smoke", "title": "记录抽烟", "primary": false },
|
||||
{ "type": "resist", "title": "想抽忍住了", "primary": true }
|
||||
],
|
||||
"data_sources": {
|
||||
"ai_advice_date": "2026-01-04",
|
||||
"plan_date": "2026-01-05"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
字段说明：
|
||||
- `greeting.title`：问候语 + 昵称（如“下午好，Alex”）。
|
||||
- `greeting.subtitle`：副标题/心情提示文案。
|
||||
- `greeting.nickname`：昵称（无昵称时使用“朋友”）。
|
||||
- `greeting.time_of_day`：时间段标识（`morning`/`noon`/`afternoon`/`evening`）。
|
||||
- `greeting.avatar_url`：头像 URL。
|
||||
- `profile.exists`：是否存在用户档案。
|
||||
- `profile.profile`：档案详情对象（可能为空）。
|
||||
- `profile.is_completed`：是否已完成 onboarding。
|
||||
- `profile.awake_minutes`：清醒时长（分钟）。
|
||||
- `profile.baseline_interval_minutes`：基准间隔（分钟）。
|
||||
- `advice_card.title`：AI 提示卡片标题。
|
||||
- `advice_card.date`：建议对应日期。
|
||||
- `advice_card.message`：AI 建议内容。
|
||||
- `advice_card.status`：`available`、`locked`（需解锁）、`unavailable`（AI 服务未配置）、`no_data`（所需日期没有记录）、`empty`（初始化）。
|
||||
- `advice_card.model`：模型名称（有则返回）。
|
||||
- `campaign_card.title`：活动标题。
|
||||
- `campaign_card.subtitle`：活动副标题。
|
||||
- `campaign_card.badge`：活动角标（如“广告”）。
|
||||
- `timer.label`：展示标题（如“距上次抽烟”）。
|
||||
- `timer.last_smoke_at`：最近一次实际抽烟时间（RFC3339）。
|
||||
- `timer.seconds_since_last`：距上次抽烟的秒数（无记录返回 `-1`）。
|
||||
- `timer.next_suggested_at`：建议下次抽烟时间（RFC3339）。
|
||||
- `timer.next_suggested_clock`：仅时分显示（如“16:30”）。
|
||||
- `timer.not_before_at`：不早于的时间点（当前与 `next_suggested_at` 一致）。
|
||||
- `timer.suggestion_source`：建议来源（`default`/`ai`）。
|
||||
- `timer.suggestion_algorithm`：算法版本（`staircase_delay_v1`）。
|
||||
- `timer` 说明：`seconds_since_last` 基于服务器当前时间计算，`last_smoke_at` 若补录未来时间会截断到 `as_of`；当 `plan_date=今天` 时会补齐过期间隔确保 `next_suggested_at` 在未来。
|
||||
- `summary.today_count`：今日吸烟支数累加。
|
||||
- `summary.daily_target`：每日目标（线性递减：以 `onboarding_completed_at` 为起点，按 `quit_date` 线性下降到 0）。
|
||||
- `summary.resisted_count`：今日忍住次数。
|
||||
- `summary.daily_target`：每日目标。
|
||||
- `summary.reduced_from_yesterday`：与昨日的绝对差值（非负）。
|
||||
- `summary.exceeded_yesterday`：是否比昨天多。
|
||||
- `summary.profile_completed`：是否已完成基础信息。
|
||||
- `daily_summary`：当天已缓存的 AI 日总结；无缓存时为 `null`。
|
||||
- `motivation.message`：激励语文案。
|
||||
- `motivation.type`：激励语类型。
|
||||
- `quick_actions[].type`：动作类型（`log_smoke`/`resist`）。
|
||||
- `quick_actions[].title`：按钮文案。
|
||||
- `quick_actions[].primary`：是否主按钮。
|
||||
- `data_sources.ai_advice_date`：AI 建议日期。
|
||||
- `data_sources.plan_date`：当前计划日期。
|
||||
|
||||
如需 AI 时间节点完整版，可继续调用 `GET /ai/next_smoke_time`；首页接口只返回默认建议，避免额外的 AI 生成成本。
|
||||
|
||||
未满足权限时的建议响应（示例）：
|
||||
```json
|
||||
{
|
||||
"code": 403,
|
||||
"message": "需要会员或观看广告解锁后才可生成建议",
|
||||
"data": {
|
||||
"date": "2026-01-02",
|
||||
"need": "vip_or_ad"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
成功响应（示例）：
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"date": "2026-01-02",
|
||||
"advice": "..."
|
||||
}
|
||||
}
|
||||
```
|
||||
如需生成 AI 时间节点，请调用 `GET /api/v1/smoke/ai/next_smoke_time`；首页接口只读取缓存，不主动生成 AI 建议，避免额外性能成本。
|
||||
|
||||
## 10) 看广告解锁（用于非会员）
|
||||
|
||||
@@ -451,33 +270,13 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
|
||||
|
||||
成功响应：同 `GET /api/v1/smoke/profile`（返回最新 `profile` + `is_completed` + `baseline_interval_minutes`）。
|
||||
|
||||
## 13) 想抽但忍住了（写入一条 level=0,num=0 的记录）
|
||||
## 13) 获取 AI 下次抽烟建议
|
||||
|
||||
`POST /api/v1/smoke/logs/resisted`
|
||||
|
||||
请求体（示例）：
|
||||
```json
|
||||
{
|
||||
"smoke_time": "2026-01-05",
|
||||
"smoke_at": "2026-01-05 10:20:00",
|
||||
"remark": "压力大，想抽但忍住了",
|
||||
"level": 0,
|
||||
"num": 0
|
||||
}
|
||||
```
|
||||
`GET /api/v1/smoke/ai/next_smoke_time`
|
||||
|
||||
说明：
|
||||
- 该接口会在 `fa_smoke_log` 中新增一条记录：`level=0` 且 `num=0`，用于更直观记录“想抽/忍住”的过程。
|
||||
- 这类记录不会影响 `today_count/weekly.count` 的支数统计（因为 `num=0`）。
|
||||
|
||||
## 14) 获取“下次抽烟记录时间”（默认 + AI 自动切换）
|
||||
|
||||
`GET /api/v1/smoke/next_smoke_time`
|
||||
|
||||
说明：
|
||||
- 用于首页展示“建议的下次记录时间”。
|
||||
- 已整合首页所需汇总字段（上次抽烟时间/今日抽烟支数/今日克制次数/较昨日减少支数）。
|
||||
- 如果指定日期存在 AI 给出的时间节点（`time_nodes` 不为空），则优先使用 AI 的建议；否则使用默认策略。
|
||||
- 用于 AI 建议页生成当天时间节点。
|
||||
- 首页只通过 `GET /smoke/home` 读取已缓存的 AI 结果，不主动生成 AI，避免首页加载时产生额外性能成本。
|
||||
- 可选参数：
|
||||
- `date`：计划日期（默认今天），支持 `YYYY-MM-DD` 或 `today/tomorrow`。
|
||||
- `mode`（默认 `auto`）
|
||||
@@ -495,74 +294,21 @@ AI 生成说明：
|
||||
- 当 `mode=ai` 时，会把最近 3 天的抽烟数据（含“忍住记录”）作为输入提供给 AI，用于更贴合近期模式生成时间节点。
|
||||
- 未解锁时会返回 `403`：提示需要观看广告解锁。
|
||||
|
||||
成功响应（示例：回落到默认）：
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"source": "default",
|
||||
"not_before_at": "2026-01-05T10:18:00+08:00",
|
||||
"suggested_at": "2026-01-05T10:18:00+08:00",
|
||||
"last_smoke_at": "2026-01-05T09:30:00+08:00",
|
||||
"today_count": 3,
|
||||
"resisted_count": 1,
|
||||
"reduced_from_yesterday": 2,
|
||||
"exceeded_yesterday": false,
|
||||
"default": {
|
||||
"last_smoke_at": "2026-01-05T09:30:00+08:00",
|
||||
"next_smoke_at": "2026-01-05T10:18:00+08:00",
|
||||
"base_interval_minutes": 48,
|
||||
"interval_minutes": 48,
|
||||
"stage": 0,
|
||||
"resisted_7d": 3,
|
||||
"sleep_adjusted": false,
|
||||
"algorithm": "staircase_delay_v1",
|
||||
"as_of": "2026-01-05T10:00:00+08:00"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当存在 AI 建议且包含 `time_nodes` 时，响应会是（示例）：
|
||||
成功响应（示例）：
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"source": "ai",
|
||||
"not_before_at": "2026-01-05T10:18:00+08:00",
|
||||
"suggested_at": "2026-01-05T10:28:00+08:00",
|
||||
"last_smoke_at": "2026-01-05T09:30:00+08:00",
|
||||
"today_count": 3,
|
||||
"resisted_count": 1,
|
||||
"reduced_from_yesterday": 2,
|
||||
"exceeded_yesterday": false,
|
||||
"time_nodes": ["10:30", "11:10", "14:00", "16:30"],
|
||||
"advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。",
|
||||
"default": { "algorithm": "staircase_delay_v1" },
|
||||
"ai": {
|
||||
"plan_date": "2026-01-05",
|
||||
"not_before_at": "2026-01-05T10:18:00+08:00",
|
||||
"suggested_at": "2026-01-05T10:28:00+08:00",
|
||||
"time_nodes": ["10:30", "11:10", "14:00", "16:30"],
|
||||
"advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。",
|
||||
"prompt_version": "v1",
|
||||
"model": "gpt-4.1-mini",
|
||||
"provider": "openai-compatible"
|
||||
}
|
||||
"advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
字段说明（新增首页字段）：
|
||||
- `last_smoke_at`：上次“实际抽烟”时间（忽略忍住记录），格式 `RFC3339`（含时区）。
|
||||
- `today_count`：今日抽烟支数（累加 `num`）。
|
||||
- `resisted_count`：今日克制次数（`num=0`）。
|
||||
- `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。
|
||||
- `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。
|
||||
|
||||
## 15) 数据统计分析（趋势 + 健康 + 省钱）
|
||||
## 14) 数据统计分析（趋势 + 健康 + 省钱）
|
||||
|
||||
`GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07`
|
||||
|
||||
@@ -625,21 +371,58 @@ AI 生成说明：
|
||||
- `money.saved_cent`：按 `max(expected_total - actual_total, 0)` 计算，避免出现负值。
|
||||
- `health.available=false`：表示无历史记录。
|
||||
|
||||
## 16) 激励语（后端统一生成）
|
||||
## 15) 成就主题与当前称号
|
||||
|
||||
`GET /api/v1/smoke/motivation`
|
||||
`GET /api/v1/smoke/achievement/themes`
|
||||
|
||||
说明：
|
||||
- 基于当日数据（如 `today_count`、`resisted_count`、`last_smoke_at`）与 `quit_motivations` 生成一句激励语。
|
||||
返回 onboarding 可选择的称号主题。每个主题包含 `icon/name/key/levels`，前端在“重填问卷”中展示。
|
||||
|
||||
成功响应（示例）：
|
||||
`GET /api/v1/smoke/achievement`
|
||||
|
||||
返回当前用户所选主题下的当前等级、下一等级和进度。记录抽烟模式使用“少抽积分”进阶；戒烟打卡模式仍使用连续记录天数进阶。
|
||||
|
||||
记录模式少抽积分算法：
|
||||
- 统计窗口：从 `onboarding_completed_at` 到今天，最多回看最近 90 天。
|
||||
- 只统计有记录的日期，避免无记录日期被误判为 0 根。
|
||||
- 每日基础分：`max(0, baseline_cigs_per_day - 当日抽烟支数)`。
|
||||
- 当日少抽比例 `>=30%` 额外 `+1` 分。
|
||||
- 当日少抽比例 `>=60%` 额外 `+2` 分。
|
||||
- 当日抽烟支数为 `0` 额外 `+3` 分。
|
||||
- 总积分用于匹配所选主题的等级阈值；`fa_achievement_level.required_days` 在记录模式下作为 `required_score` 使用。
|
||||
|
||||
成功响应示例：
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {
|
||||
"message": "今天的表现很稳，继续保持！记住你的目标：身体健康。",
|
||||
"type": "encourage"
|
||||
"achievement": {
|
||||
"theme_id": 1,
|
||||
"theme_name": "意志骑士",
|
||||
"theme_key": "knight",
|
||||
"theme_icon": "🛡️",
|
||||
"metric_type": "score",
|
||||
"score": 48,
|
||||
"metrics": {
|
||||
"baseline_cigs_per_day": 10,
|
||||
"scored_days": 7,
|
||||
"total_reduced_cigs": 36,
|
||||
"today_reduced_cigs": 4,
|
||||
"today_reduce_percent": 40,
|
||||
"stable_days": 6
|
||||
},
|
||||
"current": {
|
||||
"name": "见习骑士",
|
||||
"icon": "🛡️",
|
||||
"required_score": 30
|
||||
},
|
||||
"next": {
|
||||
"name": "白银骑士",
|
||||
"icon": "⚔️",
|
||||
"required_score": 80
|
||||
},
|
||||
"progress": 0.36
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Binary file not shown.
@@ -3,30 +3,14 @@ import { BASE_URL } from '@/config'
|
||||
|
||||
const BASE_URL_V2 = BASE_URL.replace('/v1', '/v2')
|
||||
|
||||
export function getDashboard(params = {}) {
|
||||
return request.get('/smoke/dashboard', params)
|
||||
}
|
||||
|
||||
export function getHome(params = {}) {
|
||||
return request.get('/smoke/home', params)
|
||||
}
|
||||
|
||||
export function getNextSmokeTime(params = {}) {
|
||||
return request.get('/smoke/next_smoke_time', params)
|
||||
}
|
||||
|
||||
export function getLogs(params = {}) {
|
||||
return request.get('/smoke/logs', params)
|
||||
}
|
||||
|
||||
export function getLatestLogs(limit = 20) {
|
||||
return request.get('/smoke/logs/latest', { limit })
|
||||
}
|
||||
|
||||
export function getLog(id) {
|
||||
return request.get(`/smoke/logs/${id}`)
|
||||
}
|
||||
|
||||
export function createLog(data) {
|
||||
return request.post('/smoke/logs', data)
|
||||
}
|
||||
@@ -39,14 +23,6 @@ export function deleteLog(id) {
|
||||
return request.delete(`/smoke/logs/${id}`)
|
||||
}
|
||||
|
||||
export function createResistedLog(data) {
|
||||
return request.post('/smoke/logs/resisted', data)
|
||||
}
|
||||
|
||||
export function getAiAdvice(date) {
|
||||
return request.get('/smoke/ai/advice', { date })
|
||||
}
|
||||
|
||||
export function unlockAiAdvice(data) {
|
||||
return request.post('/smoke/ai/advice_unlocks', data)
|
||||
}
|
||||
@@ -71,10 +47,6 @@ export function getShareData(shareToken, params = {}) {
|
||||
return request.get(`/smoke/share/${shareToken}`, params)
|
||||
}
|
||||
|
||||
export function revokeShare(shareToken) {
|
||||
return request.post(`/smoke/share/${shareToken}/revoke`)
|
||||
}
|
||||
|
||||
// 戒烟计划 API
|
||||
export function generateQuitPlan() {
|
||||
return request.post('/smoke/quit-plan/generate')
|
||||
|
||||
@@ -11,60 +11,85 @@
|
||||
</view>
|
||||
|
||||
<view class="dialog-body">
|
||||
<view v-if="quickModeActive" class="quick-banner">
|
||||
<view class="quick-banner-chip">
|
||||
<text class="quick-banner-chip-label">默认时间</text>
|
||||
<text class="quick-banner-chip-value">{{ formData.smoke_time_only }}</text>
|
||||
<template v-if="quickModeActive">
|
||||
<view class="quick-banner">
|
||||
<view class="quick-banner-chip">
|
||||
<text class="quick-banner-chip-label">默认时间</text>
|
||||
<text class="quick-banner-chip-value">{{ formData.smoke_time_only }}</text>
|
||||
</view>
|
||||
<view class="quick-banner-chip" v-if="type === 'smoke'">
|
||||
<text class="quick-banner-chip-label">默认数量</text>
|
||||
<text class="quick-banner-chip-value">{{ formData.num }} 支</text>
|
||||
</view>
|
||||
<text class="quick-banner-tip">先选择系统场景；如果选“其他”，再补充自定义原因。</text>
|
||||
</view>
|
||||
<view class="quick-banner-chip" v-if="type === 'smoke'">
|
||||
<text class="quick-banner-chip-label">默认数量</text>
|
||||
<text class="quick-banner-chip-value">{{ formData.num }} 支</text>
|
||||
</view>
|
||||
<text class="quick-banner-tip">先选原因就能快速保存，需要时再展开高级项。</text>
|
||||
</view>
|
||||
|
||||
<view class="section-card">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">{{ reasonSectionTitle }}</text>
|
||||
<text class="section-caption">可多选</text>
|
||||
</view>
|
||||
<view class="reason-chip-grid">
|
||||
<view
|
||||
v-for="item in quickReasonOptions"
|
||||
:key="item.key"
|
||||
class="reason-chip"
|
||||
:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
|
||||
@tap="toggleReason(item.key)"
|
||||
>
|
||||
<text class="reason-chip-text">{{ item.label }}</text>
|
||||
<view v-if="type === 'smoke'" class="section-card level-section-quick">
|
||||
<view class="level-header">
|
||||
<text class="section-title">烟瘾等级</text>
|
||||
<view class="level-badge">Level {{ formData.level }}</view>
|
||||
</view>
|
||||
<slider
|
||||
class="level-slider"
|
||||
:value="formData.level"
|
||||
:min="1"
|
||||
:max="5"
|
||||
:step="1"
|
||||
activeColor="#22C55E"
|
||||
backgroundColor="#E5E7EB"
|
||||
block-color="#22C55E"
|
||||
:block-size="20"
|
||||
@change="onLevelChange"
|
||||
/>
|
||||
<view class="level-scale">
|
||||
<text class="level-scale-text">无感</text>
|
||||
<text class="level-scale-text">强烈</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="remark-section">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">{{ remarkTitle }}</text>
|
||||
<text class="section-caption">{{ remarkCaption }}</text>
|
||||
<view class="section-card scene-section">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">{{ sceneSectionTitle }}</text>
|
||||
<text class="section-caption">系统预设，可多选</text>
|
||||
</view>
|
||||
<view class="reason-chip-grid">
|
||||
<view
|
||||
v-for="item in quickReasonOptions"
|
||||
:key="item.key"
|
||||
class="reason-chip"
|
||||
:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
|
||||
@tap="toggleReason(item.key)"
|
||||
>
|
||||
<text class="reason-chip-text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark-card">
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
v-model="formData.remark"
|
||||
:placeholder="remarkPlaceholder"
|
||||
maxlength="200"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="quickModeActive" class="advanced-toggle" @tap="showAdvanced = !showAdvanced">
|
||||
<view>
|
||||
<text class="advanced-toggle-title">{{ showAdvanced ? '收起高级设置' : '展开高级设置' }}</text>
|
||||
<text class="advanced-toggle-desc">修改时间、数量和强度</text>
|
||||
<view v-if="showCustomReasonInput" class="remark-section">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">其他场景</text>
|
||||
<text class="section-caption">自填</text>
|
||||
</view>
|
||||
<view class="remark-card">
|
||||
<textarea
|
||||
class="form-textarea form-textarea-compact"
|
||||
v-model="formData.custom_reason"
|
||||
:placeholder="customReasonPlaceholder"
|
||||
maxlength="120"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text class="advanced-toggle-arrow">{{ showAdvanced ? '⌃' : '⌄' }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="showAdvanced || !quickModeActive" class="advanced-fields">
|
||||
<view class="advanced-toggle" @tap="showAdvanced = !showAdvanced">
|
||||
<view>
|
||||
<text class="advanced-toggle-title">{{ showAdvanced ? '收起高级设置' : '展开高级设置' }}</text>
|
||||
<text class="advanced-toggle-desc">修改时间和数量</text>
|
||||
</view>
|
||||
<text class="advanced-toggle-arrow">{{ showAdvanced ? '⌃' : '⌄' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-if="showAdvanced || !quickModeActive" class="advanced-fields detail-top-fields">
|
||||
<view class="form-row">
|
||||
<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
|
||||
<view class="input-card">
|
||||
@@ -121,8 +146,57 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="!quickModeActive">
|
||||
<view class="section-card scene-section">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">{{ sceneSectionTitle }}</text>
|
||||
<text class="section-caption">系统预设，可多选</text>
|
||||
</view>
|
||||
<view class="reason-chip-grid">
|
||||
<view
|
||||
v-for="item in quickReasonOptions"
|
||||
:key="item.key"
|
||||
class="reason-chip"
|
||||
:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
|
||||
@tap="toggleReason(item.key)"
|
||||
>
|
||||
<text class="reason-chip-text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showCustomReasonInput" class="remark-section">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">其他场景</text>
|
||||
<text class="section-caption">自填</text>
|
||||
</view>
|
||||
<view class="remark-card">
|
||||
<textarea
|
||||
class="form-textarea form-textarea-compact"
|
||||
v-model="formData.custom_reason"
|
||||
:placeholder="customReasonPlaceholder"
|
||||
maxlength="120"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="remark-section remark-section-bottom">
|
||||
<view class="section-heading">
|
||||
<text class="section-title">原因</text>
|
||||
<text class="section-caption">可选，放在最后补充</text>
|
||||
</view>
|
||||
<view class="remark-card">
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
v-model="formData.remark"
|
||||
:placeholder="remarkPlaceholder"
|
||||
maxlength="200"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="dialog-footer">
|
||||
<view class="dialog-btn-primary" @tap="submit">
|
||||
<view class="btn-icon"></view>
|
||||
@@ -165,6 +239,7 @@ export default {
|
||||
smoke_time_only: '',
|
||||
smoke_at: '',
|
||||
remark: '',
|
||||
custom_reason: '',
|
||||
reason_tags: [],
|
||||
level: 2,
|
||||
num: 1
|
||||
@@ -189,9 +264,20 @@ export default {
|
||||
quickReasonOptions() {
|
||||
return getReasonOptions(this.type)
|
||||
},
|
||||
sceneSectionTitle() {
|
||||
return this.type === 'smoke' ? '选择抽烟场景' : '选择忍住场景'
|
||||
},
|
||||
reasonSectionTitle() {
|
||||
return this.type === 'smoke' ? '这次为什么会抽？' : '这次是怎么扛住的？'
|
||||
},
|
||||
showCustomReasonInput() {
|
||||
return this.formData.reason_tags.includes('other')
|
||||
},
|
||||
customReasonPlaceholder() {
|
||||
return this.type === 'smoke'
|
||||
? '写下系统场景里没有覆盖的触发点...'
|
||||
: '写下这次具体是怎么撑过去的...'
|
||||
},
|
||||
remarkTitle() {
|
||||
return this.formData.reason_tags.includes('other') ? '补充说明' : '补充备注'
|
||||
},
|
||||
@@ -230,6 +316,7 @@ export default {
|
||||
smoke_time_only: this.initialData.smoke_time_only || '',
|
||||
smoke_at: this.initialData.smoke_at || '',
|
||||
remark: this.initialData.remark || '',
|
||||
custom_reason: '',
|
||||
reason_tags: normalizeReasonTags(this.initialData.reason_tags),
|
||||
level: this.initialData.level ?? 2,
|
||||
num: this.resolveInitialNum(this.initialData)
|
||||
@@ -250,6 +337,7 @@ export default {
|
||||
smoke_time_only: timeStr,
|
||||
smoke_at: datetimeStr,
|
||||
remark: '',
|
||||
custom_reason: '',
|
||||
reason_tags: [],
|
||||
level: 2,
|
||||
num: this.type === 'smoke' ? 1 : 0
|
||||
@@ -327,14 +415,16 @@ export default {
|
||||
},
|
||||
buildRemark() {
|
||||
const customRemark = (this.formData.remark || '').trim()
|
||||
const customReason = (this.formData.custom_reason || '').trim()
|
||||
const reasonLabels = getReasonLabels(this.formData.reason_tags, this.type).filter(label => label !== '其他')
|
||||
if (!reasonLabels.length) {
|
||||
return customRemark
|
||||
const parts = [...reasonLabels]
|
||||
if (customReason) {
|
||||
parts.push(customReason)
|
||||
}
|
||||
if (!customRemark) {
|
||||
return reasonLabels.join('、')
|
||||
if (customRemark) {
|
||||
parts.push(customRemark)
|
||||
}
|
||||
return `${reasonLabels.join('、')}；${customRemark}`
|
||||
return parts.join('；')
|
||||
},
|
||||
submit() {
|
||||
if (!this.isTimeValid()) {
|
||||
@@ -523,6 +613,11 @@ export default {
|
||||
box-shadow: 0 10rpx 18rpx rgba(26, 163, 122, 0.12);
|
||||
}
|
||||
|
||||
.scene-section {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 249, 255, 0.72));
|
||||
}
|
||||
|
||||
.reason-chip-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
@@ -553,6 +648,14 @@ export default {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-textarea-compact {
|
||||
min-height: 112rpx;
|
||||
}
|
||||
|
||||
.remark-section-bottom {
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.advanced-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
const ENV = {
|
||||
development: {
|
||||
BASE_URL: 'http://localhost:8080/api/v1',
|
||||
BASE_URL: 'http://192.168.31.73:9003/api/v1',
|
||||
MINI_PROGRAM_ID: 2
|
||||
},
|
||||
production: {
|
||||
|
||||
+3
-3
@@ -7,13 +7,13 @@
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/mode-select/index",
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"path": "pages/mode-select/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -51,7 +51,7 @@
|
||||
{
|
||||
"path": "pages/share/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "戒烟分享"
|
||||
"navigationBarTitleText": "成就海报"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
+2086
-1835
File diff suppressed because it is too large
Load Diff
+241
-95
@@ -1,19 +1,43 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="filters-sticky">
|
||||
<view class="filters">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab"
|
||||
:class="{ 'tab-active': currentTab === tab.value }"
|
||||
@tap="currentTab = tab.value"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="fixed-summary">
|
||||
<view class="filters-sticky">
|
||||
<view class="filters">
|
||||
<view class="date-filters">
|
||||
<view
|
||||
v-for="option in dateFilters"
|
||||
:key="option.value"
|
||||
class="date-filter"
|
||||
:class="{ 'date-filter-active': currentDateFilter === option.value }"
|
||||
@tap="currentDateFilter = option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="overview">
|
||||
<view class="overview-item overview-primary">
|
||||
<text class="overview-label">今日已抽</text>
|
||||
<text class="overview-value">{{ todaySmokeCount }}</text>
|
||||
<text class="overview-unit">根</text>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<text class="overview-label">当前列表</text>
|
||||
<text class="overview-value">{{ filteredLogs.length }}</text>
|
||||
<text class="overview-unit">条</text>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<text class="overview-label">最近记录</text>
|
||||
<text class="overview-clock">{{ latestDisplayTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-head">
|
||||
<text class="section-label">时间记录</text>
|
||||
<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
@@ -24,8 +48,6 @@
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="onLoadMore"
|
||||
>
|
||||
<text class="section-label">时间记录</text>
|
||||
|
||||
<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-item">
|
||||
<view class="skeleton-dot"></view>
|
||||
@@ -56,12 +78,12 @@
|
||||
<view class="log-time-tag">
|
||||
<text class="log-time">{{ log.displayTime || '--:--' }}</text>
|
||||
<text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
|
||||
{{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
|
||||
{{ log.type === 'resisted' ? '旧记录' : '已抽烟' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="log-right">
|
||||
<text v-if="log.type === 'smoke'" class="count-pill">{{ log.num !== undefined && log.num !== null ? log.num : 0 }}根</text>
|
||||
<text v-else class="thumb-pill">👍</text>
|
||||
<text v-else class="thumb-pill">0根</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -103,7 +125,7 @@
|
||||
<text class="empty-icon">记</text>
|
||||
</view>
|
||||
<text class="empty-text">今天还没有记录</text>
|
||||
<text class="empty-hint">点击右下角悬浮按钮，快速记录抽烟或忍住的时刻，时间线会从这里开始。</text>
|
||||
<text class="empty-hint">完成一次抽烟记录后，时间线会从这里开始生成。</text>
|
||||
<view class="empty-action" @tap="addLog">立即记录</view>
|
||||
</view>
|
||||
|
||||
@@ -141,13 +163,14 @@ import { useLogin } from '@/hooks/useLogin'
|
||||
const { waitForLogin } = useLogin()
|
||||
const logsStore = useLogsStore()
|
||||
|
||||
const tabs = [
|
||||
const dateFilters = [
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '已抽烟', value: 'smoke' },
|
||||
{ label: '已忍住', value: 'resisted' }
|
||||
{ label: '今天', value: 'today' },
|
||||
{ label: '近7天', value: 'week' },
|
||||
{ label: '本月', value: 'month' }
|
||||
]
|
||||
|
||||
const currentTab = ref('all')
|
||||
const currentDateFilter = ref('all')
|
||||
const showEditDialog = ref(false)
|
||||
const editType = ref('smoke')
|
||||
const editData = ref(null)
|
||||
@@ -155,11 +178,12 @@ const editingLogId = ref(null)
|
||||
|
||||
// 筛选后的记录
|
||||
const filteredLogs = computed(() => {
|
||||
const logs = logsStore.formattedLogs
|
||||
if (currentTab.value === 'all') {
|
||||
return logs
|
||||
}
|
||||
return logs.filter(log => log.type === currentTab.value)
|
||||
const logs = logsStore.formattedLogs.filter(log => log.type === 'smoke')
|
||||
return logs.filter(log => isInDateFilter(log.displayDate, currentDateFilter.value))
|
||||
})
|
||||
|
||||
const currentDateFilterLabel = computed(() => {
|
||||
return dateFilters.find(item => item.value === currentDateFilter.value)?.label || '全部'
|
||||
})
|
||||
|
||||
// 按日期分组
|
||||
@@ -174,6 +198,20 @@ const groupedLogs = computed(() => {
|
||||
}, {})
|
||||
})
|
||||
|
||||
const todaySmokeCount = computed(() => {
|
||||
const today = localDateStr(new Date())
|
||||
return logsStore.formattedLogs.reduce((total, log) => {
|
||||
if (log.displayDate !== today || log.type !== 'smoke') return total
|
||||
return total + (Number(log.num) || 0)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const latestDisplayTime = computed(() => {
|
||||
const latest = logsStore.formattedLogs[0]
|
||||
if (!latest) return '--:--'
|
||||
return latest.displayTime || '--:--'
|
||||
})
|
||||
|
||||
// 本地日期 YYYY-MM-DD（避免 toISOString 用 UTC 导致日期差一天）
|
||||
function localDateStr(d) {
|
||||
const y = d.getFullYear()
|
||||
@@ -182,6 +220,25 @@ function localDateStr(d) {
|
||||
return `${y}-${m}-${day}`
|
||||
}
|
||||
|
||||
function isInDateFilter(dateStr, filter) {
|
||||
if (!dateStr || filter === 'all') return true
|
||||
const today = new Date()
|
||||
const target = new Date(`${dateStr}T00:00:00`)
|
||||
if (Number.isNaN(target.getTime())) return false
|
||||
const todayText = localDateStr(today)
|
||||
if (filter === 'today') return dateStr === todayText
|
||||
if (filter === 'week') {
|
||||
const start = new Date(today)
|
||||
start.setDate(today.getDate() - 6)
|
||||
start.setHours(0, 0, 0, 0)
|
||||
return target >= start && dateStr <= todayText
|
||||
}
|
||||
if (filter === 'month') {
|
||||
return target.getFullYear() === today.getFullYear() && target.getMonth() === today.getMonth()
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 格式化分组标题
|
||||
function formatGroupTitle(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
@@ -205,7 +262,7 @@ function formatGroupTitle(dateStr) {
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await logsStore.fetchLogs(true, currentTab.value)
|
||||
await logsStore.fetchLogs(true, 'smoke')
|
||||
}
|
||||
|
||||
// 上拉加载
|
||||
@@ -250,7 +307,7 @@ async function handleUpdate(data) {
|
||||
function handleDelete(log) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: `确定要删除这条${log.type === 'resisted' ? '忍住' : '抽烟'}记录吗？`,
|
||||
content: `确定要删除这条${log.type === 'resisted' ? '旧' : '抽烟'}记录吗？`,
|
||||
confirmColor: '#EF4444',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
@@ -264,7 +321,7 @@ function handleDelete(log) {
|
||||
async function initPage() {
|
||||
try {
|
||||
await waitForLogin()
|
||||
await logsStore.fetchLogs(true, currentTab.value)
|
||||
await logsStore.fetchLogs(true, 'smoke')
|
||||
} catch (e) {
|
||||
console.error('initPage error:', e)
|
||||
}
|
||||
@@ -294,10 +351,6 @@ function levelLabel(level) {
|
||||
return '极强'
|
||||
}
|
||||
|
||||
watch(currentTab, async (value) => {
|
||||
await logsStore.fetchLogs(true, value)
|
||||
})
|
||||
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: '戒烟助手 - 我的戒烟记录',
|
||||
@@ -308,66 +361,151 @@ onShareAppMessage(() => {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F5F7F6;
|
||||
background:
|
||||
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-summary {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
background:
|
||||
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 100%);
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.filters-sticky {
|
||||
position: relative;
|
||||
height: 120rpx;
|
||||
height: 92rpx;
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.filters {
|
||||
position: fixed;
|
||||
left: 32rpx;
|
||||
right: 32rpx;
|
||||
z-index: 50;
|
||||
margin: 12rpx 0 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 10rpx 0 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
.date-filters {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
gap: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1rpx solid rgba(226, 232, 240, 0.82);
|
||||
border-radius: 22rpx;
|
||||
padding: 6rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.06);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.tab {
|
||||
.date-filter {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #999999;
|
||||
padding: 14rpx 0;
|
||||
border-radius: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #10B981;
|
||||
.date-filter-active {
|
||||
background: linear-gradient(135deg, #10B981, #06B6D4);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.16);
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 1fr 1fr;
|
||||
gap: 14rpx;
|
||||
margin-bottom: 18rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.overview-item {
|
||||
min-width: 0;
|
||||
padding: 20rpx 18rpx;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.05);
|
||||
}
|
||||
|
||||
.overview-primary {
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 36%),
|
||||
rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.3;
|
||||
font-weight: 800;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.overview-value {
|
||||
display: inline-block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.overview-unit {
|
||||
margin-left: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.overview-clock {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding-bottom: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin: 0 0 18rpx 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #666666;
|
||||
font-size: 29rpx;
|
||||
font-weight: 900;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
font-size: 21rpx;
|
||||
font-weight: 800;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
flex: none;
|
||||
height: calc(100vh - 280rpx);
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-top: 0;
|
||||
z-index: 1;
|
||||
padding-top: 8rpx;
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -428,27 +566,31 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.log-group {
|
||||
margin-bottom: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 14rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
font-weight: 900;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
background-color: #F0F0F0;
|
||||
padding: 6rpx 16rpx;
|
||||
font-size: 21rpx;
|
||||
font-weight: 800;
|
||||
color: #64748B;
|
||||
background-color: rgba(255, 255, 255, 0.72);
|
||||
border: 1rpx solid rgba(226, 232, 240, 0.72);
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
@@ -460,10 +602,11 @@ onShareAppMessage(() => {
|
||||
|
||||
.log-card {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 24rpx 20rpx 24rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.86);
|
||||
border-radius: 28rpx;
|
||||
padding: 24rpx 24rpx 20rpx;
|
||||
box-shadow: 0 14rpx 34rpx rgba(30, 41, 59, 0.06);
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
overflow: hidden;
|
||||
@@ -482,18 +625,18 @@ onShareAppMessage(() => {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
background-color: #10B981;
|
||||
width: 7rpx;
|
||||
background: linear-gradient(180deg, #67E8F9, #10B981);
|
||||
}
|
||||
|
||||
.log-card-smoke .log-bar {
|
||||
background-color: #F59E0B;
|
||||
background: linear-gradient(180deg, #FBBF24, #D97706);
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -503,12 +646,12 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.icon-resisted {
|
||||
background-color: #E8F5F0;
|
||||
color: #10B981;
|
||||
background-color: rgba(232, 245, 240, 0.92);
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.icon-smoke {
|
||||
background-color: #FEF3C7;
|
||||
background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(255, 251, 235, 0.9));
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
@@ -532,16 +675,16 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
font-size: 31rpx;
|
||||
font-weight: 900;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
padding: 7rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-weight: 600;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tag-smoke {
|
||||
@@ -564,10 +707,10 @@ onShareAppMessage(() => {
|
||||
.count-pill {
|
||||
font-size: 22rpx;
|
||||
color: #D97706;
|
||||
background-color: #FEF3C7;
|
||||
background-color: rgba(254, 243, 199, 0.92);
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-weight: 600;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.thumb-pill {
|
||||
@@ -580,9 +723,9 @@ onShareAppMessage(() => {
|
||||
|
||||
.log-desc {
|
||||
font-size: 25rpx;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10rpx;
|
||||
color: #475569;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.reason-tag-row {
|
||||
@@ -612,7 +755,7 @@ onShareAppMessage(() => {
|
||||
|
||||
.level-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.log-interval {
|
||||
@@ -627,12 +770,13 @@ onShareAppMessage(() => {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-weight: 900;
|
||||
padding: 9rpx 17rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
@@ -678,7 +822,9 @@ onShareAppMessage(() => {
|
||||
justify-content: center;
|
||||
padding: 132rpx 32rpx 116rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 248, 0.94) 100%);
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(103, 232, 249, 0.18), transparent 38%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 250, 248, 0.9) 100%);
|
||||
box-shadow: 0 16rpx 38rpx rgba(15, 23, 42, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -753,7 +899,7 @@ onShareAppMessage(() => {
|
||||
min-width: 170rpx;
|
||||
height: 96rpx;
|
||||
padding: 0 24rpx;
|
||||
background: linear-gradient(180deg, #16C38B 0%, #10B981 100%);
|
||||
background: linear-gradient(135deg, #10B981, #06B6D4);
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+157
-33
@@ -115,8 +115,13 @@
|
||||
|
||||
<!-- 成就风格 -->
|
||||
<view v-if="achievementThemes.length > 0" class="form-section">
|
||||
<text class="section-label">成就称号风格</text>
|
||||
<text class="section-hint">打卡越久，称号越高</text>
|
||||
<view class="theme-section-head">
|
||||
<view>
|
||||
<text class="section-label">成就称号风格</text>
|
||||
<text class="section-hint">选择一套更能激励你的成长称号</text>
|
||||
</view>
|
||||
<text class="theme-section-badge">可更换</text>
|
||||
</view>
|
||||
<view class="theme-list">
|
||||
<view
|
||||
v-for="theme in achievementThemes"
|
||||
@@ -125,16 +130,25 @@
|
||||
:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
|
||||
@tap="formData.achievement_theme_id = theme.id"
|
||||
>
|
||||
<view class="theme-glow"></view>
|
||||
<view class="theme-header">
|
||||
<text class="theme-icon">{{ theme.icon }}</text>
|
||||
<text class="theme-name">{{ theme.name }}</text>
|
||||
<view class="theme-icon-wrap">
|
||||
<text class="theme-icon">{{ theme.icon }}</text>
|
||||
</view>
|
||||
<view class="theme-title-wrap">
|
||||
<text class="theme-name">{{ theme.name }}</text>
|
||||
<text class="theme-desc">打卡进度会逐步解锁称号</text>
|
||||
</view>
|
||||
<view class="theme-check">
|
||||
<text v-if="formData.achievement_theme_id === theme.id">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="theme-levels">
|
||||
<text
|
||||
v-for="(level, idx) in theme.levels"
|
||||
:key="level.id"
|
||||
class="theme-level"
|
||||
>{{ level.name }}<text v-if="idx < theme.levels.length - 1" class="theme-arrow"> → </text></text>
|
||||
>{{ level.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -263,10 +277,6 @@ async function handleSubmit() {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
await profileStore.saveProfile(formData.value)
|
||||
uni.hideLoading()
|
||||
if (!formData.value.mode) {
|
||||
uni.redirectTo({ url: '/pages/mode-select/index' })
|
||||
return
|
||||
}
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
@@ -539,66 +549,180 @@ onShareAppMessage(() => {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.theme-section-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.theme-section-head .section-hint {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.theme-section-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(110, 231, 183, 0.16);
|
||||
border: 1rpx solid rgba(16, 185, 129, 0.16);
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.theme-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #F9FBFA;
|
||||
border: 2rpx solid #F0F0F0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
|
||||
border: 2rpx solid rgba(226, 232, 240, 0.9);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.theme-card-active {
|
||||
background: #E8F5F0;
|
||||
border-color: #10B981;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(103, 232, 249, 0.28), transparent 34%),
|
||||
linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 249, 255, 0.94));
|
||||
border-color: rgba(16, 185, 129, 0.72);
|
||||
box-shadow: 0 18rpx 42rpx rgba(16, 185, 129, 0.13);
|
||||
}
|
||||
|
||||
.theme-glow {
|
||||
position: absolute;
|
||||
top: -70rpx;
|
||||
right: -70rpx;
|
||||
width: 190rpx;
|
||||
height: 190rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(110, 231, 183, 0.12);
|
||||
}
|
||||
|
||||
.theme-card-active .theme-glow {
|
||||
background: rgba(103, 232, 249, 0.28);
|
||||
}
|
||||
|
||||
.theme-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
gap: 18rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.theme-icon-wrap {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(241, 245, 249, 0.92);
|
||||
border: 1rpx solid rgba(226, 232, 240, 0.9);
|
||||
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-icon-wrap {
|
||||
background: linear-gradient(135deg, #6EE7B7, #67E8F9);
|
||||
border-color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 12rpx 26rpx rgba(20, 184, 166, 0.18);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
font-size: 32rpx;
|
||||
font-size: 36rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.theme-title-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
font-size: 29rpx;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.theme-desc {
|
||||
font-size: 21rpx;
|
||||
line-height: 1.4;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-name {
|
||||
color: #10B981;
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.theme-check {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid rgba(148, 163, 184, 0.34);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
font-weight: 900;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-check {
|
||||
border-color: transparent;
|
||||
background: linear-gradient(135deg, #10B981, #06B6D4);
|
||||
box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-levels {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.theme-level {
|
||||
font-size: 22rpx;
|
||||
max-width: 100%;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(241, 245, 249, 0.95);
|
||||
border: 1rpx solid rgba(226, 232, 240, 0.9);
|
||||
font-size: 21rpx;
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-level {
|
||||
color: #10B981;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: rgba(16, 185, 129, 0.15);
|
||||
color: #0F766E;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-level:first-child {
|
||||
background: rgba(251, 191, 36, 0.18);
|
||||
border-color: rgba(251, 191, 36, 0.22);
|
||||
color: #B45309;
|
||||
}
|
||||
|
||||
.theme-arrow {
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-arrow {
|
||||
color: #6EE7B7;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
|
||||
+26
-89
@@ -30,7 +30,7 @@
|
||||
<text class="user-desc">点击头像或昵称可修改</text>
|
||||
<view class="user-meta">
|
||||
<text class="user-pill">{{ modeText }}</text>
|
||||
<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
|
||||
<text class="user-pill user-pill-muted">{{ achievementTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -41,19 +41,14 @@
|
||||
<view class="menu-list card">
|
||||
<view class="menu-item">
|
||||
<view class="menu-icon menu-icon-accent">
|
||||
<text class="menu-glyph">享</text>
|
||||
<text class="menu-glyph">奖</text>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-label">分享戒烟记录</text>
|
||||
<text class="menu-desc">{{ shareDesc }}</text>
|
||||
<view class="menu-actions">
|
||||
<text class="menu-action" @tap.stop="previewSharePage">预览分享页</text>
|
||||
<text class="menu-action-sep">·</text>
|
||||
<text class="menu-action" @tap.stop="handleRefreshShare">刷新</text>
|
||||
</view>
|
||||
<text class="menu-label">生成成就海报</text>
|
||||
<text class="menu-desc">{{ posterDesc }}</text>
|
||||
</view>
|
||||
<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
|
||||
{{ shareLoading ? '生成中' : '去分享' }}
|
||||
<button class="share-btn" @tap.stop="goAchievementPoster">
|
||||
生成
|
||||
</button>
|
||||
</view>
|
||||
|
||||
@@ -138,7 +133,7 @@ import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import { createShare } from '@/api/smoke'
|
||||
import { getAchievement } from '@/api/smoke'
|
||||
import { updateUserProfile, uploadFile } from '@/api/auth'
|
||||
import { getLatestNSTIResult } from '@/utils/nsti'
|
||||
|
||||
@@ -146,11 +141,9 @@ const profileStore = useProfileStore()
|
||||
const userStore = useUserStore()
|
||||
const { waitForLogin } = useLogin()
|
||||
|
||||
const shareToken = ref('')
|
||||
const shareExpireAt = ref('')
|
||||
const shareLoading = ref(false)
|
||||
const navBarHeight = ref(0)
|
||||
const latestNSTIResult = ref(null)
|
||||
const achievementData = ref(null)
|
||||
|
||||
const userName = computed(() => userStore.user?.nickname || '戒烟用户')
|
||||
const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
|
||||
@@ -163,18 +156,13 @@ const nstiDesc = computed(() => latestNSTIResult.value
|
||||
? `你上次测出：${latestNSTIResult.value.name}`
|
||||
: '10 道题，测测你是哪一种抽象戒烟人格')
|
||||
|
||||
const shareDesc = computed(() => {
|
||||
if (!shareToken.value) {
|
||||
return shareLoading.value ? '正在生成分享信息...' : '先生成分享令牌后即可分享给朋友'
|
||||
}
|
||||
return `有效期至 ${formatExpire(shareExpireAt.value)}，仅查看权限`
|
||||
})
|
||||
|
||||
const sharePath = computed(() => {
|
||||
if (!shareToken.value) {
|
||||
return 'pages/index/index'
|
||||
}
|
||||
return `pages/share/index?share_token=${shareToken.value}`
|
||||
const currentAchievement = computed(() => achievementData.value?.current || null)
|
||||
const achievementTitle = computed(() => currentAchievement.value?.name || '戒烟新星')
|
||||
const achievementTheme = computed(() => achievementData.value?.theme_name || '少抽成就')
|
||||
const achievementScore = computed(() => Number(achievementData.value?.score) || 0)
|
||||
const posterDesc = computed(() => {
|
||||
if (!achievementData.value) return '生成你的等级称号、少抽进度和节省成果'
|
||||
return `${achievementTheme.value} · ${achievementTitle.value} · 积分 ${achievementScore.value}`
|
||||
})
|
||||
|
||||
function setupNavBar() {
|
||||
@@ -188,52 +176,15 @@ function setupNavBar() {
|
||||
}
|
||||
}
|
||||
|
||||
function formatExpire(value) {
|
||||
if (!value) return '--'
|
||||
const d = new Date(value)
|
||||
if (Number.isNaN(d.getTime())) return value
|
||||
const y = d.getFullYear()
|
||||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hh = String(d.getHours()).padStart(2, '0')
|
||||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${y}-${m}-${day} ${hh}:${mm}`
|
||||
}
|
||||
|
||||
async function prepareShareToken(showToast = false) {
|
||||
if (shareLoading.value) return
|
||||
shareLoading.value = true
|
||||
async function fetchPosterData() {
|
||||
try {
|
||||
const res = await createShare({ days: 7 })
|
||||
shareToken.value = res.data?.share_token || ''
|
||||
shareExpireAt.value = res.data?.expire_at || ''
|
||||
if (showToast) {
|
||||
uni.showToast({ title: '分享链接已刷新', icon: 'success' })
|
||||
}
|
||||
const achievementRes = await getAchievement()
|
||||
achievementData.value = achievementRes.data?.achievement || null
|
||||
} catch (e) {
|
||||
console.error('prepareShareToken error:', e)
|
||||
if (showToast) {
|
||||
uni.showToast({ title: '生成分享失败', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
shareLoading.value = false
|
||||
console.error('fetchPosterData error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefreshShare() {
|
||||
prepareShareToken(true)
|
||||
}
|
||||
|
||||
function previewSharePage() {
|
||||
if (!shareToken.value) {
|
||||
uni.showToast({ title: '分享令牌尚未生成', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/share/index?share_token=${shareToken.value}`
|
||||
})
|
||||
}
|
||||
|
||||
async function onChooseAvatar(e) {
|
||||
const avatarUrl = e.detail.avatarUrl
|
||||
if (!avatarUrl) return
|
||||
@@ -303,6 +254,10 @@ function goSupervisor() {
|
||||
uni.navigateTo({ url: '/pages/supervisor/index' })
|
||||
}
|
||||
|
||||
function goAchievementPoster() {
|
||||
uni.navigateTo({ url: '/pages/share/index' })
|
||||
}
|
||||
|
||||
function clearCache() {
|
||||
uni.showModal({
|
||||
title: '清除缓存',
|
||||
@@ -331,8 +286,8 @@ function copyInfo() {
|
||||
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: `${userName.value}的戒烟记录（仅查看）`,
|
||||
path: sharePath.value
|
||||
title: `${userName.value}正在解锁「${achievementTitle.value}」`,
|
||||
path: 'pages/index/index'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -343,7 +298,7 @@ onMounted(() => {
|
||||
onShow(async () => {
|
||||
await waitForLogin()
|
||||
await profileStore.fetchProfile()
|
||||
await prepareShareToken(false)
|
||||
await fetchPosterData()
|
||||
latestNSTIResult.value = getLatestNSTIResult()
|
||||
})
|
||||
</script>
|
||||
@@ -551,24 +506,6 @@ onShow(async () => {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.menu-actions {
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.menu-action {
|
||||
color: #10B981;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-action-sep {
|
||||
color: #D4D4D4;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
margin: 0;
|
||||
padding: 12rpx 32rpx;
|
||||
|
||||
+571
-502
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page-head">
|
||||
<view>
|
||||
<text class="page-title">日历详情</text>
|
||||
<text class="page-subtitle">按天查看吸烟数量和记录内容</text>
|
||||
</view>
|
||||
<view class="today-pill" @tap="goToday">今天</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="month-bar">
|
||||
@@ -20,17 +27,17 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="summary-chip summary-chip-soft">
|
||||
<text class="summary-chip-label">本月忍住</text>
|
||||
<text class="summary-chip-label">日均支数</text>
|
||||
<view class="summary-chip-value-row">
|
||||
<text class="summary-chip-value">{{ monthResistedTotal }}</text>
|
||||
<text class="summary-chip-unit">次</text>
|
||||
<text class="summary-chip-value">{{ averageDailySmoke }}</text>
|
||||
<text class="summary-chip-unit">支</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="summary-chip summary-chip-soft">
|
||||
<text class="summary-chip-label">记录天数</text>
|
||||
<text class="summary-chip-label">最高单日</text>
|
||||
<view class="summary-chip-value-row">
|
||||
<text class="summary-chip-value">{{ activeDayCount }}</text>
|
||||
<text class="summary-chip-unit">天</text>
|
||||
<text class="summary-chip-value">{{ peakDaySmoke }}</text>
|
||||
<text class="summary-chip-unit">支</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -41,8 +48,8 @@
|
||||
<text class="legend-text">已抽</text>
|
||||
</view>
|
||||
<view class="legend-item">
|
||||
<view class="legend-dot legend-dot-resisted"></view>
|
||||
<text class="legend-text">忍住</text>
|
||||
<view class="legend-dot legend-dot-selected"></view>
|
||||
<text class="legend-text">选中日期</text>
|
||||
</view>
|
||||
<text class="legend-tip">点击灰色日期可切换到对应月份</text>
|
||||
</view>
|
||||
@@ -76,6 +83,36 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-card">
|
||||
<view class="detail-head">
|
||||
<view>
|
||||
<text class="detail-title">{{ selectedDateLabel }}</text>
|
||||
<text class="detail-subtitle">{{ selectedDaySummary }}</text>
|
||||
</view>
|
||||
<view class="detail-total">
|
||||
<text class="detail-total-value">{{ selectedSmokeCount }}</text>
|
||||
<text class="detail-total-unit">支</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="selectedDayLogs.length > 0" class="log-list">
|
||||
<view v-for="item in selectedDayLogs" :key="item.id || item.smoke_at || item.createtime" class="log-item">
|
||||
<view class="log-time">{{ formatLogTime(item) }}</view>
|
||||
<view class="log-main">
|
||||
<view class="log-line">
|
||||
<text class="log-count">{{ Number(item.num) || 0 }} 支</text>
|
||||
<text v-if="item.scene || item.reason" class="log-tag">{{ item.scene || item.reason }}</text>
|
||||
</view>
|
||||
<text v-if="item.remark" class="log-remark">{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-detail">
|
||||
<text class="empty-title">这天还没有吸烟记录</text>
|
||||
<text class="empty-text">保持记录后，日历会更准确地显示少抽趋势。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-safe"></view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -118,7 +155,7 @@ const calendarDays = computed(() => {
|
||||
|
||||
for (let date = new Date(gridStart); date <= gridEnd; date = addDays(date, 1)) {
|
||||
const dateKey = formatDate(date)
|
||||
const summary = summaryMap.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
|
||||
const summary = summaryMap.get(dateKey) || { smokeCount: 0 }
|
||||
result.push({
|
||||
key: dateKey,
|
||||
date: dateKey,
|
||||
@@ -126,8 +163,7 @@ const calendarDays = computed(() => {
|
||||
isCurrentMonth: date.getMonth() === monthStart.getMonth(),
|
||||
isToday: dateKey === todayText,
|
||||
isFuture: dateKey > todayText,
|
||||
smokeCount: summary.smokeCount,
|
||||
resistedCount: summary.resistedCount
|
||||
smokeCount: summary.smokeCount
|
||||
})
|
||||
}
|
||||
|
||||
@@ -135,19 +171,45 @@ const calendarDays = computed(() => {
|
||||
})
|
||||
|
||||
const monthSmokeTotal = computed(() => {
|
||||
return monthLogs.value.reduce((total, item) => {
|
||||
return normalizeLogType(item) === 'resisted' ? total : total + (Number(item.num) || 0)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const monthResistedTotal = computed(() => {
|
||||
return monthLogs.value.reduce((total, item) => {
|
||||
return normalizeLogType(item) === 'resisted' ? total + 1 : total
|
||||
}, 0)
|
||||
return monthLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
|
||||
})
|
||||
|
||||
const activeDayCount = computed(() => monthSummaryMap.value.size)
|
||||
|
||||
const averageDailySmoke = computed(() => {
|
||||
if (activeDayCount.value <= 0) return '0.0'
|
||||
return (monthSmokeTotal.value / activeDayCount.value).toFixed(1)
|
||||
})
|
||||
|
||||
const peakDaySmoke = computed(() => {
|
||||
let max = 0
|
||||
monthSummaryMap.value.forEach(item => {
|
||||
if (item.smokeCount > max) max = item.smokeCount
|
||||
})
|
||||
return max
|
||||
})
|
||||
|
||||
const selectedDayLogs = computed(() => {
|
||||
return monthLogs.value
|
||||
.filter(item => resolveLogDate(item) === selectedDate.value)
|
||||
.sort((a, b) => getLogTimestamp(b) - getLogTimestamp(a))
|
||||
})
|
||||
|
||||
const selectedSmokeCount = computed(() => {
|
||||
return selectedDayLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
|
||||
})
|
||||
|
||||
const selectedDateLabel = computed(() => {
|
||||
const date = parseDate(selectedDate.value)
|
||||
if (!date) return selectedDate.value
|
||||
return `${date.getMonth() + 1}月${date.getDate()}日 周${weekdayNames[date.getDay()]}`
|
||||
})
|
||||
|
||||
const selectedDaySummary = computed(() => {
|
||||
if (selectedDayLogs.value.length === 0) return '无记录'
|
||||
return `${selectedDayLogs.value.length} 条记录 · 本月已记录 ${activeDayCount.value} 天`
|
||||
})
|
||||
|
||||
async function fetchMonthLogs() {
|
||||
const start = formatDate(startOfMonth(currentMonth.value))
|
||||
const end = formatDate(endOfMonth(currentMonth.value))
|
||||
@@ -156,7 +218,7 @@ async function fetchMonthLogs() {
|
||||
const res = await api.getLogs({
|
||||
page: 1,
|
||||
page_size: 200,
|
||||
type: 'all',
|
||||
type: 'smoke',
|
||||
start,
|
||||
end
|
||||
})
|
||||
@@ -185,6 +247,10 @@ async function changeMonth(offset) {
|
||||
await fetchMonthLogs()
|
||||
}
|
||||
|
||||
async function goToday() {
|
||||
await initPage(todayText)
|
||||
}
|
||||
|
||||
async function selectDay(item) {
|
||||
if (item.isFuture) return
|
||||
if (!item.isCurrentMonth) {
|
||||
@@ -205,12 +271,8 @@ function buildDailySummaryMap(logs) {
|
||||
logs.forEach(log => {
|
||||
const dateKey = resolveLogDate(log)
|
||||
if (!dateKey) return
|
||||
const current = map.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
|
||||
if (normalizeLogType(log) === 'resisted') {
|
||||
current.resistedCount += 1
|
||||
} else {
|
||||
current.smokeCount += Number(log.num) || 0
|
||||
}
|
||||
const current = map.get(dateKey) || { smokeCount: 0 }
|
||||
current.smokeCount += Number(log.num) || 0
|
||||
map.set(dateKey, current)
|
||||
})
|
||||
return map
|
||||
@@ -229,21 +291,6 @@ function resolveLogDate(log) {
|
||||
return ''
|
||||
}
|
||||
|
||||
function normalizeLogType(log) {
|
||||
const rawType = log?.type
|
||||
if (typeof rawType === 'string') {
|
||||
const value = rawType.toLowerCase()
|
||||
if (value === 'resisted' || value === 'resist') return 'resisted'
|
||||
if (value === 'smoke' || value === 'log_smoke') return 'smoke'
|
||||
}
|
||||
if (typeof rawType === 'number') {
|
||||
if (rawType === 0) return 'resisted'
|
||||
if (rawType === 1) return 'smoke'
|
||||
}
|
||||
if (log?.num === 0) return 'resisted'
|
||||
return 'smoke'
|
||||
}
|
||||
|
||||
function parseDate(value) {
|
||||
if (!value) return null
|
||||
const date = new Date(`${value}T00:00:00`)
|
||||
@@ -283,22 +330,79 @@ function addDays(date, offset) {
|
||||
result.setDate(result.getDate() + offset)
|
||||
return result
|
||||
}
|
||||
|
||||
function getLogTimestamp(log) {
|
||||
if (log?.smoke_at) return new Date(log.smoke_at).getTime() || 0
|
||||
if (typeof log?.smoke_time === 'string') return new Date(log.smoke_time).getTime() || 0
|
||||
if (log?.createtime) {
|
||||
return typeof log.createtime === 'number'
|
||||
? log.createtime * 1000
|
||||
: new Date(log.createtime).getTime() || 0
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
function formatLogTime(log) {
|
||||
const timestamp = getLogTimestamp(log)
|
||||
if (!timestamp) return '--:--'
|
||||
const date = new Date(timestamp)
|
||||
const hour = String(date.getHours()).padStart(2, '0')
|
||||
const minute = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${hour}:${minute}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F7F6;
|
||||
padding: 24rpx 32rpx;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F4FBF8 42%, #FBFFFD 100%);
|
||||
padding: 28rpx 28rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
color: #5D8F7C;
|
||||
}
|
||||
|
||||
.today-pill {
|
||||
flex-shrink: 0;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.16);
|
||||
color: #158461;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 6rpx 18rpx rgba(52, 200, 160, 0.08);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -313,13 +417,14 @@ function addDays(date, offset) {
|
||||
.month-arrow {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F5F7F6;
|
||||
background: rgba(52, 200, 160, 0.08);
|
||||
font-size: 36rpx;
|
||||
color: #1A1A1A;
|
||||
color: #0D3D2E;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -336,14 +441,14 @@ function addDays(date, offset) {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.month-subtitle {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
color: #7AA898;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
@@ -356,17 +461,19 @@ function addDays(date, offset) {
|
||||
flex: 1;
|
||||
padding: 16rpx 14rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F5F7F6;
|
||||
background: rgba(52, 200, 160, 0.1);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.summary-chip-soft {
|
||||
background: #F5F7F6;
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
border-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.summary-chip-label {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
color: #6B9B8A;
|
||||
}
|
||||
|
||||
.summary-chip-value-row {
|
||||
@@ -380,12 +487,12 @@ function addDays(date, offset) {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
color: #1A1A1A;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.summary-chip-unit {
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
color: #7AA898;
|
||||
}
|
||||
|
||||
.calendar-legend {
|
||||
@@ -396,7 +503,7 @@ function addDays(date, offset) {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F9FBFA;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
@@ -415,19 +522,19 @@ function addDays(date, offset) {
|
||||
background: #10B981;
|
||||
}
|
||||
|
||||
.legend-dot-resisted {
|
||||
background: #A7F3D0;
|
||||
.legend-dot-selected {
|
||||
background: #F59E0B;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
.legend-tip {
|
||||
margin-left: auto;
|
||||
font-size: 20rpx;
|
||||
color: #CCCCCC;
|
||||
color: #9ABDAE;
|
||||
}
|
||||
|
||||
.weekday-row {
|
||||
@@ -440,7 +547,7 @@ function addDays(date, offset) {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #999999;
|
||||
color: #7AA898;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
@@ -453,20 +560,21 @@ function addDays(date, offset) {
|
||||
aspect-ratio: 1 / 1.15;
|
||||
padding: 10rpx 6rpx 8rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F9FBFA;
|
||||
background: rgba(52, 200, 160, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
border: 1.5rpx solid transparent;
|
||||
}
|
||||
|
||||
.calendar-cell-selected {
|
||||
background: #E8F5F0;
|
||||
border: 2rpx solid #10B981;
|
||||
background: rgba(255, 251, 235, 0.9);
|
||||
border-color: rgba(245, 158, 11, 0.55);
|
||||
}
|
||||
|
||||
.calendar-cell-today {
|
||||
background: #E8F5F0;
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.calendar-cell-muted {
|
||||
@@ -486,7 +594,7 @@ function addDays(date, offset) {
|
||||
.calendar-day {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.calendar-today-dot {
|
||||
@@ -512,7 +620,138 @@ function addDays(date, offset) {
|
||||
.calendar-count-unit {
|
||||
font-size: 16rpx;
|
||||
font-weight: 600;
|
||||
color: #999999;
|
||||
color: #7AA898;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.detail-subtitle {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #6B9B8A;
|
||||
}
|
||||
|
||||
.detail-total {
|
||||
flex-shrink: 0;
|
||||
min-width: 112rpx;
|
||||
padding: 12rpx 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(52, 200, 160, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detail-total-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.detail-total-unit {
|
||||
margin-left: 4rpx;
|
||||
font-size: 20rpx;
|
||||
color: #6B9B8A;
|
||||
}
|
||||
|
||||
.log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
align-items: flex-start;
|
||||
padding: 16rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(52, 200, 160, 0.05);
|
||||
}
|
||||
|
||||
.log-time {
|
||||
width: 78rpx;
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
color: #158461;
|
||||
}
|
||||
|
||||
.log-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.log-count {
|
||||
font-size: 26rpx;
|
||||
font-weight: 800;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #2563EB;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.log-remark {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
color: #6B9B8A;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-detail {
|
||||
padding: 28rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(52, 200, 160, 0.05);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
display: block;
|
||||
font-size: 25rpx;
|
||||
font-weight: 800;
|
||||
color: #0D3D2E;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 23rpx;
|
||||
line-height: 1.5;
|
||||
color: #6B9B8A;
|
||||
}
|
||||
|
||||
.bottom-safe {
|
||||
|
||||
+23
-86
@@ -3,7 +3,7 @@
|
||||
<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
|
||||
|
||||
<!-- Tab 切换 -->
|
||||
<view class="segment-wrap">
|
||||
<view class="segment-wrap" :style="{ top: navBarHeight + 'px' }">
|
||||
<view class="segment">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
@@ -165,10 +165,10 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="mini-card">
|
||||
<text class="mini-label">已拒绝</text>
|
||||
<text class="mini-label">累计少抽</text>
|
||||
<view class="mini-value-row">
|
||||
<text class="mini-value">{{ resistedTotal }}</text>
|
||||
<text class="mini-unit">次</text>
|
||||
<text class="mini-value">{{ reducedTotal }}</text>
|
||||
<text class="mini-unit">支</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -226,13 +226,6 @@ const insightText = computed(() => {
|
||||
return `较上期上升 ${abs}%，留意高峰时段，尝试延迟第一支。`
|
||||
})
|
||||
|
||||
const trendRangeText = computed(() => {
|
||||
const start = statsData.value?.start
|
||||
const end = statsData.value?.end
|
||||
if (!start || !end) return ''
|
||||
return formatRangeText(start, end)
|
||||
})
|
||||
|
||||
const weeklyTrendRangeText = computed(() => {
|
||||
const start = weeklyStatsData.value?.start
|
||||
const end = weeklyStatsData.value?.end
|
||||
@@ -240,33 +233,6 @@ const weeklyTrendRangeText = computed(() => {
|
||||
return `${formatRangeText(start, end)} · 固定展示最近 7 天`
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (changePercent.value === null) return '暂无对比'
|
||||
const sign = changePercent.value > 0 ? '+' : ''
|
||||
return `较上期 ${sign}${changePercent.value}%`
|
||||
})
|
||||
|
||||
const statusChipClass = computed(() => {
|
||||
if (changePercent.value === null) return 'chip-neutral'
|
||||
return changePercent.value <= 0 ? 'chip-good' : 'chip-warn'
|
||||
})
|
||||
|
||||
const statusArrow = computed(() => {
|
||||
if (changePercent.value === null) return '→'
|
||||
return changePercent.value <= 0 ? '↓' : '↑'
|
||||
})
|
||||
|
||||
const statusIconClass = computed(() => {
|
||||
if (changePercent.value === null) return 'arrow-neutral'
|
||||
return changePercent.value <= 0 ? 'arrow-good' : 'arrow-warn'
|
||||
})
|
||||
|
||||
const averageCount = computed(() => {
|
||||
const avg = statsData.value?.daily_average
|
||||
if (avg === undefined || avg === null) return 0
|
||||
return Number(avg) || 0
|
||||
})
|
||||
|
||||
const weeklyAverageCount = computed(() => {
|
||||
const avg = weeklyStatsData.value?.daily_average
|
||||
if (avg === undefined || avg === null) return 0
|
||||
@@ -431,7 +397,7 @@ const healthItems = computed(() => {
|
||||
})
|
||||
|
||||
const streakDays = computed(() => statsData.value?.streak_days ?? 0)
|
||||
const resistedTotal = computed(() => statsData.value?.resisted_total ?? 0)
|
||||
const reducedTotal = computed(() => Math.max(moneyExpectedTotal.value - moneyActualTotal.value, 0))
|
||||
|
||||
function formatRangeText(start, end) {
|
||||
const startParts = start.split('-')
|
||||
@@ -505,7 +471,8 @@ onShareAppMessage(() => {
|
||||
/* ── 页面 ── */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
background:
|
||||
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
|
||||
padding: 0 28rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -516,16 +483,21 @@ onShareAppMessage(() => {
|
||||
|
||||
/* ── Tab 切换 ── */
|
||||
.segment-wrap {
|
||||
position: relative;
|
||||
height: 148rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 98rpx;
|
||||
padding: 0 28rpx;
|
||||
background: rgba(246, 248, 246, 0.9);
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
z-index: 60;
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.segment {
|
||||
position: fixed;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
@@ -539,7 +511,7 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.segment::before {
|
||||
content: '';
|
||||
content: none;
|
||||
position: absolute;
|
||||
inset: -12rpx -8rpx -10rpx;
|
||||
border-radius: 34rpx;
|
||||
@@ -564,6 +536,10 @@ onShareAppMessage(() => {
|
||||
box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.insight-card {
|
||||
margin-top: 112rpx;
|
||||
}
|
||||
|
||||
/* ── 洞察卡片 ── */
|
||||
.insight-card {
|
||||
display: flex;
|
||||
@@ -667,45 +643,6 @@ onShareAppMessage(() => {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── 状态标签 ── */
|
||||
.status-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 21rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chip-good {
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.chip-warn {
|
||||
background: rgba(251, 191, 36, 0.14);
|
||||
color: #B45309;
|
||||
}
|
||||
|
||||
.chip-neutral {
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.status-arrow {
|
||||
font-size: 18rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.arrow-good { color: #1a8c62; }
|
||||
.arrow-warn { color: #D97706; }
|
||||
.arrow-neutral { color: #7aA898; }
|
||||
|
||||
.status-text {
|
||||
font-size: 21rpx;
|
||||
}
|
||||
|
||||
/* ── 日均 ── */
|
||||
.avg-row {
|
||||
display: flex;
|
||||
|
||||
+349
-105
@@ -1,13 +1,38 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="bg-orb bg-orb-main"></view>
|
||||
<view class="bg-orb bg-orb-soft"></view>
|
||||
|
||||
<view class="header">
|
||||
<text class="title">监督人机制</text>
|
||||
<text class="subtitle">邀请朋友监督你的戒烟旅程，或者你来监督别人</text>
|
||||
<view class="header-copy">
|
||||
<text class="eyebrow">ACCOUNTABILITY</text>
|
||||
<text class="title">监督人机制</text>
|
||||
<text class="subtitle">邀请朋友监督你的戒烟旅程，也可以成为别人的坚持搭子。</text>
|
||||
</view>
|
||||
<view class="hero-panel">
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ supervisorItems.length }}/3</text>
|
||||
<text class="hero-stat-label">监督我的人</text>
|
||||
</view>
|
||||
<view class="hero-divider"></view>
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ overviewItems.length }}</text>
|
||||
<text class="hero-stat-label">我监督的人</text>
|
||||
</view>
|
||||
<view class="hero-divider"></view>
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ reminderEnabled ? 'ON' : 'OFF' }}</text>
|
||||
<text class="hero-stat-label">提醒状态</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">邀请监督人</text>
|
||||
<view class="card-title-wrap">
|
||||
<view class="card-icon">🤝</view>
|
||||
<text class="card-title">邀请监督人</text>
|
||||
</view>
|
||||
<text class="card-meta">已绑定 {{ supervisorItems.length }}/3</text>
|
||||
</view>
|
||||
|
||||
@@ -36,11 +61,15 @@
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">我监督的人</text>
|
||||
<view class="card-title-wrap">
|
||||
<view class="card-icon card-icon-blue">👀</view>
|
||||
<text class="card-title">我监督的人</text>
|
||||
</view>
|
||||
<text class="card-meta">{{ overviewItems.length }} 人</text>
|
||||
</view>
|
||||
|
||||
<view v-if="overviewItems.length === 0" class="empty">
|
||||
<text class="empty-icon">🫶</text>
|
||||
<text class="empty-text">还没有绑定监督关系</text>
|
||||
<text class="empty-hint">收到口令后可去“绑定监督”页面完成绑定</text>
|
||||
<button class="btn btn-ghost" @tap="gotoBindPage">去绑定监督</button>
|
||||
@@ -69,10 +98,14 @@
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">监督我的人</text>
|
||||
<view class="card-title-wrap">
|
||||
<view class="card-icon card-icon-orange">🛡️</view>
|
||||
<text class="card-title">监督我的人</text>
|
||||
</view>
|
||||
<text class="card-meta">{{ supervisorItems.length }} 人</text>
|
||||
</view>
|
||||
<view v-if="supervisorItems.length === 0" class="empty">
|
||||
<text class="empty-icon">🌱</text>
|
||||
<text class="empty-text">还没有人监督你</text>
|
||||
<text class="empty-hint">你可以先生成邀请口令发送给朋友</text>
|
||||
</view>
|
||||
@@ -89,7 +122,10 @@
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">提醒设置</text>
|
||||
<view class="card-title-wrap">
|
||||
<view class="card-icon card-icon-purple">🔔</view>
|
||||
<text class="card-title">提醒设置</text>
|
||||
</view>
|
||||
<text class="card-meta">默认关闭</text>
|
||||
</view>
|
||||
|
||||
@@ -136,7 +172,10 @@
|
||||
|
||||
<view class="card">
|
||||
<view class="card-head">
|
||||
<text class="card-title">提醒测试（监督人）</text>
|
||||
<view class="card-title-wrap">
|
||||
<view class="card-icon card-icon-gray">⚡</view>
|
||||
<text class="card-title">提醒测试（监督人）</text>
|
||||
</view>
|
||||
<text class="card-meta">仅写日志</text>
|
||||
</view>
|
||||
<view class="settings">
|
||||
@@ -417,122 +456,285 @@ onShow(async () => {
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding: 28rpx 28rpx 40rpx;
|
||||
padding: 30rpx 28rpx 48rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #eef7f3 0%, #f7faf8 40%, #fbfdff 100%);
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 16% 0%, rgba(31, 191, 143, 0.18), transparent 34%),
|
||||
radial-gradient(circle at 92% 10%, rgba(96, 165, 250, 0.15), transparent 30%),
|
||||
linear-gradient(180deg, #eef7f3 0%, #f7faf8 42%, #fbfdff 100%);
|
||||
}
|
||||
|
||||
.bg-orb {
|
||||
position: absolute;
|
||||
border-radius: 999rpx;
|
||||
pointer-events: none;
|
||||
filter: blur(2rpx);
|
||||
}
|
||||
|
||||
.bg-orb-main {
|
||||
top: 126rpx;
|
||||
right: -86rpx;
|
||||
width: 230rpx;
|
||||
height: 230rpx;
|
||||
background: rgba(26, 163, 122, 0.12);
|
||||
}
|
||||
|
||||
.bg-orb-soft {
|
||||
top: 520rpx;
|
||||
left: -100rpx;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
|
||||
.header,
|
||||
.card,
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 8rpx 6rpx 18rpx;
|
||||
padding: 10rpx 4rpx 20rpx;
|
||||
}
|
||||
|
||||
.header-copy {
|
||||
padding: 4rpx 2rpx 24rpx;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
border: 1rpx solid rgba(26, 163, 122, 0.14);
|
||||
color: #1aa37a;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.8rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
margin-top: 18rpx;
|
||||
font-size: 48rpx;
|
||||
line-height: 1.15;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
letter-spacing: 0.5rpx;
|
||||
letter-spacing: -0.8rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
margin-top: 12rpx;
|
||||
max-width: 620rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.7;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(26, 163, 122, 0.86));
|
||||
box-shadow: 0 18rpx 44rpx rgba(15, 118, 110, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-stat-value {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: -0.4rpx;
|
||||
}
|
||||
|
||||
.hero-stat-label {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.35;
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
.hero-divider {
|
||||
width: 1rpx;
|
||||
height: 54rpx;
|
||||
background: rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 26rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
padding: 22rpx 22rpx;
|
||||
box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.05);
|
||||
margin-top: 20rpx;
|
||||
padding: 26rpx;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 18rpx 44rpx rgba(15, 23, 42, 0.07);
|
||||
backdrop-filter: blur(18rpx);
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.card-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 18rpx;
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
background: rgba(26, 163, 122, 0.12);
|
||||
}
|
||||
|
||||
.card-icon-blue {
|
||||
background: rgba(96, 165, 250, 0.14);
|
||||
}
|
||||
|
||||
.card-icon-orange {
|
||||
background: rgba(251, 146, 60, 0.15);
|
||||
}
|
||||
|
||||
.card-icon-purple {
|
||||
background: rgba(168, 85, 247, 0.13);
|
||||
}
|
||||
|
||||
.card-icon-gray {
|
||||
background: rgba(100, 116, 139, 0.12);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
font-size: 29rpx;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
font-size: 22rpx;
|
||||
color: #94a3b8;
|
||||
flex-shrink: 0;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(241, 245, 249, 0.78);
|
||||
font-size: 21rpx;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.invite-box {
|
||||
margin-top: 18rpx;
|
||||
position: relative;
|
||||
margin-top: 22rpx;
|
||||
padding: 26rpx;
|
||||
border-radius: 28rpx;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.92));
|
||||
border: 1rpx solid rgba(26, 163, 122, 0.14);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.invite-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.invite-token {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 36rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 52rpx;
|
||||
line-height: 1.15;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2rpx;
|
||||
letter-spacing: 4rpx;
|
||||
color: #0f766e;
|
||||
font-family: 'DIN Alternate', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.invite-hint {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
margin-top: 14rpx;
|
||||
font-size: 23rpx;
|
||||
line-height: 1.65;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.invite-actions {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
margin-top: 16rpx;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.invite-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.invite-expire {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 22rpx;
|
||||
margin-top: 16rpx;
|
||||
font-size: 21rpx;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.invite-empty {
|
||||
margin-top: 18rpx;
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
gap: 18rpx;
|
||||
padding: 22rpx;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(248, 250, 252, 0.74);
|
||||
border: 1rpx dashed rgba(26, 163, 122, 0.22);
|
||||
}
|
||||
|
||||
.invite-empty-text {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
line-height: 1.65;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 18rpx;
|
||||
padding: 16rpx 6rpx 6rpx;
|
||||
margin-top: 22rpx;
|
||||
padding: 34rpx 24rpx;
|
||||
border-radius: 28rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.76));
|
||||
border: 1rpx dashed rgba(100, 116, 139, 0.18);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
line-height: 1;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
font-size: 26rpx;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
@@ -544,28 +746,34 @@ onShow(async () => {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty .btn {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 18rpx;
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
gap: 18rpx;
|
||||
align-items: flex-start;
|
||||
padding: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(241, 245, 249, 0.6);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.04);
|
||||
padding: 20rpx;
|
||||
border-radius: 26rpx;
|
||||
background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.9));
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
border-radius: 50%;
|
||||
background: #e2e8f0;
|
||||
border: 4rpx solid #ffffff;
|
||||
box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.09);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -577,24 +785,27 @@ onShow(async () => {
|
||||
.name {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 8rpx 12rpx;
|
||||
padding: 8rpx 13rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
color: #334155;
|
||||
box-shadow: 0 6rpx 14rpx rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.pill-muted {
|
||||
@@ -603,74 +814,94 @@ onShow(async () => {
|
||||
|
||||
.pill-up {
|
||||
color: #0f766e;
|
||||
background: rgba(204, 251, 241, 0.6);
|
||||
background: rgba(204, 251, 241, 0.72);
|
||||
border-color: rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.pill-down {
|
||||
color: #b91c1c;
|
||||
background: rgba(254, 226, 226, 0.8);
|
||||
background: rgba(254, 226, 226, 0.86);
|
||||
border-color: rgba(185, 28, 28, 0.1);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.55;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
margin-top: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mini-btn {
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid rgba(185, 28, 28, 0.28);
|
||||
color: #b91c1c;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20rpx;
|
||||
margin-top: 22rpx;
|
||||
padding-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
padding: 0 22rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(180deg, #1aa37a 0%, #0f766e 100%);
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
.btn,
|
||||
.mini-btn {
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
opacity: 0.6;
|
||||
.btn::after,
|
||||
.mini-btn::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 78rpx;
|
||||
line-height: 78rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(135deg, #1aa37a 0%, #0f766e 100%);
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
|
||||
}
|
||||
|
||||
.btn[disabled],
|
||||
.mini-btn[disabled] {
|
||||
opacity: 0.55;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
color: #0f766e;
|
||||
border: 1rpx solid rgba(15, 118, 110, 0.25);
|
||||
border: 1rpx solid rgba(15, 118, 110, 0.18);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mini-btn {
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1rpx solid rgba(185, 28, 28, 0.2);
|
||||
color: #b91c1c;
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mini-btn-neutral {
|
||||
border-color: rgba(15, 23, 42, 0.12);
|
||||
min-width: 144rpx;
|
||||
border-color: rgba(15, 23, 42, 0.1);
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-top: 18rpx;
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
@@ -678,20 +909,20 @@ onShow(async () => {
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 14rpx 12rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(241, 245, 249, 0.45);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.04);
|
||||
gap: 20rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(248, 250, 252, 0.8);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
font-size: 25rpx;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
padding-top: 6rpx;
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
@@ -704,13 +935,15 @@ onShow(async () => {
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 200rpx;
|
||||
height: 64rpx;
|
||||
padding: 0 14rpx;
|
||||
border-radius: 14rpx;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
width: 190rpx;
|
||||
height: 66rpx;
|
||||
padding: 0 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.08);
|
||||
font-size: 26rpx;
|
||||
font-size: 27rpx;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -726,15 +959,26 @@ onShow(async () => {
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.setting-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.settings-note {
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: rgba(236, 253, 245, 0.7);
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
line-height: 1.65;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.run-result {
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: rgba(204, 251, 241, 0.64);
|
||||
font-size: 22rpx;
|
||||
line-height: 1.6;
|
||||
color: #0f766e;
|
||||
font-weight: 700;
|
||||
font-weight: 900;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
@@ -1,72 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { getDashboard, getNextSmokeTime } from '@/api/smoke'
|
||||
|
||||
export const useDashboardStore = defineStore('dashboard', {
|
||||
state: () => ({
|
||||
todayCount: 0,
|
||||
minutesSinceLast: 0,
|
||||
weekly: [],
|
||||
nextSmokeTime: null,
|
||||
lastFetchTime: 0,
|
||||
cacheExpiry: 30 * 1000,
|
||||
loading: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
isCacheValid: (state) => {
|
||||
return Date.now() - state.lastFetchTime < state.cacheExpiry
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
async fetchDashboard(forceRefresh = false) {
|
||||
if (!forceRefresh && this.isCacheValid) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getDashboard()
|
||||
this.todayCount = res.data.today_count || 0
|
||||
this.minutesSinceLast = res.data.minutes_since_last || 0
|
||||
this.weekly = res.data.weekly || []
|
||||
this.lastFetchTime = Date.now()
|
||||
} catch (e) {
|
||||
console.error('fetchDashboard error:', e)
|
||||
throw e
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async fetchNextSmokeTime() {
|
||||
try {
|
||||
const res = await getNextSmokeTime()
|
||||
this.nextSmokeTime = res.data
|
||||
return res.data
|
||||
} catch (e) {
|
||||
console.error('fetchNextSmokeTime error:', e)
|
||||
throw e
|
||||
}
|
||||
},
|
||||
|
||||
setDashboard(data) {
|
||||
this.todayCount = data.today_count || 0
|
||||
this.minutesSinceLast = data.minutes_since_last || 0
|
||||
this.weekly = data.weekly || []
|
||||
this.lastFetchTime = Date.now()
|
||||
},
|
||||
|
||||
setNextSmokeTime(data) {
|
||||
this.nextSmokeTime = data
|
||||
},
|
||||
|
||||
incrementTodayCount() {
|
||||
this.todayCount++
|
||||
},
|
||||
|
||||
resetTimer() {
|
||||
this.minutesSinceLast = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -5,6 +5,5 @@ const pinia = createPinia()
|
||||
export default pinia
|
||||
|
||||
export * from './user'
|
||||
export * from './dashboard'
|
||||
export * from './profile'
|
||||
export * from './logs'
|
||||
|
||||
+2
-2
@@ -3,8 +3,8 @@
|
||||
* 所有页面自动注入，无需手动 import
|
||||
*/
|
||||
|
||||
@import './styles/variables';
|
||||
@import './styles/mixins';
|
||||
@import '@/styles/_variables.scss';
|
||||
@import '@/styles/_mixins.scss';
|
||||
|
||||
/* 覆盖 uni-app 默认颜色变量 */
|
||||
$uni-color-primary: $color-primary-dark;
|
||||
|
||||
Reference in New Issue
Block a user