# smoke-record-dialog 组件

## 📦 组件说明

抽烟记录弹框组件，用于记录抽烟或抵抗记录。从底部弹出，半屏展示。

## 🎯 组件特性

- ✅ 符合 uni-app/微信小程序规范的组件结构
- ✅ 使用 Options API（兼容性更好）
- ✅ 从底部弹出动画效果
- ✅ 半屏展示，优化用户体验
- ✅ 支持两种模式：抽烟记录 / 忍住记录
- ✅ 完整的表单功能
- ✅ 已配置 easycom 自动导入

## 📁 文件结构

```
components/
└── smoke-record-dialog/
    ├── smoke-record-dialog.vue  # 组件主文件
    └── README.md               # 组件文档
```

## 🚀 快速使用

组件已配置 easycom 自动导入，无需手动 import：

```vue
<template>
  <view>
    <button @tap="showDialog = true">记录抽烟</button>
    
    <smoke-record-dialog 
      v-model:show="showDialog"
      type="smoke"
      @submit="handleSubmit"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)

function handleSubmit(data) {
  console.log('提交数据:', data)
  // 处理提交逻辑...
}
</script>
```

## 📝 Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| show | Boolean | false | 控制弹框显示/隐藏（支持 v-model） |
| type | String | 'smoke' | 记录类型：'smoke'(抽烟) 或 'resisted'(忍住) |

## 🎪 Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:show | Boolean | 弹框状态改变时触发（v-model 绑定） |
| submit | Object | 提交表单时触发 |

## 📤 提交数据格式

```javascript
{
  smoke_time: "2025-01-25",        // 日期
  smoke_at: "2025-01-25 14:30:00", // 完整时间
  remark: "压力大",                 // 备注（可选）
  level: 2,                         // 烟瘾等级 1-5
  num: 3                            // 数量（忍住时为0）
}
```

## 💡 使用示例

### 示例 1：记录抽烟

```vue
<template>
  <view>
    <button @tap="openSmokeDialog">记录抽烟</button>
    
    <smoke-record-dialog 
      v-model:show="showDialog"
      type="smoke"
      @submit="onSmokeSubmit"
    />
  </view>
</template>

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

const showDialog = ref(false)

function openSmokeDialog() {
  showDialog.value = true
}

async function onSmokeSubmit(data) {
  await api.createLog(data)
  uni.showToast({ title: '记录成功', icon: 'success' })
}
</script>
```

### 示例 2：记录忍住

```vue
<template>
  <view>
    <button @tap="openResistedDialog">想抽忍住了</button>
    
    <smoke-record-dialog 
      v-model:show="showDialog"
      type="resisted"
      @submit="onResistedSubmit"
    />
  </view>
</template>

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

const showDialog = ref(false)

function openResistedDialog() {
  showDialog.value = true
}

async function onResistedSubmit(data) {
  await api.createLog(data)
  uni.showToast({ title: '太棒了！', icon: 'success' })
}
</script>
```

## 🎨 样式说明

- 弹框背景：半透明黑色遮罩
- 容器样式：纯白背景，顶部圆角
- 主题色：#10B981（翡翠绿）
- 动画效果：0.3s 缓入缓出过渡

## ⚙️ 配置说明

组件已在 `pages.json` 中配置 easycom：

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^smoke-record-dialog$": "@/components/smoke-record-dialog/smoke-record-dialog.vue"
    }
  }
}
```

## 🔧 技术栈

- Vue 2 Options API
- uni-app 组件规范
- 微信小程序兼容

## ⚠️ 注意事项

1. 组件使用 Options API 而非 Composition API，以确保更好的兼容性
2. 组件名使用小写加连字符（kebab-case），符合 uni-app 规范
3. 已配置 easycom，无需手动导入
4. 提交后弹框会自动关闭
5. 表单数据会在打开时自动初始化为当前时间