# smt 双模式改造方案

> 创建时间：2026-03-17
> 状态：待开发
> 相关文档：[[戒烟产品分析-smt-vs-quit-checkin]]

---

## 📁 现有项目结构

```
smt/
├── api/                    # 接口封装
│   ├── auth.js            # 登录认证
│   ├── smoke.js           # 抽烟记录 API
│   ├── profile.js         # 用户资料 API
│   ├── request.js         # 请求封装
│   └── index.js           # 统一导出
├── components/             # 业务组件
│   └── smoke-record-dialog/  # 记录弹框组件
├── config/                 # 环境配置
│   └── index.js           # BASE_URL 配置
├── hooks/                  # 组合式逻辑
│   └── useLogin.js        # 登录相关 hook
├── pages/                  # 页面
│   ├── index/             # 首页 ⭐ 需要改造
│   ├── stats/             # 统计页
│   ├── logs/              # 历史记录页
│   ├── ai/                # AI 建议
│   ├── ai_summary/        # AI 总结
│   ├── share/             # 分享页
│   ├── profile/           # 个人中心
│   ├── quit-plan/         # 戒烟计划
│   └── onboarding/        # 新用户引导 ⭐ 需要改造
├── stores/                 # Pinia 状态管理
│   ├── user.js            # 用户状态 ⭐ 需要扩展
│   ├── profile.js         # 用户资料 ⭐ 需要扩展
│   ├── logs.js            # 记录状态
│   ├── dashboard.js       # 首页数据
│   └── index.js           # 统一导出
├── utils/                  # 工具函数
│   ├── storage.js         # 本地存储 ⭐ 需要扩展
│   ├── time.js            # 时间处理
│   └── format.js          # 格式化
├── static/                 # 静态资源
├── App.vue                 # 应用入口
├── main.js                 # 主入口
├── pages.json              # 页面配置 ⭐ 需要修改
└── manifest.json           # 小程序配置
```

---

## 🔧 需要修改/新增的文件

### 新增文件

| 文件路径 | 说明 |
|----------|------|
| `pages/mode-select/index.vue` | **新增** - 模式选择引导页 |
| `pages/quit-home/index.vue` | **新增** - 戒烟打卡模式首页 |
| `pages/record-home/index.vue` | **新增** - 记录抽烟模式首页 |
| `components/quit-checkin-btn/index.vue` | **新增** - 打卡按钮组件 |
| `components/simple-counter/index.vue` | **新增** - 简易计数器组件 |

### 需要修改的文件

| 文件路径 | 修改内容 |
|----------|----------|
| `stores/user.js` | 添加 `mode` 字段存储用户模式 |
| `stores/profile.js` | 添加 `quitDays` 戒烟天数计算 |
| `utils/storage.js` | 添加 `USER_MODE_KEY` 常量 |
| `pages.json` | 添加新页面路由，修改首页逻辑 |
| `pages/onboarding/index.vue` | 完成引导后跳转到模式选择页 |
| `pages/profile/index.vue` | 添加模式切换入口 |
| `pages/index/index.vue` | 根据模式渲染不同首页（可选方案） |

---

## 📝 详细代码修改

### 1. `utils/storage.js` - 新增常量

```javascript
export const USER_MODE_KEY = 'user_mode'  // 新增
```

---

### 2. `stores/user.js` - 扩展用户模式

```javascript
import { defineStore } from 'pinia'
import { storage, USER_KEY, SESSION_KEY, USER_MODE_KEY } from '@/utils/storage'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: storage.get(USER_KEY),
    sessionKey: storage.get(SESSION_KEY),
    isLoggedIn: !!storage.get(SESSION_KEY),
    mode: storage.get(USER_MODE_KEY) || null  // 'quit' | 'record' | null
  }),

  actions: {
    setUser(user, sessionKey) {
      this.user = user
      this.sessionKey = sessionKey
      this.isLoggedIn = true
      storage.set(USER_KEY, user)
      storage.set(SESSION_KEY, sessionKey)
    },

    setMode(mode) {
      this.mode = mode
      storage.set(USER_MODE_KEY, mode)
    },

    logout() {
      this.user = null
      this.sessionKey = null
      this.isLoggedIn = false
      storage.remove(USER_KEY)
      storage.remove(SESSION_KEY)
    }
  }
})
```

---

### 3. `pages.json` - 添加新页面

```json
{
  "pages": [
    {
      "path": "pages/mode-select/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/quit-home/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/record-home/index",
      "style": {
        "navigationBarTitleText": "记录抽烟"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}
```

