nepiedg
182 lines
3.8 KiB
Markdown
182 lines
3.8 KiB
Markdown
# 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. 表单数据会在打开时自动初始化为当前时间
|