diff --git a/src/layout/manage/ManageSidebar.vue b/src/layout/manage/ManageSidebar.vue
index 51c8063..86bbebe 100644
--- a/src/layout/manage/ManageSidebar.vue
+++ b/src/layout/manage/ManageSidebar.vue
@@ -41,6 +41,7 @@
             </span>
       </template>
       <a-menu-item key="/courseManagement">课程管理</a-menu-item>
+      <a-menu-item key="/courseOrder">课程订单</a-menu-item>
     </a-sub-menu>
     <a-sub-menu>
       <template #title>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 10b5b14..347e7ce 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -117,6 +117,11 @@ export const routes = [
                 name:'章节详情',
                 component: ()=> import("../view/course/chapterDetail.vue")
             },
+            {
+                path:'/courseOrder',
+                name:'课程订单',
+                component: ()=> import("../view/course/courseOrder.vue")
+            },
         ]
     },
 ]
\ No newline at end of file
diff --git a/src/view/course/chapterDetail.vue b/src/view/course/chapterDetail.vue
index 7179f7b..9afa4eb 100644
--- a/src/view/course/chapterDetail.vue
+++ b/src/view/course/chapterDetail.vue
@@ -1,11 +1,907 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-<div>章节详情</div>
+  <div class="chapter-management">
+    <!-- 顶部课程信息 -->
+    <div class="course-header">
+      <a-card :bordered="false">
+        <div class="course-info">
+          <a-avatar :src="courseImageUrl" shape="square" :size="80" />
+          <div class="course-details">
+            <h2>{{ courseName }}</h2>
+            <p>课程ID: {{ courseId }} | 类别: {{ courseType }}</p>
+            <p>
+              创建时间: {{ courseCreateTime }} | 状态:
+              <a-tag :color="courseStatus ? 'green' : 'red'">
+                {{ courseStatus ? '已上架' : '已下架' }}
+              </a-tag>
+            </p>
+            <p>
+              原价: {{ courseOriginPrice }}￥ | 折扣价: {{ courseDiscountPrice }}￥ |
+              佣金: {{ courseFirstLevelRate }}% / {{ courseSecondLevelRate }}%
+            </p>
+          </div>
+        </div>
+      </a-card>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="search-box">
+      <a-form layout="inline">
+        <a-space>
+          <a-form-item label="章节名称">
+            <a-input-search
+                style="width: 220px"
+                placeholder="请输入章节名称"
+                enter-button
+                @search="handleChapterSearch"
+                v-model:value="searchChapterName"
+                class="custom-search"
+            />
+          </a-form-item>
+
+          <a-form-item label="试看权限">
+            <a-select
+                style="width: 140px"
+                placeholder="请选择"
+                v-model:value="searchPermissions"
+                @change="handleChapterSearch"
+            >
+              <a-select-option value="">全部</a-select-option>
+              <a-select-option value="全集试看">全集试看</a-select-option>
+              <a-select-option value="部分试看">部分试看</a-select-option>
+              <a-select-option value="关闭">关闭</a-select-option>
+              <a-select-option value="开启">开启</a-select-option>
+            </a-select>
+          </a-form-item>
+
+          <a-button class="custom-button" @click="showAddModal">新增章节</a-button>
+          <a-button class="custom-button" @click="reset">重置搜索</a-button>
+          <a-button
+              class="custom-button danger"
+              :disabled="selectedRowKeys.length === 0"
+              @click="showDeleteConfirm"
+          >
+            批量删除
+          </a-button>
+          <a-button class="custom-button" @click="goBack">返回</a-button>
+        </a-space>
+      </a-form>
+    </div>
+
+    <!-- 章节列表 -->
+    <div class="chapter-list">
+      <a-table
+          :columns="columns"
+          :data-source="tableData"
+          :scroll="{ x: 1200, y: 500 }"
+          :loading="loading"
+          :pagination="pagination"
+          :row-selection="rowSelection"
+          bordered
+          rowKey="id"
+          @change="handleTableChange"
+      >
+        <!-- 章节时长格式化 -->
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'curation'">
+            {{ formatDuration(record.curation) }}
+          </template>
+
+          <template v-if="column.key === 'permissions'">
+            <a-tag :color="getPermissionColor(record.permissions)">
+              {{ record.permissions }}
+            </a-tag>
+          </template>
+
+          <template v-if="column.key === 'action'">
+            <a-space :size="8">
+              <a-button
+                  size="small"
+                  danger
+                  @click="deleteChapter(record.id)"
+              >
+                删除
+              </a-button>
+              <a-button
+                  size="small"
+                  type="link"
+                  @click="showEditModal(record)"
+              >
+                编辑
+              </a-button>
+              <a-button
+                  size="small"
+                  type="link"
+                  @click="previewVideo(record.videoView)"
+              >
+                预览
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 视频预览模态框 -->
+    <a-modal
+        v-model:visible="videoPreviewVisible"
+        title="视频预览"
+        width="800px"
+        :footer="null"
+        @cancel="videoPreviewVisible = false"
+    >
+      <div class="video-preview">
+        <video :src="previewVideoUrl" controls style="width: 100%; max-height: 500px;"></video>
+      </div>
+    </a-modal>
+
+    <!-- 新增章节模态框 -->
+    <a-modal
+        v-model:visible="addModalVisible"
+        title="新增章节"
+        width="600px"
+        :confirm-loading="addLoading"
+        @ok="handleAddChapter"
+        @cancel="resetAddForm"
+    >
+      <a-form :model="addForm" layout="vertical">
+        <a-form-item label="章节名称" required>
+          <a-input
+              v-model:value="addForm.name"
+              placeholder="请输入章节名称"
+          />
+        </a-form-item>
+
+        <a-form-item label="章节时长 (秒)" required>
+          <a-input-number
+              v-model:value="addForm.duration"
+              placeholder="请输入时长（秒）"
+              :min="0"
+              :max="36000"
+              style="width: 100%"
+          />
+        </a-form-item>
+
+        <a-form-item label="试看权限" required>
+          <a-select
+              v-model:value="addForm.permissions"
+              placeholder="请选择试看权限"
+          >
+            <a-select-option value="全集试看">全集试看</a-select-option>
+            <a-select-option value="部分试看">部分试看</a-select-option>
+            <a-select-option value="关闭">关闭</a-select-option>
+            <a-select-option value="开启">开启</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="视频文件 view 值" required>
+          <a-input
+              v-model:value="addForm.videoView"
+              placeholder="请输入视频文件 view 值"
+          />
+        </a-form-item>
+
+        <a-form-item label="所属课程ID" required>
+          <a-input
+              v-model:value="addForm.courseId"
+              disabled
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+    <!-- 编辑章节模态框 -->
+    <a-modal
+        v-model:visible="editModalVisible"
+        title="编辑章节"
+        width="600px"
+        :confirm-loading="editLoading"
+        @ok="handleEditChapter"
+        @cancel="resetEditForm"
+    >
+      <a-form :model="editForm" layout="vertical">
+        <a-form-item label="章节ID">
+          <a-input
+              v-model:value="editForm.id"
+              disabled
+          />
+        </a-form-item>
+
+        <a-form-item label="章节名称" required>
+          <a-input
+              v-model:value="editForm.name"
+              placeholder="请输入章节名称"
+          />
+        </a-form-item>
+
+        <a-form-item label="章节时长 (秒)" required>
+          <a-input-number
+              v-model:value="editForm.duration"
+              placeholder="请输入时长（秒）"
+              :min="0"
+              :max="36000"
+              style="width: 100%"
+          />
+        </a-form-item>
+
+        <a-form-item label="试看权限" required>
+          <a-select
+              v-model:value="editForm.permissions"
+              placeholder="请选择试看权限"
+          >
+            <a-select-option value="全集试看">全集试看</a-select-option>
+            <a-select-option value="部分试看">部分试看</a-select-option>
+            <a-select-option value="关闭">关闭</a-select-option>
+            <a-select-option value="开启">开启</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="视频文件 view 值" required>
+          <a-input
+              v-model:value="editForm.videoView"
+              placeholder="请输入视频文件 view 值"
+          />
+        </a-form-item>
+
+        <a-form-item label="所属课程ID" required>
+          <a-input
+              v-model:value="editForm.courseId"
+              disabled
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
 </template>
 
