smt/components/smoke-record-dialog

smoke-record-dialog 组件

📦 组件说明

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

🎯 组件特性

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

📁 文件结构

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

🚀 快速使用

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

<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	提交表单时触发

📤 提交数据格式

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

💡 使用示例

示例 1：记录抽烟

<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：记录忍住

<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：

{
  "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. 表单数据会在打开时自动初始化为当前时间