116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<template>
|
|
<el-form :model="healthStore.currentHealth" class="health-form card-item">
|
|
<el-form-item>
|
|
<template #label>
|
|
<i class="fa-regular fa-calendar-check"></i>
|
|
<span>日期</span>
|
|
</template>
|
|
<el-date-picker v-model="healthStore.currentHealth.date"
|
|
type="date" :disabled="true"
|
|
style="width: 150px;"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<template #label>
|
|
<i class="fa-solid fa-person-running"></i>
|
|
<span>运动项目</span>
|
|
</template>
|
|
|
|
<el-select v-model="healthStore.currentHealth.sportProject"
|
|
placeholder="请选择运行项目" clearable style="width: 150px;">
|
|
<el-option v-for="(item, index) in projectList" :key="index"
|
|
:label="item" :value="item"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<template #label>
|
|
<i class="fa-solid fa-clock"></i>
|
|
<span>运动时长</span>
|
|
</template>
|
|
|
|
<el-input-number v-model="healthStore.currentHealth.sportDuration"
|
|
:min="0" :max="300" :precision="0"
|
|
style="width: 120px;"></el-input-number>
|
|
|
|
<span style="margin-left: 5px;">分钟</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<template #label>
|
|
<i class="fa-solid fa-weight-scale"></i>
|
|
<span>体重</span>
|
|
</template>
|
|
|
|
<el-input-number v-model="healthStore.currentHealth.weight"
|
|
:min="0" :max="200"
|
|
style="width: 120px;"></el-input-number>
|
|
|
|
<span style="margin-left: 5px;">千克</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item style="align-self: center;">
|
|
<el-button type="primary" @click="onSubmit"
|
|
:disabled="isBeforeDate(formatDate(new Date()), healthStore.selectDate)">
|
|
确认
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useHealthStore } from '@/store/health'
|
|
import { formatDate, isBeforeDate } from 'vue3-common/utils/dateUtil'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const healthStore = useHealthStore()
|
|
|
|
const projectList = ['羽毛球', '乒乓球', '跑步', '其他']
|
|
|
|
const onSubmit = async () => {
|
|
const { sportProject, sportDuration, weight } = healthStore.currentHealth
|
|
if (sportProject === '' && sportDuration === 0 && weight === 0) {
|
|
return
|
|
}
|
|
|
|
if (sportDuration) {
|
|
if (!sportProject) {
|
|
ElMessage.error('请选择运动项目')
|
|
return
|
|
}
|
|
}
|
|
|
|
await healthStore.updateHealthDay()
|
|
healthStore.currentHealth = healthStore.getHealthDay(healthStore.selectDate)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.health-form {
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.el-form-item {
|
|
justify-content: space-between;
|
|
|
|
.el-form-item__label {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
i {
|
|
font-size: 1.2rem;
|
|
color: #DE3163;
|
|
}
|
|
}
|
|
|
|
.el-form-item__content {
|
|
flex: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|