nepiedg
135 lines
3.0 KiB
Markdown
135 lines
3.0 KiB
Markdown
# 组件使用说明
|
||
|
||
## smoke-record-dialog - 抽烟记录弹框组件
|
||
|
||
这是一个可复用的底部弹框组件，用于记录抽烟或抵抗记录。
|
||
|
||
### 特性
|
||
|
||
- ✨ 从底部弹出，半屏展示
|
||
- 🎨 明亮主题设计
|
||
- 📱 支持日期时间选择
|
||
- 🔢 支持数量调整和烟瘾等级选择
|
||
- 📝 支持备注输入
|
||
- 🔄 全局可复用（已配置 easycom 自动导入）
|
||
|
||
### 使用方法
|
||
|
||
#### 方式一：easycom 自动导入（推荐）
|
||
|
||
无需手动导入，直接在模板中使用即可：
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 触发按钮 -->
|
||
<button @tap="openDialog">记录抽烟</button>
|
||
|
||
<!-- 弹框组件 - 自动导入，无需 import -->
|
||
<smoke-record-dialog
|
||
v-model:show="showDialog"
|
||
:type="dialogType"
|
||
@submit="handleSubmit"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import * as api from '@/api'
|
||
|
||
const showDialog = ref(false)
|
||
const dialogType = ref('smoke') // 'smoke' 或 'resisted'
|
||
|
||
function openDialog() {
|
||
dialogType.value = 'smoke' // 或 'resisted'
|
||
showDialog.value = true
|
||
}
|
||
|
||
async function handleSubmit(data) {
|
||
try {
|
||
await api.createLog(data)
|
||
uni.showToast({ title: '记录成功', icon: 'success' })
|
||
// 更新数据...
|
||
} catch (e) {
|
||
console.error('提交失败:', e)
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
#### 方式二：手动导入（可选）
|
||
|
||
```vue
|
||
<script setup>
|
||
import smokeRecordDialog from '@/components/smoke-record-dialog/smoke-record-dialog.vue'
|
||
// 其他代码...
|
||
</script>
|
||
```
|
||
|
||
### Props
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| show | Boolean | false | 控制弹框显示/隐藏 |
|
||
| type | String | 'smoke' | 记录类型：'smoke'(抽烟) 或 'resisted'(忍住) |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 参数 | 说明 |
|
||
|--------|------|------|
|
||
| update:show | Boolean | 弹框显示状态变化时触发 |
|
||
| submit | Object | 提交表单时触发，返回表单数据 |
|
||
|
||
### 提交数据格式
|
||
|
||
```javascript
|
||
{
|
||
smoke_time: "2025-12-31", // 日期
|
||
smoke_at: "2025-12-31 08:30:00", // 完整时间
|
||
remark: "压力大", // 备注
|
||
level: 2, // 烟瘾等级（1-5）
|
||
num: 3 // 数量（忍住时为0）
|
||
}
|
||
```
|
||
|
||
### 示例场景
|
||
|
||
#### 场景1：记录抽烟
|
||
|
||
```vue
|
||
<button @tap="recordSmoke">记录抽烟</button>
|
||
|
||
<smoke-record-dialog
|
||
v-model:show="showDialog"
|
||
type="smoke"
|
||
@submit="handleSmokeSubmit"
|
||
/>
|
||
```
|
||
|
||
#### 场景2：记录忍住
|
||
|
||
```vue
|
||
<button @tap="recordResisted">想抽忍住了</button>
|
||
|
||
<smoke-record-dialog
|
||
v-model:show="showDialog"
|
||
type="resisted"
|
||
@submit="handleResistedSubmit"
|
||
/>
|
||
```
|
||
|
||
### 样式定制
|
||
|
||
组件内部样式已设置为 `scoped`，如需自定义样式，可以通过以下方式：
|
||
|
||
1. 修改组件内部样式文件
|
||
2. 使用深度选择器覆盖样式（不推荐）
|
||
|
||
### 注意事项
|
||
|
||
1. 组件使用 v-model:show 双向绑定显示状态
|
||
2. type 为 'resisted' 时，num 自动设置为 0
|
||
3. 表单数据会在打开弹框时自动初始化为当前时间
|
||
4. 提交后弹框会自动关闭
|