smt/components

组件使用说明

smoke-record-dialog - 抽烟记录弹框组件

这是一个可复用的底部弹框组件，用于记录抽烟或抵抗记录。

特性

• ✨ 从底部弹出，半屏展示
• 🎨 明亮主题设计
• 📱 支持日期时间选择
• 🔢 支持数量调整和烟瘾等级选择
• 📝 支持备注输入
• 🔄 全局可复用（已配置 easycom 自动导入）

使用方法

方式一：easycom 自动导入（推荐）

无需手动导入，直接在模板中使用即可：

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

方式二：手动导入（可选）

<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	提交表单时触发，返回表单数据

提交数据格式

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

示例场景

场景1：记录抽烟

<button @tap="recordSmoke">记录抽烟</button>

<smoke-record-dialog 
  v-model:show="showDialog" 
  type="smoke"
  @submit="handleSmokeSubmit"
/>

场景2：记录忍住

<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. 提交后弹框会自动关闭