242 lines
7.7 KiB
Vue
242 lines
7.7 KiB
Vue
<template>
|
||
<div class="manualEntry">
|
||
<div class="manua-container">
|
||
<div class="manualEntry-1">
|
||
<div>
|
||
<div>测量时间</div>
|
||
<div>
|
||
<div>
|
||
<div class="year" @click="openTime(1)">{{ picker.time === '' ? '请选择年月日' : picker.time }}</div>
|
||
<div class="time" @click="openTime(2)">{{ picker.divisionTime === '' ? '请选择时分' : picker.divisionTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>血糖</div>
|
||
<div>
|
||
<div>
|
||
<van-field type="number" placeholder="请输入血糖" v-model="manuaNum" @update:model-value="handleInput" />
|
||
</div>
|
||
<div>mmol/L</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="manualEntry-2">
|
||
<p>空腹血糖标准值：3.9-6.1mmol/L</p>
|
||
<p>餐后2小时血糖标准值：3.9-7.8mmol/L</p>
|
||
</div>
|
||
</div>
|
||
<div class="vaccine-button">
|
||
<div class="button-text" @click="handleSave">保存</div>
|
||
</div>
|
||
<van-popup :show="picker.show" round position="bottom">
|
||
<van-date-picker
|
||
v-if="timeType === 1"
|
||
title="选择日期"
|
||
:maxDate="picker.maxDate"
|
||
@cancel="picker.show = false"
|
||
@confirm="onConfirmPicker"
|
||
/>
|
||
<van-time-picker v-else title="选择时间" @cancel="picker.show = false" @confirm="onDivision" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { fillApi } from './blood';
|
||
import { showSuccessToast, showFailToast } from 'vant';
|
||
import moment from 'moment';
|
||
import { useLoading } from '/@/utils/compUtils';
|
||
import { destroyPage } from '/@/hooks/openPage';
|
||
|
||
const picker = ref({
|
||
show: false,
|
||
time: '',
|
||
divisionTime: '',
|
||
maxDate: new Date(),
|
||
});
|
||
const { loadingSpinner, loadingClose } = useLoading();
|
||
const router = useRouter();
|
||
const manuaNum = ref('');
|
||
const timeType = ref();
|
||
onMounted(() => {
|
||
let today = new Date();
|
||
let year = moment(today).format('YYYY');
|
||
let month = moment(today).format('MM');
|
||
let days = moment(today).format('DD');
|
||
console.log(year, month, days);
|
||
picker.value.maxDate = new Date(year, month, days);
|
||
});
|
||
function onConfirmPicker(e: { selectedValues: any }) {
|
||
let value = e.selectedValues;
|
||
picker.value.time = `${value[0]}-${value[1]}-${value[2]}`;
|
||
picker.value.show = false;
|
||
}
|
||
function onDivision(e: { selectedValues: any }) {
|
||
let value = e.selectedValues;
|
||
picker.value.divisionTime = `${value[0]}:${value[1]}`;
|
||
picker.value.show = false;
|
||
}
|
||
function handleInput(value: number) {
|
||
manuaNum.value = value;
|
||
}
|
||
function handleSave() {
|
||
let { time, divisionTime } = picker.value;
|
||
if (time === '') {
|
||
showFailToast({
|
||
message: '请选择年月日',
|
||
forbidClick: true,
|
||
});
|
||
return false;
|
||
}
|
||
if (divisionTime === '') {
|
||
showFailToast({
|
||
message: '请选择时分',
|
||
forbidClick: true,
|
||
});
|
||
return false;
|
||
}
|
||
if (manuaNum.value === '') {
|
||
showFailToast({
|
||
message: '请输入血糖',
|
||
forbidClick: true,
|
||
});
|
||
return false;
|
||
}
|
||
loadingSpinner();
|
||
fillApi({
|
||
fillValue: manuaNum.value,
|
||
createTime: `${time} ${divisionTime}`,
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
showSuccessToast('保存成功');
|
||
loadingClose();
|
||
try {
|
||
destroyPage();
|
||
} catch {
|
||
router.go(-1);
|
||
}
|
||
} else {
|
||
showFailToast({
|
||
message: res.data.msg,
|
||
forbidClick: true,
|
||
});
|
||
loadingClose();
|
||
}
|
||
});
|
||
}
|
||
function openTime(type: number) {
|
||
timeType.value = type;
|
||
picker.value.show = true;
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@import '../../assets/less/index';
|
||
|
||
.manualEntry {
|
||
width: 100%;
|
||
height: 100vh;
|
||
padding-top: 10px;
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
background-color: @card-gray;
|
||
.manua-container {
|
||
height: calc(100vh - 60px);
|
||
.manualEntry-1 {
|
||
width: 100%;
|
||
padding: 0 15px;
|
||
margin-bottom: 12px;
|
||
box-sizing: border-box;
|
||
background-color: @card-fff;
|
||
|
||
> div {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
> div:first-of-type {
|
||
width: 100px;
|
||
color: #333333;
|
||
height: 50px;
|
||
font-size: 14px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
> div:last-of-type {
|
||
flex: 1;
|
||
width: 0;
|
||
height: 50px;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
|
||
> div {
|
||
color: #333333;
|
||
height: 50px;
|
||
display: flex;
|
||
line-height: 50px;
|
||
font-size: 14px;
|
||
|
||
&:first-of-type {
|
||
flex: 1;
|
||
}
|
||
.time {
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 14px;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
//.arrow:after {
|
||
// position: absolute;
|
||
// right: 0;
|
||
// top: 0;
|
||
// bottom: 0;
|
||
// width: 10px;
|
||
// height: 10px;
|
||
// border-left: 2px solid #b6b6b6;
|
||
// border-top: 2px solid #b6b6b6;
|
||
// transform: rotate(135deg);
|
||
//}
|
||
}
|
||
}
|
||
}
|
||
|
||
.manualEntry-2 {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
|
||
> p {
|
||
width: 100%;
|
||
height: 20px;
|
||
color: #999999;
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
.vaccine-button {
|
||
height: 40px;
|
||
.button-text {
|
||
height: 40px;
|
||
flex: 1;
|
||
.flex-center();
|
||
margin: 0 10%;
|
||
.footerButton();
|
||
}
|
||
}
|
||
}
|
||
</style>
|