-<style scoped>
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import myAxios from "../../api/myAxios.ts";
+import { message, Modal } from "ant-design-vue";
+import { downLoadImage } from "../../api/ImageUrl.ts";
+import router from "../../router";
+import dayjs from "dayjs";
 
+const route = useRoute();
+const loading = ref(false);
+const selectedRowKeys = ref<number[]>([]);
+const courseLoading = ref(false); // 课程信息加载状态
+
+// 课程信息
+const courseId = ref("");
+const courseName = ref("加载中...");
+const courseType = ref("加载中...");
+const courseImageUrl = ref("");
+const courseStatus = ref(false);
+const courseCreateTime = ref("加载中...");
+const courseOriginPrice = ref(0);
+const courseDiscountPrice = ref(0);
+const courseFirstLevelRate = ref(0);
+const courseSecondLevelRate = ref(0);
+
+// 搜索参数
+const searchChapterName = ref("");
+const searchPermissions = ref("");
+
+// 分页查询参数
+const searchParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: "id",
+  sortOrder: "ascend",
+  name: "",
+  permissions: "",
+  courseId: ""
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: '章节ID',
+    dataIndex: 'id',
+    key: 'id',
+    width: 80,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '章节名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 200,
+    ellipsis: true
+  },
+  {
+    title: '章节时长',
+    dataIndex: 'duration',
+    key: 'duration',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '试看权限',
+    dataIndex: 'permissions',
+    key: 'permissions',
+    width: 120,
+    align: 'center'
+  },
+  {
+    title: '视频文件',
+    dataIndex: 'videoView',
+    key: 'videoView',
+    width: 180,
+    ellipsis: true
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    align: 'center',
+    fixed: 'right'
+  }
+];
+
+// 视频预览相关
+const videoPreviewVisible = ref(false);
+const previewVideoUrl = ref("");
+
+// 新增章节相关
+const addModalVisible = ref(false);
+const addLoading = ref(false);
+const addForm = ref({
+  name: "",
+  duration: 0,
+  permissions: "全集试看",
+  videoView: "",
+  courseId: ""
+});
+
+// 编辑章节相关
+const editModalVisible = ref(false);
+const editLoading = ref(false);
+const editForm = ref({
+  id: 0,
+  name: "",
+  duration: 0,
+  permissions: "全集试看",
+  videoView: "",
+  courseId: ""
+});
+
+// 行选择配置
+const rowSelection = ref({
+  selectedRowKeys: selectedRowKeys,
+  onChange: (selectedKeys: number[]) => {
+    selectedRowKeys.value = selectedKeys;
+  }
+});
+
+// 获取课程详细信息
+const getCourseDetail = async () => {
+  courseLoading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post(
+        "/course/queryById",
+        { id: courseId.value },
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data) {
+      const courseData = res.data;
+      courseName.value = courseData.name || "未命名课程";
+      courseType.value = courseData.type || "未知类别";
+      courseImageUrl.value = courseData.image ? downLoadImage + courseData.image : "";
+      courseStatus.value = courseData.isShelves === true;
+      courseOriginPrice.value = courseData.originPrice || 0;
+      courseDiscountPrice.value = courseData.discountPrice || 0;
+      courseFirstLevelRate.value = courseData.firstLevelRate || 0;
+      courseSecondLevelRate.value = courseData.secondLevelRate || 0;
+
+      // 如果没有创建时间，使用当前时间
+      courseCreateTime.value = courseData.createTime
+          ? dayjs(courseData.createTime).format("YYYY-MM-DD HH:mm:ss")
+          : dayjs().format("YYYY-MM-DD HH:mm:ss");
+    } else {
+      message.error(res.message || '获取课程信息失败');
+    }
+  } catch (error) {
+    console.error("获取课程信息失败:", error);
+    message.error('获取课程信息失败');
+  } finally {
+    courseLoading.value = false;
+  }
+};
+
+// 章节搜索方法
+const handleChapterSearch = async () => {
+  searchParams.value.name = searchChapterName.value;
+  searchParams.value.permissions = searchPermissions.value;
+  searchParams.value.current = 1;
+  await getChapterList();
+};
+
+// 获取章节列表
+const getChapterList = async () => {
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post("/courseChapter/page", searchParams.value,
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data && Array.isArray(res.data.records)) {
+      tableData.value = res.data.records;
+      pagination.value.total = res.data.total;
+    } else {
+      message.error(res.message || '请求失败');
+    }
+  } catch (error) {
+    console.error("请求失败:", error);
+    message.error('获取数据失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+
+// 处理分页和排序变化
+const handleTableChange = (pag: any, sorter: any) => {
+  searchParams.value.current = pag.current;
+  searchParams.value.pageSize = pag.pageSize;
+
+  // 处理排序
+  if (sorter.field) {
+    searchParams.value.sortField = sorter.field;
+    searchParams.value.sortOrder = sorter.order;
+  }
+
+  // 同步到分页组件
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getChapterList();
+};
+
+// 章节接口定义
+interface Chapter {
+  id: number;
+  name: string;
+  duration: number;
+  permissions: string;
+  videoView: string;
+  courseId: string;
+}
+
+const tableData = ref<Chapter[]>([]);
+
+// 格式化时长（秒转分钟）
+const formatDuration = (seconds: number) => {
+  if (!seconds) return "0分钟";
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}分钟`;
+};
+
+// 根据权限获取标签颜色
+const getPermissionColor = (permissions: string) => {
+  switch (permissions) {
+    case "全集试看": return "blue";
+    case "部分试看": return "cyan";
+    case "开启": return "green";
+    case "关闭": return "red";
+    default: return "gray";
+  }
+};
+
+// 删除章节
+const deleteChapter = (id: number) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除该章节吗？删除后数据将无法恢复！',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      try {
+        const storedToken = localStorage.getItem('token');
+        const res: any = await myAxios.post(
+            "/courseChapter/delete",
+            { id },
+            { headers: { Authorization: storedToken } }
+        );
+
+        if (res.code === 1) {
+          message.success('删除成功');
+          await getChapterList();
+        } else {
+          message.error(res.message || '删除失败');
+        }
+      } catch (error) {
+        console.error('删除失败:', error);
+        message.error('删除操作失败');
+      }
+    }
+  });
+};
+
+// 批量删除确认弹窗
+const showDeleteConfirm = () => {
+  if (selectedRowKeys.value.length === 0) {
+    message.warning('请至少选择一个章节');
+    return;
+  }
+
+  Modal.confirm({
+    title: '确认批量删除',
+    content: `确定要删除选中的 ${selectedRowKeys.value.length} 个章节吗？删除后数据将无法恢复！`,
+    okText: '确认',
+    cancelText: '取消',
+    onOk: deleteBatchChapters
+  });
+};
+
+// 批量删除方法
+const deleteBatchChapters = async () => {
+  try {
+    const storedToken = localStorage.getItem('token');
+    const res: any = await myAxios.post(
+        "/courseChapter/delBatch",
+        { ids: selectedRowKeys.value },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1) {
+      message.success(`成功删除 ${selectedRowKeys.value.length} 个章节`);
+      selectedRowKeys.value = [];
+      await getChapterList();
+    } else {
+      message.error(res.message || '批量删除失败');
+    }
+  } catch (error) {
+    console.error('批量删除失败:', error);
+    message.error('批量删除操作失败');
+  }
+};
+
+// 重置搜索条件
+const reset = () => {
+  searchChapterName.value = "";
+  searchPermissions.value = "";
+  selectedRowKeys.value = [];
+
+  searchParams.value = {
+    ...searchParams.value,
+    current: 1,
+    name: "",
+    permissions: ""
+  };
+
+  getChapterList();
+};
+
+// 显示新增章节弹窗
+const showAddModal = () => {
+  addForm.value = {
+    name: "",
+    duration: 600, // 默认10分钟
+    permissions: "全集试看",
+    videoView: "",
+    courseId: courseId.value
+  };
+  addModalVisible.value = true;
+};
+
+// 重置新增表单
+const resetAddForm = () => {
+  addForm.value = {
+    name: "",
+    duration: 600,
+    permissions: "全集试看",
+    videoView: "",
+    courseId: courseId.value
+  };
+  addModalVisible.value = false;
+};
+
+// 处理新增章节
+const handleAddChapter = async () => {
+  if (!addForm.value.name) {
+    message.error("请填写章节名称");
+    return;
+  }
+  if (!addForm.value.duration || addForm.value.duration <= 0) {
+    message.error("请填写有效的章节时长");
+    return;
+  }
+  if (!addForm.value.permissions) {
+    message.error("请选择试看权限");
+    return;
+  }
+  if (!addForm.value.videoView) {
+    message.error("请填写视频文件 view 值");
+    return;
+  }
+
+  addLoading.value = true;
+
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post(
+        "/courseChapter/add",
+        addForm.value,
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1) {
+      message.success("章节添加成功");
+      addModalVisible.value = false;
+      await getChapterList();
+    } else {
+      message.error(res.message || '添加章节失败');
+    }
+  } catch (error) {
+    console.error("添加章节失败:", error);
+    message.error('添加章节失败');
+  } finally {
+    addLoading.value = false;
+  }
+};
+
+// 显示编辑章节弹窗
+const showEditModal = (chapter: Chapter) => {
+  editForm.value = {
+    id: chapter.id,
+    name: chapter.name,
+    duration: chapter.duration, // 注意：后端接口使用duration字段
+    permissions: chapter.permissions,
+    videoView: chapter.videoView,
+    courseId: chapter.courseId
+  };
+  editModalVisible.value = true;
+};
+
+// 重置编辑表单
+const resetEditForm = () => {
+  editForm.value = {
+    id: 0,
+    name: "",
+    duration: 0,
+    permissions: "全集试看",
+    videoView: "",
+    courseId: ""
+  };
+  editModalVisible.value = false;
+};
+
+// 处理编辑章节
+const handleEditChapter = async () => {
+  if (!editForm.value.name) {
+    message.error("请填写章节名称");
+    return;
+  }
+  if (!editForm.value.duration || editForm.value.duration <= 0) {
+    message.error("请填写有效的章节时长");
+    return;
+  }
+  if (!editForm.value.permissions) {
+    message.error("请选择试看权限");
+    return;
+  }
+  if (!editForm.value.videoView) {
+    message.error("请填写视频文件 view 值");
+    return;
+  }
+
+  editLoading.value = true;
+
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    // 准备更新数据，修正字段映射问题
+    const updateData = {
+      id: editForm.value.id,
+      name: editForm.value.name,
+      duration: editForm.value.duration,
+      permissions: editForm.value.permissions,
+      videoView: editForm.value.videoView,
+      coursefd: editForm.value.courseId
+    };
+
+    console.log("提交的更新数据：", updateData); // 添加调试日志
+
+    const res: any = await myAxios.post(
+        "/courseChapter/update",
+        updateData,
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1) {
+      message.success("章节更新成功");
+      editModalVisible.value = false;
+      await getChapterList();
+    } else {
+      message.error(res.message || '更新章节失败');
+    }
+  } catch (error) {
+    console.error("更新章节失败:", error);
+    message.error('更新章节失败');
+  } finally {
+    editLoading.value = false;
+  }
+};
+
+
+// 预览视频
+const previewVideo = (videoView: string) => {
+  previewVideoUrl.value = downLoadImage + videoView;
+  videoPreviewVisible.value = true;
+};
+
+onMounted(() => {
+  // 从路由参数获取课程ID
+  courseId.value = route.query.id ? String(route.query.id) : "";
+
+  if (courseId.value) {
+    // 设置章节查询参数中的课程ID
+    searchParams.value.courseId = courseId.value;
+
+    // 获取课程详细信息
+    getCourseDetail();
+
+    // 获取章节列表
+    getChapterList();
+  } else {
+    message.error("未获取到课程ID");
+    router.back();
+  }
+});
+
+const goBack = () => {
+  router.push('/courseManagement')
+};
+</script>
+
+<style scoped>
+.chapter-management {
+  padding: 20px;
+  background-color: #f5f7fa;
+}
+
+.course-header {
+  margin-bottom: 20px;
+}
+
+.course-header :deep(.ant-card) {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
+  border: 1px solid #e8e8e8;
+}
+
+.course-info {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}
+
+.course-info .ant-avatar {
+  margin-right: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.course-details {
+  flex: 1;
+}
+
+.course-details h2 {
+  margin-bottom: 8px;
+  font-size: 22px;
+  color: #1d1d1d;
+  font-weight: 600;
+}
+
+.course-details p {
+  margin-bottom: 6px;
+  color: #444;
+  font-size: 14px;
+}
+
+.search-box {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.chapter-list {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+}
+
+.danger {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+}
+
+.custom-button {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  color: #fff;
+  font-weight: 500;
+}
+
+.custom-button:hover {
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+.video-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+  font-weight: 500;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+  color: #fff;
+}
+
+.custom-button[disabled] {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  opacity: 0.6;
+  color: #fff;
+}
+
+.custom-button.ant-btn-dangerous {
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+.custom-button.ant-btn-dangerous:hover,
+.custom-button.ant-btn-dangerous:focus {
+  background-color: #ff7875;
+  border-color: #ff7875;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/course/courseManagement.vue b/src/view/course/courseManagement.vue
index c38742f..8e0de29 100644
--- a/src/view/course/courseManagement.vue
+++ b/src/view/course/courseManagement.vue
@@ -5,7 +5,7 @@
       <a-space>
         <a-form-item label="课程名称">
           <a-input-search
-              style="width: 300px"
+              style="width: 200px"
               placeholder="请输入课程名称"
               enter-button
               @search="handleCourseSearch"
@@ -13,6 +13,34 @@
               class="custom-search"
           />
         </a-form-item>
+
+        <a-form-item label="课程类别">
+          <a-select
+              style="width: 120px"
+              placeholder="请选择"
+              v-model:value="searchCourseType"
+              @change="handleCourseSearch"
+          >
+            <a-select-option value="">全部</a-select-option>
+            <a-select-option value="考公考研">考公考研</a-select-option>
+            <a-select-option value="自媒体">自媒体</a-select-option>
+            <a-select-option value="财经">财经</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="上架状态">
+          <a-select
+              style="width: 120px"
+              placeholder="请选择"
+              v-model:value="searchIsShelves"
+              @change="handleCourseSearch"
+          >
+            <a-select-option value="">全部</a-select-option>
+            <a-select-option value="true">已上架</a-select-option>
+            <a-select-option value="false">已下架</a-select-option>
+          </a-select>
+        </a-form-item>
+
         <a-button class="custom-button" @click="goAddCourse">新增课程</a-button>
         <a-button class="custom-button"  @click="reset">重置搜索</a-button>
         <a-button
@@ -30,7 +58,7 @@
   <a-table
       :columns="columns"
       :data-source="tableData"
-      :scroll="{ x: 1500, y: 550 }"
+      :scroll="{ x: 1600, y: 550 }"
       :loading="loading"
       :pagination="pagination"
       :row-selection="rowSelection"
@@ -43,20 +71,31 @@
       <template v-if="column.key === 'image'">
         <a-avatar :src="downLoadImage+record.image" shape="square" :size="64"/>
       </template>
+
       <template v-if="column.key === 'originPrice'">
-        {{record.originPrice }}￥
+        {{ record.originPrice }}￥
       </template>
+
       <template v-if="column.key === 'discountPrice'">
-        {{record.discountPrice}}￥
+        {{ record.discountPrice }}￥
       </template>
+
       <template v-if="column.key === 'orderCount'">
-        {{record.orderCount}}人
+        {{ record.orderCount }}人
       </template>
+
       <template v-if="column.key === 'firstLevelRate'">
-        {{record.firstLevelRate }}%
+        {{ record.firstLevelRate }}%
       </template>
+
       <template v-if="column.key === 'secondLevelRate'">
-        {{record.secondLevelRate }}%
+        {{ record.secondLevelRate }}%
+      </template>
+
+      <template v-if="column.key === 'isShelves'">
+        <a-tag :color="record.isShelves ? 'green' : 'red'">
+          {{ record.isShelves ? '已上架' : '已下架' }}
+        </a-tag>
       </template>
 
       <!-- 操作列 -->
@@ -97,18 +136,22 @@ import {downLoadImage} from "../../api/ImageUrl.ts";
 import router from "../../router";
 
 const loading = ref(false);
-const total = ref(0);
 const selectedRowKeys = ref<number[]>([]); // 存储选中的行ID
 
-const searchCourseName = ref(""); // 改为项目名称搜索参数
+// 搜索参数
+const searchCourseName = ref("");
+const searchCourseType = ref("");
+const searchIsShelves = ref("");
+
+// 分页查询参数
 const searchParams = ref({
   current: 1,
   pageSize: 10,
   sortField: "id",
   sortOrder: "ascend",
-  userRole: null,
   name: "",
-  type:""
+  type: "",
+  isShelves: ""
 });
 
 // 行选择配置
@@ -119,9 +162,8 @@ const rowSelection = ref({
   }
 });
 
-//用户表
+// 课程表格列定义
 const columns = [
-
   {
     title: '课程ID',
     dataIndex: 'id',
@@ -129,10 +171,9 @@ const columns = [
     key: 'id',
     fixed: 'left',
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
   },
-
   {
     title: '课程图片',
     dataIndex: 'image',
@@ -162,8 +203,8 @@ const columns = [
     width: 55,
     key: 'originPrice',
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
   },
   {
     title: '折扣价格',
@@ -171,8 +212,8 @@ const columns = [
     key: 'discountPrice',
     width: 55,
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
   },
   {
     title: '已下单人数',
@@ -180,8 +221,8 @@ const columns = [
     key: 'orderCount',
     width: 55,
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
   },
   {
     title: '一级佣金比例',
@@ -189,8 +230,8 @@ const columns = [
     key: 'firstLevelRate',
     width: 65,
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
   },
   {
     title: '二级佣金比例',
@@ -198,8 +239,15 @@ const columns = [
     key: 'secondLevelRate',
     width: 65,
     align: 'center',
-    sorter: true,  // 添加排序功能
-    sortDirections: ['ascend', 'descend']  // 允许升序降序
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '是否上架',
+    dataIndex: 'isShelves',
+    key: 'isShelves',
+    width: 65,
+    align: 'center'
   },
   {
     title: '操作',
@@ -210,42 +258,30 @@ const columns = [
   }
 ];
 
-interface ProjectRecord {
-  // 这里根据实际数据结构定义属性
-  superHostList?: string[];
-  // 其他属性...
-}
-// 项目名称搜索方法
+// 课程名称搜索方法
 const handleCourseSearch = async () => {
-  // 将搜索参数同步到分页查询参数
   searchParams.value.name = searchCourseName.value;
+  searchParams.value.type = searchCourseType.value;
+  searchParams.value.isShelves = searchIsShelves.value;
   searchParams.value.current = 1; // 重置到第一页
   await getCourseList();
 };
-//用户分页查询
+
+// 课程分页查询
 const getCourseList = async () => {
   loading.value = true;
   try {
     const storedToken = localStorage.getItem('token');
     if (!storedToken) throw new Error('未找到登录信息');
 
-    const res:any = await myAxios.post("/course/page",
-        {
-          ...searchParams.value,
-          projectName: searchParams.value.projectName
-        },
+    const res: any = await myAxios.post("/course/page", searchParams.value,
         { headers: { Authorization: storedToken } }
     );
-    console.log(res)
+
     if (res.code === 1 && res.data && Array.isArray(res.data.records)) {
-      tableData.value = res.data.records.map((item: ProjectRecord)  => ({
-        ...item,
-        superUserList: item.superHostList? item.superHostList.join(', ') : '无'
-      }));
+      tableData.value = res.data.records;
       // 同步总条数到分页组件
-      total.value = res.data.total;
-      pagination.value.total = res.data.total; // 新增此行
-      pagination.value.current = searchParams.value.current; // 同步当前页
+      pagination.value.total = res.data.total;
     } else {
       message.error(res.message || '请求失败');
     }
@@ -258,7 +294,6 @@ const getCourseList = async () => {
 };
 
 onMounted(getCourseList);
-//分页
 
 // 分页配置
 const pagination = ref({
@@ -270,49 +305,55 @@ const pagination = ref({
   showTotal: (total: number) => `共 ${total} 条`,
   pageSizeOptions: ['10', '20', '50', '100']
 });
-const handleTableChange = (pag: any, _: any, sorter: any) => {
-  // 处理排序参数
-  let sortField = "id";  // 默认排序字段
-  let sortOrder = "ascend"; // 默认排序方式
-  if (sorter.field) {
-    sortField = sorter.field;
-    sortOrder = sorter.order;
+
+// 处理分页和排序变化
+const handleTableChange = (pag: any, _filters: any, sorter: any) => {
+  searchParams.value.current = pag.current;
+  searchParams.value.pageSize = pag.pageSize;
+
+  // 处理排序
+  if (sorter && sorter.field) {
+    // 获取排序字段（使用列的key而不是dataIndex）
+    const sortField = sorter.field;
+
+    // 获取排序方向（ascend/descend）
+    const sortOrder = sorter.order ? sorter.order : '';
+
+    // 更新搜索参数中的排序字段和排序方向
+    searchParams.value.sortField = sortField;
+    searchParams.value.sortOrder = sortOrder;
+  } else {
+    // 如果没有排序信息，重置为默认排序
+    searchParams.value.sortField = "id";
+    searchParams.value.sortOrder = "ascend";
   }
-  searchParams.value = {
-    ...searchParams.value,
-    current: pag.current,
-    pageSize: pag.pageSize,
-    sortField: sortField,     // 设置排序字段
-    sortOrder: sortOrder
-  };
 
   // 同步到分页组件
-  pagination.value = {
-    ...pagination.value,
-    current: pag.current,
-    pageSize: pag.pageSize
-  };
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
 
   getCourseList();
 };
 
-// ID查询方法
-interface Project {
+// 课程接口定义
+interface Course {
   id: number;
-  projectName: string;
-  projectImage: string;
-  projectSettlementCycle: number;
-  maxPromoterCount: number;
-  projectStatus: string;
-  projectDescription: string;
-  settlementDesc: string;
-  // 其他可能存在的属性根据实际情况补充
+  name: string;
+  type: string;
+  detail: string;
+  promoCodeDesc: string;
+  image: string;
+  originPrice: number;
+  discountPrice: number;
+  orderCount: number;
+  firstLevelRate: number;
+  secondLevelRate: number;
+  isShelves: boolean;
 }
 
-const tableData = ref<Project[]>([]);
+const tableData = ref<Course[]>([]);
 
-
-// 删除项目 - 添加确认弹窗
+// 删除课程
 const deleteCourse = (id: number) => {
   Modal.confirm({
     title: '确认删除',
@@ -322,15 +363,10 @@ const deleteCourse = (id: number) => {
     onOk: async () => {
       try {
         const storedToken = localStorage.getItem('token');
-        const res:any = await myAxios.post(
+        const res: any = await myAxios.post(
             "/course/delete",
             { id },
-            {
-              headers: {
-                Authorization: storedToken,
-                'AfterScript': 'required-script'
-              }
-            }
+            { headers: { Authorization: storedToken } }
         );
 
         if (res.code === 1) {
@@ -343,10 +379,7 @@ const deleteCourse = (id: number) => {
         console.error('删除失败:', error);
         message.error('删除操作失败');
       }
-    },
-    onCancel() {
-      // 用户点击取消，不做操作
-    },
+    }
   });
 };
 
@@ -362,12 +395,7 @@ const showDeleteConfirm = () => {
     content: `确定要删除选中的 ${selectedRowKeys.value.length} 门课程吗？删除后数据将无法恢复！`,
     okText: '确认',
     cancelText: '取消',
-    onOk: async () => {
-      await deleteBatchCourses();
-    },
-    onCancel() {
-      // 用户点击取消，不做操作
-    },
+    onOk: deleteBatchCourses
   });
 };
 
@@ -378,12 +406,7 @@ const deleteBatchCourses = async () => {
     const res: any = await myAxios.post(
         "/course/delBatch",
         { ids: selectedRowKeys.value },
-        {
-          headers: {
-            Authorization: storedToken,
-            'Content-Type': 'application/json'
-          }
-        }
+        { headers: { Authorization: storedToken } }
     );
 
     if (res.code === 1) {
@@ -399,97 +422,65 @@ const deleteBatchCourses = async () => {
   }
 };
 
-// 重置按钮
+// 重置搜索条件
 const reset = () => {
   searchCourseName.value = "";
+  searchCourseType.value = "";
+  searchIsShelves.value = "";
   selectedRowKeys.value = [];
+
   searchParams.value = {
     current: 1,
     pageSize: 10,
     sortField: "id",
     sortOrder: "ascend",
-    userRole: null,
     name: "",
-    type:""
+    type: "",
+    isShelves: ""
   };
+
   getCourseList();
 };
 
-//去新增项目
-const goAddCourse=()=>{
+// 跳转到新增课程页面
+const goAddCourse = () => {
   router.push('/addcourse')
 }
 
-const showDetails=(id:string)=>{
+// 查看课程详情
+const showDetails = (id: string) => {
   router.push({
-    path:'/courseDetail',
-    query:{
-      id:String(id)
-    }
+    path: '/courseDetail',
+    query: { id: String(id) }
   })
 }
-const chapterDetails=(id:string)=>{
+
+// 查看章节详情
+const chapterDetails = (id: string) => {
   router.push({
-    path:'/chapterDetail',
-    query:{
-      id:String(id)
-    }
+    path: '/chapterDetail',
+    query: { id: String(id) }
   })
 }
 </script>
 
 <style scoped>
-/* 分割线样式 */
-:deep(.ant-divider-vertical) {
-  border-color: rgba(0, 0, 0, 0.15);
-  height: 1.2em;
-  margin: 0 4px;
-}
-
-:deep(.ant-descriptions-item-label) {
-  font-weight: 600;
-  width: 120px;
-}
-
-.info-card :deep(.ant-card-head) {
-  background: #fafafa;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-/* 角色颜色映射 */
-:root {
-  --role-user: #87d068;
-  --role-admin: #f50;
-  --role-boss: #722ed1;
-}
-
+/* 原有样式保持不变 */
 .search-box {
   margin-bottom: 10px;
 }
 
-/* 批量删除按钮样式 */
-.danger {
-  background-color: #ff4d4f !important;
-  border-color: #ff4d4f !important;
-}
-
-.danger:hover,
-.danger:focus {
-  background-color: #ff7875 !important;
-  border-color: #ff7875 !important;
-}
-
-/*橙色按钮*/
 .custom-button {
   background-color: #ffa940;
   border-color: #ffa940;
   color: #fff;
+  font-weight: 500;
 }
 
 .custom-button:hover,
 .custom-button:focus {
-  background-color: #ffa940;
-  border-color: #ffa940;
+  background-color: #fa8c16;
+  border-color: #fa8c16;
   color: #fff;
 }
 
@@ -500,7 +491,6 @@ const chapterDetails=(id:string)=>{
   color: #fff;
 }
 
-/* 危险按钮样式 */
 .custom-button.ant-btn-dangerous {
   background-color: #ff4d4f;
   border-color: #ff4d4f;
@@ -512,24 +502,13 @@ const chapterDetails=(id:string)=>{
   border-color: #ff7875;
 }
 
-/* 保持原有的其他样式不变 */
-.search-box {
-  margin-bottom: 10px;
-}
-
 .custom-search :deep(.ant-input-search-button) {
   background-color: #ffa940;
   border-color: #ffa940;
 }
 
-.custom-search :deep(.ant-input-search-button:hover),
-.custom-search :deep(.ant-input-search-button:focus) {
-  background-color: #fa8c16;
-  border-color: #fa8c16;
-}
-
-/* 保持输入框原有样式不变 */
-.custom-search :deep(.ant-input) {
-  border-right-color: #ffa940;
+.danger {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/view/course/courseOrder.vue b/src/view/course/courseOrder.vue
new file mode 100644
index 0000000..0bddc8e
--- /dev/null
+++ b/src/view/course/courseOrder.vue
@@ -0,0 +1,461 @@
+<template>
+  <!-- 搜索框 -->
+  <div class="search-box">
+    <a-form layout="inline">
+      <a-space>
+        <a-form-item label="订单号">
+          <a-input-search
+              style="width: 200px"
+              placeholder="请输入订单号"
+              enter-button
+              @search="handleSearch"
+              v-model:value="searchOrderNumber"
+              class="custom-search"
+          />
+        </a-form-item>
+
+        <a-form-item label="订单状态">
+          <a-select
+              style="width: 120px"
+              placeholder="请选择"
+              v-model:value="searchOrderStatus"
+              @change="handleSearch"
+          >
+            <a-select-option value="">全部</a-select-option>
+            <a-select-option value="交易关闭">交易关闭</a-select-option>
+            <a-select-option value="交易成功">交易成功</a-select-option>
+            <a-select-option value="待支付">待支付</a-select-option>
+            <a-select-option value="已退款">已退款</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-button class="custom-button" @click="reset">重置搜索</a-button>
+        <a-button
+            class="custom-button danger"
+            :disabled="selectedRowKeys.length === 0"
+            @click="showDeleteConfirm"
+        >
+          批量删除
+        </a-button>
+      </a-space>
+    </a-form>
+  </div>
+
+  <!--  数据-->
+  <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :scroll="{ x: 2000, y: 550 }"
+      :loading="loading"
+      :pagination="pagination"
+      :row-selection="rowSelection"
+      bordered
+      rowKey="id"
+      @change="handleTableChange"
+  >
+    <template #bodyCell="{ column, record }">
+      <!-- 课程图片 -->
+      <template v-if="column.key === 'image'">
+        <a-avatar :src="downLoadImage+record.image" shape="square" :size="64"/>
+      </template>
+
+      <!-- 金额字段 -->
+      <template v-if="column.key === 'originPrice'">
+        {{ record.originPrice }}￥
+      </template>
+
+      <template v-if="column.key === 'discountPrice'">
+        {{ record.discountPrice }}￥
+      </template>
+
+      <template v-if="column.key === 'totalAmount'">
+        {{ record.totalAmount }}￥
+      </template>
+
+      <!-- 订单状态 -->
+      <template v-if="column.key === 'orderStatus'">
+        <a-tag
+            :color="getStatusColor(record.orderStatus)"
+        >
+          {{ record.orderStatus }}
+        </a-tag>
+      </template>
+
+      <!-- 操作列 -->
+      <template v-if="column.key === 'action'">
+        <a-space :size="8">
+          <a-button
+              size="small"
+              danger
+              @click="deleteOrder(record.id)"
+          >
+            删除
+          </a-button>
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import myAxios from "../../api/myAxios.ts";
+import { message, Modal } from "ant-design-vue";
+import {downLoadImage} from "../../api/ImageUrl.ts";
+import router from "../../router";
+
+const loading = ref(false);
+const selectedRowKeys = ref<number[]>([]); // 存储选中的行ID
+
+// 搜索参数
+const searchOrderNumber = ref("");
+const searchOrderStatus = ref("");
+
+// 分页查询参数
+const searchParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: "id",
+  sortOrder: "ascend",
+  orderNumber: "",
+  orderStatus: ""
+});
+
+// 行选择配置
+const rowSelection = ref({
+  selectedRowKeys: selectedRowKeys,
+  onChange: (selectedKeys: number[]) => {
+    selectedRowKeys.value = selectedKeys;
+  }
+});
+
+// 订单表格列定义
+const columns = [
+  {
+    title: '订单ID',
+    dataIndex: 'id',
+    width: 85,
+    key: 'id',
+    fixed: 'left',
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '订单号',
+    dataIndex: 'orderNumber',
+    width: 200,
+    key: 'orderNumber',
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '课程图片',
+    dataIndex: 'image',
+    key: 'image',
+    width: 75,
+    align: 'center'
+  },
+  {
+    title: '课程名称',
+    dataIndex: 'name',
+    width: 140,
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: '课程类别',
+    dataIndex: 'type',
+    width: 75,
+    key: 'type',
+    align: 'center'
+  },
+  {
+    title: '课程原价',
+    dataIndex: 'originPrice',
+    width: 95,
+    key: 'originPrice',
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '折扣价格',
+    dataIndex: 'discountPrice',
+    key: 'discountPrice',
+    width: 95,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '订单金额',
+    dataIndex: 'totalAmount',
+    key: 'totalAmount',
+    width: 95,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '交易号',
+    dataIndex: 'transactionNumber',
+    key: 'transactionNumber',
+    width: 150,
+    align: 'center'
+  },
+  {
+    title: '订单状态',
+    dataIndex: 'orderStatus',
+    key: 'orderStatus',
+    width: 75,
+    align: 'center'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 150,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    key: 'updateTime',
+    width: 150,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    width: 95,
+    align: 'center'
+  }
+];
+
+// 订单搜索方法
+const handleSearch = async () => {
+  searchParams.value.orderNumber = searchOrderNumber.value;
+  searchParams.value.orderStatus = searchOrderStatus.value;
+  searchParams.value.current = 1; // 重置到第一页
+  await getOrderList();
+};
+
+// 订单分页查询
+const getOrderList = async () => {
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post("/courseOrder/page", searchParams.value,
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data && Array.isArray(res.data.records)) {
+      tableData.value = res.data.records;
+      // 同步总条数到分页组件
+      pagination.value.total = res.data.total;
+    } else {
+      message.error(res.message || '请求失败');
+    }
+  } catch (error) {
+    console.error("请求失败:", error);
+    message.error('获取数据失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(getOrderList);
+
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+
+// 处理分页和排序变化
+// 处理分页和排序变化
+const handleTableChange = (pag: any, _filters: any, sorter: any) => {
+  searchParams.value.current = pag.current;
+  searchParams.value.pageSize = pag.pageSize;
+
+  // 处理排序
+  if (sorter && sorter.field) {
+    // 获取排序字段（使用列的key而不是dataIndex）
+    const sortField = sorter.field;
+
+    // 获取排序方向（ascend/descend）
+    const sortOrder = sorter.order ? sorter.order : '';
+
+    // 更新搜索参数中的排序字段和排序方向
+    searchParams.value.sortField = sortField;
+    searchParams.value.sortOrder = sortOrder;
+  } else {
+    // 如果没有排序信息，重置为默认排序
+    searchParams.value.sortField = "id";
+    searchParams.value.sortOrder = "ascend";
+  }
+
+  // 同步到分页组件
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getOrderList();
+};
+
+// 订单接口定义
+interface Order {
+  id: number;
+  orderNumber: string;
+  name: string;
+  type: string;
+  image: string;
+  originprice: number;
+  discountprice: number;
+  totalAmount: number;
+  transactionNumber: string | null;
+  orderStatus: string;
+  createtime: string;
+  updateTime: string;
+}
+
+const tableData = ref<Order[]>([]);
+
+// 获取状态颜色
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case '交易成功':
+      return 'green';
+    case '待支付':
+      return 'orange';
+    case '交易关闭':
+      return 'red';
+    case '已退款':
+      return 'blue';
+    default:
+      return 'gray';
+  }
+};
+
+// 删除订单
+const deleteOrder = (id: number) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确定要删除该订单吗？删除后数据将无法恢复！',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      try {
+        const storedToken = localStorage.getItem('token');
+        const res: any = await myAxios.post(
+            "/courseOrder/delete",
+            { id },
+            { headers: { Authorization: storedToken } }
+        );
+
+        if (res.code === 1) {
+          message.success('删除成功');
+          await getOrderList();
+        } else {
+          message.error(res.message || '删除失败');
+        }
+      } catch (error) {
+        console.error('删除失败:', error);
+        message.error('删除操作失败');
+      }
+    }
+  });
+};
+
+// 批量删除确认弹窗
+const showDeleteConfirm = () => {
+  if (selectedRowKeys.value.length === 0) {
+    message.warning('请至少选择一个订单');
+    return;
+  }
+
+  Modal.confirm({
+    title: '确认批量删除',
+    content: `确定要删除选中的 ${selectedRowKeys.value.length} 个订单吗？删除后数据将无法恢复！`,
+    okText: '确认',
+    cancelText: '取消',
+    onOk: deleteBatchOrders
+  });
+};
+
+// 批量删除方法
+const deleteBatchOrders = async () => {
+  try {
+    const storedToken = localStorage.getItem('token');
+    const res: any = await myAxios.post(
+        "/courseOrder/delBatch",
+        { ids: selectedRowKeys.value },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1) {
+      message.success(`成功删除 ${selectedRowKeys.value.length} 个订单`);
+      selectedRowKeys.value = []; // 清空选择
+      await getOrderList(); // 刷新列表
+    } else {
+      message.error(res.message || '批量删除失败');
+    }
+  } catch (error) {
+    console.error('批量删除失败:', error);
+    message.error('批量删除操作失败');
+  }
+};
+
+// 重置搜索条件
+const reset = () => {
+  searchOrderNumber.value = "";
+  searchOrderStatus.value = "";
+  selectedRowKeys.value = [];
+
+  searchParams.value = {
+    current: 1,
+    pageSize: 10,
+    sortField: "id",
+    sortOrder: "ascend",
+    orderNumber: "",
+    orderStatus: ""
+  };
+
+  getOrderList();
+};
+
+</script>
+
+<style scoped>
+.search-box {
+  margin-bottom: 10px;
+}
+
+.danger {
+  background-color: #ff4d4f !important;
+  border-color: #ff4d4f !important;
+}
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+</style>
\ No newline at end of file