feat: draft
This commit is contained in:
skytek_xinliang
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<template #main>
|
||||
<div class="mb-4 text-center">
|
||||
<h1 class="text-h5 font-weight-black text-primary">線上健康自評</h1>
|
||||
<p class="text-caption text-grey">只需 3 分鐘，評估您的運動風險與健康狀態</p>
|
||||
</div>
|
||||
|
||||
<!-- 進度指示器 -->
|
||||
<v-row class="mb-6 justify-center" dense>
|
||||
<v-col v-for="(stepName, idx) in stepNames" :key="idx" class="text-center" cols="3">
|
||||
<v-avatar
|
||||
class="text-white font-weight-bold mb-1 elevation-1"
|
||||
:color="currentStep > idx ? 'primary' : currentStep === idx ? 'secondary' : 'grey-lighten-2'"
|
||||
size="28"
|
||||
>
|
||||
<v-icon v-if="currentStep > idx" icon="mdi-check" size="14" />
|
||||
<span v-else class="text-caption">{{ idx + 1 }}</span>
|
||||
</v-avatar>
|
||||
|
||||
<div
|
||||
class="text-caption font-weight-bold"
|
||||
:class="currentStep === idx ? 'text-secondary' : currentStep > idx ? 'text-primary' : 'text-grey'"
|
||||
>
|
||||
{{ stepName }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 步驟內容區 -->
|
||||
<v-card class="rounded-xl elevation-3 border-accent-light mb-6" color="surface">
|
||||
<v-card-text class="pa-5">
|
||||
<!-- 步驟 1：基本資料 -->
|
||||
<div v-if="currentStep === 0">
|
||||
<h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
|
||||
<v-icon class="mr-2" color="secondary" icon="mdi-account-circle" />
|
||||
基本資料確認
|
||||
</h2>
|
||||
|
||||
<v-row dense>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="profileForm.name"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
label="姓名"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-select
|
||||
v-model="profileForm.gender"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
:items="['男', '女']"
|
||||
label="性別"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="profileForm.birthday"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
label="生日"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model.number="profileForm.height"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
label="身高 (公分)"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model.number="profileForm.weight"
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
hide-details="auto"
|
||||
label="體重 (公斤)"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-checkbox
|
||||
v-model="profileForm.consent"
|
||||
class="mt-2 text-caption"
|
||||
color="primary"
|
||||
density="compact"
|
||||
hide-details
|
||||
label="我已閱讀並同意個資授權條款"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 步驟 2：活動量與自評 -->
|
||||
<div v-if="currentStep === 1">
|
||||
<h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
|
||||
<v-icon class="mr-2" color="secondary" icon="mdi-walk" />
|
||||
活動習慣與想要改善的能力
|
||||
</h2>
|
||||
|
||||
<p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">1. 最近 7 天，您每週進行大運動幾次？</p>
|
||||
|
||||
<v-radio-group v-model="assessmentForm.exerciseFrequency" class="mb-4" color="primary">
|
||||
<v-card
|
||||
class="mb-2 rounded-lg pa-1 cursor-pointer transition-card"
|
||||
:color="assessmentForm.exerciseFrequency === '0' ? 'secondary' : 'grey-lighten-1'"
|
||||
variant="outlined"
|
||||
@click="assessmentForm.exerciseFrequency = '0'"
|
||||
>
|
||||
<v-radio label="0 次，幾乎沒有固定運動" value="0" />
|
||||
</v-card>
|
||||
|
||||
<v-card
|
||||
class="mb-2 rounded-lg pa-1 cursor-pointer transition-card"
|
||||
:color="assessmentForm.exerciseFrequency === '1-2' ? 'secondary' : 'grey-lighten-1'"
|
||||
variant="outlined"
|
||||
@click="assessmentForm.exerciseFrequency = '1-2'"
|
||||
>
|
||||
<v-radio label="1-2 次，偶爾散步或伸展" value="1-2" />
|
||||
</v-card>
|
||||
|
||||
<v-card
|
||||
class="rounded-lg pa-1 cursor-pointer transition-card"
|
||||
:color="assessmentForm.exerciseFrequency === '3+' ? 'secondary' : 'grey-lighten-1'"
|
||||
variant="outlined"
|
||||
@click="assessmentForm.exerciseFrequency = '3+'"
|
||||
>
|
||||
<v-radio label="3 次以上，有固定運動習慣" value="3+" />
|
||||
</v-card>
|
||||
</v-radio-group>
|
||||
|
||||
<p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">2. 您目前最想改善的身體功能？ (可複選)</p>
|
||||
|
||||
<v-row dense>
|
||||
<v-col v-for="imp in improvementsOptions" :key="imp" cols="6">
|
||||
<v-card
|
||||
class="rounded-lg py-2 px-1 text-center cursor-pointer transition-card"
|
||||
:class="{ 'bg-teal-lighten-5': assessmentForm.wantedImprovements.includes(imp) }"
|
||||
:color="assessmentForm.wantedImprovements.includes(imp) ? 'primary' : 'grey-lighten-1'"
|
||||
variant="outlined"
|
||||
@click="toggleImprovement(imp)"
|
||||
>
|
||||
<v-icon class="mb-1" :color="assessmentForm.wantedImprovements.includes(imp) ? 'primary' : 'grey'" :icon="getImprovementIcon(imp)" />
|
||||
<div class="text-caption font-weight-bold">{{ imp }}</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- 步驟 3：身體狀況自評 -->
|
||||
<div v-if="currentStep === 2">
|
||||
<h2 class="text-subtitle-1 font-weight-bold text-primary mb-4 d-flex align-center">
|
||||
<v-icon class="mr-2" color="secondary" icon="mdi-alert-decagram" />
|
||||
身體限制與慢性病史
|
||||
</h2>
|
||||
|
||||
<p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">1. 過去一年是否有過跌倒史？</p>
|
||||
|
||||
<v-radio-group v-model="assessmentForm.hasFalls" class="mb-4" color="primary" inline>
|
||||
<v-radio label="無跌倒" :value="false" />
|
||||
<v-radio label="有跌倒過" :value="true" />
|
||||
</v-radio-group>
|
||||
|
||||
<p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">2. 目前身體關節疼痛狀況？</p>
|
||||
|
||||
<v-select
|
||||
v-model="assessmentForm.painLevel"
|
||||
class="mb-4"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
:items="['無', '輕微', '中度', '重度']"
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<p class="text-body-2 font-weight-bold text-grey-darken-2 mb-2">3. 您有哪些慢性疾病？ (可複選)</p>
|
||||
|
||||
<v-row class="mb-4" dense>
|
||||
<v-col v-for="disease in diseaseOptions" :key="disease" cols="6">
|
||||
<v-checkbox
|
||||
v-model="assessmentForm.chronicDiseases"
|
||||
color="primary"
|
||||
density="compact"
|
||||
hide-details
|
||||
:label="disease"
|
||||
:value="disease"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field
|
||||
v-model="medicationInput"
|
||||
append-inner-icon="mdi-plus"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
label="用藥提醒設定 (例如：每日晨間降血壓藥)"
|
||||
placeholder="請輸入常用藥物或提醒"
|
||||
variant="outlined"
|
||||
@click:append-inner="addMedication"
|
||||
@keyup.enter="addMedication"
|
||||
/>
|
||||
|
||||
<div v-if="assessmentForm.medicationReminders.length > 0" class="d-flex flex-wrap gap-2 mt-2">
|
||||
<v-chip
|
||||
v-for="(med, idx) in assessmentForm.medicationReminders"
|
||||
:key="idx"
|
||||
closable
|
||||
color="secondary"
|
||||
size="small"
|
||||
@click:close="removeMedication(idx)"
|
||||
>
|
||||
{{ med }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步驟 4：自評結果 -->
|
||||
<div v-if="currentStep === 3" class="text-center py-4">
|
||||
<v-avatar class="elevation-2 mb-4" :color="getResultColor(resultLevel)" size="72">
|
||||
<v-icon color="white" :icon="getResultIcon(resultLevel)" size="40" />
|
||||
</v-avatar>
|
||||
|
||||
<h2 class="text-h5 font-weight-bold mb-1" :class="`text-${getResultColor(resultLevel)}`">
|
||||
自評分級：{{ resultLevel }}
|
||||
</h2>
|
||||
|
||||
<p class="text-subtitle-2 text-grey-darken-2 mb-6">您的健康自評報告已產生</p>
|
||||
|
||||
<v-card class="rounded-xl pa-4 text-left mb-6" color="grey-lighten-4" variant="flat">
|
||||
<div class="font-weight-bold mb-2 text-primary d-flex align-center">
|
||||
<v-icon class="mr-1" icon="mdi-text-box-search" />
|
||||
系統評估建議：
|
||||
</div>
|
||||
|
||||
<p v-if="resultLevel === '低風險'" class="text-body-2 text-grey-darken-3 mb-2">
|
||||
您的身體功能與日常活動習慣良好。建議您每週繼續保持 3 次以上的運動，並可以預約普測活動以獲得精準的五維健康指標與運動處方。
|
||||
</p>
|
||||
|
||||
<p v-else-if="resultLevel === '需追蹤'" class="text-body-2 text-grey-darken-3 mb-2">
|
||||
由於您運動頻率偏低，或是過去有跌倒史，建議您可以前往運動中心預約專業普測，由現場教練為您提供適合的肌力與平衡回測建議。
|
||||
</p>
|
||||
|
||||
<p v-else class="text-body-2 text-grey-darken-3 mb-2">
|
||||
檢測到您有多項慢性病或中重度疼痛，運動時請特別留意。建議您先向您的家庭醫師或社區據點諮詢，並在運動普測現場合對您的健康狀態，以確保運動安全。
|
||||
</p>
|
||||
|
||||
<div class="font-weight-bold text-caption text-secondary mt-3">
|
||||
* 禁忌提醒：若收縮壓 > 160mmHg、有關節強烈疼痛或暈眩時，請立即暫停所有體能檢測與訓練！
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 表單操作按鈕 -->
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="px-5 py-4 d-flex justify-between">
|
||||
<v-btn
|
||||
v-if="currentStep > 0 && currentStep < 3"
|
||||
class="rounded-lg px-4"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
@click="currentStep--"
|
||||
>
|
||||
上一步
|
||||
</v-btn>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
v-if="currentStep < 2"
|
||||
class="rounded-lg px-6"
|
||||
color="primary"
|
||||
:disabled="currentStep === 0 && !profileForm.consent"
|
||||
variant="flat"
|
||||
@click="currentStep++"
|
||||
>
|
||||
下一步
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-else-if="currentStep === 2"
|
||||
class="rounded-lg px-6 text-white"
|
||||
color="secondary"
|
||||
variant="flat"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
看我的健康力分級
|
||||
</v-btn>
|
||||
|
||||
<div v-else class="w-100 d-flex gap-2">
|
||||
<v-btn
|
||||
block
|
||||
class="rounded-lg py-2"
|
||||
color="primary"
|
||||
to="/appointment"
|
||||
variant="flat"
|
||||
>
|
||||
立即預約普測
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<!-- 返回按鈕 (結果頁專用) -->
|
||||
<v-btn
|
||||
v-if="currentStep === 3"
|
||||
block
|
||||
class="rounded-lg py-2"
|
||||
color="primary"
|
||||
to="/"
|
||||
variant="outlined"
|
||||
>
|
||||
回首頁健康儀表板
|
||||
</v-btn>
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import Layout from '@/components/layout/DefaultLayout.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const store = useAppStore()
|
||||
const currentStep = ref(0)
|
||||
const stepNames = ['基本資料', '功能狀態', '健康限制', '自評結果']
|
||||
|
||||
const profileForm = reactive({
|
||||
name: store.userProfile.name,
|
||||
birthday: store.userProfile.birthday,
|
||||
gender: store.userProfile.gender,
|
||||
height: store.userProfile.height,
|
||||
weight: store.userProfile.weight,
|
||||
consent: store.userProfile.consent,
|
||||
})
|
||||
|
||||
const assessmentForm = reactive({
|
||||
exerciseFrequency: store.selfAssessment.exerciseFrequency,
|
||||
wantedImprovements: [...store.selfAssessment.wantedImprovements],
|
||||
hasFalls: store.selfAssessment.hasFalls,
|
||||
painLevel: store.selfAssessment.painLevel,
|
||||
chronicDiseases: [...store.selfAssessment.chronicDiseases],
|
||||
medicationReminders: [...store.selfAssessment.medicationReminders],
|
||||
})
|
||||
|
||||
const medicationInput = ref('')
|
||||
const resultLevel = ref(store.selfAssessment.scoreLevel)
|
||||
|
||||
const improvementsOptions = ['肌力', '平衡', '心肺', '柔軟度', '敏捷', '體脂/BMI']
|
||||
const diseaseOptions = ['高血壓', '糖尿病', '高血脂', '心臟病', '關節退化', '骨質疏鬆']
|
||||
|
||||
function getImprovementIcon (imp: string) {
|
||||
switch (imp) {
|
||||
case '肌力': { return 'mdi-arm-flex'
|
||||
}
|
||||
case '平衡': { return 'mdi-scale-balance'
|
||||
}
|
||||
case '心肺': { return 'mdi-heart-pulse'
|
||||
}
|
||||
case '柔軟度': { return 'mdi-human-stretching'
|
||||
}
|
||||
case '敏捷': { return 'mdi-run-fast'
|
||||
}
|
||||
case '體脂/BMI': { return 'mdi-calculator'
|
||||
}
|
||||
default: { return 'mdi-help-circle'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleImprovement (imp: string) {
|
||||
const index = assessmentForm.wantedImprovements.indexOf(imp)
|
||||
if (index === -1) {
|
||||
assessmentForm.wantedImprovements.push(imp)
|
||||
} else {
|
||||
assessmentForm.wantedImprovements.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
function addMedication () {
|
||||
if (medicationInput.value.trim()) {
|
||||
assessmentForm.medicationReminders.push(medicationInput.value.trim())
|
||||
medicationInput.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function removeMedication (index: number) {
|
||||
assessmentForm.medicationReminders.splice(index, 1)
|
||||
}
|
||||
|
||||
function handleSubmit () {
|
||||
// 儲存至 store
|
||||
store.updateProfile({
|
||||
name: profileForm.name,
|
||||
birthday: profileForm.birthday,
|
||||
gender: profileForm.gender,
|
||||
height: profileForm.height,
|
||||
weight: profileForm.weight,
|
||||
consent: profileForm.consent,
|
||||
})
|
||||
|
||||
store.submitSelfAssessment({
|
||||
exerciseFrequency: assessmentForm.exerciseFrequency,
|
||||
wantedImprovements: assessmentForm.wantedImprovements,
|
||||
hasFalls: assessmentForm.hasFalls,
|
||||
painLevel: assessmentForm.painLevel,
|
||||
chronicDiseases: assessmentForm.chronicDiseases,
|
||||
medicationReminders: assessmentForm.medicationReminders,
|
||||
})
|
||||
|
||||
// 取得計算後的結果
|
||||
resultLevel.value = store.selfAssessment.scoreLevel
|
||||
currentStep.value = 3
|
||||
}
|
||||
|
||||
function getResultColor (lvl: string) {
|
||||
if (lvl === '低風險') return 'success'
|
||||
if (lvl === '需追蹤') return 'warning'
|
||||
return 'error'
|
||||
}
|
||||
|
||||
function getResultIcon (lvl: string) {
|
||||
if (lvl === '低風險') return 'mdi-check-decagram'
|
||||
if (lvl === '需追蹤') return 'mdi-alert-decagram'
|
||||
return 'mdi-alert-octagon'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.transition-card {
|
||||
transition: all 0.25s ease;
|
||||
border-width: 1.5px;
|
||||
}
|
||||
|
||||
.transition-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user