diff --git a/src/api/base/jcApi.ts b/src/api/base/jcApi.ts
new file mode 100644
index 0000000..6a9e339
--- /dev/null
+++ b/src/api/base/jcApi.ts
@@ -0,0 +1,276 @@
+import { get, post } from '@/utils/request'
+
+/**
+ * 获取就餐标准列表
+ */
+export const getJcBzListApi = async (params: any) => {
+  return await get('/api/jcBz/getJcBzList', params)
+}
+
+/**
+ * 获取就餐清单列表
+ */
+export const getJcQdListApi = async (params: any) => {
+  return await get('/api/jcQd/findPage', params)
+}
+
+/**
+ * 获取就餐点名分页
+ */
+export const getJcDmPageApi = async (params: any) => {
+  return await get('/api/jcDm/findPage', params)
+}
+
+/**
+ * 根据学生ID查询就餐清单状态
+ */
+export const getStudentJcStatusApi = async (xsId: string) => {
+  return await get('/api/jcQd/findPage', {
+    xsId,
+    pageNum: 1,
+    pageSize: 100
+  })
+}
+
+/**
+ * 提交就餐点名
+ */
+export const submitJcDmApi = async (data: any) => {
+  return await post('/api/jcDm/save', data)
+}
+
+/**
+ * 提交陪餐教师信息
+ */
+export const submitJcPtApi = async (data: any) => {
+  return await post('/api/jcPt/save', data)
+}
+
+/**
+ * 获取就餐点名记录
+ */
+export const getJcDmListApi = async (params: any) => {
+  return await get('/api/jcDm/findPage', params)
+}
+
+/**
+ * 获取陪餐教师记录
+ */
+export const getJcPtListApi = async (params: any) => {
+  return await get('/api/jcPt/findPage', params)
+}
+
+/**
+ * 【教师端专用】根据班级ID获取学生点名数据
+ * 返回两组学生数据：已缴费和未缴费/未报名
+ */
+export const getClassStudentDmDataApi = async (bjId: string, njId: string) => {
+  try {
+    const response = await get('/mobile/js/jc/getClassStudentDmData', { bjId, njId })
+    return response
+  } catch (error) {
+    console.error('获取班级学生点名数据失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 【教师端专用】提交就餐点名数据
+ * 包含：点名教师ID、点名时间、学生列表、陪餐教师列表等
+ */
+export const submitJcDmDataApi = async (dmData: any) => {
+  try {
+    const response = await post('/mobile/js/jc/tjDmData', dmData)
+    return response
+  } catch (error) {
+    console.error('提交就餐点名数据失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 【教师端专用】获取就餐点名详情
+ */
+export const getJcDmDetailApi = async (dmId: string) => {
+  try {
+    const response = await get('/mobile/js/jc/getDmDetail', { dmId })
+    return response
+  } catch (error) {
+    console.error('获取就餐点名详情失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 【优化版本】根据班级ID获取学生就餐状态 - 使用批量查询避免循环
+ */
+export const getClassStudentJcStatusBatchApi = async (bjId: string, njId: string) => {
+  try {
+    // 1. 批量查询班级学生列表
+    const studentsRes = await get('/api/xs/findPage', {
+      bjId,
+      njId,
+      pageNum: 1,
+      pageSize: 1000
+    })
+    
+    if (!studentsRes.result || !studentsRes.result.rows || studentsRes.result.rows.length === 0) {
+      return []
+    }
+    
+    const students = studentsRes.result.rows
+    const studentIds = students.map((s: any) => s.id)
+    
+    // 2. 批量查询所有学生的就餐清单状态
+    const jcQdRes = await get('/api/jcQd/findBatchByXsIds', {
+      xsIds: studentIds.join(','),
+      pageNum: 1,
+      pageSize: 1000
+    })
+    
+    // 3. 将就餐清单转换为Map，便于快速查找
+    const jcQdMap = new Map()
+    if (jcQdRes.result && jcQdRes.result.rows) {
+      jcQdRes.result.rows.forEach((qd: any) => {
+        jcQdMap.set(qd.xsId, qd)
+      })
+    }
+    
+    // 4. 构建学生状态列表
+    const studentStatusList = students.map((student: any) => {
+      const jcQdInfo = jcQdMap.get(student.id)
+      const hasJcQd = !!jcQdInfo
+      const jfZt = jcQdInfo?.jfZt || null
+      
+      // 根据缴费状态和就餐清单情况设置默认状态
+      let defaultStatus = 'A' // 默认正常状态
+      if (!hasJcQd) {
+        defaultStatus = 'E' // 未报名
+      } else if (jfZt !== 'B') {
+        defaultStatus = 'D' // 未缴费
+      }
+      
+      return {
+        ...student,
+        hasJcQd,
+        jcQdInfo,
+        jfZt,
+        jcZt: defaultStatus,
+        studentType: hasJcQd && jfZt === 'B' ? 'paid' : 'unpaid'
+      }
+    })
+    
+    return studentStatusList
+  } catch (error) {
+    console.error('批量查询学生就餐状态失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 【原版本】根据班级ID获取学生就餐状态 - 保留作为备用
+ * @deprecated 建议使用 getClassStudentDmDataApi 替代
+ */
+export const getClassStudentJcStatusApi = async (bjId: string, njId: string) => {
+  // 先获取班级学生列表
+  const studentsRes = await get('/api/xs/findPage', {
+    bjId,
+    njId,
+    pageNum: 1,
+    pageSize: 1000
+  })
+  
+  if (!studentsRes.result || !studentsRes.result.rows) {
+    return []
+  }
+  
+  const students = studentsRes.result.rows
+  const studentStatusList = []
+  
+  // 为每个学生查询就餐清单状态
+  for (const student of students) {
+    try {
+      const jcQdRes = await get('/api/jcQd/findPage', {
+        xsId: student.id,
+        pageNum: 1,
+        pageSize: 10
+      })
+      
+      let hasJcQd = false
+      let jcQdInfo = null
+      let jfZt = null // 缴费状态
+      
+      if (jcQdRes.result && jcQdRes.result.rows && jcQdRes.result.rows.length > 0) {
+        jcQdInfo = jcQdRes.result.rows[0]
+        hasJcQd = true
+        jfZt = jcQdInfo.jfZt || null
+      }
+      
+      // 根据缴费状态和就餐清单情况设置默认状态
+      let defaultStatus = 'A' // 默认正常状态
+      if (!hasJcQd) {
+        defaultStatus = 'E' // 未报名
+      } else if (jfZt !== 'B') {
+        defaultStatus = 'D' // 未缴费
+      }
+      
+      studentStatusList.push({
+        ...student,
+        hasJcQd,
+        jcQdInfo,
+        jfZt,
+        jcZt: defaultStatus, // 默认就餐状态
+        // 添加学生类型标识，便于前端分类显示
+        studentType: hasJcQd && jfZt === 'B' ? 'paid' : 'unpaid'
+      })
+    } catch (error) {
+      console.error(`查询学生 ${student.xm} 就餐状态失败:`, error)
+      studentStatusList.push({
+        ...student,
+        hasJcQd: false,
+        jcQdInfo: null,
+        jfZt: null,
+        jcZt: 'E', // 查询失败时默认为未报名
+        studentType: 'unpaid'
+      })
+    }
+  }
+  
+  return studentStatusList
+}
+
+/**
+ * 批量提交学生就餐点名记录
+ */
+export const submitBatchJcDmApi = async (dmList: any[]) => {
+  const promises = dmList.map(dm => submitJcDmApi(dm))
+  return await Promise.all(promises)
+}
+
+/**
+ * 批量提交学生就餐点名记录 - 优化版本
+ */
+export const submitBatchJcDmOptimizedApi = async (dmList: any[]) => {
+  return await post('/api/jcDm/saveBatch', dmList)
+}
+
+/**
+ * 根据班级ID获取学生就餐状态统计信息
+ */
+export const getClassStudentJcStatusStatsApi = async (bjId: string, njId: string) => {
+  return await get('/api/jcQd/getClassStats', { bjId, njId })
+}
+
+/**
+ * 根据点名批次ID获取点名记录
+ */
+export const getJcDmByBatchIdApi = async (dmPcId: string) => {
+  return await get('/api/jcDm/findByBatchId', { dmPcId })
+}
+
+/**
+ * 根据班级和日期获取点名记录
+ */
+export const getJcDmByClassAndDateApi = async (bjId: string, njId: string, dmDate: string) => {
+  return await get('/api/jcDm/findByClassAndDate', { bjId, njId, dmDate })
+}
diff --git a/src/pages.json b/src/pages.json
index 13e0a0c..dafddf7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -565,6 +565,18 @@
         "navigationBarTextStyle": "black",
         "backgroundColor": "#f4f5f7"
       }
+    },
+    {
+      "path": "pages/view/routine/jc/index",
+      "style": {
+        "navigationBarTitleText": "就餐点名"
+      }
+    },
+    {
+      "path": "pages/view/routine/jc/detail",
+      "style": {
+        "navigationBarTitleText": "就餐点名详情"
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/base/service/index.vue b/src/pages/base/service/index.vue
index 0b1f6aa..ed1c4d1 100644
--- a/src/pages/base/service/index.vue
+++ b/src/pages/base/service/index.vue
@@ -64,9 +64,9 @@
           <view class="title-line"></view>
         </view>
         <view class="section-grid-card">
-          <template v-for="item in section.items" :key="item.id">
+          <template v-for="(item, itemIdx) in section.items" :key="item.id">
             <view
-                v-if="item.show && hasPermissionDirect(item.permissionKey)"
+              v-if="item.show && hasPermissionDirect(item.permissionKey)"
               class="grid-item"
               @click="handleGridItemClick(item)"
             >
@@ -113,8 +113,8 @@ const isLoading = ref(true);
 
 // 教师工作信息
 const jsWork = ref<any>({
-	jf: 88,
-	ks: 40
+  jf: 88,
+  ks: 40,
 });
 
 interface GridItem {
@@ -122,7 +122,7 @@ interface GridItem {
   icon: string; // 图标文件名 (不含扩展名)
   text: string;
   show: boolean; // 是否显示
-  permissionKey?: string; // 权限键
+  permissionKey: string; // 权限键
   path?: string; // 页面路径
 }
 
@@ -142,12 +142,15 @@ const handleLogout = () => {
       if (res.confirm) {
         try {
           // 从userdata中获取用户ID
-          const userDataStr = uni.getStorageSync('app-user');
+          const userDataStr = uni.getStorageSync("app-user");
           let userData = null;
 
           if (userDataStr) {
             try {
-              userData = typeof userDataStr === 'string' ? JSON.parse(userDataStr) : userDataStr;
+              userData =
+                typeof userDataStr === "string"
+                  ? JSON.parse(userDataStr)
+                  : userDataStr;
             } catch (e) {
               // 静默处理错误
             }
@@ -260,6 +263,14 @@ const sections = reactive<Section[]>([
         permissionKey: "routine-qdfb", // 签到发布权限编码
         path: "/pages/view/routine/qd/index",
       },
+      {
+        id: "r11",
+        icon: "draftfill",
+        text: "就餐点名",
+        show: true,
+        permissionKey: "routine-jcdm", // 就餐点名权限编码
+        path: "/pages/view/routine/jc/index",
+      },
     ],
   },
   {
@@ -381,7 +392,7 @@ onMounted(async () => {
   isLoading.value = false;
 
   // 强制清除权限缓存，确保数据一致性
-  const { clearPermissionCachePublic } = await import('@/utils/permission');
+  const { clearPermissionCachePublic } = await import("@/utils/permission");
   clearPermissionCachePublic();
 });
 
@@ -395,20 +406,24 @@ async function initPositionInfo() {
   if (getJs.qtzw && typeof getJs.qtzw == "string") {
     qtZw = getJs.qtzw.split(",");
   }
-  if (dzZw && dzZw.length){
-    const res = await getZwListByLx({ zwlx: '党政职务' });
-    dzZwLabel.value = dzZw.map((zwId: string) => {
-      const zw = res.result.find((zw: any) => zwId == zw.id);
-      return zw ? zw.zwmc : '';
-    }).join(', ');
-  };
-  if (qtZw && qtZw.length){
-    const res = await getZwListByLx({ zwlx: '其他职务' });
-    qtZwLabel.value = qtZw.map((zwId: string) => {
-      const zw = res.result.find((zw: any) => zwId == zw.id);
-      return zw ? zw.zwmc : '';
-    }).join(', ');
-  };
+  if (dzZw && dzZw.length) {
+    const res = await getZwListByLx({ zwlx: "党政职务" });
+    dzZwLabel.value = dzZw
+      .map((zwId: string) => {
+        const zw = res.result.find((zw: any) => zwId == zw.id);
+        return zw ? zw.zwmc : "";
+      })
+      .join(", ");
+  }
+  if (qtZw && qtZw.length) {
+    const res = await getZwListByLx({ zwlx: "其他职务" });
+    qtZwLabel.value = qtZw
+      .map((zwId: string) => {
+        const zw = res.result.find((zw: any) => zwId == zw.id);
+        return zw ? zw.zwmc : "";
+      })
+      .join(", ");
+  }
 }
 
 // 检查区域权限
@@ -475,8 +490,12 @@ const hasPermissionDirect = (permissionKey: string) => {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 // 顶部 Header
diff --git a/src/pages/components/JsPicker/index.vue b/src/pages/components/JsPicker/index.vue
index 033c829..3c6732d 100644
--- a/src/pages/components/JsPicker/index.vue
+++ b/src/pages/components/JsPicker/index.vue
@@ -109,6 +109,7 @@ const rebuildJsList = () => {
       jsList.value.push({
         label: item.jsxm,
         value: item.id,
+        headPic: item.headPic
       });
     }
   });
diff --git a/src/pages/components/NjBjPicker/index.vue b/src/pages/components/NjBjPicker/index.vue
index 53bd8aa..ba6ed8e 100644
--- a/src/pages/components/NjBjPicker/index.vue
+++ b/src/pages/components/NjBjPicker/index.vue
@@ -13,9 +13,9 @@ import { findAllNjBjTreeApi } from "@/api/base/server";
 
 // 接收外部传入属性并设置默认值
 const props = withDefaults(defineProps<{
-  defaultValue: any,
-  customStyle: any,
-  iconArrow: string
+  defaultValue?: any,
+  customStyle?: any,
+  iconArrow?: string
 }>(), {
   defaultValue: [],
   customStyle: {},
diff --git a/src/pages/view/routine/jc/components/dm.vue b/src/pages/view/routine/jc/components/dm.vue
new file mode 100644
index 0000000..856f56f
--- /dev/null
+++ b/src/pages/view/routine/jc/components/dm.vue
@@ -0,0 +1,1017 @@
+<template>
+  <view class="start-dm-content">
+    <!-- 班级选择器 -->
+    <view class="section">
+      <view class="section-title">选择班级</view>
+      <NjBjPicker @change="changeNjBj" icon-arrow="right" :customStyle="{ backgroundColor: '#fff', borderRadius: '0', padding: '12px 15px' }" />
+      
+      <!-- 班级选择提示 -->
+      <view v-if="!curBj" class="class-tip">
+        <text class="tip-icon">ℹ️</text>
+        <text class="tip-text">请先选择班级</text>
+      </view>
+    </view>
+
+    <!-- 陪餐教师选择 -->
+    <view class="section" v-if="curBj">
+      <view class="section-title">陪餐教师</view>
+      <JsPicker 
+        :multiple="true"
+        @change="jsXz"
+        placeholder="请选择陪餐教师"
+      />
+      <!-- <view v-if="xzJs.length > 0" class="selected-teachers">
+        <view 
+          v-for="teacher in xzJs" 
+          :key="teacher.value"
+          class="teacher-tag"
+        >
+          {{ teacher.label }}
+          <text class="remove-btn" @click="scJs(teacher.value)">×</text>
+        </view>
+      </view> -->
+    </view>
+
+    <!-- 教师陪餐状态列表 -->
+    <view class="section" v-if="xzJs.length > 0">
+      <view class="section-title">
+        教师陪餐状态
+        <text class="refresh-btn" @click="sxJsLb">刷新</text>
+      </view>
+      
+      <view class="teacher-list">
+        <view class="teacher-grid">
+          <view
+            v-for="teacher in xzJs"
+            :key="teacher.value"
+            class="teacher-item bg-white r-md p-12"
+          >
+            <view class="flex-row items-center">
+              <view class="avatar-container mr-8">
+                <image
+                  class="teacher-avatar"
+                  :src="imagUrl(teacher.headPic) || '/static/images/default-avatar.png'"
+                  mode="aspectFill"
+                ></image>
+              </view>
+              <view class="flex-1 overflow-hidden">
+                <view class="teacher-name mb-8">
+                  <text class="font-14 cor-333">{{ teacher.label }}</text>
+                </view>
+                <view class="flex-row">
+                  <!-- 教师可以切换陪餐状态 -->
+                  <view
+                    class="status-tag clickable"
+                    :class="getTeacherStatusClass(teacher.pcZt)"
+                    @click="dkJsZtXz(teacher)"
+                  >
+                    {{ hqJsZtWz(teacher.pcZt) }}
+                    <text class="status-arrow">▼</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 学生状态列表 -->
+    <view class="section" v-if="curBj">
+      <view class="section-title">
+        学生状态列表
+        <text class="refresh-btn" @click="sxXsLb">刷新</text>
+      </view>
+      
+      <!-- 统计信息 -->
+      <view class="stats-container">
+        <view class="stat-item">
+          <text class="stat-number">{{ xsLb.length }}</text>
+          <text class="stat-label">总人数</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number unpaid">{{ hqZtSl('D') }}</text>
+          <text class="stat-label">未缴费</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number unregistered">{{ hqZtSl('E') }}</text>
+          <text class="stat-label">未报名</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number normal">{{ hqZtSl('A') }}</text>
+          <text class="stat-label">正常</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number leave">{{ hqZtSl('B') }}</text>
+          <text class="stat-label">请假</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number absent">{{ hqZtSl('C') }}</text>
+          <text class="stat-label">缺勤</text>
+        </view>
+      </view>
+
+      <!-- 学生列表 - 改为card形式 -->
+      <view class="student-list">
+        <!-- 已缴费学生列表 -->
+        <view v-if="yjfXs.length > 0" class="student-section">
+          <view class="section-subtitle">已缴费学生 ({{ yjfXs.length }}人)</view>
+          <view class="student-grid">
+            <view
+              v-for="student in yjfXs"
+              :key="student.id"
+              class="student-item bg-white r-md p-12"
+            >
+              <view class="flex-row items-center">
+                <view class="avatar-container mr-8">
+                  <image
+                    class="student-avatar"
+                    :src="imagUrl(student.xstx) || '/static/images/default-avatar.png'"
+                    mode="aspectFill"
+                  ></image>
+                </view>
+                <view class="flex-1 overflow-hidden">
+                  <view class="student-name mb-8">
+                    <text class="font-14 cor-333">{{ student.xm }}</text>
+                  </view>
+                  <view class="flex-row">
+                    <!-- 已缴费学生可以切换状态 -->
+                    <view
+                      class="status-tag clickable"
+                      :class="getStatusClass(student.jcZt)"
+                      @click="dkZtXz(student, 'paid')"
+                    >
+                      {{ hqZtWz(student.jcZt) }}
+                      <text class="status-arrow">▼</text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 未缴费/未报名学生列表 -->
+        <view v-if="wjfXs.length > 0" class="student-section">
+          <view class="section-subtitle">未缴费/未报名学生 ({{ wjfXs.length }}人)</view>
+          <view class="student-grid">
+            <view
+              v-for="student in wjfXs"
+              :key="student.id"
+              class="student-item bg-white r-md p-12"
+            >
+              <view class="flex-row items-center">
+                <view class="avatar-container mr-8">
+                  <image
+                    class="student-avatar"
+                    :src="imagUrl(student.xstx) || '/static/images/default-avatar.png'"
+                    mode="aspectFill"
+                  ></image>
+                </view>
+                <view class="flex-1 overflow-hidden">
+                  <view class="student-name mb-8">
+                    <text class="font-12 cor-333">{{ student.xm }}</text>
+                  </view>
+                  <view class="flex-row">
+                    <!-- 未缴费/未报名学生只显示状态，不能切换 -->
+                    <view
+                      class="status-tag readonly"
+                      :class="getStatusClass(student.jcZt)"
+                    >
+                      {{ hqZtWz(student.jcZt) }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="xsLb.length === 0" class="empty-tip">
+          暂无学生数据
+        </view>
+      </view>
+    </view>
+
+    <!-- 状态选择弹窗 -->
+    <u-picker
+      :defaultIndex="mqXz" 
+      :show="ztXzK"
+      :columns="[dqZtXz]"
+      @confirm="qrXzZt"
+      @cancel="ztXzK = false"
+    ></u-picker>
+
+    <!-- 教师状态选择弹窗 -->
+    <u-picker
+      :defaultIndex="jsMqXz" 
+      :show="jsZtXzK"
+      :columns="[jsZtXz]"
+      @confirm="qrJsZtXz"
+      @cancel="jsZtXzK = false"
+    ></u-picker>
+
+    <!-- 加载提示 -->
+    <view v-if="jzZt" class="loading-overlay">
+      <view class="loading-content">
+        <text>加载中...</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 提交按钮 - 固定在底部 -->
+  <view class="fixed-bottom" v-if="curBj">
+    <button 
+      class="submit-btn" 
+      :disabled="!kTj"
+      @click="tjDm"
+    >
+      提交点名
+    </button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import NjBjPicker from '@/pages/components/NjBjPicker/index.vue'
+import JsPicker from '@/pages/components/JsPicker/index.vue'
+import { getClassStudentDmDataApi, submitJcDmDataApi } from '@/api/base/jcApi'
+import { imagUrl } from "@/utils";
+import { useUserStore } from '@/store/modules/user'
+const { getJs } = useUserStore()
+
+/**
+ * 就餐点名组件
+ * 功能：
+ * 1. 选择班级，获取学生列表
+ * 2. 将学生分为两类：已缴费（可切换正常/请假/缺勤）和未缴费/未报名（状态为未缴费/未报名）
+ * 3. 选择陪餐教师
+ * 4. 批量提交点名记录，包含jsId和dmPcId字段
+ */
+
+// 接收外部传入属性
+const props = withDefaults(defineProps<{
+  title?: string
+}>(), {
+  title: '点名'
+});
+
+// 响应式数据
+const curNj = ref<any>(null);
+const curBj = ref<any>(null);
+
+const xsLb = ref<any[]>([]) // 学生列表
+const xzJs = ref<any[]>([]) // 选择的教师
+const jzZt = ref(false) // 加载状态
+
+// 状态选择相关
+const ztXzK = ref(false) // 状态选择可见
+const yjfZtXz = ref<Array<{ text: string, value: string }>>([
+  { text: '正常', value: 'A' },
+  { text: '请假', value: 'B' },
+  { text: '缺勤', value: 'C' }
+])
+const wjfZtXz = ref<Array<{ text: string, value: string }>>([
+  { text: '未缴费', value: 'D' },
+  { text: '未报名', value: 'E' }
+])
+const dqZtXz = ref<Array<{ text: string, value: string }>>([])
+const dqXs = ref<any>(null) // 当前学生
+const mqXz = ref<any>([0]) // 默认选择
+
+// 教师陪餐状态选择相关
+const jsZtXz = ref<Array<{ text: string, value: string }>>([
+  { text: '正常陪餐', value: 'A' },
+  { text: '请假', value: 'B' },
+  { text: '缺勤', value: 'C' }
+])
+const dqJs = ref<any>(null) // 当前教师
+const jsZtXzK = ref(false) // 教师状态选择可见
+const jsMqXz = ref<any>([0]) // 教师状态默认选择
+
+// 计算属性
+const kTj = computed(() => {
+  return curBj.value && yjfXs.value.length > 0 // 改为检查已缴费学生数量
+})
+
+// 已缴费学生列表（有就餐清单且jfZt为B）
+const yjfXs = computed(() => {
+  return xsLb.value.filter(student => student.studentType === 'paid')
+})
+
+// 未缴费/未报名学生列表
+const wjfXs = computed(() => {
+  return xsLb.value.filter(student => student.studentType === 'unpaid')
+})
+
+// 方法
+// 改变了年级班级
+const changeNjBj = async (nj: any, bj: any) => { 
+  curNj.value = nj
+  curBj.value = bj
+  await jzXsLb()
+};
+
+const jsXz = (teachers: any[]) => {
+  xzJs.value = teachers.map(teacher => ({
+    ...teacher,
+    pcZt: 'A' // 默认正常陪餐状态
+  }))
+}
+
+const scJs = (teacherId: string) => {
+  xzJs.value = xzJs.value.filter(t => t.id !== teacherId)
+}
+
+// 获取教师状态文字
+const hqJsZtWz = (status: string) => {
+  switch (status) {
+    case 'A':
+      return '正常陪餐'
+    case 'B':
+      return '请假'
+    case 'C':
+      return '缺勤'
+    default:
+      return '正常陪餐'
+  }
+}
+
+// 获取教师状态对应的样式类
+const getTeacherStatusClass = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'status-normal'
+    case 'B':
+      return 'status-leave'
+    case 'C':
+      return 'status-absent'
+    default:
+      return 'status-normal'
+  }
+}
+
+// 打开教师状态选择器
+const dkJsZtXz = (teacher: any) => {
+  dqJs.value = teacher
+  
+  // 找到当前状态在选项中的索引
+  const currentIndex = jsZtXz.value.findIndex(option => option.value === teacher.pcZt)
+  jsMqXz.value = [currentIndex >= 0 ? currentIndex : 0]
+  jsZtXzK.value = true
+}
+
+// 确认选择教师状态
+const qrJsZtXz = (e: any) => {
+  if (dqJs.value && e.value && e.value[0]) {
+    const selectedStatus = jsZtXz.value.find(
+      (option: any) => option.value === e.value[0].value
+    )
+
+    if (selectedStatus) {
+      // 更新当前教师状态
+      dqJs.value.pcZt = selectedStatus.value
+    }
+  }
+  jsZtXzK.value = false
+}
+
+// 刷新教师列表
+const sxJsLb = () => {
+  // 这里可以添加刷新教师状态的逻辑
+  console.log('刷新教师列表')
+}
+
+const jzXsLb = async () => {
+  if (!curBj.value) return
+  
+  jzZt.value = true
+  try {
+    // 使用新的API接口获取班级学生点名数据
+    const response = await getClassStudentDmDataApi(
+      curBj.value.key,
+      curNj.value.key 
+    )
+    
+    if (response.result) {
+      // 合并已缴费和未缴费学生列表
+      const paidStudents = response.result.paidStudents || []
+      const unpaidStudents = response.result.unpaidStudents || []
+      
+      // 为每个学生设置默认就餐状态
+      const allStudents = [
+        ...paidStudents.map((student: any) => ({
+          ...student,
+          jcZt: 'A', // 已缴费学生默认正常状态
+          studentType: 'paid'
+        })),
+        ...unpaidStudents.map((student: any) => ({
+          ...student,
+          jcZt: student.hasJcQd ? 'D' : 'E', // 未缴费或未报名
+          studentType: 'unpaid'
+        }))
+      ]
+      
+      xsLb.value = allStudents
+    } else {
+      xsLb.value = []
+    }
+  } catch (error) {
+    console.error('加载学生列表失败:', error)
+    uni.showToast({
+      title: '加载学生列表失败',
+      icon: 'none'
+    })
+  } finally {
+    jzZt.value = false
+  }
+}
+
+const sxXsLb = () => {
+  jzXsLb()
+}
+
+const hqXsZtLx = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'zt-zc'
+    case 'B':
+      return 'zt-qj'
+    case 'C':
+      return 'zt-qq'
+    case 'D':
+      return 'zt-wjf'
+    case 'E':
+      return 'zt-wbm'
+    default:
+      return 'zt-zc'
+  }
+}
+
+const hqZtWz = (status: string) => {
+  switch (status) {
+    case 'A':
+      return '正常'
+    case 'B':
+      return '请假'
+    case 'C':
+      return '缺勤'
+    case 'D':
+      return '未缴费'
+    case 'E':
+      return '未报名'
+    default:
+      return '正常'
+  }
+}
+
+const hqZtSl = (status: string) => {
+  return xsLb.value.filter(s => s.jcZt === status).length
+}
+
+// 获取学生类型文本
+const hqXsLxWz = (student: any) => {
+  if (student.studentType === 'paid') {
+    return '已缴费'
+  } else if (student.jcZt === 'E') {
+    return '未报名'
+  } else {
+    return '未缴费'
+  }
+}
+
+// 获取状态对应的样式类
+const getStatusClass = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'status-normal'
+    case 'B':
+      return 'status-leave'
+    case 'C':
+      return 'status-absent'
+    case 'D':
+      return 'status-unpaid'
+    case 'E':
+      return 'status-unregistered'
+    default:
+      return 'status-normal'
+  }
+}
+
+// 获取学生类型对应的样式类
+const getTypeClass = (studentType: string) => {
+  switch (studentType) {
+    case 'paid':
+      return 'cor-success'
+    case 'unpaid':
+      return 'cor-warning'
+    default:
+      return 'cor-666'
+  }
+}
+
+// 打开状态选择器
+const dkZtXz = (student: any, type: 'paid' | 'unpaid') => {
+  dqXs.value = student
+  
+  // 根据学生类型设置对应的状态选项
+  if (type === 'paid') {
+    dqZtXz.value = yjfZtXz.value
+  } else {
+    dqZtXz.value = wjfZtXz.value
+  }
+  
+  // 找到当前状态在选项中的索引
+  const currentIndex = dqZtXz.value.findIndex(option => option.value === student.jcZt)
+  mqXz.value = [currentIndex >= 0 ? currentIndex : 0]
+  ztXzK.value = true
+}
+
+// 确认选择状态
+const qrXzZt = (e: any) => {
+  if (dqXs.value && e.value && e.value[0]) {
+    const selectedStatus = dqZtXz.value.find(
+      (option: any) => option.value === e.value[0].value
+    )
+
+    if (selectedStatus) {
+      // 更新当前学生状态
+      dqXs.value.jcZt = selectedStatus.value
+    }
+  }
+  ztXzK.value = false
+}
+
+const tjDm = async () => {
+  if (!curBj.value || yjfXs.value.length === 0) { // 改为检查已缴费学生数量
+    uni.showToast({
+      title: '请先选择班级或有已缴费学生',
+      icon: 'none'
+    })
+    return
+  }
+
+  jzZt.value = true
+  try {
+    // 准备点名数据
+    const dmData: any = {
+      bjId: curBj.value.key,
+      njId: curNj.value.key,
+      bjmc: curBj.value.title,
+      njmc: curNj.value.title,
+      dmJsId: getJs.id || '', // 点名教师ID
+      dmTime: new Date(),
+      xsList: yjfXs.value.map(student => ({
+        xsId: student.id,
+        xsXm: student.xm, // 传入学生姓名
+        jcZt: student.jcZt || 'A',
+        jcQdId: student.jcQdInfo?.qdId,
+        jcBzId: student.jcQdInfo?.bzId,
+        jzId: student.jcQdInfo?.jzId,
+        tx: student.xstx // 传入学生头像
+      })),
+      ptJsList: xzJs.value.map(teacher => ({
+        jsId: teacher.value,
+        jsXm: teacher.label,
+        pcZt: teacher.pcZt || 'A', // 添加陪餐状态
+        tx: teacher.headPic // 传入教师头像
+      }))
+    }
+
+    // 提交点名数据
+    const response = await submitJcDmDataApi(dmData)
+    
+    if (response.result) {
+      uni.showToast({
+        title: '提交成功',
+        icon: 'success'
+      })
+      
+      // 重置表单
+      curNj.value = null
+      curBj.value = null
+      xsLb.value = []
+      xzJs.value = []
+
+      // 返回上一页
+      uni.navigateBack()
+    } else {
+      throw new Error(response.message || '提交失败')
+    }
+
+  } catch (error) {
+    console.error('提交失败:', error)
+    uni.showToast({
+      title: error instanceof Error ? error.message : '提交失败',
+      icon: 'none'
+    })
+  } finally {
+    jzZt.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.start-dm-content {
+  padding: 20rpx;
+  padding-bottom: 120rpx; /* 为固定底部按钮留出空间 */
+}
+
+.section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-subtitle {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #666;
+  margin: 20rpx 0 15rpx 0;
+  padding: 10rpx 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.refresh-btn {
+  font-size: 24rpx;
+  color: #007aff;
+  font-weight: normal;
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30rpx;
+  padding: 20rpx;
+  background-color: #f8f9fa;
+  border-radius: 12rpx;
+  flex-wrap: wrap;
+  gap: 60rpx;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 120rpx;
+}
+
+.stat-number {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+  
+  &.normal {
+    color: #52c41a;
+  }
+  
+  &.leave {
+    color: #faad14;
+  }
+  
+  &.absent {
+    color: #ff4d4f;
+  }
+  
+  &.unpaid {
+    color: #722ed1;
+  }
+  
+  &.unregistered {
+    color: #eb2f96;
+  }
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.student-section {
+  margin-bottom: 30rpx;
+}
+
+.student-list {
+  margin-bottom: 30rpx;
+}
+
+.student-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+}
+
+.student-item {
+  position: relative;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+}
+
+.student-item:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.avatar-container {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+  padding: 6rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+.student-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+}
+
+.status-tag {
+  font-size: 20rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  
+  &.clickable {
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      opacity: 0.8;
+      transform: scale(1.05);
+    }
+  }
+  
+  &.readonly {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
+  
+  .status-arrow {
+    font-size: 16rpx;
+    opacity: 0.8;
+  }
+}
+
+.status-normal {
+  background-color: #e6f7ff;
+  color: #52c41a;
+}
+
+.status-leave {
+  background-color: #fff7e6;
+  color: #faad14;
+}
+
+.status-absent {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+.status-unpaid {
+  background-color: #f9f0ff;
+  color: #722ed1;
+}
+
+.status-unregistered {
+  background-color: #fff0f6;
+  color: #eb2f96;
+}
+
+.student-type {
+  padding: 6rpx 16rpx;
+  border-radius: 8rpx;
+  display: inline-block;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120rpx;
+}
+
+.cor-success {
+  color: #52c41a;
+}
+
+.cor-warning {
+  color: #faad14;
+}
+
+.cor-666 {
+  color: #666;
+}
+
+.cor-333 {
+  color: #333;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.mr-8 {
+  margin-right: 16rpx;
+}
+
+.mb-3 {
+  margin-bottom: 6rpx;
+}
+
+.mt-8 {
+  margin-top: 16rpx;
+}
+
+.font-14 {
+  font-size: 28rpx;
+}
+
+.font-12 {
+  font-size: 24rpx;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.r-md {
+  border-radius: 16rpx;
+}
+
+.p-12 {
+  padding: 24rpx;
+}
+
+.selected-teachers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  margin-top: 20rpx;
+}
+
+.teacher-tag {
+  display: flex;
+  align-items: center;
+  background-color: #e6f7ff;
+  color: #007aff;
+  padding: 12rpx 20rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+}
+
+.remove-btn {
+  margin-left: 12rpx;
+  font-size: 28rpx;
+  color: #ff4d4f;
+  cursor: pointer;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 40rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  
+  &:disabled {
+    background-color: #d9d9d9;
+    color: #999;
+  }
+}
+
+.empty-tip {
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  padding: 60rpx 0;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loading-content {
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 16rpx;
+  color: #333;
+  font-size: 28rpx;
+}
+
+.class-tip {
+  display: flex;
+  align-items: center;
+  margin-top: 20rpx;
+  padding: 15rpx 20rpx;
+  background-color: #fffbe6;
+  border: 1rpx solid #ffe58f;
+  border-radius: 12rpx;
+  color: #faad14;
+  font-size: 28rpx;
+  font-weight: bold;
+
+  .tip-icon {
+    margin-right: 10rpx;
+    font-size: 32rpx;
+  }
+}
+
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20rpx;
+  background-color: #fff;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.teacher-list {
+  margin-bottom: 30rpx;
+}
+
+.teacher-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+}
+
+.teacher-item {
+  position: relative;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+}
+
+.teacher-item:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.teacher-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+}
+
+.teacher-name {
+  margin-bottom: 16rpx;
+}
+</style>
diff --git a/src/pages/view/routine/jc/components/dmList.vue b/src/pages/view/routine/jc/components/dmList.vue
new file mode 100644
index 0000000..b1cd31f
--- /dev/null
+++ b/src/pages/view/routine/jc/components/dmList.vue
@@ -0,0 +1,491 @@
+<template>
+  <view class="record-content">
+    <!-- 搜索筛选区域 -->
+    <view class="search-section">
+      <view class="search-row">
+        <view class="search-item">
+          <text class="label">班级：</text>
+          <view class="flex-1">
+            <NjBjPicker @change="changeNjBj" icon-arrow="right" 
+              :customStyle="{ borderRadius: '0', padding: '0.5rem 0.625rem' }" />
+          </view>
+        </view>
+      </view>
+      <view class="search-row">
+        <view class="search-item">
+          <text class="label">时间范围：</text>
+          <uni-datetime-picker
+            type="daterange"
+            :value="[startTime, endTime]"
+            @change="onTimeRangeChange"
+            class="date-picker"
+          >
+            <view class="picker-text">{{ getTimeRangeText() }}</view>
+          </uni-datetime-picker>
+        </view>
+      </view>
+      <view class="search-row">
+        <button class="search-btn" @click="searchRecords">搜索</button>
+        <button class="reset-btn" @click="resetSearch">重置</button>
+      </view>
+    </view>
+
+    <!-- 使用 BasicListLayout 包裹记录列表 -->
+    <BasicListLayout @register="register" :fixed="false">
+      <template #top>
+        <view class="records-header" v-if="dmRecords.length > 0">
+          <view class="section-title">
+            点名记录 ({{ totalCount }}条)
+            <text class="export-btn" @click="exportRecords">导出</text>
+          </view>
+        </view>
+      </template>
+      
+      <template #default="{ data }">
+        <view 
+          class="record-card"
+          @click="goToDetail(data)"
+        >
+          <view class="card-header">
+            <view class="time-info">
+              <text class="record-date">{{ formatDate(data.dmTime) }}</text>
+              <text class="record-time">{{ formatTime(data.dmTime) }}</text>
+            </view>
+            <view class="status-badge">
+              <text class="status-text">已点名</text>
+            </view>
+          </view>
+          
+          <view class="card-content">
+            <view class="class-info">
+              <text class="class-name">{{ data.njmc }} {{ data.bjmc }}</text>
+            </view>
+            
+            <view class="stats-row">
+              <view class="stat-item">
+                <text class="stat-label">学生</text>
+                <text class="stat-value">{{ data.xsCount }}人</text>
+              </view>
+              <view class="stat-item">
+                <text class="stat-label">陪餐教师</text>
+                <text class="stat-value">{{ data.jsCount }}人</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="card-footer">
+            <text class="view-detail">点击查看详情 →</text>
+          </view>
+        </view>
+      </template>
+    </BasicListLayout>
+
+    <!-- 空状态 -->
+    <view v-if="!loading && dmRecords.length === 0 && hasSearched" class="empty-state">
+      <view class="empty-icon">📋</view>
+      <text class="empty-text">暂无点名记录</text>
+      <text class="empty-tip">请选择班级和时间范围进行搜索</text>
+    </view>
+
+    <!-- 初始提示 -->
+    <view v-if="!hasSearched" class="initial-tip">
+      <view class="tip-icon">🔍</view>
+      <text class="tip-text">请选择班级和时间范围开始搜索</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useLayout } from "@/components/BasicListLayout/hooks/useLayout"
+import NjBjPicker from '@/pages/components/NjBjPicker/index.vue'
+import { getJcDmPageApi } from '@/api/base/jcApi'
+import { useDataStore } from '@/store/modules/data'
+
+const { setData } = useDataStore()
+
+// 接收外部传入属性
+const props = withDefaults(defineProps<{
+  title?: string
+}>(), {
+  title: '点名列表'
+});
+
+// 响应式数据
+const loading = ref(false)
+const startTime = ref('')
+const endTime = ref('')
+const selectedClass = ref<any>(null)
+const dmRecords = ref<any[]>([])
+const totalCount = ref(0)
+const hasSearched = ref(false)
+
+// 使用 BasicListLayout
+const [register, { reload, setParam }] = useLayout({
+  api: getJcDmPageApi,
+  componentProps: {
+    auto: false
+  }
+})
+
+// 改变了年级班级
+const changeNjBj = async (nj: any, bj: any) => { 
+  selectedClass.value = {
+    njId: nj.key,
+    bjId: bj.key,
+  }
+};
+
+const onTimeRangeChange = (e: any) => {
+  // uni-datetime-picker 返回的是一个数组，包含开始和结束时间
+  if (e && Array.isArray(e)) {
+    const [start, end] = e
+    startTime.value = start
+    endTime.value = end
+  } else if (e && typeof e === 'string') {
+    // 如果返回的是字符串，可能是单个时间
+    startTime.value = e
+    endTime.value = e
+  }
+}
+
+const getTimeRangeText = () => {
+  if (!startTime.value || !endTime.value) return '选择时间范围'
+  if (startTime.value === endTime.value) {
+    return formatDate(startTime.value)
+  }
+  return `${formatDate(startTime.value)} - ${formatDate(endTime.value)}`
+}
+
+const searchRecords = async () => {
+  if (!selectedClass.value || !startTime.value || !endTime.value) {
+    uni.showToast({
+      title: '请选择班级和时间范围',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 验证开始时间不能大于结束时间
+  if (startTime.value > endTime.value) {
+    uni.showToast({
+      title: '开始时间不能大于结束时间',
+      icon: 'none'
+    })
+    return
+  }
+  
+  hasSearched.value = true
+  
+  // 设置搜索参数并重新加载
+  setParam({
+    njId: selectedClass.value.njId,
+    bjId: selectedClass.value.bjId,
+    startTime: startTime.value,
+    endTime: endTime.value,
+    pageNo: 1
+  });
+  reload()
+}
+
+const resetSearch = () => {
+  selectedClass.value = null
+  startTime.value = ''
+  endTime.value = ''
+  dmRecords.value = []
+  totalCount.value = 0
+  hasSearched.value = false
+}
+
+const goToDetail = (dm: any) => {
+  setData(dm)
+  uni.navigateTo({
+    url: '/pages/view/routine/jc/detail'
+  })
+}
+
+const exportRecords = () => {
+  if (dmRecords.value.length === 0) {
+    uni.showToast({
+      title: '暂无数据可导出',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 实现导出逻辑
+  uni.showToast({
+    title: '导出功能开发中',
+    icon: 'none'
+  })
+}
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+const formatTime = (timeStr: string) => {
+  if (!timeStr) return ''
+  const date = new Date(timeStr)
+  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+// 生命周期
+onMounted(() => {
+  // 设置默认时间范围为最近一周
+  const today = new Date()
+  const oneWeekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+  
+  startTime.value = oneWeekAgo.toISOString().split('T')[0]
+  endTime.value = today.toISOString().split('T')[0]
+  // 不自动加载数据，等待用户搜索
+})
+</script>
+
+<style lang="scss" scoped>
+.record-content {
+  padding: 20rpx;
+}
+
+.search-section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.search-row {
+  display: flex;
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.search-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  font-size: 28rpx;
+  color: #333;
+  white-space: nowrap;
+  flex: 0 0 160rpx;
+}
+
+.date-picker {
+  flex: 1;
+}
+
+.picker-text {
+  padding: 16rpx 20rpx;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  color: #333;
+  border: 1px solid #e5e5e5;
+}
+
+.search-btn, .reset-btn {
+  flex: 1;
+  height: 70rpx;
+  border-radius: 35rpx;
+  font-size: 28rpx;
+  border: none;
+}
+
+.search-btn {
+  background-color: #007aff;
+  color: #fff;
+}
+
+.reset-btn {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.records-header {
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.export-btn {
+  font-size: 24rpx;
+  color: #007aff;
+  font-weight: normal;
+}
+
+.record-card {
+  border: 1px solid #f0f0f0;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.time-info {
+  display: flex;
+  align-items: baseline;
+  gap: 16rpx;
+}
+
+.record-date {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.record-time {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.status-badge {
+  padding: 8rpx 16rpx;
+  background-color: #e0f7fa;
+  border-radius: 20rpx;
+  border: 1px solid #b2ebf2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-text {
+  font-size: 24rpx;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.card-content {
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.class-info {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+}
+
+.class-name {
+  color: #1890ff;
+}
+
+.stats-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  flex: 1;
+  justify-content: center;
+  padding: 12rpx;
+  background-color: #f8f9fa;
+  border-radius: 8rpx;
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.stat-value {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.card-footer {
+  text-align: right;
+  padding-top: 16rpx;
+}
+
+.view-detail {
+  font-size: 26rpx;
+  color: #007aff;
+  font-weight: normal;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 100rpx 0;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.empty-text {
+  display: block;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.empty-tip {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.initial-tip {
+  text-align: center;
+  padding: 50rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.tip-icon {
+  font-size: 60rpx;
+  margin-bottom: 20rpx;
+}
+
+.tip-text {
+  display: block;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+</style>
diff --git a/src/pages/view/routine/jc/detail.vue b/src/pages/view/routine/jc/detail.vue
new file mode 100644
index 0000000..85f808b
--- /dev/null
+++ b/src/pages/view/routine/jc/detail.vue
@@ -0,0 +1,508 @@
+<template>
+  <view class="dm-detail-content">
+    <!-- 加载状态 -->
+    <view v-if="loading" class="loading-state">
+      <view class="loading-icon">⏳</view>
+      <text class="loading-text">加载中...</text>
+    </view>
+
+    <!-- 详情内容 -->
+    <view v-else-if="dmDetail" class="detail-content">
+      <!-- 基本信息 -->
+      <view class="section">
+        <view class="section-title">点名基本信息</view>
+        <view class="info-grid">
+          <view class="info-item">
+            <text class="info-label">班级：</text>
+            <text class="info-value">{{ dmDetail.bjmc }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">年级：</text>
+            <text class="info-value">{{ dmDetail.njmc }}</text>
+          </view>
+          <view class="info-item">
+            <text class="info-label">点名时间：</text>
+            <text class="info-value">{{ formatDateTime(dmDetail.dmTime) }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 陪餐教师列表 -->
+      <view class="section" v-if="dmDetail.jsList && dmDetail.jsList.length > 0">
+        <view class="section-title">
+          陪餐教师 ({{ dmDetail.jsList.length }}人)
+        </view>
+        
+        <view class="teacher-list">
+          <view class="teacher-grid">
+            <view
+              v-for="teacher in dmDetail.jsList"
+              :key="teacher.id"
+              class="teacher-item bg-white r-md p-12"
+            >
+              <view class="flex-row items-center">
+                <view class="avatar-container mr-8">
+                  <image
+                    class="teacher-avatar"
+                    :src="teacher.tx || '/static/images/default-avatar.png'"
+                    mode="aspectFill"
+                  ></image>
+                </view>
+                <view class="flex-1 overflow-hidden">
+                  <view class="teacher-name mb-8">
+                    <text class="font-14 cor-333">{{ teacher.jsXm }}</text>
+                  </view>
+                  <view class="flex-row">
+                    <view
+                      class="status-tag"
+                      :class="getTeacherStatusClass(teacher.pcZt)"
+                    >
+                      {{ getTeacherStatusText(teacher.pcZt) }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 学生状态列表 -->
+      <view class="section" v-if="dmDetail.xsList && dmDetail.xsList.length > 0">
+        <view class="section-title">
+          学生状态列表 ({{ dmDetail.xsList.length }}人)
+        </view>
+        
+        <!-- 统计信息 -->
+        <view class="stats-container">
+          <view class="stat-item">
+            <text class="stat-number">{{ dmDetail.xsList.length }}</text>
+            <text class="stat-label">总人数</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number normal">{{ getStatusCount('A') }}</text>
+            <text class="stat-label">正常</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number leave">{{ getStatusCount('B') }}</text>
+            <text class="stat-label">请假</text>
+          </view>
+          <view class="stat-item">
+            <text class="stat-number absent">{{ getStatusCount('C') }}</text>
+            <text class="stat-label">缺勤</text>
+          </view>
+        </view>
+
+        <!-- 学生列表 -->
+        <view class="student-list">
+          <view class="student-grid">
+            <view
+              v-for="student in dmDetail.xsList"
+              :key="student.id"
+              class="student-item bg-white r-md p-12"
+            >
+              <view class="flex-row items-center">
+                <view class="avatar-container mr-8">
+                  <image
+                    class="student-avatar"
+                    :src="student.tx || '/static/images/default-avatar.png'"
+                    mode="aspectFill"
+                  ></image>
+                </view>
+                <view class="flex-1 overflow-hidden">
+                  <view class="student-name mb-8">
+                    <text class="font-14 cor-333">{{ student.xsXm }}</text>
+                  </view>
+                  <view class="flex-row">
+                    <view
+                      class="status-tag"
+                      :class="getStatusClass(student.jcZt)"
+                    >
+                      {{ getStatusText(student.jcZt) }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view v-if="!dmDetail.xsList || dmDetail.xsList.length === 0" class="empty-tip">
+        暂无学生数据
+      </view>
+    </view>
+
+    <!-- 错误状态 -->
+    <view v-else-if="error" class="error-state">
+      <view class="error-icon">❌</view>
+      <text class="error-text">{{ error }}</text>
+      <button class="retry-btn" @click="loadDetail">重试</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { getJcDmDetailApi } from '@/api/base/jcApi'
+import { useDataStore } from '@/store/modules/data'
+const { getData } = useDataStore()
+
+// 响应式数据
+const loading = ref(false)
+const dmDetail = ref<any>(null)
+const error = ref('')
+
+// 方法
+const loadDetail = async () => {
+  if (!getData.id) return
+  
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const response = await getJcDmDetailApi(getData.id)
+    
+    if (response.result) {
+      dmDetail.value = response.result
+    } else {
+      error.value = response.message || '获取详情失败'
+    }
+  } catch (err: any) {
+    console.error('加载详情失败:', err)
+    error.value = err.message || '加载详情失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+const formatDateTime = (dateStr: string) => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  
+  return `${year}-${month}-${day} ${hours}:${minutes}`
+}
+
+const getStatusCount = (status: string) => {
+  if (!dmDetail.value?.xsList) return 0
+  return dmDetail.value.xsList.filter((s: any) => s.jcZt === status).length
+}
+
+const getStatusText = (status: string) => {
+  switch (status) {
+    case 'A':
+      return '正常'
+    case 'B':
+      return '请假'
+    case 'C':
+      return '缺勤'
+    case 'D':
+      return '未缴费'
+    case 'E':
+      return '未报名'
+    default:
+      return '正常'
+  }
+}
+
+const getStatusClass = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'status-normal'
+    case 'B':
+      return 'status-leave'
+    case 'C':
+      return 'status-absent'
+    case 'D':
+      return 'status-unpaid'
+    case 'E':
+      return 'status-unregistered'
+    default:
+      return 'status-normal'
+  }
+}
+
+const getTeacherStatusText = (status: string) => {
+  switch (status) {
+    case 'A':
+      return '正常陪餐'
+    case 'B':
+      return '请假'
+    case 'C':
+      return '缺勤'
+    default:
+      return '正常陪餐'
+  }
+}
+
+const getTeacherStatusClass = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'status-normal'
+    case 'B':
+      return 'status-leave'
+    case 'C':
+      return 'status-absent'
+    default:
+      return 'status-normal'
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  loadDetail();
+})
+</script>
+
+<style lang="scss" scoped>
+.dm-detail-content {
+  padding: 20rpx;
+}
+
+.loading-state, .error-state {
+  text-align: center;
+  padding: 100rpx 0;
+}
+
+.loading-icon, .error-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.loading-text, .error-text {
+  display: block;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.error-text {
+  color: #ff4d4f;
+}
+
+.retry-btn {
+  margin-top: 20rpx;
+  padding: 16rpx 32rpx;
+  background-color: #007aff;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16rpx;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  padding: 16rpx;
+  background-color: #f8f9fa;
+  border-radius: 8rpx;
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #666;
+  width: 120rpx;
+  flex-shrink: 0;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30rpx;
+  padding: 20rpx;
+  background-color: #f8f9fa;
+  border-radius: 12rpx;
+  flex-wrap: wrap;
+  gap: 60rpx;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 120rpx;
+}
+
+.stat-number {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+  
+  &.normal {
+    color: #52c41a;
+  }
+  
+  &.leave {
+    color: #faad14;
+  }
+  
+  &.absent {
+    color: #ff4d4f;
+  }
+}
+
+.stat-label {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.teacher-list, .student-list {
+  margin-bottom: 30rpx;
+}
+
+.teacher-grid, .student-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+}
+
+.teacher-item, .student-item {
+  position: relative;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.2s;
+}
+
+.teacher-item:hover, .student-item:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.avatar-container {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 50%;
+  padding: 6rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
+}
+
+.teacher-avatar, .student-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+}
+
+.status-tag {
+  font-size: 20rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 8rpx;
+  display: inline-block;
+}
+
+.status-normal {
+  background-color: #e6f7ff;
+  color: #52c41a;
+}
+
+.status-leave {
+  background-color: #fff7e6;
+  color: #faad14;
+}
+
+.status-absent {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+.status-unpaid {
+  background-color: #f9f0ff;
+  color: #722ed1;
+}
+
+.status-unregistered {
+  background-color: #fff0f6;
+  color: #eb2f96;
+}
+
+.empty-tip {
+  text-align: center;
+  color: #999;
+  font-size: 28rpx;
+  padding: 60rpx 0;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.mr-8 {
+  margin-right: 16rpx;
+}
+
+.mb-8 {
+  margin-bottom: 16rpx;
+}
+
+.font-14 {
+  font-size: 28rpx;
+}
+
+.cor-333 {
+  color: #333;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.r-md {
+  border-radius: 16rpx;
+}
+
+.p-12 {
+  padding: 24rpx;
+}
+</style>
+
diff --git a/src/pages/view/routine/jc/index.vue b/src/pages/view/routine/jc/index.vue
new file mode 100644
index 0000000..434c47e
--- /dev/null
+++ b/src/pages/view/routine/jc/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <view class="dm-container">
+    <!-- 顶部Tab -->
+    <view class="tab-container">
+      <view 
+        class="tab-item" 
+        :class="{ active: activeTab === 'start' }"
+        @click="switchTab('start')"
+      >
+        开始点名
+      </view>
+      <view 
+        class="tab-item" 
+        :class="{ active: activeTab === 'record' }"
+        @click="switchTab('record')"
+      >
+        点名记录
+      </view>
+    </view>
+
+    <!-- 开始点名内容 -->
+    <DmComponent v-if="activeTab === 'start'" />
+
+    <!-- 点名记录内容 -->
+    <DmListComponent v-if="activeTab === 'record'" />
+
+    <!-- 加载提示 -->
+    <view v-if="loading" class="loading-overlay">
+      <view class="loading-content">
+        <text>加载中...</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DmComponent from './components/dm.vue'
+import DmListComponent from './components/dmList.vue'
+
+// 响应式数据
+const activeTab = ref('record')
+const loading = ref(false)
+
+// 方法
+const switchTab = (tab: string) => {
+  activeTab.value = tab
+}
+
+</script>
+
+<style lang="scss" scoped>
+.dm-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.tab-container {
+  display: flex;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+  position: relative;
+  
+  &.active {
+    color: #007aff;
+    font-weight: bold;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60rpx;
+      height: 4rpx;
+      background-color: #007aff;
+      border-radius: 2rpx;
+    }
+  }
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.loading-content {
+  background-color: #fff;
+  padding: 40rpx;
+  border-radius: 16rpx;
+  color: #333;
+  font-size: 28rpx;
+}
+</style>