From a1a57c77f5ba51604261d92e8a4e47ad13868a99 Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Sun, 15 Jun 2025 20:18:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E3=80=81=E5=85=B4=E8=B6=A3=E8=AF=BE=E3=80=81?=
 =?UTF-8?q?=E4=BF=B1=E4=B9=90=E9=83=A8=20=E7=9A=84=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/server.ts                        |   14 +-
 src/pages/base/club/index - 副本.vue          |  433 +++++++
 src/pages/base/club/index.vue                 | 1010 +++++++++++------
 src/pages/base/home/detail.vue                |  133 ++-
 src/pages/base/home/index.vue                 |   67 +-
 .../base/interest-class/index - 副本.vue      |  305 +++++
 src/pages/base/interest-class/index.vue       |  810 +++++++++----
 7 files changed, 2166 insertions(+), 606 deletions(-)
 create mode 100644 src/pages/base/club/index - 副本.vue
 create mode 100644 src/pages/base/interest-class/index - 副本.vue

diff --git a/src/api/base/server.ts b/src/api/base/server.ts
index de9479d..981fe9f 100644
--- a/src/api/base/server.ts
+++ b/src/api/base/server.ts
@@ -29,6 +29,13 @@ export const xkqddeleteApi = async (params: any) => {
   return await post("/api/xkqd/delete?ids=" + params.ids);
 };
 
+/**
+ * 当前学期排课公共配置（排课设置、排课周次、排课时间）
+ */
+export const cmsArticlePageApi = async (params: any) => {
+  return await get("/api/cms/article/findPage", params);
+};
+
 /**
  * 当前学期排课公共配置（排课设置、排课周次、排课时间）
  */
@@ -43,4 +50,9 @@ export const drpkkbApi = async (params: any) => {
   return await get("/mobile/jz/pkkb/drpkkb", params);
 };
 
