141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<template>
|
||
<wd-popup
|
||
v-model="recordStore.showTempPopup"
|
||
position="bottom"
|
||
:safe-area-inset-bottom="true"
|
||
:close-on-click-modal="true"
|
||
custom-style="border-radius: 32rpx 32rpx 0 0; padding: 40rpx 32rpx"
|
||
@close="handeClosePopup"
|
||
>
|
||
<view class="mb-5 text-center text-base text-gray-700 font-semibold">
|
||
🌡️ 记录体温
|
||
</view>
|
||
|
||
<wd-form
|
||
ref="form"
|
||
:model="recordStore.tempForm"
|
||
layout="horizontal"
|
||
title-width="80"
|
||
size="large"
|
||
border
|
||
>
|
||
<!-- 体温值 -->
|
||
<wd-form-item title="体温" prop="value">
|
||
<view class="flex items-center gap-2">
|
||
<wd-input-number
|
||
v-model="recordStore.tempForm.value"
|
||
:min="35"
|
||
:max="42"
|
||
:step="0.1"
|
||
:precision="1"
|
||
/>
|
||
<text class="shrink-0 text-sm text-gray-400">℃</text>
|
||
</view>
|
||
</wd-form-item>
|
||
|
||
<!-- 测量部位 -->
|
||
<wd-form-item title="部位" prop="location">
|
||
<wd-radio-group v-model="recordStore.tempForm.location" type="button">
|
||
<wd-radio
|
||
v-for="item in locationColumns"
|
||
:key="item.value"
|
||
:value="item.value"
|
||
>
|
||
{{ item.label }}
|
||
</wd-radio>
|
||
</wd-radio-group>
|
||
</wd-form-item>
|
||
|
||
<!-- 记录时间 -->
|
||
<wd-form-item
|
||
title="时间"
|
||
prop="time"
|
||
is-link
|
||
:value="formatDateTime(recordStore.tempForm.time)"
|
||
placeholder="请选择记录时间"
|
||
@click="showTimePicker = true"
|
||
/>
|
||
|
||
<!-- 备注 -->
|
||
<wd-form-item title="备注" prop="note">
|
||
<wd-input
|
||
v-model="recordStore.tempForm.note"
|
||
:maxlength="20"
|
||
show-word-limit
|
||
placeholder="请输入备注信息"
|
||
/>
|
||
</wd-form-item>
|
||
</wd-form>
|
||
|
||
<view class="flex w-full items-center justify-evenly">
|
||
<wd-button type="info" @click="cancelTemp">
|
||
取消
|
||
</wd-button>
|
||
<wd-button type="primary" @click="saveTemp">
|
||
保存
|
||
</wd-button>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<wd-datetime-picker
|
||
v-model="recordStore.tempForm.time"
|
||
v-model:visible="showTimePicker"
|
||
:max-date="Date.now()"
|
||
placeholder="请选择记录时间"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRecordStore } from '@/store/record'
|
||
import { formatDateTime } from '@/utils'
|
||
import { ref } from 'vue'
|
||
|
||
const showTimePicker = ref(false)
|
||
|
||
const recordStore = useRecordStore()
|
||
|
||
const locationColumns = [
|
||
{ label: '腋下', value: '腋下' },
|
||
{ label: '口腔', value: '口腔' },
|
||
{ label: '耳温', value: '耳温' },
|
||
{ label: '额温', value: '额温' },
|
||
]
|
||
|
||
function handeClosePopup() {
|
||
setTimeout(() => {
|
||
recordStore.showFab = true
|
||
}, 300)
|
||
}
|
||
|
||
function cancelTemp() {
|
||
recordStore.showTempPopup = false
|
||
handeClosePopup()
|
||
}
|
||
|
||
function saveTemp() {
|
||
const { value, location, time } = recordStore.tempForm
|
||
|
||
if (!value) {
|
||
uni.showToast({ title: '请输入体温', icon: 'none' })
|
||
return
|
||
}
|
||
if (value < 35 || value > 42) {
|
||
uni.showToast({ title: '体温范围异常，请确认', icon: 'none' })
|
||
return
|
||
}
|
||
if (!location) {
|
||
uni.showToast({ title: '请选择测量部位', icon: 'none' })
|
||
return
|
||
}
|
||
if (!time) {
|
||
uni.showToast({ title: '请选择记录时间', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
recordStore.submitTemp()
|
||
uni.showToast({ title: '体温记录成功', icon: 'success' })
|
||
|
||
handeClosePopup()
|
||
}
|
||
</script>
|