refactor: 优化页面组件和路由配置

重构了用户个人资料页、活动详情页、签到页和消息页的代码，移除了未使用的导入和调试日志。调整了路由配置，简化了消息页的UI，并优化了签到逻辑。这些改动旨在提高代码的可维护性和用户体验。

refactor: 优化页面组件和路由配置
重构了用户个人资料页、活动详情页、签到页和消息页的代码，移除了未使用的导入和调试日志。调整了路由配置，简化了消息页的UI，并优化了签到逻辑。这些改动旨在提高代码的可维护性和用户体验。
hookehuyr
Commit 480203271012df239f251daaa404fe0c2686c2a5 48020327 1 parent 9bae3231
Showing 6 changed files with 68 additions and 20 deletions
src/components/shared/ActivityCard.vue
src/main.js
src/pages/ActivityDetail.vue
src/pages/CheckIn.vue
src/pages/Messages.vue
src/pages/UserProfile.vue
--- a/src/components/shared/ActivityCard.vue
View file @4802032
+++ b/src/components/shared/ActivityCard.vue
View file @4802032
 <!--
  * @Date: 2025-04-17 13:16:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-21 14:56:50
+ * @LastEditTime: 2025-04-21 15:29:42
  * @FilePath: /mlaj-reading-club/src/components/shared/ActivityCard.vue
  * @Description: 文件描述
 -->
@@ -61,17 +61,29 @@
           </div>
         </div>
-        <router-link :to="`/activity/${activity.id}`"
+        <router-link v-if="!isRegistrationOpen" :to="`/activity/${activity.id}`"
           class="mt-4 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600">
-          {{ isPast ? '查看详情' : isRegistrationOpen ? '立即报名' : '了解更多' }}
+          {{ isPast ? '查看详情' : '了解更多' }}
         </router-link>
+        <div v-else @click="handleRegistration"
+          class="mt-4 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600">
+          立即报名
+        </div>
       </div>
     </div>
   </div>
+
+  <!-- Register Modal -->
+  <Modal :isOpen="showRegisterModal" title="活动报名" @close="showRegisterModal = false">
+    <form @submit.prevent="submitRegistration">
+                    <!-- Registration form fields -->
+                </form>
+        </Modal>
 </template>
 <script setup>
 import { ref, computed, defineProps } from 'vue'
