StudentHealthData.vue
4.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<el-drawer title="学员健康资料" v-model="drawerVisible" size="600px">
<div v-loading="loading" class="health-data-container">
<el-descriptions :column="2" border v-if="healthData">
<el-descriptions-item label="学员姓名" :span="2">
{{ healthData.name || '-' }}
</el-descriptions-item>
<el-descriptions-item label="性别">
{{ healthData.genderDesc || (healthData.gender === 1 ? '男' : '女') }}
</el-descriptions-item>
<el-descriptions-item label="生日">
{{ healthData.birthday || '-' }}
</el-descriptions-item>
<el-descriptions-item label="身高">
{{ healthData.height ? `${healthData.height} cm` : '-' }}
</el-descriptions-item>
<el-descriptions-item label="当前体重">
{{ healthData.weight ? `${healthData.weight} kg` : '-' }}
</el-descriptions-item>
<el-descriptions-item label="目标体重" :span="2">
{{ healthData.targetWeight ? `${healthData.targetWeight} kg` : '-' }}
</el-descriptions-item>
<el-descriptions-item label="健身基础">
{{ healthData.hasFitnessFoundationDesc || (healthData.hasFitnessFoundation === 1 ? '有' : '无') }}
</el-descriptions-item>
<el-descriptions-item label="训练频次">
{{ healthData.acceptableTrainingFrequency ? `${healthData.acceptableTrainingFrequency} 次/周` : '-' }}
</el-descriptions-item>
<el-descriptions-item label="训练目标" :span="2">
{{ healthData.trainingGoalDesc || '-' }}
</el-descriptions-item>
<el-descriptions-item label="目标锻炼部位" :span="2">
<template v-if="healthData.targetMuscleParts && healthData.targetMuscleParts.length">
<el-tag
v-for="(part, index) in healthData.targetMuscleParts"
:key="index"
class="tag-item"
>
{{ part }}
</el-tag>
</template>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="身体疼痛部位" :span="2">
<template v-if="healthData.painAreas && healthData.painAreas.length">
<el-tag
v-for="(area, index) in healthData.painAreas"
:key="index"
type="danger"
class="tag-item"
>
{{ area === '0' ? '无' : area }}
</el-tag>
</template>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="是否存在疾病">
<el-tag :type="healthData.hasDisease ? 'danger' : 'success'">
{{ healthData.hasDisease ? '是' : '否' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="是否在服药">
<el-tag :type="healthData.isTakingMedication ? 'warning' : 'success'">
{{ healthData.isTakingMedication ? '是' : '否' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="日常健身场景" :span="2">
{{ healthData.fitnessSceneDesc || '-' }}
</el-descriptions-item>
<el-descriptions-item label="训练奖励方式" :span="2">
{{ healthData.rewardMethodDesc || '-' }}
</el-descriptions-item>
</el-descriptions>
<el-empty v-else-if="!loading" description="暂无健康资料" />
</div>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import * as StudentApi from '@/api/store/student'
const drawerVisible = ref(false)
const loading = ref(false)
const healthData = ref(null)
/** 打开抽屉并加载数据 */
const open = async (userId) => {
drawerVisible.value = true
loading.value = true
healthData.value = null
try {
const res = await StudentApi.getStudentHealthData(userId)
healthData.value = res
} finally {
loading.value = false
}
}
defineExpose({ open })
</script>
<style scoped>
.health-data-container {
padding: 8px;
}
.tag-item {
margin-right: 6px;
margin-bottom: 4px;
}
</style>