skytek/sports-empower-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: checkin

Browse Source
This commit is contained in:
skytek_xinliang
2026-06-23 11:48:29 +08:00
parent c9c308d9cf
commit cc1a3f95e2
3 changed files with 38 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/citizen-frontend/src/components/layout/DefaultLayout.vue
+5 -5
View File
@@ -188,15 +188,15 @@
<span class="bottom-nav-text">自評</span> <span class="bottom-nav-text">自評</span>
</v-btn> </v-btn>
<v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
<v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
<span class="bottom-nav-text">預約</span>
</v-btn>
<v-btn v-if="store.isLoggedIn" to="/checkin" value="checkin"> <v-btn v-if="store.isLoggedIn" to="/checkin" value="checkin">
<v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon> <v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon>
<span class="bottom-nav-text">量測</span> <span class="bottom-nav-text">量測</span>
</v-btn> </v-btn>
<v-btn v-if="store.isLoggedIn" to="/appointment" value="appointment">
<v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
<span class="bottom-nav-text">預約</span>
</v-btn>
</v-bottom-navigation> </v-bottom-navigation>
<!-- 隱私授權對話框 --> <!-- 隱私授權對話框 -->
app/citizen-frontend/src/pages/appointment.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<Layout> <Layout>
<template #main> <template #main>
<v-card class="mb-6" variant="flat"> <v-card class="mb-6" variant="flat">
<v-card-title class="text-primary">公益普測與活動預約</v-card-title> <v-card-title class="text-primary">預約</v-card-title>
<v-card-subtitle class="text-grey-darken-3"> <v-card-subtitle class="text-grey-darken-3">
報名免費體能普測，取得個人運動處方 報名免費體能普測，取得個人運動處方
app/citizen-frontend/src/pages/checkin.vue
+32 -51
View File
@@ -1,20 +1,19 @@
<template> <template>
<Layout> <Layout>
<template #main> <template #main>
<div class="mb-4 text-center"> <v-card class="mb-6" variant="flat">
<h1 class="text-h5 font-weight-black text-primary">現場量測與報到</h1> <v-card-title class="text-primary">現場量測</v-card-title>
<p class="text-caption text-grey">在各量測站出示此頁面，由現場教練或志工登錄數據</p>
</div> <v-card-subtitle class="text-grey-darken-3">
在各量測站出示此頁面，由技術人員登錄數據
</v-card-subtitle>
</v-card>
<!-- 報到活動資訊 --> <!-- 報到活動資訊 -->
<v-card <v-card v-if="activeAppointment" class="rounded-xl elevation-3 mb-6" color="surface">
v-if="activeAppointment" <v-card-text>
class="rounded-xl elevation-3 border-accent-light mb-6" <div class="d-flex align-center justify-space-between mb-3">
color="surface" <span class="text-title-small font-weight-bold text-primary">
>
<v-card-text class="pa-4">
<div class="d-flex align-center justify-between mb-3">
<span class="text-subtitle-2 font-weight-bold text-primary">
<v-icon class="mr-1" icon="mdi-map-marker-radius" /> <v-icon class="mr-1" icon="mdi-map-marker-radius" />
現場檢測站：{{ activeAppointment.location.split(' ')[0] }} 現場檢測站：{{ activeAppointment.location.split(' ')[0] }}
</span> </span>
@@ -24,20 +23,18 @@
</v-chip> </v-chip>
</div> </div>
<h2 class="text-subtitle-1 font-weight-black text-grey-darken-4 mb-2"> <h2 class="text-title-large font-weight-black text-grey-darken-4 mb-2">
{{ activeAppointment.title }} {{ activeAppointment.title }}
</h2> </h2>
<div class="text-caption text-grey"> <div class="text-title-small text-grey">日期：{{ activeAppointment.date }}</div>
主辦單位：{{ activeAppointment.organizer }} | 日期：{{ activeAppointment.date }}
</div>
<!-- 量測總進度條 --> <!-- 量測總進度條 -->
<div class="mt-4"> <div class="mt-4">
<div class="d-flex justify-space-between align-center mb-1"> <div class="d-flex justify-space-between align-center mb-1">
<span class="text-caption font-weight-bold text-grey-darken-2">測量站點完成度</span> <span class="text-title-small font-weight-bold text-grey-darken-2">測量站點完成度</span>
<span class="text-caption font-weight-bold text-primary">{{ completedCount }} / {{ totalCount }} ({{ progressPercent }}%)</span> <span class="text-title-small font-weight-bold text-primary">{{ completedCount }} / {{ totalCount }} ({{ progressPercent }}%)</span>
</div> </div>
<v-progress-linear <v-progress-linear
@@ -55,9 +52,9 @@
<!-- 未報到提示 --> <!-- 未報到提示 -->
<v-card v-else class="rounded-xl elevation-3 pa-6 text-center mb-6" color="surface"> <v-card v-else class="rounded-xl elevation-3 pa-6 text-center mb-6" color="surface">
<v-icon class="mb-3" color="warning" icon="mdi-qrcode-scan" size="64" /> <v-icon class="mb-3" color="warning" icon="mdi-qrcode-scan" size="64" />
<h3 class="text-subtitle-1 font-weight-bold mb-2">尚未在活動現場合對報到</h3> <h3 class="text-title-medium font-weight-bold mb-2">尚未在活動現場合對報到</h3>
<p class="text-body-2 text-grey mb-4"> <p class="text-body-medium text-grey mb-4">
請先前往「活動預約」頁面，出示您的報到條碼給現場志工進行核對。 請先前往「活動預約」頁面，出示您的報到條碼給現場志工進行核對。
</p> </p>
@@ -65,38 +62,20 @@
</v-card> </v-card>
<!-- 快捷測試功能 (對 Demo 非常友善) --> <!-- 快捷測試功能 (對 Demo 非常友善) -->
<v-card
v-if="activeAppointment && completedCount < totalCount"
class="rounded-xl mb-6 border-accent-light bg-teal-lighten-5"
color="primary"
variant="outlined"
>
<v-card-text class="pa-4 d-flex align-center justify-space-between">
<div>
<div class="text-subtitle-2 font-weight-bold text-primary">
<v-icon class="mr-1" icon="mdi-heart-cog" />
高齡友善測試輔助
</div>
<div class="text-caption text-grey-darken-1"> <div v-if="activeAppointment && completedCount < totalCount" class="d-flex justify-center">
一鍵填入所有剩餘關卡數值，便於檢視報告 <v-btn
</div> class="rounded-lg font-weight-bold text-white"
</div> color="secondary"
@click="simulateAllMeasurements"
<v-btn >
class="rounded-lg font-weight-bold text-white" 一鍵模擬完成
color="secondary" </v-btn>
size="small" </div>
@click="simulateAllMeasurements"
>
一鍵模擬完成
</v-btn>
</v-card-text>
</v-card>
<!-- 11 個量測關卡列表 --> <!-- 11 個量測關卡列表 -->
<div v-if="activeAppointment" class="mb-6"> <div v-if="activeAppointment" class="mb-6">
<h3 class="text-subtitle-2 font-weight-black text-primary mb-3">關卡列表</h3> <h3 class="text-title-medium font-weight-black text-primary px-4 mb-3">關卡列表</h3>
<v-row> <v-row>
<v-col v-for="(station, key) in store.measurements" :key="key" class="mb-2" cols="12"> <v-col v-for="(station, key) in store.measurements" :key="key" class="mb-2" cols="12">
@@ -120,18 +99,20 @@
<div> <div>
<div <div
class="font-weight-bold text-body-1" class="font-weight-bold text-body-large"
:class="station.completed ? 'text-success' : 'text-grey-darken-4'" :class="station.completed ? 'text-success' : 'text-grey-darken-4'"
> >
{{ station.name }} {{ station.name }}
</div> </div>
<!-- 已完成，顯示數值 --> <!-- 已完成，顯示數值 -->
<div v-if="station.completed" class="text-caption text-grey-darken-2"> <div v-if="station.completed" class="text-title-small text-grey-darken-2">
{{ getMeasurementSummary(key, station.values) }} {{ getMeasurementSummary(key, station.values) }}
<span class="ml-2 text-grey-lighten-1">| {{ station.time?.split(' ')[1] }}</span> <span class="ml-2 text-grey-lighten-1">| {{ station.time?.split(' ')[1] }}</span>
</div> </div>
<!-- 未完成，顯示待測 --> <!-- 未完成，顯示待測 -->
<div v-else class="text-caption text-grey-darken-1">等待現場檢測員登錄</div> <div v-else class="text-title-small text-grey-darken-1">
等待技術人員檢測登錄
</div>
</div> </div>
</div> </div>