+import Modal from './Modal.vue'
 const props = defineProps({
   activity: {
@@ -136,4 +148,15 @@ const statusText = computed(() => {
   }
   return '';
 });
+
+const showRegisterModal = ref(false)
+
+const handleRegistration = () => {
+    showRegisterModal.value = true
+}
+
+const submitRegistration = async () => {
+    // TODO: Implement registration submission
+    showRegisterModal.value = false
+}
 </script>
--- a/src/main.js
View file @4802032
+++ b/src/main.js
View file @4802032
 /*
  * @Date: 2025-04-17 14:26:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-21 13:26:32
+ * @LastEditTime: 2025-04-21 15:07:36
  * @FilePath: /mlaj-reading-club/src/main.js
  * @Description: 文件描述
  */
@@ -27,8 +27,8 @@ const router = createRouter({
     { path: '/create-activity', component: () => import('./pages/CreateActivity.vue') },
     { path: '/profile', component: () => import('./pages/UserProfile.vue') },
     { path: '/registration/:activityId', component: () => import('./pages/Registration.vue') },
-    { path: '/check-in/:activityId', component: () => import('./pages/CheckIn.vue') },
+    { path: '/check-in/:id', component: () => import('./pages/CheckIn.vue') },
-    { path: '/messages/:activityId', component: () => import('./pages/Messages.vue') },
+    { path: '/messages', component: () => import('./pages/Messages.vue') },
     { path: '/:pathMatch(.*)*', redirect: '/' }
   ]
 })
--- a/src/pages/ActivityDetail.vue
View file @4802032
+++ b/src/pages/ActivityDetail.vue
View file @4802032
@@ -231,7 +231,7 @@
                                     </div>
                                     <div class="mt-2 flex items-center">
                                         <span class="text-sm text-green-700 mr-2">报名状态：</span>
-                                        <span :class="registrationStatusBadge.class">{{ registrationStatusBadge.text
+                                        <span :class="registrationStatusBadge?.class">{{ registrationStatusBadge?.text
                                             }}</span>
                                     </div>
                                 </div>
@@ -271,13 +271,10 @@
         </template>
         <!-- Register Modal -->
-        <Modal v-if="showRegisterModal" @close="showRegisterModal = false">
+        <Modal :isOpen="showRegisterModal" title="活动报名" @close="showRegisterModal = false">
-            <template #title>活动报名</template>
-            <template #content>
             <form @submit.prevent="submitRegistration">
                     <!-- Registration form fields -->
                 </form>
-            </template>
         </Modal>
     </div>
 </template>
--- a/src/pages/CheckIn.vue
View file @4802032
+++ b/src/pages/CheckIn.vue
View file @4802032
@@ -261,6 +261,7 @@ import { useRoute, useRouter } from 'vue-router'
 import activitiesData from '../data/activities.json'
 import registrationsData from '../data/registrations.json'
 import usersData from '../data/users.json'
+import checkinsData from '../data/checkins.json'
 import Button from '../components/shared/Button.vue'
 const route = useRoute()
@@ -268,8 +269,9 @@ const router = useRouter()
 const activities = ref(activitiesData.activities)
 const registrations = ref(registrationsData.registrations)
 const currentUser = ref(usersData.users[0])
+const checkIns = ref(checkinsData)
-const activityId = route.params.activityId
+const activityId = route.params.id
 const activity = ref(null)
 const loading = ref(true)
 const error = ref(null)
@@ -303,8 +305,8 @@ const fetchData = async () => {
                     userRegistration.value = registration
                     // Check if user already checked in
-                    const checkIn = appStore.checkIns.find(
+                    const checkIn = checkIns.value.find(
-                        check => check.activity_id === activityId && check.user_id === appStore.currentUser.id
+                        check => check.activity_id === activityId && check.user_id === currentUser.id
                     )
                     if (checkIn) {
@@ -341,8 +343,8 @@ const handleSubmitCode = async () => {
     try {
         if (inputCode.value === checkInCode.value) {
             const now = new Date().toISOString().replace('T', ' ').substring(0, 19)
-            const checkInResult = await appStore.addCheckIn({
+            const checkInResult = await addCheckIn({
-                user_id: appStore.currentUser.id,
+                user_id: currentUser.id,
                 activity_id: activityId,
                 check_in_time: now,
                 status: 'checked_in'
@@ -350,7 +352,7 @@ const handleSubmitCode = async () => {
             if (checkInResult.success) {
                 userCheckIn.value = {
-                    user_id: appStore.currentUser.id,
+                    user_id: currentUser.id,
                     activity_id: activityId,
                     check_in_time: now,
                     status: 'checked_in'
@@ -418,4 +420,33 @@ watch(countdown, (newValue) => {
 // Initial data fetch
 onMounted(fetchData)
+
+
+// 添加签到记录
+const addCheckIn = async (checkInData) => {
+  try {
+    // 模拟API调用延迟
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // 创建新的签到记录
+    const newCheckIn = {
+      id: `C${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
+      activity_id: checkInData.activity_id,
+      user_id: checkInData.user_id,
+      checkin_time: checkInData.check_in_time,
+      checkin_type: 'code',
+      status: 'successful',
+      notes: '',
+      is_late: false
+    }
+
+    // 添加到签到记录中
+    checkIns.value.push(newCheckIn)
+
+    return { success: true }
+  } catch (err) {
+    console.error('Failed to add check-in:', err)
+    return { success: false }
+  }
+}
 </script>
--- a/src/pages/Messages.vue
View file @4802032
+++ b/src/pages/Messages.vue
View file @4802032
--- a/src/pages/UserProfile.vue
View file @4802032
+++ b/src/pages/UserProfile.vue
View file @4802032
@@ -262,7 +262,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { useAppStore } from '../stores/app'
 import Button from '../components/shared/Button.vue'
 import Input from '../components/shared/Input.vue'
 import ActivityCard from '../components/shared/ActivityCard.vue'
@@ -351,8 +350,6 @@ onMounted(() => {
         }
     }
-    console.warn(registrations.value);
-    console.warn(activities.value);
     if (currentUser.value && registrations.value && activities.value) {
         // Filter user registrations
         const userRegs = registrations.value.filter(reg => reg.user_id === currentUser.value.id)