diff --git a/src/pages.json b/src/pages.json
index aea4802..279fbef 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -153,6 +153,48 @@
         "navigationBarTitleText": "详情",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/base/course-selection/index",
+      "style": {
+        "navigationBarTitleText": "课程选择",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/base/course-selection/detail",
+      "style": {
+        "navigationBarTitleText": "课程详情",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/base/course-selection/payment",
+      "style": {
+        "navigationBarTitleText": "支付",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/base/course-selection/payment-success",
+      "style": {
+        "navigationBarTitleText": "支付成功",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/base/course-selection/payment-fail",
+      "style": {
+        "navigationBarTitleText": "支付失败",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/base/course-selection/club-selection",
+      "style": {
+        "navigationBarTitleText": "俱乐部选课",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/base/course-selection/club-selection.vue b/src/pages/base/course-selection/club-selection.vue
new file mode 100644
index 0000000..9f8519a
--- /dev/null
+++ b/src/pages/base/course-selection/club-selection.vue
@@ -0,0 +1,418 @@
+<template>
+  <view class="interest-course">
+    <!-- 选课信息头部 -->
+    <view class="selection-header">
+      <view class="header-content">
+        <view class="title">2023年秋季俱乐部选课</view>
+        <view class="countdown">
+          <text class="time-text">{{ remainTime }}</text>
+          <view class="time-icon">
+            <text class="time-value">90</text>
+            <text class="time-unit">mins</text>
+          </view>
+        </view>
+      </view>
+      <!-- 多选提示 -->
+      <view class="selection-tip">
+        <text>可选择多个俱乐部（{{ selectedCount }}/{{ maxSelectCount }}）</text>
+      </view>
+    </view>
+
+    <!-- 课程网格列表 -->
+    <view class="course-grid">
+      <view
+        v-for="(course, index) in courseList"
+        :key="index"
+        class="course-item"
+        :class="{ selected: course.isSelected }"
+        @click="toggleSelection(course)"
+      >
+        <view class="course-name">{{ course.title }}</view>
+        <view class="register-info">
+          <text>报名情况：</text>
+          <text class="register-count">{{ course.registeredCount }}</text>
+          <text> | {{ course.maxCount }}</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="register-btn-container">
+      <view class="selected-count">已选择：{{ selectedCount }}/{{ maxSelectCount }}</view>
+      <view class="register-btn" @click="submitRegistration">点击报名</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { navigateTo } from "@/utils/uniapp";
+import { ref, computed, onMounted } from "vue";
+
+// 剩余时间
+const remainTime = ref("89:57");
+
+// 最大可选课程数
+const maxSelectCount = ref(3);
+
+// 计算已选课程数量
+const selectedCount = computed(() => {
+  return courseList.value.filter(course => course.isSelected).length;
+});
+
+// 课程列表数据
+const courseList = ref([
+  {
+    id: 1,
+    title: "少儿声乐",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: true,
+  },
+  {
+    id: 2,
+    title: "机器人创客",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 3,
+    title: "科学实践",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 4,
+    title: "趣味手工",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 5,
+    title: "动画制作",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 6,
+    title: "趣味英语",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 7,
+    title: "篮球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 8,
+    title: "足球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 9,
+    title: "羽毛球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 10,
+    title: "主持人",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 11,
+    title: "心育课堂",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 12,
+    title: "童戏皮影",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+]);
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 查看课程详情
+const viewCourseDetail = (course: any) => {
+  uni.navigateTo({
+    url: `/pages/base/course-selection/detail?id=${course.id}`,
+  });
+};
+
+// 选择或取消选择课程（改为多选）
+const toggleSelection = (course: any) => {
+  // 如果当前课程未选中，且已达到最大选择数量，则提示
+  if (!course.isSelected && selectedCount.value >= maxSelectCount.value) {
+    uni.showToast({
+      title: `最多可选择${maxSelectCount.value}个俱乐部`,
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+  
+  // 直接切换当前课程的选中状态
+  course.isSelected = !course.isSelected;
+
+  uni.vibrateShort({
+    success: () => {
+      // 震动反馈成功
+    },
+  });
+
+  uni.showToast({
+    title: course.isSelected ? "已选择" : "已取消选择",
+    icon: "none",
+    duration: 500,
+  });
+};
+
+// 提交报名
+const submitRegistration = () => {
+  const selectedCourses = courseList.value.filter(
+    (course) => course.isSelected
+  );
+
+  if (selectedCourses.length === 0) {
+    uni.showToast({
+      title: "请至少选择一个俱乐部",
+      icon: "none",
+    });
+    return;
+  }
+
+  uni.showModal({
+    title: "确认报名",
+    content: `您确定要报名已选择的${selectedCourses.length}个俱乐部吗？`,
+    success: (res) => {
+      if (res.confirm) {
+        uni.showLoading({
+          title: "报名中...",
+        });
+
+        // 模拟提交报名
+        setTimeout(() => {
+          uni.hideLoading();
+          navigateTo("/pages/base/course-selection/payment");
+        }, 1500);
+      }
+    },
+  });
+};
+
+// 页面加载
+onMounted(() => {
+  // 实际应用中，可以从后端获取课程列表和倒计时信息
+  // fetchCourseList();
+  // startCountdown();
+});
+</script>
+
+<style lang="scss" scoped>
+.interest-course {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 80px;
+}
+
+.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;
+  }
+}
+
+.selection-header {
+  background-color: #eef4ff;
+  padding: 20px 15px;
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 22px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .countdown {
+      display: flex;
+      align-items: center;
+
+      .time-text {
+        font-size: 22px;
+        font-weight: bold;
+        color: #ff4d4f;
+        margin-right: 10px;
+      }
+
+      .time-icon {
+        position: relative;
+        width: 52px;
+        height: 52px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: #2879ff;
+        border-radius: 50%;
+        border: 2px solid #fff;
+
+        .time-value {
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+        }
+
+        .time-unit {
+          font-size: 10px;
+          color: #fff;
+        }
+      }
+    }
+  }
+  
+  .selection-tip {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.course-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px;
+
+  .course-item {
+    position: relative;
+    width: calc(50% - 10px);
+    margin-bottom: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-sizing: border-box;
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+
+    &:nth-child(even) {
+      margin-left: 10px;
+    }
+
+    &.selected {
+      border: 1px solid #3fbf72;
+    }
+
+    .course-name {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .register-info {
+      font-size: 14px;
+      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;
+    }
+  }
+}
+
+.register-btn-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  background-color: #fff;
+  
+  .selected-count {
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 10px;
+  }
+
+  .register-btn {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #2879ff;
+    color: #fff;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/pages/base/course-selection/detail.vue b/src/pages/base/course-selection/detail.vue
new file mode 100644
index 0000000..6ab6b61
--- /dev/null
+++ b/src/pages/base/course-selection/detail.vue
@@ -0,0 +1,279 @@
+<template>
+  <BasicLayout>
+    <view class="course-detail">
+      <!-- 课程信息卡片 -->
+      <view class="info-card">
+        <view class="card-title">课程信息</view>
+        <view class="divider"></view>
+
+        <view class="course-info">
+          <image
+            class="course-image"
+            :src="courseDetail.image || '/static/images/course-default.jpg'"
+            mode="aspectFill"
+          ></image>
+
+          <view class="course-content">
+            <view class="course-name">{{ courseDetail.title }}</view>
+            <view class="course-teacher"
+              >开课老师：{{ courseDetail.teacher }}</view
+            >
+            <view class="course-location"
+              >上课地点：{{ courseDetail.location }}</view
+            >
+            <view class="course-price"
+              >金额：<text class="price-value"
+                >¥{{ courseDetail.price }}</text
+              ></view
+            >
+          </view>
+        </view>
+      </view>
+
+      <!-- 老师信息卡片 -->
+      <view class="info-card">
+        <view class="card-title">老师信息</view>
+        <view class="divider"></view>
+
+        <view class="teacher-info">
+          <image
+            class="teacher-avatar"
+            :src="teacherInfo.avatar || '/static/images/teacher-avatar.jpg'"
+            mode="aspectFill"
+          ></image>
+
+          <view class="teacher-intro">
+            <text>{{ teacherInfo.introduction }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 教学理念 -->
+      <view class="info-card">
+        <view class="card-title">教学理念</view>
+        <view class="divider"></view>
+
+        <view class="content-section">
+          <text>{{ teachingPhilosophy }}</text>
+        </view>
+      </view>
+
+      <!-- 教学计划 -->
+      <view class="info-card">
+        <view class="card-title">教学计划</view>
+        <view class="divider"></view>
+
+        <view class="content-section">
+          <view
+            v-for="(phase, index) in teachingPlan"
+            :key="index"
+            class="teaching-phase"
+          >
+            <text>{{ phase }}</text>
+          </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"
+          />
+        </view>
+      </view>
+    </template>
+  </BasicLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { navigateBack } from "@/utils/uniapp";
+// 课程详情数据
+const courseDetail = ref({
+  id: 2,
+  title: "机器人创客",
+  teacher: "叶老师",
+  location: "第一教学楼302",
+  price: 142,
+  image: "/static/images/robot-course.jpg",
+});
+
+// 教师信息
+const teacherInfo = ref({
+  name: "叶老师",
+  avatar: "/static/images/teacher-avatar.jpg",
+  introduction:
+    "叶老师，男，出生于1997年7月10日，青少年机器人创客指导教师，指导祥富小学-晟航水木年华获得2022年青少年机器人竞赛小学组三等奖。",
+});
+
+// 教学理念
+const teachingPhilosophy = ref(
+  '"做中学、玩中学"的教育理念，机器人课程最大的优势就是能够让孩子在"玩"中去探索，去体验属于他们自己的世界，很多孩子刚开始接触的时候都是出于兴趣。培养孩子更进一步的能力，提高孩子的学习效果也的确需要从兴趣开始。但真正激发孩子能力，形成学习动力的是对目标的追求。我就通过机器人赛事帮助孩子把"兴趣"变成学习的目标，继而助力孩子未来成长的道路。'
+);
+
+// 教学计划
+const teachingPlan = ref([
+  "第一阶段：了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。",
+  "第二阶段：在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。",
+  "第三阶段：学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。",
+  "第四阶段：组织幼儿参加创客机器人比赛。",
+]);
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 页面加载时获取课程详情
+onMounted(() => {
+  // 实际应用中从URL参数获取课程ID，然后请求详情
+  const courseId = uni.getStorageSync("currentCourseId") || 2;
+  // fetchCourseDetail(courseId);
+});
+</script>
+
+<style lang="scss" scoped>
+.course-detail {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 80px;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  height: 44px;
+  background-color: #2879ff;
+
+  .nav-left {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .nav-right {
+    width: 40px;
+  }
+}
+
+.info-card {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  .card-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+}
+
+.course-info {
+  display: flex;
+
+  .course-image {
+    width: 120px;
+    height: 120px;
+    border-radius: 8px;
+    margin-right: 15px;
+  }
+
+  .course-content {
+    flex: 1;
+
+    .course-name {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .course-teacher,
+    .course-location {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .course-price {
+      font-size: 14px;
+      color: #666;
+
+      .price-value {
+        color: #ff6b00;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.teacher-info {
+  display: flex;
+
+  .teacher-avatar {
+    width: 80px;
+    height: 100px;
+    border-radius: 4px;
+    margin-right: 15px;
+  }
+
+  .teacher-intro {
+    flex: 1;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.6;
+  }
+}
+
+.content-section {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+
+  .teaching-phase {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.bottom-action {
+  padding: 15px;
+  margin-top: 20px;
+
+  .back-btn {
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    background-color: #fff;
+    color: #333;
+    border-radius: 22px;
+    font-size: 16px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>
diff --git a/src/pages/base/course-selection/index.vue b/src/pages/base/course-selection/index.vue
new file mode 100644
index 0000000..da59a4e
--- /dev/null
+++ b/src/pages/base/course-selection/index.vue
@@ -0,0 +1,391 @@
+<template>
+  <view class="interest-course">
+    <!-- 选课信息头部 -->
+    <view class="selection-header">
+      <view class="header-content">
+        <view class="title">2023年秋季选课</view>
+        <view class="countdown">
+          <text class="time-text">{{ remainTime }}</text>
+          <view class="time-icon">
+            <text class="time-value">90</text>
+            <text class="time-unit">mins</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 课程网格列表 -->
+    <view class="course-grid">
+      <view
+        v-for="(course, index) in courseList"
+        :key="index"
+        class="course-item"
+        :class="{ selected: course.isSelected }"
+        @click="toggleSelection(course)"
+      >
+        <view class="course-name">{{ course.title }}</view>
+        <view class="register-info">
+          <text>报名情况：</text>
+          <text class="register-count">{{ course.registeredCount }}</text>
+          <text> | {{ course.maxCount }}</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="register-btn-container">
+      <view class="register-btn" @click="submitRegistration">点击报名</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { navigateTo } from "@/utils/uniapp";
+import { ref, computed, onMounted } from "vue";
+
+// 剩余时间
+const remainTime = ref("89:57");
+
+// 课程列表数据
+const courseList = ref([
+  {
+    id: 1,
+    title: "少儿声乐",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: true,
+  },
+  {
+    id: 2,
+    title: "机器人创客",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 3,
+    title: "科学实践",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 4,
+    title: "趣味手工",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 5,
+    title: "动画制作",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 6,
+    title: "趣味英语",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 7,
+    title: "篮球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 8,
+    title: "足球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 9,
+    title: "羽毛球",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 10,
+    title: "主持人",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 11,
+    title: "心育课堂",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+  {
+    id: 12,
+    title: "童戏皮影",
+    registeredCount: 23,
+    maxCount: 30,
+    isSelected: false,
+  },
+]);
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 查看课程详情
+const viewCourseDetail = (course: any) => {
+  uni.navigateTo({
+    url: `/pages/base/course-selection/detail?id=${course.id}`,
+  });
+};
+
+// 选择或取消选择课程
+const toggleSelection = (course: any) => {
+  const wasSelected = course.isSelected;
+
+  // 先取消所有课程的选中状态
+  courseList.value.forEach((item) => {
+    item.isSelected = false;
+  });
+
+  // 如果之前未选中，则设为选中；如果之前已选中，则保持取消状态
+  if (!wasSelected) {
+    course.isSelected = true;
+  }
+
+  uni.vibrateShort({
+    success: () => {
+      // 震动反馈成功
+    },
+  });
+
+  uni.showToast({
+    title: course.isSelected ? "已选择" : "已取消选择",
+    icon: "none",
+    duration: 500,
+  });
+};
+
+// 提交报名
+const submitRegistration = () => {
+  const selectedCourses = courseList.value.filter(
+    (course) => course.isSelected
+  );
+
+  if (selectedCourses.length === 0) {
+    uni.showToast({
+      title: "请选择一门课程",
+      icon: "none",
+    });
+    return;
+  }
+
+  uni.showModal({
+    title: "确认报名",
+    content: `您确定要报名"${selectedCourses[0].title}"课程吗？`,
+    success: (res) => {
+      if (res.confirm) {
+        uni.showLoading({
+          title: "报名中...",
+        });
+
+        // 模拟提交报名
+        setTimeout(() => {
+          uni.hideLoading();
+          navigateTo("/pages/base/course-selection/payment");
+        }, 1500);
+      }
+    },
+  });
+};
+
+// 页面加载
+onMounted(() => {
+  // 实际应用中，可以从后端获取课程列表和倒计时信息
+  // fetchCourseList();
+  // startCountdown();
+});
+</script>
+
+<style lang="scss" scoped>
+.interest-course {
+  min-height: 100vh;
+  background-color: #f5f7fa;
+  padding-bottom: 80px;
+}
+
+.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;
+  }
+}
+
+.selection-header {
+  background-color: #eef4ff;
+  padding: 20px 15px;
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 22px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .countdown {
+      display: flex;
+      align-items: center;
+
+      .time-text {
+        font-size: 22px;
+        font-weight: bold;
+        color: #ff4d4f;
+        margin-right: 10px;
+      }
+
+      .time-icon {
+        position: relative;
+        width: 52px;
+        height: 52px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: #2879ff;
+        border-radius: 50%;
+        border: 2px solid #fff;
+
+        .time-value {
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+        }
+
+        .time-unit {
+          font-size: 10px;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.course-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px;
+
+  .course-item {
+    position: relative;
+    width: calc(50% - 10px);
+    margin-bottom: 15px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-sizing: border-box;
+
+    &:nth-child(odd) {
+      margin-right: 10px;
+    }
+
+    &:nth-child(even) {
+      margin-left: 10px;
+    }
+
+    &.selected {
+      border: 1px solid #3fbf72;
+    }
+
+    .course-name {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .register-info {
+      font-size: 14px;
+      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;
+    }
+  }
+}
+
+.register-btn-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  background-color: #fff;
+
+  .register-btn {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background-color: #2879ff;
+    color: #fff;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/pages/base/course-selection/payment-fail.vue b/src/pages/base/course-selection/payment-fail.vue
new file mode 100644
index 0000000..20f6e1c
--- /dev/null
+++ b/src/pages/base/course-selection/payment-fail.vue
@@ -0,0 +1,117 @@
+<template>
+  <view class="payment-fail">
+    <!-- 失败提示卡片 -->
+    <view class="fail-card">
+      <view class="fail-icon-container">
+        <image
+          class="fail-icon"
+          src="/static/base/2222.png"
+          mode="aspectFit"
+        ></image>
+      </view>
+      
+      <view class="fail-text">抱歉，报名失败！</view>
+      
+      <view class="divider"></view>
+      
+      <view class="tip-text">请点击下方按钮</view>
+      
+      <view class="finger-icon">
+        <image
+          src="/static/base/33333.png"
+          mode="aspectFit"
+        ></image>
+      </view>
+      
+      <view class="action-btn" @click="reselect">
+        重新选课
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 返回选课页面
+const reselect = () => {
+  uni.redirectTo({
+    url: '/pages/base/course-selection/index'
+  });
+};
+
+onMounted(() => {
+  // 实际应用中可能需要记录失败原因等信息
+  console.log('支付失败页面加载');
+});
+</script>
+
+<style lang="scss" scoped>
+.payment-fail {
+  min-height: 100%;
+  background-color: #f5f7fa;
+}
+
+.fail-card {
+  margin: 15px;
+  width: 90%;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 30px 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  .fail-icon-container {
+    margin-bottom: 20px;
+    
+    .fail-icon {
+      width: 120px;
+      height: 120px;
+    }
+  }
+  
+  .fail-text {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 20px;
+  }
+  
+  .tip-text {
+    font-size: 16px;
+    color: #999;
+    margin-bottom: 15px;
+  }
+  
+  .finger-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 15px;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .action-btn {
+    width: 200px;
+    height: 45px;
+    line-height: 45px;
+    text-align: center;
+    border-radius: 22.5px;
+    border: 1px solid #2879ff;
+    color: #2879ff;
+    font-size: 16px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/base/course-selection/payment-success.vue b/src/pages/base/course-selection/payment-success.vue
new file mode 100644
index 0000000..0bc82b8
--- /dev/null
+++ b/src/pages/base/course-selection/payment-success.vue
@@ -0,0 +1,308 @@
+<template>
+  <BasicLayout>
+    <view class="payment-success">
+      <!-- 成功提示卡片 -->
+      <view class="success-card">
+        <view class="success-icon-container">
+          <image
+            class="success-icon-bg"
+            src="/static/base/11223.png"
+            mode="aspectFit"
+          ></image>
+          <view class="success-icon">
+            <u-icon name="checkmark" size="40" color="#fff"></u-icon>
+          </view>
+        </view>
+
+        <view class="success-text">恭喜你，报名成功！</view>
+      </view>
+
+      <!-- 学生信息卡片 -->
+      <view class="info-card student-card">
+        <view class="card-title">报名信息</view>
+        <view class="divider"></view>
+
+        <view class="student-info">
+          <view class="student-avatar">
+            <image
+              src="/static/images/student-avatar.jpg"
+              mode="aspectFill"
+            ></image>
+          </view>
+          <view class="student-details">
+            <view class="student-name">
+              {{ student.name }}
+              <view class="gender-icon">
+                <u-icon
+                  v-if="student.gender === '男'"
+                  name="man"
+                  color="#2879ff"
+                  size="18"
+                ></u-icon>
+                <u-icon v-else name="woman" color="#ff6b9d" size="18"></u-icon>
+              </view>
+            </view>
+            <view class="student-id">{{ student.id }}</view>
+            <view class="student-class">{{ student.class }}</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 课程信息卡片 -->
+      <view class="info-card">
+        <view class="card-title">课程信息</view>
+        <view class="divider"></view>
+
+        <view class="course-info">
+          <image
+            class="course-image"
+            :src="course.image"
+            mode="aspectFill"
+          ></image>
+          <view class="course-details">
+            <view class="course-name">{{ course.title }}</view>
+            <view class="course-teacher">开课老师：{{ course.teacher }}</view>
+            <view class="course-location">上课地点：{{ course.time }}</view>
+            <view class="course-price"
+              >金额：<text class="price-value">¥{{ course.price }}</text></view
+            >
+          </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=""
+          />
+        </view>
+      </view> -->
+    </template>
+  </BasicLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+// 学生信息
+const student = ref({
+  name: "何明远",
+  gender: "男",
+  id: "202111115724522",
+  class: "三年级2班",
+});
+
+// 课程信息
+const course = ref({
+  id: 2,
+  title: "机器人创客",
+  teacher: "叶老师",
+  time: "星期一",
+  price: 142,
+  image: "/static/images/robot-course.jpg",
+});
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+onMounted(() => {
+  // 实际应用中，应从页面参数或缓存获取课程和学生信息
+  // const courseId = uni.getStorageSync('selectedCourseId');
+  // const studentId = uni.getStorageSync('currentStudentId');
+  // fetchSuccessInfo(courseId, studentId);
+});
+</script>
+
+<style lang="scss" scoped>
+.payment-success {
+  background-color: #f5f7fa;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  height: 44px;
+  background-color: #2879ff;
+
+  .nav-left {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .nav-right {
+    width: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.success-card {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 30px 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .success-icon-container {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin-bottom: 20px;
+
+    .success-icon-bg {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .success-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 80px;
+      height: 80px;
+      background-color: #2879ff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .success-text {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.info-card {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  &.student-card {
+    background-color: #eef4ff;
+  }
+
+  .card-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+}
+
+.student-info {
+  display: flex;
+  align-items: center;
+
+  .student-avatar {
+    width: 60px;
+    height: 60px;
+    margin-right: 15px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .student-details {
+    .student-name {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .gender-icon {
+        margin-left: 5px;
+      }
+    }
+
+    .student-id,
+    .student-class {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 5px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.course-info {
+  display: flex;
+
+  .course-image {
+    width: 120px;
+    height: 120px;
+    border-radius: 8px;
+    margin-right: 15px;
+  }
+
+  .course-details {
+    flex: 1;
+
+    .course-name {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .course-teacher,
+    .course-location {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .course-price {
+      font-size: 14px;
+      color: #666;
+
+      .price-value {
+        color: #ff6b00;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/base/course-selection/payment.vue b/src/pages/base/course-selection/payment.vue
new file mode 100644
index 0000000..b36419e
--- /dev/null
+++ b/src/pages/base/course-selection/payment.vue
@@ -0,0 +1,398 @@
+<template>
+  <view class="payment-page">
+    <!-- 倒计时区域 -->
+    <view class="countdown-section">
+      <view class="countdown-icon">
+        <u-icon name="clock" size="22" color="#fff"></u-icon>
+      </view>
+      <view class="countdown-text">待支付</view>
+      <view class="countdown-timer">
+        <text>剩余：</text>
+        <text class="time-value">{{ countdownTime }}</text>
+      </view>
+    </view>
+
+    <!-- 学生信息卡片 -->
+    <view class="info-card">
+      <view class="card-title">报名信息</view>
+      <view class="divider"></view>
+
+      <view class="student-info">
+        <view class="student-avatar">
+          <image
+            src="/static/images/student-avatar.jpg"
+            mode="aspectFill"
+          ></image>
+        </view>
+        <view class="student-details">
+          <view class="student-name">
+            {{ student.name }}
+            <view class="gender-icon">
+              <u-icon
+                v-if="student.gender === '男'"
+                name="man"
+                color="#2879ff"
+                size="18"
+              ></u-icon>
+              <u-icon v-else name="woman" color="#ff6b9d" size="18"></u-icon>
+            </view>
+          </view>
+          <view class="student-class">{{ student.class }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 课程信息卡片 -->
+    <view class="info-card">
+      <view class="card-title">课程信息</view>
+      <view class="divider"></view>
+
+      <view class="course-info">
+        <image
+          class="course-image"
+          :src="course.image"
+          mode="aspectFill"
+        ></image>
+        <view class="course-details">
+          <view class="course-name">{{ course.title }}</view>
+          <view class="course-teacher">开课老师：{{ course.teacher }}</view>
+          <view class="course-location">上课地点：{{ course.location }}</view>
+          <view class="course-price"
+            >金额：<text class="price-value">¥{{ course.price }}</text></view
+          >
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部支付区域 -->
+    <view class="payment-footer">
+      <view class="total-amount">
+        <text>总金额：</text>
+        <text class="amount-value">¥{{ course.price }}</text>
+      </view>
+
+      <view class="action-buttons">
+        <view class="cancel-btn" @click="cancelRegistration">取消报名</view>
+        <view class="pay-btn" @click="payNow">立即支付</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+// 倒计时
+const countdownTime = ref("1分20秒");
+let timer: any = null;
+let seconds = 1 * 60 + 20; // 1分20秒
+
+// 学生信息
+const student = ref({
+  name: "何明远",
+  gender: "男",
+  class: "三年级2班",
+});
+
+// 课程信息
+const course = ref({
+  id: 2,
+  title: "机器人创客",
+  teacher: "叶老师",
+  location: "第一教学楼302",
+  price: 142,
+  image: "/static/images/robot-course.jpg",
+});
+
+// 开始倒计时
+const startCountdown = () => {
+  timer = setInterval(() => {
+    seconds--;
+    if (seconds <= 0) {
+      clearInterval(timer);
+      uni.showModal({
+        title: "支付超时",
+        content: "支付已超时，请重新选课",
+        showCancel: false,
+        success: () => {
+          goBack();
+        },
+      });
+      return;
+    }
+
+    const minutes = Math.floor(seconds / 60);
+    const remainSeconds = seconds % 60;
+    countdownTime.value = `${minutes}分${remainSeconds}秒`;
+  }, 1000);
+};
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 取消报名
+const cancelRegistration = () => {
+  uni.showModal({
+    title: "取消报名",
+    content: "确定要取消报名吗？",
+    success: (res) => {
+      if (res.confirm) {
+        uni.showToast({
+          title: "已取消报名",
+          icon: "success",
+        });
+        setTimeout(() => {
+          goBack();
+        }, 1500);
+      }
+    },
+  });
+};
+
+// 立即支付
+const payNow = () => {
+  uni.showLoading({
+    title: "支付中...",
+  });
+
+  // 模拟支付过程
+  setTimeout(() => {
+    uni.hideLoading();
+
+    uni.redirectTo({
+      url: "/pages/base/course-selection/payment-success",
+    });
+    // uni.redirectTo({
+    //   url: "/pages/base/course-selection/payment-fail",
+    // });
+  }, 2000);
+};
+
+onMounted(() => {
+  startCountdown();
+
+  // 实际应用中，应从页面参数或缓存获取课程和学生信息
+  // const courseId = uni.getStorageSync('selectedCourseId');
+  // const studentId = uni.getStorageSync('currentStudentId');
+  // fetchPaymentInfo(courseId, studentId);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.payment-page {
+  min-height: 100%;
+  background-color: #f5f7fa;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+  height: 44px;
+  background-color: #2879ff;
+
+  .nav-left {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .nav-right {
+    width: 40px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.countdown-section {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background-color: #2879ff;
+
+  .countdown-icon {
+    margin-right: 10px;
+  }
+
+  .countdown-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    margin-right: auto;
+  }
+
+  .countdown-timer {
+    font-size: 15px;
+    color: #fff;
+
+    .time-value {
+      color: #ff4d4f;
+      font-weight: 500;
+    }
+  }
+}
+
+.info-card {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  .card-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+}
+
+.student-info {
+  display: flex;
+  align-items: center;
+
+  .student-avatar {
+    width: 60px;
+    height: 60px;
+    margin-right: 15px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .student-details {
+    .student-name {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .gender-icon {
+        margin-left: 5px;
+      }
+    }
+
+    .student-class {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+}
+
+.course-info {
+  display: flex;
+
+  .course-image {
+    width: 120px;
+    height: 120px;
+    border-radius: 8px;
+    margin-right: 15px;
+  }
+
+  .course-details {
+    flex: 1;
+
+    .course-name {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 10px;
+    }
+
+    .course-teacher,
+    .course-location {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .course-price {
+      font-size: 14px;
+      color: #666;
+
+      .price-value {
+        color: #ff6b00;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.payment-footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  padding: 15px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+
+  .total-amount {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    font-size: 15px;
+    color: #333;
+
+    .amount-value {
+      color: #ff6b00;
+      font-size: 20px;
+      font-weight: 500;
+    }
+  }
+
+  .action-buttons {
+    display: flex;
+    justify-content: space-between;
+
+    .cancel-btn,
+    .pay-btn {
+      width: 48%;
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      border-radius: 22px;
+      font-size: 16px;
+    }
+
+    .cancel-btn {
+      background-color: #fff;
+      color: #333;
+      border: 1px solid #ddd;
+    }
+
+    .pay-btn {
+      background-color: #ff8c00;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/static/base/11223.png b/src/static/base/11223.png
new file mode 100644
index 0000000..7d9028c
Binary files /dev/null and b/src/static/base/11223.png differ
diff --git a/src/static/base/2222.png b/src/static/base/2222.png
new file mode 100644
index 0000000..f7d2d90
Binary files /dev/null and b/src/static/base/2222.png differ
diff --git a/src/static/base/33333.png b/src/static/base/33333.png
new file mode 100644
index 0000000..c083cc6
Binary files /dev/null and b/src/static/base/33333.png differ