---

### 4. `pages/mode-select/index.vue` - 模式选择页

```vue
<template>
  <view class="page">
    <view class="content">
      <text class="title">你想怎么戒烟？</text>
      <text class="subtitle">选择适合你的方式</text>
      
      <view class="options">
        <view class="option option-quit" @tap="selectMode('quit')">
          <text class="option-icon">🌟</text>
          <view class="option-text">
            <text class="option-title">我要戒烟打卡</text>
            <text class="option-desc">记录坚持的天数，获得成就感</text>
          </view>
        </view>
        
        <view class="option option-record" @tap="selectMode('record')">
          <text class="option-icon">📊</text>
          <view class="option-text">
            <text class="option-title">我要记录抽烟</text>
            <text class="option-desc">跟踪抽烟频率，分析戒烟进度</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

function selectMode(mode) {
  userStore.setMode(mode)
  
  if (mode === 'quit') {
    uni.redirectTo({ url: '/pages/quit-home/index' })
  } else {
    uni.redirectTo({ url: '/pages/record-home/index' })
  }
}
</script>
```

---

### 5. `pages/quit-home/index.vue` - 戒烟打卡首页

**界面设计：**

```
┌─────────────────────────┐
│  🔥 已坚持 23 天        │
│                         │
│      ┌─────────┐        │
│      │  打卡   │        │
│      │  今天没抽│       │
│      └─────────┘        │
│                         │
│  💰 已省下 184 元       │
│  🫁 肺部正在恢复中...   │
│                         │
│  ─────────────────────  │
│  今日打卡 ✓ 08:30       │
└─────────────────────────┘
```

**核心代码：**

```vue
<template>
  <view class="page">
    <view class="header">
      <text class="days-label">已坚持</text>
      <text class="days-value">{{ quitDays }}</text>
      <text class="days-unit">天</text>
    </view>
    
    <view class="checkin-section">
      <view class="checkin-btn" :class="{ 'checked': todayChecked }" @tap="checkin">
        <text class="checkin-icon">{{ todayChecked ? '✓' : '🔥' }}</text>
        <text class="checkin-text">{{ todayChecked ? '今日已打卡' : '打卡' }}</text>
      </view>
    </view>
    
    <view class="stats-row">
      <view class="stat-item">
        <text class="stat-value">¥{{ savedMoney }}</text>
        <text class="stat-label">已省下</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ healthProgress }}%</text>
        <text class="stat-label">健康恢复</text>
      </view>
    </view>
    
    <view class="health-tips">
      <text class="tip-icon">🫁</text>
      <text class="tip-text">{{ healthTip }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useProfileStore } from '@/stores/profile'

const userStore = useUserStore()
const profileStore = useProfileStore()

const todayChecked = ref(false)
const quitStartDate = ref(null)

const quitDays = computed(() => {
  if (!quitStartDate.value) return 0
  const diff = Date.now() - new Date(quitStartDate.value).getTime()
  return Math.floor(diff / (1000 * 60 * 60 * 24))
})

const savedMoney = computed(() => {
  const pricePerPack = profileStore.profile?.pack_price_cent || 2500
  const cigsPerDay = profileStore.profile?.baseline_cigs_per_day || 10
  const savedCigs = quitDays.value * cigsPerDay
  return ((savedCigs / 20) * (pricePerPack / 100)).toFixed(0)
})

const healthProgress = computed(() => {
  if (quitDays.value >= 365) return 100
  if (quitDays.value >= 180) return 85
  if (quitDays.value >= 90) return 70
  if (quitDays.value >= 30) return 50
  if (quitDays.value >= 14) return 30
  if (quitDays.value >= 7) return 15
  return 5
})

const healthTip = computed(() => {
  if (quitDays.value >= 365) return '恭喜！你的肺部功能已基本恢复'
  if (quitDays.value >= 180) return '你的血液循环已显著改善'
  if (quitDays.value >= 30) return '你的味觉和嗅觉正在恢复'
  if (quitDays.value >= 7) return '你的肺活量开始增加'
  return '坚持下去，身体正在恢复中'
})

function checkin() {
  if (todayChecked.value) return
  todayChecked.value = true
  // TODO: 调用 API 保存打卡记录
  uni.showToast({ title: '打卡成功！', icon: 'success' })
}

onMounted(() => {
  // 获取戒烟开始日期
  // TODO: 从 API 或本地存储获取
})
</script>
```

---

### 6. `pages/record-home/index.vue` - 记录抽烟首页

**界面设计：**

