skytek_xinliang
825 lines
25 KiB
Vue
825 lines
25 KiB
Vue
<template>
|
||
<Layout>
|
||
<template #main>
|
||
<v-card class="mb-6" variant="flat">
|
||
<v-card-title class="text-primary">線上健康自評</v-card-title>
|
||
|
||
<v-card-subtitle class="text-grey-darken-3">
|
||
只需 3 分鐘，評估您的運動風險與健康狀態
|
||
</v-card-subtitle>
|
||
</v-card>
|
||
|
||
<!-- 進度指示器 -->
|
||
<v-row class="mb-6 justify-center">
|
||
<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-title-small">{{ idx + 1 }}</span>
|
||
</v-avatar>
|
||
|
||
<div
|
||
class="text-title-small 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 mb-6" color="surface">
|
||
<v-card-text class="py-2">
|
||
<v-alert
|
||
v-if="errorMessage"
|
||
class="mb-4"
|
||
density="compact"
|
||
type="error"
|
||
variant="tonal"
|
||
>
|
||
{{ errorMessage }}
|
||
</v-alert>
|
||
|
||
<!-- 步驟 1：基本資料 -->
|
||
<div v-if="currentStep === 0">
|
||
<h2
|
||
class="text-title-medium 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>
|
||
<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-text-field
|
||
v-model="profileForm.phone"
|
||
class="mb-3"
|
||
color="primary"
|
||
density="comfortable"
|
||
hide-details="auto"
|
||
label="手機號碼"
|
||
type="tel"
|
||
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="genderOptions"
|
||
label="性別"
|
||
variant="outlined"
|
||
/>
|
||
</v-col>
|
||
|
||
<v-col cols="12" sm="6">
|
||
<v-date-input
|
||
v-model="birthdayDate"
|
||
class="mb-3"
|
||
color="primary"
|
||
density="comfortable"
|
||
hide-details="auto"
|
||
label="生日"
|
||
prepend-icon=""
|
||
prepend-inner-icon="mdi-calendar"
|
||
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-col cols="12" sm="6">
|
||
<v-text-field
|
||
v-model="profileForm.email"
|
||
class="mb-3"
|
||
color="primary"
|
||
density="comfortable"
|
||
hide-details="auto"
|
||
label="Email（選填）"
|
||
type="email"
|
||
variant="outlined"
|
||
/>
|
||
</v-col>
|
||
|
||
<v-col cols="12" sm="6">
|
||
<v-text-field
|
||
v-model="profileForm.emergencyContact"
|
||
class="mb-3"
|
||
color="primary"
|
||
density="comfortable"
|
||
hide-details="auto"
|
||
label="緊急聯絡人（選填）"
|
||
variant="outlined"
|
||
/>
|
||
</v-col>
|
||
|
||
<v-col cols="12" sm="6">
|
||
<v-text-field
|
||
v-model="profileForm.emergencyPhone"
|
||
class="mb-3"
|
||
color="primary"
|
||
density="comfortable"
|
||
hide-details="auto"
|
||
label="緊急聯絡電話（選填）"
|
||
type="tel"
|
||
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-title-medium 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-medium 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 === 'none'
|
||
? 'secondary'
|
||
: 'grey-lighten-1'
|
||
"
|
||
variant="outlined"
|
||
@click="assessmentForm.exerciseFrequency = 'none'"
|
||
>
|
||
<v-radio label="0 次，幾乎沒有固定運動" value="none" />
|
||
</v-card>
|
||
|
||
<v-card
|
||
class="mb-2 rounded-lg pa-1 cursor-pointer transition-card"
|
||
:color="
|
||
assessmentForm.exerciseFrequency === 'oneToTwo'
|
||
? 'secondary'
|
||
: 'grey-lighten-1'
|
||
"
|
||
variant="outlined"
|
||
@click="assessmentForm.exerciseFrequency = 'oneToTwo'"
|
||
>
|
||
<v-radio label="1-2 次，偶爾散步或伸展" value="oneToTwo" />
|
||
</v-card>
|
||
|
||
<v-card
|
||
class="rounded-lg pa-1 cursor-pointer transition-card"
|
||
:color="
|
||
assessmentForm.exerciseFrequency === 'threeOrMore'
|
||
? 'secondary'
|
||
: 'grey-lighten-1'
|
||
"
|
||
variant="outlined"
|
||
@click="assessmentForm.exerciseFrequency = 'threeOrMore'"
|
||
>
|
||
<v-radio label="3 次以上，有固定運動習慣" value="threeOrMore" />
|
||
</v-card>
|
||
</v-radio-group>
|
||
|
||
<p
|
||
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
|
||
>
|
||
2. 您目前最想改善的身體功能？ (可複選)
|
||
</p>
|
||
|
||
<v-row>
|
||
<v-col
|
||
v-for="improvement in improvementsOptions"
|
||
:key="improvement.value"
|
||
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(
|
||
improvement.value,
|
||
),
|
||
}"
|
||
:color="
|
||
assessmentForm.wantedImprovements.includes(
|
||
improvement.value,
|
||
)
|
||
? 'primary'
|
||
: 'grey-lighten-1'
|
||
"
|
||
variant="outlined"
|
||
@click="toggleImprovement(improvement.value)"
|
||
>
|
||
<v-icon
|
||
class="mb-1"
|
||
:color="
|
||
assessmentForm.wantedImprovements.includes(
|
||
improvement.value,
|
||
)
|
||
? 'primary'
|
||
: 'grey'
|
||
"
|
||
:icon="improvement.icon"
|
||
/>
|
||
|
||
<div class="text-title-large font-weight-bold">
|
||
{{ improvement.title }}
|
||
</div>
|
||
</v-card>
|
||
</v-col>
|
||
</v-row>
|
||
</div>
|
||
|
||
<!-- 步驟 3：身體狀況自評 -->
|
||
<div v-if="currentStep === 2">
|
||
<h2
|
||
class="text-title-medium 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-medium 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-medium 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="painOptions"
|
||
variant="outlined"
|
||
/>
|
||
|
||
<p
|
||
class="text-body-medium font-weight-bold text-grey-darken-2 mb-2"
|
||
>
|
||
3. 您有哪些慢性疾病？ (可複選)
|
||
</p>
|
||
|
||
<v-row class="mb-4">
|
||
<v-col
|
||
v-for="disease in diseaseOptions"
|
||
:key="disease.value"
|
||
cols="6"
|
||
>
|
||
<v-checkbox
|
||
v-model="assessmentForm.chronicDiseases"
|
||
color="primary"
|
||
density="compact"
|
||
hide-details
|
||
:label="disease.title"
|
||
:value="disease.value"
|
||
/>
|
||
</v-col>
|
||
</v-row>
|
||
</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-title-large font-weight-bold mb-1"
|
||
:class="`text-${getResultColor(resultLevel)}`"
|
||
>
|
||
暫存自評分級：{{ getRiskLabel(resultLevel) }}
|
||
</h2>
|
||
|
||
<p class="text-title-small 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 === 'low'"
|
||
class="text-body-medium text-grey-darken-3 mb-2"
|
||
>
|
||
您的身體功能與日常活動習慣良好。建議您每週繼續保持 3
|
||
次以上的運動，並可以預約普測活動以獲得精準的五維健康指標與運動處方。
|
||
</p>
|
||
|
||
<p
|
||
v-else-if="resultLevel === 'followUp'"
|
||
class="text-body-medium text-grey-darken-3 mb-2"
|
||
>
|
||
由於您運動頻率偏低，或是過去有跌倒史，建議您可以前往運動中心預約專業普測，由現場教練為您提供適合的肌力與平衡回測建議。
|
||
</p>
|
||
|
||
<p v-else class="text-body-medium text-grey-darken-3 mb-2">
|
||
檢測到您有多項慢性病或中重度疼痛，運動時請特別留意。建議您先向您的家庭醫師或社區據點諮詢，並在運動普測現場合對您的健康狀態，以確保運動安全。
|
||
</p>
|
||
|
||
<div
|
||
class="font-weight-bold text-body-medium 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="goToPreviousStep"
|
||
>
|
||
上一步
|
||
</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="goToNextStep"
|
||
>
|
||
下一步
|
||
</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"
|
||
:loading="appointmentLoading"
|
||
variant="flat"
|
||
@click="handleAppointment"
|
||
>
|
||
立即預約
|
||
</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 { computed, onMounted, reactive, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import type {
|
||
ChronicDisease,
|
||
ExerciseFrequency,
|
||
Gender,
|
||
PainLevel,
|
||
RiskLevel,
|
||
SelfAssessmentRequest,
|
||
WantedImprovement,
|
||
} from "@/api/types";
|
||
import { CONSENT_VERSION } from "@/api/types";
|
||
import Layout from "@/components/layout/DefaultLayout.vue";
|
||
import {
|
||
readGuestSelfAssessmentDraft,
|
||
saveGuestSelfAssessmentDraft,
|
||
type GuestSelfAssessmentDraft,
|
||
} from "@/utils/guest-self-assessment";
|
||
import { calculateProvisionalRiskLevel } from "@/utils/self-assessment";
|
||
import { useAppStore } from "@/stores/app";
|
||
|
||
const store = useAppStore();
|
||
const router = useRouter();
|
||
const currentStep = ref(0);
|
||
const appointmentLoading = ref(false);
|
||
const errorMessage = ref("");
|
||
const stepNames = ["基本資料", "功能狀態", "健康限制", "自評結果"];
|
||
|
||
const profileForm = reactive<{
|
||
name: string;
|
||
phone: string;
|
||
birthday: string;
|
||
gender: Gender | "";
|
||
height: number;
|
||
weight: number;
|
||
email: string;
|
||
emergencyContact: string;
|
||
emergencyPhone: string;
|
||
consent: boolean;
|
||
}>({
|
||
name: store.userProfile.name,
|
||
phone: store.userProfile.phone,
|
||
birthday: store.userProfile.birthday,
|
||
gender:
|
||
store.userProfile.gender === "男"
|
||
? "male"
|
||
: store.userProfile.gender === "女"
|
||
? "female"
|
||
: "",
|
||
height: store.userProfile.height,
|
||
weight: store.userProfile.weight,
|
||
email: store.userProfile.email,
|
||
emergencyContact: store.userProfile.emergencyContact,
|
||
emergencyPhone: store.userProfile.emergencyPhone,
|
||
consent: store.userProfile.consent,
|
||
});
|
||
|
||
const assessmentForm = reactive<{
|
||
exerciseFrequency: ExerciseFrequency | "";
|
||
wantedImprovements: WantedImprovement[];
|
||
hasFalls: boolean;
|
||
painLevel: PainLevel | "";
|
||
chronicDiseases: ChronicDisease[];
|
||
}>({
|
||
exerciseFrequency: store.selfAssessment.exerciseFrequency,
|
||
wantedImprovements: [...store.selfAssessment.wantedImprovements],
|
||
hasFalls: store.selfAssessment.hasFalls,
|
||
painLevel: store.selfAssessment.painLevel,
|
||
chronicDiseases: [...store.selfAssessment.chronicDiseases],
|
||
});
|
||
|
||
const resultLevel = ref<RiskLevel | "">(store.selfAssessment.scoreLevel);
|
||
|
||
const genderOptions = [
|
||
{ title: "男", value: "male" as const },
|
||
{ title: "女", value: "female" as const },
|
||
];
|
||
const painOptions = [
|
||
{ title: "無", value: "none" as const },
|
||
{ title: "輕微", value: "mild" as const },
|
||
{ title: "中度", value: "moderate" as const },
|
||
{ title: "重度", value: "severe" as const },
|
||
];
|
||
const improvementsOptions = [
|
||
{ title: "肌力", value: "strength" as const, icon: "mdi-arm-flex" },
|
||
{ title: "平衡", value: "balance" as const, icon: "mdi-scale-balance" },
|
||
{ title: "心肺", value: "cardio" as const, icon: "mdi-heart-pulse" },
|
||
{
|
||
title: "柔軟度",
|
||
value: "flexibility" as const,
|
||
icon: "mdi-human-handsup",
|
||
},
|
||
{ title: "敏捷", value: "agility" as const, icon: "mdi-run-fast" },
|
||
{
|
||
title: "體脂/BMI",
|
||
value: "bodyComposition" as const,
|
||
icon: "mdi-calculator",
|
||
},
|
||
];
|
||
const diseaseOptions = [
|
||
{ title: "高血壓", value: "hypertension" as const },
|
||
{ title: "糖尿病", value: "diabetes" as const },
|
||
{ title: "高血脂", value: "hyperlipidemia" as const },
|
||
{ title: "心臟病", value: "heartDisease" as const },
|
||
{ title: "關節退化", value: "osteoarthritis" as const },
|
||
{ title: "骨質疏鬆", value: "osteoporosis" as const },
|
||
];
|
||
|
||
const birthdayDate = computed<Date | null>({
|
||
get: () => parseDateString(profileForm.birthday),
|
||
set: (value) => {
|
||
profileForm.birthday = formatDateString(value);
|
||
},
|
||
});
|
||
|
||
onMounted(() => {
|
||
const draft = readGuestSelfAssessmentDraft();
|
||
if (!draft) {
|
||
return;
|
||
}
|
||
|
||
profileForm.name = draft.profile.name;
|
||
profileForm.phone = draft.profile.phone;
|
||
profileForm.birthday = draft.profile.birthday;
|
||
profileForm.gender = draft.profile.gender;
|
||
profileForm.height = draft.profile.heightCm;
|
||
profileForm.weight = draft.profile.weightKg;
|
||
profileForm.email = draft.profile.email ?? "";
|
||
profileForm.emergencyContact = draft.profile.emergencyContact ?? "";
|
||
profileForm.emergencyPhone = draft.profile.emergencyPhone ?? "";
|
||
profileForm.consent = draft.profile.consent;
|
||
assessmentForm.exerciseFrequency = draft.assessment.exerciseFrequency;
|
||
assessmentForm.wantedImprovements = [...draft.assessment.wantedImprovements];
|
||
assessmentForm.hasFalls = draft.assessment.hasFalls;
|
||
assessmentForm.painLevel = draft.assessment.painLevel;
|
||
assessmentForm.chronicDiseases = [...draft.assessment.chronicDiseases];
|
||
resultLevel.value = draft.provisionalRiskLevel;
|
||
currentStep.value = 3;
|
||
});
|
||
|
||
function parseDateString(value: string) {
|
||
const [year, month, day] = value.split("-").map(Number);
|
||
if (!year || !month || !day) {
|
||
return null;
|
||
}
|
||
|
||
return new Date(year, month - 1, day);
|
||
}
|
||
|
||
function formatDateString(value: Date | null) {
|
||
if (!value) {
|
||
return "";
|
||
}
|
||
|
||
const year = value.getFullYear();
|
||
const month = String(value.getMonth() + 1).padStart(2, "0");
|
||
const day = String(value.getDate()).padStart(2, "0");
|
||
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
|
||
function toggleImprovement(improvement: WantedImprovement) {
|
||
const index = assessmentForm.wantedImprovements.indexOf(improvement);
|
||
if (index === -1) {
|
||
assessmentForm.wantedImprovements.push(improvement);
|
||
} else {
|
||
assessmentForm.wantedImprovements.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
function scrollToPageTop() {
|
||
window.scrollTo({ top: 0 });
|
||
}
|
||
|
||
function goToPreviousStep() {
|
||
currentStep.value -= 1;
|
||
scrollToPageTop();
|
||
}
|
||
|
||
function goToNextStep() {
|
||
currentStep.value += 1;
|
||
scrollToPageTop();
|
||
}
|
||
|
||
function buildAssessmentRequest(): SelfAssessmentRequest | null {
|
||
if (
|
||
!profileForm.name.trim() ||
|
||
!/^09\d{8}$/.test(profileForm.phone.replace(/\D/g, "")) ||
|
||
!profileForm.birthday ||
|
||
!profileForm.gender ||
|
||
profileForm.height < 50 ||
|
||
profileForm.height > 250 ||
|
||
profileForm.weight < 20 ||
|
||
profileForm.weight > 300 ||
|
||
!profileForm.consent
|
||
) {
|
||
errorMessage.value = "請完整填寫基本資料，並同意個資授權條款。";
|
||
currentStep.value = 0;
|
||
return null;
|
||
}
|
||
|
||
if (!assessmentForm.exerciseFrequency || !assessmentForm.painLevel) {
|
||
errorMessage.value = "請完成所有自評題目後再送出。";
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
exerciseFrequency: assessmentForm.exerciseFrequency,
|
||
wantedImprovements: [...assessmentForm.wantedImprovements],
|
||
hasFalls: assessmentForm.hasFalls,
|
||
painLevel: assessmentForm.painLevel,
|
||
chronicDiseases: [...assessmentForm.chronicDiseases],
|
||
};
|
||
}
|
||
|
||
function handleSubmit() {
|
||
errorMessage.value = "";
|
||
const assessment = buildAssessmentRequest();
|
||
if (!assessment || !profileForm.gender) {
|
||
return;
|
||
}
|
||
|
||
const normalizedPhone = profileForm.phone.replace(/\D/g, "");
|
||
const provisionalRiskLevel = calculateProvisionalRiskLevel(assessment);
|
||
const draft: GuestSelfAssessmentDraft = {
|
||
profile: {
|
||
name: profileForm.name.trim(),
|
||
phone: normalizedPhone,
|
||
birthday: profileForm.birthday,
|
||
gender: profileForm.gender,
|
||
heightCm: profileForm.height,
|
||
weightKg: profileForm.weight,
|
||
email: profileForm.email.trim() || null,
|
||
emergencyContact: profileForm.emergencyContact.trim() || null,
|
||
emergencyPhone: profileForm.emergencyPhone.replace(/\D/g, "") || null,
|
||
consent: profileForm.consent,
|
||
consentVersion: CONSENT_VERSION,
|
||
},
|
||
assessment,
|
||
provisionalRiskLevel,
|
||
};
|
||
|
||
saveGuestSelfAssessmentDraft(draft);
|
||
store.setProvisionalSelfAssessment(assessment);
|
||
resultLevel.value = provisionalRiskLevel;
|
||
currentStep.value = 3;
|
||
scrollToPageTop();
|
||
}
|
||
|
||
async function handleAppointment() {
|
||
errorMessage.value = "";
|
||
|
||
if (!store.isLoggedIn) {
|
||
await router.push({
|
||
name: "register",
|
||
query: { redirect: "/appointment" },
|
||
});
|
||
return;
|
||
}
|
||
|
||
appointmentLoading.value = true;
|
||
try {
|
||
await store.persistGuestSelfAssessment();
|
||
await router.push({ name: "appointment" });
|
||
} catch (error) {
|
||
errorMessage.value =
|
||
error instanceof Error
|
||
? error.message
|
||
: "資料保存失敗，請稍後重試。草稿仍會保留。";
|
||
} finally {
|
||
appointmentLoading.value = false;
|
||
}
|
||
}
|
||
|
||
function getRiskLabel(level: RiskLevel | "") {
|
||
if (level === "low") return "低風險";
|
||
if (level === "followUp") return "需追蹤";
|
||
if (level === "consultation") return "建議諮詢";
|
||
return "尚未完成";
|
||
}
|
||
|
||
function getResultColor(level: RiskLevel | "") {
|
||
if (level === "low") return "success";
|
||
if (level === "followUp") return "warning";
|
||
return "error";
|
||
}
|
||
|
||
function getResultIcon(level: RiskLevel | "") {
|
||
if (level === "low") return "mdi-check-decagram";
|
||
if (level === "followUp") 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>
|