-
+/**
+ * 查询学生选课列表
+ */
+export const xsXkListApi = async (params: any) => {
+  return await get("/mobile/jz/xsxk/list", params);
+};
diff --git a/src/pages/base/club/index - 副本.vue b/src/pages/base/club/index - 副本.vue
new file mode 100644
index 0000000..b42039f
--- /dev/null
+++ b/src/pages/base/club/index - 副本.vue	
@@ -0,0 +1,433 @@
+<template>
+  <BasicLayout>
+    <view class="p-15">
+      <!-- 顶部蓝色背景横幅 -->
+      <view class="banner-section">
+        <view class="banner-placeholder">
+          <view class="banner-content">
+            <text class="banner-title">兴趣课程</text>
+            <text class="banner-school">泸州市实验小学城西学校</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 课程类型选项卡 -->
+      <view class="my-course-section">
+        <view class="section-title">
+          <u-icon name="calendar" size="18" color="#1976d2"></u-icon>
+          <text class="title-text">我的课程</text>
+        </view>
+        
+        <view class="tabs-container">
+          <view 
+            class="tab-item" 
+            :class="{ 'active': activeTab === 'basketball' }"
+            @click="switchTab('basketball')"
+          >
+            <text>篮球</text>
+          </view>
+          <view 
+            class="tab-item"
+            :class="{ 'active': activeTab === 'football' }"
+            @click="switchTab('football')"
+          >
+            <text>足球</text>
+          </view>
+        </view>
+        
+        <!-- 篮球课程信息卡片 -->
+        <view class="course-card" v-if="activeTab === 'basketball'">
+          <view class="course-image-placeholder"></view>
+          <view class="course-info">
+            <text class="course-name">篮球</text>
+            <view class="course-detail">
+              <text class="detail-label">开课老师：</text>
+              <text class="detail-value">叶老师</text>
+            </view>
+            <view class="course-detail">
+              <text class="detail-label">上课地点：</text>
+              <text class="detail-value">教学楼3楼</text>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 足球课程信息卡片 -->
+        <view class="course-card" v-if="activeTab === 'football'">
+          <view class="course-image-placeholder"></view>
+          <view class="course-info">
+            <text class="course-name">足球</text>
+            <view class="course-detail">
+              <text class="detail-label">开课老师：</text>
+              <text class="detail-value">王老师</text>
+            </view>
+            <view class="course-detail">
+              <text class="detail-label">上课地点：</text>
+              <text class="detail-value">操场</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 教学计划 -->
+      <view class="teaching-plan-section">
+        <view class="section-title-bar">
+          <text class="title-text">教学计划</text>
+        </view>
+        
+        <!-- 篮球教学计划 -->
+        <view class="plan-content" v-if="activeTab === 'basketball'">
+          <view class="plan-item">
+            <text class="plan-phase">第一阶段：</text>
+            <text class="plan-desc">了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第二阶段：</text>
+            <text class="plan-desc">在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第三阶段：</text>
+            <text class="plan-desc">学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第四阶段：</text>
+            <text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
+          </view>
+        </view>
+        
+        <!-- 足球教学计划 -->
+        <view class="plan-content" v-if="activeTab === 'football'">
+          <view class="plan-item">
+            <text class="plan-phase">第一阶段：</text>
+            <text class="plan-desc">基础训练，包括传球、控球和基本规则学习。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第二阶段：</text>
+            <text class="plan-desc">进阶技巧学习，包括带球跑动、射门和防守基础。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第三阶段：</text>
+            <text class="plan-desc">团队配合训练，学习简单的战术配合和位置意识。</text>
+          </view>
+          
+          <view class="plan-item">
+            <text class="plan-phase">第四阶段：</text>
+            <text class="plan-desc">小型比赛实践，培养学生的团队协作能力和比赛经验。</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 课堂随拍 -->
+      <view class="class-photos-section">
+        <view class="section-title-bar">
+          <text class="title-text">课堂随拍</text>
+        </view>
+        
+        <!-- 篮球课堂照片 -->
+        <view class="photos-grid" v-if="activeTab === 'basketball'">
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+        </view>
+        
+        <!-- 足球课堂照片 -->
+        <view class="photos-grid" v-if="activeTab === 'football'">
+          <view class="photo-placeholder football-photo"></view>
+          <view class="photo-placeholder football-photo"></view>
+          <view class="photo-placeholder football-photo"></view>
+          <view class="photo-placeholder football-photo"></view>
+        </view>
+      </view>
+    </view>
+    <template #bottom>
+      <view class="white-bg-color py-5">
+        <view class="flex-row items-center pb-10 pt-5">
+          <u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
+          <u-button text="退课申请" class="mr-15 mr-7" type="primary" @click="submit"/>
+        </view>
+      </view>
+    </template>
+  </BasicLayout>
+</template>
+
+<script lang="ts" setup>
+import { navigateBack } from "@/utils/uniapp";
+import { ref } from "vue";
+import { xkFindDqXsApi } from "@/api/base/server";
+import { useUserStore } from "@/store/modules/user";
+const { getCurXs } = useUserStore();
+
+// 当前激活的选项卡，默认为篮球
+const activeTab = ref('basketball');
+
+// 切换选项卡
+function switchTab(tab: string) {
+  activeTab.value = tab;
+}
+
+function submit() {
+  const courseName = activeTab.value === 'basketball' ? '篮球' : '足球';
+  
+  uni.showModal({
+    title: '确认退课',
+    content: `确定要退出${courseName}课程吗？`,
+    success: (res) => {
+      if (res.confirm) {
+        uni.showToast({
+          title: `${courseName}退课申请已提交`,
+          icon: 'none'
+        });
+      }
+    }
+  });
+}
+
+onMounted(async () => {
+  // Make onMounted async
+  xkFindDqXsApi({
+		xsId: getCurXs.id,
+		xklxId: '816059832'
+	}).then(res => {
+    // 根据接口返回的result判断是否已报名
+    if (res && res.resultCode === 1) {
+			console.log(res)
+    } else {
+      // 接口调用成功但返回错误
+      console.warn("检查获取当前学期俱乐部接口返回错误:", res);
+    }
+  })
+  .catch((error) => {
+	// 接口调用失败
+	console.error("调用获取当前学期俱乐部接口失败:", error);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+/* 顶部蓝色背景横幅 */
+.banner-section {
+  margin-bottom: 15px;
+  
+  .banner-placeholder {
+    height: 120px;
+    background-color: #3986FF;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    .banner-content {
+      text-align: center;
+      
+      .banner-title {
+        font-size: 22px;
+        color: #ffffff;
+        font-weight: 500;
+        margin-bottom: 8px;
+        display: block;
+      }
+      
+      .banner-school {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+}
+
+/* 我的课程 */
+.my-course-section {
+  margin-bottom: 15px;
+  
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      margin-left: 6px;
+    }
+  }
+  
+  .tabs-container {
+    display: flex;
+    border-bottom: 1px solid #ebeef5;
+    margin-bottom: 15px;
+    
+    .tab-item {
+      padding: 12px 0;
+      margin-right: 20px;
+      position: relative;
+      
+      text {
+        color: #606266;
+        font-size: 15px;
+      }
+      
+      &.active {
+        text {
+          color: #1976d2;
+          font-weight: 500;
+        }
+        
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background-color: #1976d2;
+        }
+      }
+    }
+  }
+  
+  .course-card {
+    background-color: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+    
+    .course-image-placeholder {
+      width: 120px;
+      height: 100px;
+      background-color: #f0f0f0;
+      border-radius: 6px;
+      margin-right: 15px;
+      flex-shrink: 0;
+    }
+    
+    .course-info {
+      flex: 1;
+      
+      .course-name {
+        font-size: 18px;
+        font-weight: 500;
+        color: #303133;
+        margin-bottom: 10px;
+      }
+      
+      .course-detail {
+        display: flex;
+        margin-bottom: 6px;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .detail-label {
+          color: #606266;
+          font-size: 14px;
+        }
+        
+        .detail-value {
+          color: #303133;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+/* 教学计划 */
+.teaching-plan-section {
+  margin-bottom: 15px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+  
+  .section-title-bar {
+    padding: 12px 15px;
+    border-bottom: 1px solid #f2f2f2;
+    
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+  
+  .plan-content {
+    padding: 15px;
+    
+    .plan-item {
+      margin-bottom: 15px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    
+    .plan-phase {
+      font-size: 15px;
+      font-weight: 500;
+      color: #303133;
+    }
+    
+    .plan-desc {
+      font-size: 14px;
+      color: #606266;
+      line-height: 1.5;
+    }
+  }
+}
+
+/* 课堂随拍 */
+.class-photos-section {
+  background-color: #ffffff;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
+  margin-bottom: 60px;
+  
+  .section-title-bar {
+    padding: 12px 15px;
+    border-bottom: 1px solid #f2f2f2;
+    
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+  
+  .photos-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 15px;
+    
+    .photo-placeholder {
+      width: calc(50% - 8px);
+      height: 110px;
+      background-color: #f0f0f0;
+      border-radius: 6px;
+      margin-right: 8px;
+      margin-bottom: 8px;
+      
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+      
+      &:nth-child(3), &:nth-child(4) {
+        margin-bottom: 0;
+      }
+      
+      &.football-photo {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/base/club/index.vue b/src/pages/base/club/index.vue
index 91b0324..3566635 100644
--- a/src/pages/base/club/index.vue
+++ b/src/pages/base/club/index.vue
@@ -1,410 +1,722 @@
 <template>
-  <BasicLayout>
-    <view class="p-15">
-      <!-- 顶部蓝色背景横幅 -->
-      <view class="banner-section">
-        <view class="banner-placeholder">
-          <view class="banner-content">
-            <text class="banner-title">兴趣课程</text>
-            <text class="banner-school">泸州市实验小学城西学校</text>
+  <view class="interest-course">
+    <!-- 选课信息头部 - 固定部分 -->
+    <view class="selection-header">
+      <view class="header-content">
+        <view class="title-section" @click="clickShowXkSelector">
+          <view class="title">
+            <text v-if="xkData && xkData.xkmc">{{ xkData.xkmc }}</text>
+            <text v-else>选课信息</text>
           </view>
+          <view class="switch-btn" v-if="xkList.length > 1">切换</view>
         </view>
-      </view>
-      
-      <!-- 课程类型选项卡 -->
-      <view class="my-course-section">
-        <view class="section-title">
-          <u-icon name="calendar" size="18" color="#1976d2"></u-icon>
-          <text class="title-text">我的课程</text>
-        </view>
-        
-        <view class="tabs-container">
-          <view 
-            class="tab-item" 
-            :class="{ 'active': activeTab === 'basketball' }"
-            @click="switchTab('basketball')"
-          >
-            <text>篮球</text>
+        <!-- 学生选择部分 -->
+        <view class="student-selector-bar" @click="clickShowXsSelector">
+          <view class="user-avatar">
+            <image
+              :src="curXs.avatar || '/static/base/home/11222.png'"
+              class="w-full h-full"
+            ></image>
           </view>
-          <view 
-            class="tab-item"
-            :class="{ 'active': activeTab === 'football' }"
-            @click="switchTab('football')"
-          >
-            <text>足球</text>
+          <view class="student-info">
+            <text class="student-name">{{ curXs.xm }}</text>
+            <text class="student-class"
+              >{{ curXs.njmc }} {{ curXs.bjmc }}</text
+            >
           </view>
-        </view>
-        
-        <!-- 篮球课程信息卡片 -->
-        <view class="course-card" v-if="activeTab === 'basketball'">
-          <view class="course-image-placeholder"></view>
-          <view class="course-info">
-            <text class="course-name">篮球</text>
-            <view class="course-detail">
-              <text class="detail-label">开课老师：</text>
-              <text class="detail-value">叶老师</text>
-            </view>
-            <view class="course-detail">
-              <text class="detail-label">上课地点：</text>
-              <text class="detail-value">教学楼3楼</text>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 足球课程信息卡片 -->
-        <view class="course-card" v-if="activeTab === 'football'">
-          <view class="course-image-placeholder"></view>
-          <view class="course-info">
-            <text class="course-name">足球</text>
-            <view class="course-detail">
-              <text class="detail-label">开课老师：</text>
-              <text class="detail-value">王老师</text>
-            </view>
-            <view class="course-detail">
-              <text class="detail-label">上课地点：</text>
-              <text class="detail-value">操场</text>
-            </view>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 教学计划 -->
-      <view class="teaching-plan-section">
-        <view class="section-title-bar">
-          <text class="title-text">教学计划</text>
-        </view>
-        
-        <!-- 篮球教学计划 -->
-        <view class="plan-content" v-if="activeTab === 'basketball'">
-          <view class="plan-item">
-            <text class="plan-phase">第一阶段：</text>
-            <text class="plan-desc">了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第二阶段：</text>
-            <text class="plan-desc">在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第三阶段：</text>
-            <text class="plan-desc">学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第四阶段：</text>
-            <text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
-          </view>
-        </view>
-        
-        <!-- 足球教学计划 -->
-        <view class="plan-content" v-if="activeTab === 'football'">
-          <view class="plan-item">
-            <text class="plan-phase">第一阶段：</text>
-            <text class="plan-desc">基础训练，包括传球、控球和基本规则学习。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第二阶段：</text>
-            <text class="plan-desc">进阶技巧学习，包括带球跑动、射门和防守基础。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第三阶段：</text>
-            <text class="plan-desc">团队配合训练，学习简单的战术配合和位置意识。</text>
-          </view>
-          
-          <view class="plan-item">
-            <text class="plan-phase">第四阶段：</text>
-            <text class="plan-desc">小型比赛实践，培养学生的团队协作能力和比赛经验。</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 课堂随拍 -->
-      <view class="class-photos-section">
-        <view class="section-title-bar">
-          <text class="title-text">课堂随拍</text>
-        </view>
-        
-        <!-- 篮球课堂照片 -->
-        <view class="photos-grid" v-if="activeTab === 'basketball'">
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-        </view>
-        
-        <!-- 足球课堂照片 -->
-        <view class="photos-grid" v-if="activeTab === 'football'">
-          <view class="photo-placeholder football-photo"></view>
-          <view class="photo-placeholder football-photo"></view>
-          <view class="photo-placeholder football-photo"></view>
-          <view class="photo-placeholder football-photo"></view>
+          <view class="switch-btn" v-if="xsList.length > 1">切换</view>
         </view>
       </view>
     </view>
-    <template #bottom>
-      <view class="white-bg-color py-5">
-        <view class="flex-row items-center pb-10 pt-5">
-          <u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
-          <u-button text="退课申请" class="mr-15 mr-7" type="primary" @click="submit"/>
+
+    <!-- 可滚动的内容区域 -->
+    <view class="scrollable-content">
+      <!-- 课程网格列表 -->
+      <view class="course-grid" v-if="courseListData.length > 0">
+        <view
+          v-for="(course, index) in courseListData"
+          :key="course.id || index"
+          class="course-item"
+          :class="{ selected: course.isSelected }"
+        >
+          <view class="course-name">{{ course.kcmc }}</view>
+          <view class="register-info">
+            <text>上课人数：</text>
+            <text class="register-count">{{ course.ybmr }}</text>
+          </view>
+          <view class="detail-btn" @click.stop="viewCourseDetail(course)"
+            >详情</view
+          >
+          <view v-if="course.isSelected" class="selected-mark">
+            <uni-icons
+              type="checkbox-filled"
+              color="#3FBF72"
+              size="22"
+            ></uni-icons>
+          </view>
         </view>
       </view>
-    </template>
-  </BasicLayout>
+
+      <!-- 暂无数据提示 -->
+      <view v-else class="empty-course-list">
+        <view class="empty-icon">
+          <u-icon name="list" size="50" color="#C8C9CC"></u-icon>
+        </view>
+        <view class="empty-text">暂无课程数据</view>
+      </view>
+    </view>
+
+    <view>
+      <!-- 学生选择弹窗 -->
+      <u-popup
+        :show="showXsFlag"
+        @close="showXsFlag = false"
+        mode="bottom"
+        round="10"
+      >
+        <view class="student-selector">
+          <view class="selector-header">
+            <text class="selector-title">选择学生</text>
+            <u-icon
+              name="close"
+              size="20"
+              @click="showXsFlag = false"
+            ></u-icon>
+          </view>
+          <view class="student-list">
+            <view
+              v-for="(xs, index) in xsList"
+              :key="index"
+              class="student-item"
+              :class="{
+                'student-item-active': curXs.id === xs.id
+              }"
+              @click="switchXs(xs)"
+            >
+              <view class="student-avatar">
+                <image
+                  :src="xs.avatar || '/static/base/home/11222.png'"
+                  class="w-full h-full"
+                ></image>
+              </view>
+              <view class="student-info">
+                <text class="student-name">{{ xs.xm }}</text>
+                <text class="student-class"
+                  >{{ xs.njmc }} {{ xs.bjmc }}</text
+                >
+              </view>
+              <u-icon
+                v-if="curXs.id === xs.id"
+                name="checkmark"
+                color="#409EFF"
+                size="20"
+              ></u-icon>
+            </view>
+          </view>
+        </view>
+      </u-popup>
+    </view>
+		
+		<view>
+			<!-- 俱乐部选择弹窗 -->
+			<u-popup
+				:show="showXkFlag"
+				@close="showXkFlag = false"
+				mode="bottom"
+				round="10"
+			>
+				<view class="student-selector">
+					<view class="selector-header">
+						<text class="selector-title">选择俱乐部</text>
+						<u-icon
+							name="close"
+							size="20"
+							@click="showXkFlag = false"
+						></u-icon>
+					</view>
+					<view class="student-list">
+						<view
+							v-for="(xk, index) in xkList"
+							:key="index"
+							class="student-item"
+							:class="{
+								'student-item-active': xkData.id === xk.id
+							}"
+							@click="switchXk(xk)"
+						>
+							<view class="student-info">
+								<text class="student-name">{{ xk.xkmc }}</text>
+							</view>
+							<u-icon
+								v-if="xkData.id === xk.id"
+								name="checkmark"
+								color="#409EFF"
+								size="20"
+							></u-icon>
+						</view>
+					</view>	
+				</view>
+			</u-popup>
+		</view>
+			
+	</view>
 </template>
 
-<script lang="ts" setup>
-import { navigateBack } from "@/utils/uniapp";
-import { ref } from "vue";
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  reactive,
+  onBeforeUnmount,
+  watch,
+  onMounted,
+} from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+import { xkListApi, xsXkListApi } from "@/api/base/server";
+import dayjs from "dayjs";
 
-// 当前激活的选项卡，默认为篮球
-const activeTab = ref('basketball');
+const { getUser, getCurXs } = useUserStore();
+const { getData, setKcData, setData } = useDataStore();
+const { sign_file } = getData;
 
-// 切换选项卡
-function switchTab(tab: string) {
-  activeTab.value = tab;
+// 学生列表数据
+const xsList = computed(() => {
+  return getUser.xsList;
+});
+
+const curXs = ref<any>({});
+
+// 控制选择器显示状态
+const showXsFlag = ref(false);
+const showXkFlag = ref(false);
+
+if (xsList.value.length > 1) {
+  showXsFlag.value = true;
 }
 
-function submit() {
-  const courseName = activeTab.value === 'basketball' ? '篮球' : '足球';
-  
-  uni.showModal({
-    title: '确认退课',
-    content: `确定要退出${courseName}课程吗？`,
-    success: (res) => {
-      if (res.confirm) {
-        uni.showToast({
-          title: `${courseName}退课申请已提交`,
-          icon: 'none'
-        });
+const xkList = ref<any>([]);
+
+const xkData = ref();
+const kcStatus = ref(false);
+
+const courseInfo = ref<any>({});
+
+onMounted(() => {
+	curXs.value = getCurXs;
+	// 先加载课程列表，不立即检查报名状态
+	uni.showLoading({
+		title: "加载中...",
+	});
+	loadCourseList(curXs.value);
+});
+
+// 加载课程列表
+const loadCourseList = (xs: any) => {
+  if (!xs) {
+    uni.hideLoading();
+    return;
+  }
+
+  xsXkListApi({
+		xsId: xs.id,
+		njId: xs.njId,
+    xklxId: "816059832",
+  })
+    .then((res) => {
+      if (res.resultCode == 1) {
+        if (res.result && res.result.length) {
+					xkList.value = res.result;
+          xkData.value = res.result[0];
+        } else {
+					xkList.value = [];
+					xkData.value = {};
+        }
+        uni.hideLoading();
       }
-    }
+    })
+    .catch(() => {
+      uni.hideLoading();
+    });
+};
+
+// 显示学生选择器
+function clickShowXsSelector() {
+  if (xsList.value.length > 1) {
+    showXsFlag.value = true;
+  }
+}
+
+// 显示学生选择器
+function clickShowXkSelector() {
+  if (xkList.value.length > 1) {
+    showXkFlag.value = true;
+  }
+}
+
+// 切换学生
+function switchXs(xs: any) {
+  curXs.value = xs;
+  showXsFlag.value = false;
+
+  // 显示加载中
+  uni.showLoading({
+    title: "加载中...",
+  });
+
+  // 显示切换成功提示
+  uni.showToast({
+    title: `已切换到${xs.xm}`,
+    icon: "none",
+  });
+
+  // 先加载当前学生的课程列表，课程数据加载完成后会自动检查报名状态
+  loadCourseList(xs);
+}
+
+// 切换学生
+function switchXk(xk: any) {
+  xkData.value = xk;
+  showXkFlag.value = false;
+
+  // 显示切换成功提示
+  uni.showToast({
+    title: `已切换到${xk.xkmc}`,
+    icon: "none",
   });
 }
+
+// 从课程数据中提取课程列表
+const displayCourseList = computed(() => {
+  if (
+    !xkData.value ||
+    !xkData.value.xkkcs ||
+    !Array.isArray(xkData.value.xkkcs)
+  ) {
+    return [];
+  }
+
+  // 获取本地存储的已选课程ID数组
+  const selectedCourseIds = uni.getStorageSync("selectedCourseIds") || [];
+
+  // 为课程添加选中状态属性
+  return xkData.value.xkkcs.map((course: any) => ({
+    ...course,
+    isSelected: selectedCourseIds.includes(course.id),
+  }));
+});
+
+// 可修改的课程列表数据
+const courseListData = ref<any[]>([]);
+
+// 计算已选择的课程数量
+const selectedCoursesCount = computed(() => {
+  return courseListData.value.filter((course: any) => course.isSelected).length;
+});
+
+// 监听计算属性变化，更新可修改的数据
+watch(
+  displayCourseList,
+  (newVal) => {
+    courseListData.value = JSON.parse(JSON.stringify(newVal));
+
+    // 初始化时，将已选课程的全部信息存入courseInfo
+    const selectedCourseIds = uni.getStorageSync("selectedCourseIds") || [];
+    if (selectedCourseIds.length > 0) {
+      const selectedCourses = newVal.filter((course: any) =>
+        selectedCourseIds.includes(course.id)
+      );
+      courseInfo.value = selectedCourses;
+    }
+  },
+  { immediate: true }
+);
+
+// 查看课程详情
+const viewCourseDetail = (course: any) => {
+  setKcData(course);
+  uni.navigateTo({
+    url: `/pages/base/course-selection/detail`,
+  });
+};
+
+// 页面卸载前清除定时器
+onBeforeUnmount(() => {
+});
 </script>
 
 <style lang="scss" scoped>
-/* 顶部蓝色背景横幅 */
-.banner-section {
-  margin-bottom: 15px;
-  
-  .banner-placeholder {
-    height: 120px;
-    background-color: #3986FF;
-    border-radius: 10px;
+.interest-course {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  height: 44px;
+  background-color: #fff;
+
+  .nav-left {
+    width: 40px;
+    height: 40px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    
-    .banner-content {
-      text-align: center;
-      
-      .banner-title {
-        font-size: 22px;
-        color: #ffffff;
-        font-weight: 500;
-        margin-bottom: 8px;
-        display: block;
+  }
+
+  .nav-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .nav-right {
+    width: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.selection-header {
+  background: linear-gradient(135deg, #4a90e2, #2879ff);
+  padding: 20px 15px;
+  color: #fff;
+  border-radius: 0 0 15px 15px;
+  box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    .title-section {
+      display: flex;
+      align-items: center;
+      .title {
+				flex: 1 0 1px;
+        font-size: 24px;
+        font-weight: bold;
       }
-      
-      .banner-school {
+
+      .subtitle {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.9);
+        opacity: 0.8;
       }
+			
+			.switch-btn {
+			  padding: 5px 15px;
+			  background-color: rgba(255, 255, 255, 0.2);
+			  color: #fff;
+			  border-radius: 15px;
+			  font-size: 15px;
+			}
     }
-  }
-}
 
-/* 我的课程 */
-.my-course-section {
-  margin-bottom: 15px;
-  
-  .section-title {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-    
-    .title-text {
-      font-size: 16px;
-      font-weight: 500;
-      color: #303133;
-      margin-left: 6px;
-    }
-  }
-  
-  .tabs-container {
-    display: flex;
-    border-bottom: 1px solid #ebeef5;
-    margin-bottom: 15px;
-    
-    .tab-item {
-      padding: 12px 0;
-      margin-right: 20px;
-      position: relative;
-      
-      text {
-        color: #606266;
-        font-size: 15px;
+    // 学生选择栏样式
+    .student-selector-bar {
+      display: flex;
+      align-items: center;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      padding: 10px;
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #fff;
+        overflow: hidden;
+        margin-right: 10px;
       }
-      
-      &.active {
-        text {
-          color: #1976d2;
-          font-weight: 500;
-        }
-        
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: 2px;
-          background-color: #1976d2;
-        }
-      }
-    }
-  }
-  
-  .course-card {
-    background-color: #ffffff;
-    border-radius: 10px;
-    padding: 15px;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
-    
-    .course-image-placeholder {
-      width: 120px;
-      height: 100px;
-      background-color: #f0f0f0;
-      border-radius: 6px;
-      margin-right: 15px;
-      flex-shrink: 0;
-    }
-    
-    .course-info {
-      flex: 1;
-      
-      .course-name {
-        font-size: 18px;
-        font-weight: 500;
-        color: #303133;
-        margin-bottom: 10px;
-      }
-      
-      .course-detail {
+
+      .student-info {
+        flex: 1;
         display: flex;
-        margin-bottom: 6px;
-        
-        &:last-child {
-          margin-bottom: 0;
+        flex-direction: column;
+
+        .student-name {
+          font-size: 16px;
+          font-weight: 500;
+          margin-bottom: 2px;
         }
-        
-        .detail-label {
-          color: #606266;
-          font-size: 14px;
+
+        .student-class {
+          font-size: 12px;
+          opacity: 0.8;
         }
-        
-        .detail-value {
-          color: #303133;
-          font-size: 14px;
+      }
+
+      .switch-btn {
+        padding: 4px 12px;
+        background-color: rgba(255, 255, 255, 0.2);
+        color: #fff;
+        border-radius: 20px;
+        font-size: 13px;
+      }
+    }
+
+    .countdown-section {
+      .countdown-title {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .countdown-timer {
+        display: flex;
+        align-items: center;
+
+        .time-block {
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 6px;
+          min-width: 40px;
+          padding: 5px 8px;
+          text-align: center;
+
+          .time-value {
+            font-size: 20px;
+            font-weight: bold;
+            display: block;
+          }
+
+          .time-unit {
+            font-size: 12px;
+            opacity: 0.9;
+          }
+        }
+
+        .time-separator {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 0 5px;
         }
       }
     }
   }
 }
 
-/* 教学计划 */
-.teaching-plan-section {
-  margin-bottom: 15px;
-  background-color: #ffffff;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
-  
-  .section-title-bar {
-    padding: 12px 15px;
-    border-bottom: 1px solid #f2f2f2;
-    
-    .title-text {
+// 可滚动内容区域样式
+.scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; // 增强iOS滚动体验
+}
+
+.course-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px 15px 0 15px;
+
+  .course-item {
+    position: relative;
+    width: calc(50% - 10px);
+    margin-bottom: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+
+    &:nth-child(even) {
+      margin-left: 10px;
+    }
+
+    &.selected {
+      border: 1px solid #3fbf72;
+      background-color: rgba(63, 191, 114, 0.05);
+      box-shadow: 0 2px 8px rgba(63, 191, 114, 0.15);
+    }
+
+    .course-name {
       font-size: 16px;
       font-weight: 500;
-      color: #303133;
+      color: #333;
+      margin-bottom: 10px;
     }
-  }
-  
-  .plan-content {
-    padding: 15px;
-    
-    .plan-item {
-      margin-bottom: 15px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    
-    .plan-phase {
-      font-size: 15px;
-      font-weight: 500;
-      color: #303133;
-    }
-    
-    .plan-desc {
+
+    .register-info {
       font-size: 14px;
-      color: #606266;
-      line-height: 1.5;
+      color: #666;
+      margin-bottom: 12px;
+
+      .register-count {
+        color: #2879ff;
+      }
+    }
+
+    .detail-btn {
+      display: inline-block;
+      color: #2879ff;
+      font-size: 14px;
+    }
+
+    .selected-mark {
+      position: absolute;
+      top: -6px;
+      right: -6px;
     }
   }
 }
 
-/* 课堂随拍 */
-.class-photos-section {
+.register-btn-container {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  background-color: #fff;
+  z-index: 10;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+
+  .register-btn {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #2879ff;
+    color: #fff;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+/* 学生选择器弹窗样式 */
+.student-selector {
   background-color: #ffffff;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
-  margin-bottom: 60px;
-  
-  .section-title-bar {
-    padding: 12px 15px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  padding-bottom: 20px;
+
+  .selector-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
     border-bottom: 1px solid #f2f2f2;
-    
-    .title-text {
+
+    .selector-title {
       font-size: 16px;
       font-weight: 500;
       color: #303133;
     }
   }
-  
-  .photos-grid {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 15px;
-    
-    .photo-placeholder {
-      width: calc(50% - 8px);
-      height: 110px;
-      background-color: #f0f0f0;
-      border-radius: 6px;
-      margin-right: 8px;
-      margin-bottom: 8px;
-      
-      &:nth-child(2n) {
-        margin-right: 0;
+
+  .student-list {
+    padding: 0 15px;
+
+    .student-item {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #f2f2f2;
+
+      &:last-child {
+        border-bottom: none;
       }
-      
-      &:nth-child(3), &:nth-child(4) {
-        margin-bottom: 0;
+
+      &-active {
+        background-color: rgba(64, 158, 255, 0.05);
       }
-      
-      &.football-photo {
-        background-color: #f5f5f5;
+
+      .student-avatar {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        background-color: #f0f0f0;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+
+      .student-info {
+        flex: 1;
+        margin-left: 12px;
+
+        .student-name {
+          font-size: 15px;
+          font-weight: 500;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .student-class {
+          font-size: 13px;
+          color: #606266;
+        }
       }
     }
   }
 }
+
+/* 全局图片样式 */
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+// 暂无数据样式
+.empty-course-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+
+  .empty-icon {
+    margin-bottom: 20px;
+    background-color: #f5f6f7;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .empty-text {
+    font-size: 18px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 8px;
+  }
+
+  .empty-desc {
+    font-size: 14px;
+    color: #909399;
+    max-width: 80%;
+    line-height: 1.5;
+  }
+}
+
+/* 选课已结束样式 */
+.enrollment-ended {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 12px 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  gap: 8px;
+}
 </style>
diff --git a/src/pages/base/home/detail.vue b/src/pages/base/home/detail.vue
index e2d3da5..896d559 100644
--- a/src/pages/base/home/detail.vue
+++ b/src/pages/base/home/detail.vue
@@ -3,17 +3,18 @@
     <!-- 通知头部 -->
     <view class="notice-header">
       <view class="notice-title">
-        <text>开学典礼安排通知</text>
+        <text>{{data.title}}</text>
       </view>
       <view class="notice-meta">
-        <text class="publisher">发布人: 李校长</text>
-        <text class="date">2023-07-18 10:30</text>
+        <text class="publisher">发布人: {{data.author}}</text>
+        <text class="date">{{data.releaseTime}}</text>
       </view>
     </view>
 
     <!-- 通知内容 -->
     <view class="notice-content">
-      <view class="content-section">
+			<rich-text :nodes="data.content"></rich-text>
+      <!-- <view class="content-section">
         <text class="section-title">尊敬的各位家长：</text>
         <text class="section-text">您好！经学校研究决定，将于2023年9月1日（星期五）上午9:00举行新学年开学典礼。现将有关事项通知如下：</text>
       </view>
@@ -52,49 +53,122 @@
       
       <view class="content-section">
         <text class="section-text">感谢各位家长的配合与支持！</text>
-      </view>
+      </view> -->
     </view>
 
     <!-- 附件区域 -->
-    <view class="attachment-section">
+<!--   <view class="attachment-section">
       <view class="section-header">
         <text class="header-title">附件</text>
       </view>
       
       <view class="attachment-list">
-        <view class="attachment-item" @click="previewAttachment">
+        <view class="attachment-item" @click="downloadFile(file)"
+            v-for="(file, index) in fileList"
+            :key="index">
           <u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
-          <text class="attachment-name">开学典礼流程安排.pdf</text>
-          <u-icon name="download" size="20" color="#999"></u-icon>
-        </view>
-        
-        <view class="attachment-item" @click="previewAttachment">
-          <u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
-          <text class="attachment-name">学校地图及交通指南.pdf</text>
+          <text class="attachment-name">{{file}}</text>
           <u-icon name="download" size="20" color="#999"></u-icon>
         </view>
       </view>
-    </view>
+    </view> -->
   </view>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useDataStore } from "@/store/modules/data";
+const { getData } = useDataStore();
 
-// 预览附件
-const previewAttachment = () => {
+let data = ref({
+  "id": 2142746416,
+  "createdTime": "2024-10-10 09:37:45",
+  "updatedTime": "2024-10-12 15:47:44",
+  "createdUserName": "管理员",
+  "updatedUserName": "管理员",
+  "title": "值周学生常规规范",
+  "columnId": 24,
+  "sort": 1,
+  "description": "",
+  "releaseTime": "2024-10-10 09:32:36",
+  "author": "",
+  "source": "",
+  "content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
+  "columnName": "师、生值周工作要求",
+  "pk": 2142746416,
+	"linkaddress": ""
+})
+
+let fileList = ref([
+	{
+		title: '',
+		url: ''
+	}
+])
+
+// 下载附件
+const downloadFile = (file: any) => {
   uni.showToast({
     title: "附件下载中...",
     icon: "loading"
   });
-  
-  // 模拟下载过程
-  setTimeout(() => {
-    uni.showToast({
-      title: "下载成功",
-      icon: "success"
-    });
-  }, 1500);
+	uni.downloadFile({
+	  url: file.url, // 文件下载链接
+	  success: (res) => {
+	    if (res.statusCode === 200) {
+	      // 在 H5 或 App 中，可以通过临时路径访问文件
+	      console.log('下载成功，临时路径:', res.tempFilePath);
+	      // 在 App 中，可以调用保存到本地的方法
+	      // #ifdef APP-PLUS
+	      uni.saveFile({
+	        tempFilePath: res.tempFilePath,
+	        success: (saveRes) => {
+	          console.log('文件保存成功:', saveRes.savedFilePath);
+						uni.showToast({
+							title: "下载成功",
+							icon: "success"
+						});
+	        },
+	        fail: (err) => {
+	          console.log('保存失败:', err);
+						uni.showToast({
+							title: "保存失败",
+							icon: "error"
+						});
+	        }
+	      });
+	      // #endif
+	
+	      // 在小程序中，可能需要调用小程序的保存文件 API
+	      // #ifdef MP-WEIXIN
+	      wx.saveFile({
+	        tempFilePath: res.tempFilePath,
+	        success: (saveRes) => {
+	          console.log('文件保存成功:', saveRes.savedFilePath);
+						uni.showToast({
+							title: "下载成功",
+							icon: "success"
+						});
+	        },
+	        fail: (err) => {
+	          console.log('保存失败:', err);
+						uni.showToast({
+							title: "保存失败",
+							icon: "error"
+						});
+	        }
+	      });
+	      // #endif
+	    }
+	  },
+	  fail: (err) => {
+	    console.log('下载失败:', err);
+			uni.showToast({
+				title: "下载失败",
+				icon: "error"
+			});
+	  }
+	});
 };
 
 // 分享通知
@@ -104,6 +178,15 @@ const shareNotice = () => {
     menus: ['shareAppMessage', 'shareTimeline']
   });
 };
+
+onMounted(async () => {
+	data.value = getData	
+	// 滚动到顶部
+	uni.pageScrollTo({
+		scrollTop: 0,
+		duration: 0 // 立即滚动，无动画
+	});
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/base/home/index.vue b/src/pages/base/home/index.vue
index b01ea00..608ffee 100644
--- a/src/pages/base/home/index.vue
+++ b/src/pages/base/home/index.vue
@@ -70,7 +70,7 @@
             v-for="(notice, index) in announcements"
             :key="index"
             class="notice-item"
-            @click="navigateTo('/pages/base/home/detail')"
+            @click="goToDetail(notice)"
           >
             <view class="notice-icon">
               <u-icon name="bell" size="20" color="#4A90E2"></u-icon>
@@ -79,7 +79,7 @@
               <text class="notice-title">{{ notice.title }}</text>
               <text class="notice-desc">{{ notice.description }}</text>
               <view class="notice-footer">
-                <text class="notice-date">{{ notice.date }}</text>
+                <text class="notice-date">{{ notice.releaseTime }}</text>
                 <view class="notice-arrow">
                   <u-icon name="arrow-right" size="12" color="#C8C9CC"></u-icon>
                 </view>
@@ -130,10 +130,12 @@
 </template>
 
 <script setup lang="ts">
-import { navigateTo } from "@/utils/uniapp";
 import { ref } from "vue";
+import { cmsArticlePageApi } from "@/api/base/server";
 import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
 const { getUser, setCurXs, getCurXs } = useUserStore();
+const { setData } = useDataStore();
 
 // 菜单项数据
 const menuItems = ref([
@@ -176,26 +178,25 @@ const menuItems = ref([
 ]);
 
 // 通知公告数据
-const announcements = ref([
-  {
-    image: "",
-    title: "关于《泸州市xxxxxxxx管理办法》的通知",
-    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
-    date: "2025-02-12 12:33:44",
-  },
-  {
-    image: "",
-    title: "关于《泸州市xxxxxxxx管理办法》的通知",
-    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
-    date: "2025-02-12 12:33:44",
-  },
-  {
-    image: "",
-    title: "关于《泸州市xxxxxxxx管理办法》的通知",
-    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
-    date: "2025-02-12 12:33:44",
-  },
-]);
+const announcements = ref<any>([
+	{
+	  "id": 2142746416,
+	  "createdTime": "2024-10-10 09:37:45",
+	  "updatedTime": "2024-10-12 15:47:44",
+	  "createdUserName": "管理员",
+	  "updatedUserName": "管理员",
+	  "title": "值周学生常规规范",
+	  "columnId": 24,
+	  "sort": 1,
+	  "description": "",
+	  "releaseTime": "2024-10-10 09:32:36",
+	  "author": "",
+	  "source": "",
+	  "content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
+	  "columnName": "师、生值周工作要求",
+	  "pk": 2142746416
+	}
+])
 
 // 学生列表数据
 const studentList = ref([
@@ -214,6 +215,11 @@ let currentStudent = ref(studentList.value[0]);
 // 控制选择器显示状态
 const showSelector = ref(false);
 
+let pageParams = ref({
+	page: 1,
+	rows: 10
+})
+
 // 处理菜单点击
 function handleMenuClick(item: any) {
   console.log("点击菜单:", item.title);
@@ -243,9 +249,24 @@ function switchStudent(student: any) {
   });
 }
 
+// 跳转到详情页面
+function goToDetail(notice: any) {
+	setData(notice)
+	uni.navigateTo({
+		url: '/pages/base/home/detail'
+	})
+}
+
 onMounted(async () => {
 	studentList.value = getUser.xsList;
 	currentStudent = getCurXs;
+	cmsArticlePageApi(pageParams.value).then(res => {
+		announcements.value = res.rows;
+  })
+  .catch((error) => {
+		// 接口调用失败
+		console.error("调用检查通知公告接口失败:", error);
+  });
 });
 </script>
 
diff --git a/src/pages/base/interest-class/index - 副本.vue b/src/pages/base/interest-class/index - 副本.vue
new file mode 100644
index 0000000..13089b0
--- /dev/null
+++ b/src/pages/base/interest-class/index - 副本.vue	
@@ -0,0 +1,305 @@
+<template>
+  <view class="interest-class-page">
+
+    <view class="content-container">
+      <!-- 顶部蓝色背景横幅 -->
+      <view class="banner-section">
+
+        <view class="banner-placeholder">
+          <image src="/static/base/home/43221.png" mode="widthFix" class="w-full h-full"></image>
+        </view>
+      </view>
+
+      <!-- 我的课程 -->
+      <view class="my-course-section">
+        <view class="section-title">
+          <u-icon name="calendar" size="18" color="#1976d2"></u-icon>
+          <text class="title-text">我的课程</text>
+        </view>
+
+        <view class="course-card">
+          <view class="course-image-placeholder"></view>
+          <view class="course-info">
+            <text class="course-name">篮球</text>
+            <view class="course-detail">
+              <text class="detail-label">开课老师：</text>
+              <text class="detail-value">叶老师</text>
+            </view>
+            <view class="course-detail">
+              <text class="detail-label">上课地点：</text>
+              <text class="detail-value">教学楼3楼</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 教学计划 -->
+      <view class="teaching-plan-section">
+        <view class="section-title-bar">
+          <text class="title-text">教学计划</text>
+        </view>
+
+        <view class="plan-content">
+          <view class="plan-item">
+            <text class="plan-phase">第一阶段：</text>
+            <text class="plan-desc"
+              >了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text
+            >
+          </view>
+
+          <view class="plan-item">
+            <text class="plan-phase">第二阶段：</text>
+            <text class="plan-desc"
+              >在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text
+            >
+          </view>
+
+          <view class="plan-item">
+            <text class="plan-phase">第三阶段：</text>
+            <text class="plan-desc"
+              >学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text
+            >
+          </view>
+
+          <view class="plan-item">
+            <text class="plan-phase">第四阶段：</text>
+            <text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 课堂随拍 -->
+      <view class="class-photos-section">
+        <view class="section-title-bar">
+          <text class="title-text">课堂随拍</text>
+        </view>
+
+        <view class="photos-grid">
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+          <view class="photo-placeholder"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { xkFindDqXsApi } from "@/api/base/server";
+import { useUserStore } from "@/store/modules/user";
+const { getCurXs } = useUserStore();
+
+onMounted(async () => {
+  // Make onMounted async
+  xkFindDqXsApi({
+		xsId: getCurXs.id,
+		xklxId: '962488654'
+	}).then(res => {
+    // 根据接口返回的result判断是否已报名
+    if (res && res.resultCode === 1) {
+			console.log(res)
+    } else {
+      // 接口调用成功但返回错误
+      console.warn("检查获取当前学期兴趣课接口返回错误:", res);
+    }
+  })
+  .catch((error) => {
+	// 接口调用失败
+	console.error("调用获取当前学期兴趣课接口失败:", error);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.interest-class-page {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+}
+
+.content-container {
+  padding: 15px;
+}
+
+/* 顶部蓝色背景横幅 */
+.banner-section {
+  margin-bottom: 15px;
+
+  .banner-placeholder {
+    height: 120px;
+    background-color: #3986ff;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .banner-content {
+      text-align: center;
+
+      .banner-title {
+        font-size: 22px;
+        color: #ffffff;
+        font-weight: 500;
+        margin-bottom: 8px;
+        display: block;
+      }
+
+      .banner-school {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+  }
+}
+
+/* 我的课程 */
+.my-course-section {
+  margin-bottom: 15px;
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      margin-left: 6px;
+    }
+  }
+
+  .course-card {
+    background-color: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+
+    .course-image-placeholder {
+      width: 120px;
+      height: 100px;
+      background-color: #f0f0f0;
+      border-radius: 6px;
+      margin-right: 15px;
+      flex-shrink: 0;
+    }
+
+    .course-info {
+      flex: 1;
+
+      .course-name {
+        font-size: 18px;
+        font-weight: 500;
+        color: #303133;
+        margin-bottom: 10px;
+      }
+
+      .course-detail {
+        display: flex;
+        margin-bottom: 6px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .detail-label {
+          color: #606266;
+          font-size: 14px;
+        }
+
+        .detail-value {
+          color: #303133;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+
+/* 教学计划 */
+.teaching-plan-section {
+  margin-bottom: 15px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .section-title-bar {
+    padding: 12px 15px;
+    border-bottom: 1px solid #f2f2f2;
+
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .plan-content {
+    padding: 15px;
+
+    .plan-item {
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .plan-phase {
+      font-size: 15px;
+      font-weight: 500;
+      color: #303133;
+    }
+
+    .plan-desc {
+      font-size: 14px;
+      color: #606266;
+      line-height: 1.5;
+    }
+  }
+}
+
+/* 课堂随拍 */
+.class-photos-section {
+  background-color: #ffffff;
+  border-radius: 10px;
+  overflow: hidden;
+
+  .section-title-bar {
+    padding: 12px 15px;
+    border-bottom: 1px solid #f2f2f2;
+
+    .title-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .photos-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 15px;
+
+    .photo-placeholder {
+      width: calc(50% - 8px);
+      height: 110px;
+      background-color: #f0f0f0;
+      border-radius: 6px;
+      margin-right: 8px;
+      margin-bottom: 8px;
+
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+
+      &:nth-child(3),
+      &:nth-child(4) {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/base/interest-class/index.vue b/src/pages/base/interest-class/index.vue
index 9b93495..b0e9b18 100644
--- a/src/pages/base/interest-class/index.vue
+++ b/src/pages/base/interest-class/index.vue
@@ -1,282 +1,676 @@
 <template>
-  <view class="interest-class-page">
+  <view class="interest-course">
+    <!-- 选课信息头部 - 固定部分 -->
+    <view class="selection-header">
+      <view class="header-content">
+        <view class="title-section">
+          <view class="title">
+            <text v-if="xkData && xkData.xkmc">{{ xkData.xkmc }}</text>
+            <text v-else>选课信息</text>
+          </view>
+          <!-- <view class="subtitle">互动兴趣课程</view> -->
+        </view>
+        <!-- 学生选择部分 -->
+        <view class="student-selector-bar" @click="showStudentSelector">
+          <view class="user-avatar">
+            <image
+              :src="currentStudent.avatar || '/static/base/home/11222.png'"
+              class="w-full h-full"
+            ></image>
+          </view>
+          <view class="student-info">
+            <text class="student-name">{{ currentStudent.xm }}</text>
+            <text class="student-class"
+              >{{ currentStudent.njmc }} {{ currentStudent.bjmc }}</text
+            >
+          </view>
+          <view class="switch-btn" v-if="studentList.length > 1">切换</view>
+        </view>
+      </view>
+    </view>
 
-    <view class="content-container">
-      <!-- 顶部蓝色背景横幅 -->
-      <view class="banner-section">
-
-        <view class="banner-placeholder">
-          <image src="/static/base/home/43221.png" mode="widthFix" class="w-full h-full"></image>
+    <!-- 可滚动的内容区域 -->
+    <view class="scrollable-content">
+      <!-- 课程网格列表 -->
+      <view class="course-grid" v-if="courseListData.length > 0">
+        <view
+          v-for="(course, index) in courseListData"
+          :key="course.id || index"
+          class="course-item"
+          :class="{ selected: course.isSelected }"
+        >
+          <view class="course-name">{{ course.kcmc }}</view>
+          <view class="register-info">
+            <text>上课人数：</text>
+            <text class="register-count">{{ course.ybmr }}</text>
+          </view>
+          <view class="detail-btn" @click.stop="viewCourseDetail(course)"
+            >详情</view
+          >
+          <view v-if="course.isSelected" class="selected-mark">
+            <uni-icons
+              type="checkbox-filled"
+              color="#3FBF72"
+              size="22"
+            ></uni-icons>
+          </view>
         </view>
       </view>
 
-      <!-- 我的课程 -->
-      <view class="my-course-section">
-        <view class="section-title">
-          <u-icon name="calendar" size="18" color="#1976d2"></u-icon>
-          <text class="title-text">我的课程</text>
+      <!-- 暂无数据提示 -->
+      <view v-else class="empty-course-list">
+        <view class="empty-icon">
+          <u-icon name="list" size="50" color="#C8C9CC"></u-icon>
         </view>
+        <view class="empty-text">暂无课程数据</view>
+      </view>
+    </view>
 
-        <view class="course-card">
-          <view class="course-image-placeholder"></view>
-          <view class="course-info">
-            <text class="course-name">篮球</text>
-            <view class="course-detail">
-              <text class="detail-label">开课老师：</text>
-              <text class="detail-value">叶老师</text>
-            </view>
-            <view class="course-detail">
-              <text class="detail-label">上课地点：</text>
-              <text class="detail-value">教学楼3楼</text>
+    <view>
+      <!-- 学生选择弹窗 -->
+      <u-popup
+        :show="showSelector"
+        @close="showSelector = false"
+        mode="bottom"
+        round="10"
+      >
+        <view class="student-selector">
+          <view class="selector-header">
+            <text class="selector-title">选择学生</text>
+            <u-icon
+              name="close"
+              size="20"
+              @click="showSelector = false"
+            ></u-icon>
+          </view>
+          <view class="student-list">
+            <view
+              v-for="(student, index) in studentList"
+              :key="index"
+              class="student-item"
+              :class="{
+                'student-item-active': currentStudent.id === student.id,
+              }"
+              @click="switchStudent(student)"
+            >
+              <view class="student-avatar">
+                <image
+                  :src="student.avatar || '/static/base/home/11222.png'"
+                  class="w-full h-full"
+                ></image>
+              </view>
+              <view class="student-info">
+                <text class="student-name">{{ student.xm }}</text>
+                <text class="student-class"
+                  >{{ student.njmc }} {{ student.bjmc }}</text
+                >
+              </view>
+              <u-icon
+                v-if="currentStudent.id === student.id"
+                name="checkmark"
+                color="#409EFF"
+                size="20"
+              ></u-icon>
             </view>
           </view>
         </view>
-      </view>
-
-      <!-- 教学计划 -->
-      <view class="teaching-plan-section">
-        <view class="section-title-bar">
-          <text class="title-text">教学计划</text>
-        </view>
-
-        <view class="plan-content">
-          <view class="plan-item">
-            <text class="plan-phase">第一阶段：</text>
-            <text class="plan-desc"
-              >了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text
-            >
-          </view>
-
-          <view class="plan-item">
-            <text class="plan-phase">第二阶段：</text>
-            <text class="plan-desc"
-              >在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text
-            >
-          </view>
-
-          <view class="plan-item">
-            <text class="plan-phase">第三阶段：</text>
-            <text class="plan-desc"
-              >学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text
-            >
-          </view>
-
-          <view class="plan-item">
-            <text class="plan-phase">第四阶段：</text>
-            <text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 课堂随拍 -->
-      <view class="class-photos-section">
-        <view class="section-title-bar">
-          <text class="title-text">课堂随拍</text>
-        </view>
-
-        <view class="photos-grid">
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-          <view class="photo-placeholder"></view>
-        </view>
-      </view>
+      </u-popup>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { navigateTo } from "@/utils/uniapp";
+import {
+  ref,
+  computed,
+  reactive,
+  onBeforeUnmount,
+  watch,
+  onMounted,
+} from "vue";
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+import { xkListApi, xsXkListApi } from "@/api/base/server";
+import dayjs from "dayjs";
+
+const { getUser } = useUserStore();
+const { getData, setKcData, setData } = useDataStore();
+const { sign_file } = getData;
+
+// 学生列表数据
+const studentList = computed(() => {
+  return getUser.xsList;
+});
+
+const currentStudent = ref();
+
+// 控制选择器显示状态
+const showSelector = ref(false);
+
+if (studentList.value.length > 1) {
+  showSelector.value = true;
+}
+
+const xkData = ref();
+const kcStatus = ref(false);
+
+// 添加选课是否已结束的标记
+const isEnrollmentEnded = ref(false);
+
+// 添加轮询定时器变量
+let pollTimer: number | null = null;
+
+const courseInfo = ref({});
+
+// 更新课程报名人数
+const updateEnrollmentCount = (
+  data: Array<{ xkkcId: string; bmrs: number }>
+) => {
+  if (!Array.isArray(courseListData.value) || courseListData.value.length === 0)
+    return;
+
+  let hasUpdates = false;
+
+  courseListData.value.forEach((course) => {
+    const newCount = data.find((item) => item.xkkcId === course.id);
+    if (newCount && course.ybmr !== newCount.bmrs) {
+      course.ybmr = newCount.bmrs;
+      hasUpdates = true;
+    }
+  });
+
+  // 如果有更新，强制重新渲染列表
+  if (hasUpdates) {
+    courseListData.value = [...courseListData.value];
+  }
+};
+
+// 在组件挂载时开始轮询
+onMounted(() => {
+	
+});
+
+// 加载课程列表
+const loadCourseList = (currentStudent: any) => {
+  if (!currentStudent) {
+    uni.hideLoading();
+    return;
+  }
+
+  xsXkListApi({
+		xsId: currentStudent.id,
+		njId: currentStudent.njId,
+    xklxId: "962488654",
+  })
+    .then((res) => {
+      if (res.resultCode == 1) {
+        if (res.result && res.result.length) {
+					xkData.value = res.result[0];
+        } else {
+					xkData.value = [];
+        }
+        uni.hideLoading();
+      }
+    })
+    .catch(() => {
+      uni.hideLoading();
+    });
+};
+
+if (studentList.value.length > 0 && studentList.value.length === 1) {
+  currentStudent.value = studentList.value[0];
+  // 先加载课程列表，不立即检查报名状态
+  uni.showLoading({
+    title: "加载中...",
+  });
+  loadCourseList(currentStudent.value);
+}
+
+// 显示学生选择器
+function showStudentSelector() {
+  if (studentList.value.length > 1) {
+    showSelector.value = true;
+  }
+}
+
+// 切换学生
+function switchStudent(student: any) {
+  currentStudent.value = student;
+  showSelector.value = false;
+
+  // 显示加载中
+  uni.showLoading({
+    title: "加载中...",
+  });
+
+  // 显示切换成功提示
+  uni.showToast({
+    title: `已切换到${student.xm}`,
+    icon: "none",
+  });
+
+  // 先加载当前学生的课程列表，课程数据加载完成后会自动检查报名状态
+  loadCourseList(student);
+}
+
+// 从课程数据中提取课程列表
+const displayCourseList = computed(() => {
+  if (
+    !xkData.value ||
+    !xkData.value.xkkcs ||
+    !Array.isArray(xkData.value.xkkcs)
+  ) {
+    return [];
+  }
+
+  // 获取本地存储的已选课程ID
+  const selectedCourseId = uni.getStorageSync("selectedCourseId");
+
+  // 为课程添加选中状态属性
+  return xkData.value.xkkcs.map((course: any) => ({
+    ...course,
+    isSelected: selectedCourseId && course.id === selectedCourseId,
+  }));
+});
+
+// 可修改的课程列表数据
+const courseListData = ref<any[]>([]);
+
+// 监听计算属性变化，更新可修改的数据
+watch(
+  displayCourseList,
+  (newVal) => {
+    courseListData.value = JSON.parse(JSON.stringify(newVal));
+
+    // 初始化时，将已选课程的全部信息存入courseInfo
+    const selectedCourseId = uni.getStorageSync("selectedCourseId");
+    if (selectedCourseId) {
+      const selectedCourse = newVal.find(
+        (course: any) => course.id === selectedCourseId
+      );
+      if (selectedCourse) {
+        courseInfo.value = selectedCourse;
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// 查看课程详情
+const viewCourseDetail = (course: any) => {
+  setKcData(course);
+  uni.navigateTo({
+    url: `/pages/base/course-selection/detail`,
+  });
+};
+
+// 页面卸载前清除定时器
+onBeforeUnmount(() => {
+});
 </script>
 
 <style lang="scss" scoped>
-.interest-class-page {
-  background-color: #f8f8f8;
-  min-height: 100vh;
+.interest-course {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
 
-.content-container {
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 15px;
+  height: 44px;
+  background-color: #fff;
+
+  .nav-left {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .nav-right {
+    width: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
-/* 顶部蓝色背景横幅 */
-.banner-section {
-  margin-bottom: 15px;
+.selection-header {
+  background: linear-gradient(135deg, #4a90e2, #2879ff);
+  padding: 20px 15px;
+  color: #fff;
+  border-radius: 0 0 15px 15px;
+  box-shadow: 0 4px 12px rgba(40, 121, 255, 0.2);
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
 
-  .banner-placeholder {
-    height: 120px;
-    background-color: #3986ff;
-    border-radius: 10px;
+  .header-content {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    gap: 15px;
 
-    .banner-content {
-      text-align: center;
-
-      .banner-title {
-        font-size: 22px;
-        color: #ffffff;
-        font-weight: 500;
-        margin-bottom: 8px;
-        display: block;
+    .title-section {
+      .title {
+        font-size: 24px;
+        font-weight: bold;
       }
 
-      .banner-school {
+      .subtitle {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.9);
+        opacity: 0.8;
+      }
+    }
+
+    // 学生选择栏样式
+    .student-selector-bar {
+      display: flex;
+      align-items: center;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      padding: 10px;
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #fff;
+        overflow: hidden;
+        margin-right: 10px;
+      }
+
+      .student-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .student-name {
+          font-size: 16px;
+          font-weight: 500;
+          margin-bottom: 2px;
+        }
+
+        .student-class {
+          font-size: 12px;
+          opacity: 0.8;
+        }
+      }
+
+      .switch-btn {
+        padding: 4px 12px;
+        background-color: rgba(255, 255, 255, 0.2);
+        color: #fff;
+        border-radius: 20px;
+        font-size: 13px;
+      }
+    }
+
+    .countdown-section {
+      .countdown-title {
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .countdown-timer {
+        display: flex;
+        align-items: center;
+
+        .time-block {
+          background-color: rgba(255, 255, 255, 0.2);
+          border-radius: 6px;
+          min-width: 40px;
+          padding: 5px 8px;
+          text-align: center;
+
+          .time-value {
+            font-size: 20px;
+            font-weight: bold;
+            display: block;
+          }
+
+          .time-unit {
+            font-size: 12px;
+            opacity: 0.9;
+          }
+        }
+
+        .time-separator {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 0 5px;
+        }
       }
     }
   }
 }
 
-/* 我的课程 */
-.my-course-section {
-  margin-bottom: 15px;
+// 可滚动内容区域样式
+.scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; // 增强iOS滚动体验
+}
 
-  .section-title {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
+.course-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px 15px 0 15px;
 
-    .title-text {
+  .course-item {
+    position: relative;
+    width: calc(50% - 10px);
+    margin-bottom: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+
+    &:nth-child(even) {
+      margin-left: 10px;
+    }
+
+    &.selected {
+      border: 1px solid #3fbf72;
+      background-color: rgba(63, 191, 114, 0.05);
+      box-shadow: 0 2px 8px rgba(63, 191, 114, 0.15);
+    }
+
+    .course-name {
       font-size: 16px;
       font-weight: 500;
-      color: #303133;
-      margin-left: 6px;
-    }
-  }
-
-  .course-card {
-    background-color: #ffffff;
-    border-radius: 10px;
-    padding: 15px;
-    display: flex;
-    align-items: center;
-
-    .course-image-placeholder {
-      width: 120px;
-      height: 100px;
-      background-color: #f0f0f0;
-      border-radius: 6px;
-      margin-right: 15px;
-      flex-shrink: 0;
+      color: #333;
+      margin-bottom: 10px;
     }
 
-    .course-info {
-      flex: 1;
+    .register-info {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 12px;
 
-      .course-name {
-        font-size: 18px;
-        font-weight: 500;
-        color: #303133;
-        margin-bottom: 10px;
+      .register-count {
+        color: #2879ff;
       }
+    }
 
-      .course-detail {
-        display: flex;
-        margin-bottom: 6px;
+    .detail-btn {
+      display: inline-block;
+      color: #2879ff;
+      font-size: 14px;
+    }
 
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .detail-label {
-          color: #606266;
-          font-size: 14px;
-        }
-
-        .detail-value {
-          color: #303133;
-          font-size: 14px;
-        }
-      }
+    .selected-mark {
+      position: absolute;
+      top: -6px;
+      right: -6px;
     }
   }
 }
 
-/* 教学计划 */
-.teaching-plan-section {
-  margin-bottom: 15px;
-  background-color: #ffffff;
-  border-radius: 10px;
-  overflow: hidden;
+.register-btn-container {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  background-color: #fff;
+  z-index: 10;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
-  .section-title-bar {
-    padding: 12px 15px;
+  .register-btn {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #2879ff;
+    color: #fff;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+/* 学生选择器弹窗样式 */
+.student-selector {
+  background-color: #ffffff;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  padding-bottom: 20px;
+
+  .selector-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
     border-bottom: 1px solid #f2f2f2;
 
-    .title-text {
+    .selector-title {
       font-size: 16px;
       font-weight: 500;
       color: #303133;
     }
   }
 
-  .plan-content {
-    padding: 15px;
+  .student-list {
+    padding: 0 15px;
 
-    .plan-item {
-      margin-bottom: 15px;
+    .student-item {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px solid #f2f2f2;
 
       &:last-child {
-        margin-bottom: 0;
+        border-bottom: none;
       }
-    }
 
-    .plan-phase {
-      font-size: 15px;
-      font-weight: 500;
-      color: #303133;
-    }
+      &-active {
+        background-color: rgba(64, 158, 255, 0.05);
+      }
 
-    .plan-desc {
-      font-size: 14px;
-      color: #606266;
-      line-height: 1.5;
+      .student-avatar {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        background-color: #f0f0f0;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+
+      .student-info {
+        flex: 1;
+        margin-left: 12px;
+
+        .student-name {
+          font-size: 15px;
+          font-weight: 500;
+          color: #303133;
+          margin-bottom: 4px;
+        }
+
+        .student-class {
+          font-size: 13px;
+          color: #606266;
+        }
+      }
     }
   }
 }
 
-/* 课堂随拍 */
-.class-photos-section {
-  background-color: #ffffff;
-  border-radius: 10px;
-  overflow: hidden;
+/* 全局图片样式 */
+.w-full {
+  width: 100%;
+}
 
-  .section-title-bar {
-    padding: 12px 15px;
-    border-bottom: 1px solid #f2f2f2;
+.h-full {
+  height: 100%;
+}
 
-    .title-text {
-      font-size: 16px;
-      font-weight: 500;
-      color: #303133;
-    }
-  }
+// 暂无数据样式
+.empty-course-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
 
-  .photos-grid {
+  .empty-icon {
+    margin-bottom: 20px;
+    background-color: #f5f6f7;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
     display: flex;
-    flex-wrap: wrap;
-    padding: 15px;
-
-    .photo-placeholder {
-      width: calc(50% - 8px);
-      height: 110px;
-      background-color: #f0f0f0;
-      border-radius: 6px;
-      margin-right: 8px;
-      margin-bottom: 8px;
-
-      &:nth-child(2n) {
-        margin-right: 0;
-      }
-
-      &:nth-child(3),
-      &:nth-child(4) {
-        margin-bottom: 0;
-      }
-    }
+    align-items: center;
+    justify-content: center;
   }
+
+  .empty-text {
+    font-size: 18px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 8px;
+  }
+
+  .empty-desc {
+    font-size: 14px;
+    color: #909399;
+    max-width: 80%;
+    line-height: 1.5;
+  }
+}
+
+/* 选课已结束样式 */
+.enrollment-ended {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 12px 15px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  gap: 8px;
 }
 </style>