nepiedg
379 lines
7.5 KiB
Vue
379 lines
7.5 KiB
Vue
<template>
|
||
<view v-if="show" class="dialog-mask" @tap="handleMaskClick">
|
||
<view class="dialog-container" :class="{ 'dialog-show': showAnimation }" @tap.stop>
|
||
<view class="dialog-header">
|
||
<text class="dialog-title">{{ title }}</text>
|
||
<view class="dialog-close" @tap="close">×</view>
|
||
</view>
|
||
|
||
<view class="dialog-body">
|
||
<view class="form-item">
|
||
<text class="form-label">时间</text>
|
||
<view class="form-input-row">
|
||
<picker mode="date" :value="formData.smoke_time" @change="onDateChange">
|
||
<view class="picker-value">{{ formData.smoke_time }}</view>
|
||
</picker>
|
||
<picker mode="time" :value="formData.smoke_time_only" @change="onTimeChange">
|
||
<view class="picker-value">{{ formData.smoke_time_only }}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item" v-if="type === 'smoke'">
|
||
<text class="form-label">数量</text>
|
||
<view class="form-number">
|
||
<view class="form-number-btn" @tap="decreaseNum">-</view>
|
||
<input class="form-number-input" type="number" v-model.number="formData.num" />
|
||
<view class="form-number-btn" @tap="increaseNum">+</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item" v-if="type === 'smoke'">
|
||
<text class="form-label">烟瘾等级</text>
|
||
<view class="form-level">
|
||
<view
|
||
v-for="level in 5"
|
||
:key="level"
|
||
class="level-item"
|
||
:class="{ 'level-active': formData.level === level }"
|
||
@tap="selectLevel(level)"
|
||
>
|
||
{{ level }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<text class="form-label">备注</text>
|
||
<textarea
|
||
class="form-textarea"
|
||
v-model="formData.remark"
|
||
:placeholder="type === 'smoke' ? '记录抽烟原因...' : '记录抵抗心得...'"
|
||
maxlength="200"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dialog-footer">
|
||
<view class="dialog-btn dialog-btn-cancel" @tap="close">取消</view>
|
||
<view class="dialog-btn dialog-btn-confirm" @tap="submit">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SmokeRecordDialog',
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'smoke' // 'smoke' 或 'resisted'
|
||
},
|
||
initialData: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
showAnimation: false,
|
||
formData: {
|
||
smoke_time: '',
|
||
smoke_time_only: '',
|
||
smoke_at: '',
|
||
remark: '',
|
||
level: 2,
|
||
num: 1
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
title() {
|
||
return this.type === 'smoke' ? '记录抽烟' : '想抽忍住了'
|
||
}
|
||
},
|
||
watch: {
|
||
show(newVal) {
|
||
if (newVal) {
|
||
this.initFormData()
|
||
setTimeout(() => {
|
||
this.showAnimation = true
|
||
}, 50)
|
||
} else {
|
||
this.showAnimation = false
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
initFormData() {
|
||
// 如果有初始数据（编辑模式），使用初始数据
|
||
if (this.initialData) {
|
||
this.formData = {
|
||
smoke_time: this.initialData.smoke_time || '',
|
||
smoke_time_only: this.initialData.smoke_time_only || '',
|
||
smoke_at: this.initialData.smoke_at || '',
|
||
remark: this.initialData.remark || '',
|
||
level: this.initialData.level || 2,
|
||
num: this.initialData.num || 1
|
||
}
|
||
} else {
|
||
// 新建模式，使用当前时间
|
||
const now = new Date()
|
||
const dateStr = now.toISOString().split('T')[0]
|
||
const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||
const datetimeStr = `${dateStr} ${timeStr}:00`
|
||
|
||
this.formData = {
|
||
smoke_time: dateStr,
|
||
smoke_time_only: timeStr,
|
||
smoke_at: datetimeStr,
|
||
remark: '',
|
||
level: 2,
|
||
num: this.type === 'smoke' ? 1 : 0
|
||
}
|
||
}
|
||
},
|
||
handleMaskClick() {
|
||
this.close()
|
||
},
|
||
close() {
|
||
this.showAnimation = false
|
||
setTimeout(() => {
|
||
this.$emit('update:show', false)
|
||
}, 300)
|
||
},
|
||
onDateChange(e) {
|
||
this.formData.smoke_time = e.detail.value
|
||
this.updateSmokeAt()
|
||
},
|
||
onTimeChange(e) {
|
||
this.formData.smoke_time_only = e.detail.value
|
||
this.updateSmokeAt()
|
||
},
|
||
updateSmokeAt() {
|
||
this.formData.smoke_at = `${this.formData.smoke_time} ${this.formData.smoke_time_only}:00`
|
||
},
|
||
decreaseNum() {
|
||
if (this.formData.num > 1) {
|
||
this.formData.num--
|
||
}
|
||
},
|
||
increaseNum() {
|
||
this.formData.num++
|
||
},
|
||
selectLevel(level) {
|
||
this.formData.level = level
|
||
},
|
||
submit() {
|
||
const submitData = {
|
||
smoke_time: this.formData.smoke_time,
|
||
smoke_at: this.formData.smoke_at,
|
||
remark: this.formData.remark,
|
||
level: this.type === 'smoke' ? this.formData.level : 2,
|
||
num: this.type === 'smoke' ? this.formData.num : 0
|
||
}
|
||
|
||
this.$emit('submit', submitData)
|
||
this.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.dialog-container {
|
||
width: 100%;
|
||
max-height: 80vh;
|
||
background-color: #FFFFFF;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
overflow: hidden;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease-out;
|
||
}
|
||
|
||
.dialog-show {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.dialog-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 32rpx;
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
}
|
||
|
||
.dialog-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.dialog-close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48rpx;
|
||
color: #9CA3AF;
|
||
line-height: 1;
|
||
}
|
||
|
||
.dialog-body {
|
||
padding: 32rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.form-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #6B7280;
|
||
margin-bottom: 16rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input-row {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.picker-value {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background-color: #F9FAFB;
|
||
border-radius: 16rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #1F2937;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.form-number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.form-number-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-color: #F9FAFB;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.form-number-input {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background-color: #F9FAFB;
|
||
border-radius: 16rpx;
|
||
padding: 0 24rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #1F2937;
|
||
border: 2rpx solid #E5E7EB;
|
||
}
|
||
|
||
.form-level {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.level-item {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background-color: #F9FAFB;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #6B7280;
|
||
border: 2rpx solid #E5E7EB;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.level-active {
|
||
background-color: #10B981;
|
||
color: #FFFFFF;
|
||
border-color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
background-color: #F9FAFB;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
font-size: 28rpx;
|
||
color: #1F2937;
|
||
border: 2rpx solid #E5E7EB;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dialog-footer {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
padding: 32rpx;
|
||
border-top: 2rpx solid #F3F4F6;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.dialog-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dialog-btn-cancel {
|
||
background-color: #F3F4F6;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.dialog-btn-confirm {
|
||
background-color: #10B981;
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|