```
┌─────────────────────────┐
│  今天抽了 3 根          │
│                         │
│      ┌─────────┐        │
│      │  +1 根  │        │
│      │  点击记录│        │
│      └─────────┘        │
│                         │
│  昨日：4 根             │
│  本周：18 根            │
│                         │
│  ─────────────────────  │
│  历史记录 >             │
└─────────────────────────┘
```

**核心代码：**

```vue
<template>
  <view class="page">
    <view class="counter-section">
      <text class="counter-label">今天抽了</text>
      <text class="counter-value">{{ todayCount }}</text>
      <text class="counter-unit">根</text>
    </view>
    
    <view class="add-btn" @tap="addOne">
      <text class="add-icon">+</text>
      <text class="add-text">记录一根</text>
    </view>
    
    <view class="summary">
      <view class="summary-item">
        <text class="summary-label">昨日</text>
        <text class="summary-value">{{ yesterdayCount }} 根</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">本周</text>
        <text class="summary-value">{{ weekCount }} 根</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import * as api from '@/api'

const todayCount = ref(0)
const yesterdayCount = ref(0)
const weekCount = ref(0)

async function addOne() {
  todayCount.value++
  // TODO: 调用 API 记录
  try {
    await api.createLog({
      num: 1,
      smoke_time: new Date().toISOString(),
      smoke_at: new Date().toISOString()
    })
    uni.showToast({ title: '已记录', icon: 'success', duration: 1000 })
  } catch (e) {
    console.error('记录失败:', e)
  }
}
</script>

<style scoped>
.add-btn {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #EF4444, #F87171);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60rpx auto;
  box-shadow: 0 20rpx 40rpx rgba(239, 68, 68, 0.3);
}

.add-icon {
  font-size: 80rpx;
  color: #FFF;
  font-weight: 300;
}

.add-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 8rpx;
}
</style>
```

---

### 7. `pages/profile/index.vue` - 添加模式切换

在个人中心添加：

```vue
<view class="menu-item" @tap="showModeSwitch">
  <text class="menu-icon">⚙️</text>
  <text class="menu-text">模式切换</text>
  <text class="menu-value">{{ modeText }}</text>
</view>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const modeText = computed(() => {
  return userStore.mode === 'quit' ? '戒烟打卡' : '记录抽烟'
})

function showModeSwitch() {
  uni.showActionSheet({
    itemList: ['戒烟打卡模式', '记录抽烟模式'],
    success: (res) => {
      const modes = ['quit', 'record']
      userStore.setMode(modes[res.tapIndex])
      uni.showToast({ title: '已切换', icon: 'success' })
    }
  })
}
</script>
```

---

## 📋 开发顺序

| 阶段 | 任务 | 预估时间 | 状态 |
|------|------|----------|------|
| **第一阶段** | 1. 修改 `utils/storage.js`<br>2. 修改 `stores/user.js`<br>3. 创建 `pages/mode-select/index.vue`<br>4. 修改 `pages.json` | 1-2h | ⬜ 待开始 |
| **第二阶段** | 1. 创建 `pages/quit-home/index.vue`<br>2. 打卡 API 对接<br>3. 省钱金额计算 | 2-3h | ⬜ 待开始 |
| **第三阶段** | 1. 创建 `pages/record-home/index.vue`<br>2. 一键记录 API 对接 | 1-2h | ⬜ 待开始 |
| **第四阶段** | 1. 修改 `pages/profile/index.vue` 模式切换<br>2. 修改引导流程跳转逻辑 | 1h | ⬜ 待开始 |

**总预估：5-8 小时**

---

## ⚠️ 注意事项

### 1. TabBar 问题

如果要让两种模式共用 TabBar，首页需要根据 mode 动态渲染：

```vue
<!-- pages/index/index.vue -->
<template>
  <QuitHome v-if="userStore.mode === 'quit'" />
  <RecordHome v-else />
</template>
```

### 2. 数据兼容

老用户没有 mode 字段，需要引导选择模式：

```javascript
// App.vue 或首页
if (!userStore.mode) {
  uni.redirectTo({ url: '/pages/mode-select/index' })
}
```

### 3. API 对接

打卡功能需要后端新增接口：

```
POST /api/checkin
{
  "date": "2026-03-17",
  "quit_days": 23
}
```

或复用现有 resisted 接口。

---

## 🔗 相关文档

- [[戒烟产品分析-smt-vs-quit-checkin]]
- [[smt - 技术文档]]
- [[quit-checkin - 技术文档]]

---

#技术开发 #smt #戒烟 #小程序 #双模式