diff --git a/src/api/base/server.ts b/src/api/base/server.ts
index 3bc5938..a7a2a5a 100644
--- a/src/api/base/server.ts
+++ b/src/api/base/server.ts
@@ -103,3 +103,24 @@ export const jlzxFindByJlParamsApi = async (params: { jlId: string }) => {
 export const xxtsSaveByJlzxParamsApi = async (params: { jlId: string }) => {
   return await post("/api/xxts/saveByJlzxParams", params);
 };
+
+// 获取待办列表
+export const dbListApi = async (params: any) => {
+    return await get("/api/db/findPage", params);
+};
+
+// 处理待办
+export const dbBlApi = async (params: any) => {
+    return await post("/api/db/bl", params);
+};
+
+// 查询学生请假信息
+export const xsQjFindByIdApi = async (params: any) => {
+    return await get("/api/xsQj/findById", params);
+};
+
+// 学生请假审批
+export const xsQjSpApi = async (params: any) => {
+    return await post("/api/xsQj/sp", params);
+};
+
diff --git a/src/api/system/login/index.ts b/src/api/system/login/index.ts
index 7a0ed69..49ee218 100644
--- a/src/api/system/login/index.ts
+++ b/src/api/system/login/index.ts
@@ -3,9 +3,9 @@ import { get, post } from "@/utils/request";
 
 //密码登录接口
 export const loginPass = async (param: {
-  username: string;
-  password: string;
-  openId: number | string;
+  username?: string;
+  password?: string;
+  openId?: number | string;
 }) => {
   return await post(
     "/userlogin/check?username=" +
@@ -19,9 +19,9 @@ export const loginPass = async (param: {
 };
 //验证码登录接口
 export const loginCode = async (param: {
-  phone: string | number;
-  code: string | number;
-  openId: number | string;
+  phone?: string | number;
+  code?: string | number;
+  openId?: number | string;
 }) => {
   return await post("/open/sms/checkCode", param);
 };
diff --git a/src/pages.json b/src/pages.json
index 60dcde9..d3c7bb7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -430,6 +430,13 @@
         "navigationBarTitleText": "学生点名",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/base/xs/qj/sp",
+      "style": {
+        "navigationBarTitleText": "学生请假审批",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {
diff --git a/src/pages/base/message/index.vue b/src/pages/base/message/index.vue
index f031862..743299d 100644
--- a/src/pages/base/message/index.vue
+++ b/src/pages/base/message/index.vue
@@ -5,15 +5,15 @@
         <view class="tabs-container">
           <view
               class="tab-item"
-              :class="{ active: currentTab === 1 }"
-              @click="changeTab(1)"
+              :class="{ active: currentTab === 'A' }"
+              @click="changeTab('A')"
           >
             待办
           </view>
           <view
               class="tab-item"
-              :class="{ active: currentTab === 0 }"
-              @click="changeTab(0)"
+              :class="{ active: currentTab === 'B' }"
+              @click="changeTab('B')"
           >
             已办
           </view>
@@ -22,20 +22,15 @@
       <template #default="{ data }">
         <view class="white-bg-color r-md p-15 mb-15 flex-row" @click="goToDetail(data)">
           <view class="card-left">
-            <view class="card-title">{{ data.rwmc }}</view>
-            <view class="card-desc" v-html="data.rwms"></view>
+            <view class="card-title">{{ data.dbBt }}</view>
+            <view class="card-desc" v-html="data.dbZy"></view>
             <view class="card-meta">
-              <text>{{ data.fbsj }}</text>
-              <text>{{ data.timeAgo }}</text>
+              <text>{{ data.createdTime }}</text>
+              <text>{{ getTimeAgo(data.createdTime) }}</text>
             </view>
           </view>
-          <view class="card-right">
-            <view class="tag" :class="data.tagType">{{ data.tagText }}</view>
-            <view class="stats">
-              <!-- TODO: 替换为实际图标 -->
-              <text class="icon">❤️ {{ data.likes }}</text>
-              <text class="icon">💬 {{ data.comments }}</text>
-            </view>
+          <view class="card-right" v-if="dbLxMap[data.dbLx]">
+            <view class="tag" :class="dbLxMap[data.dbLx].className">{{ dbLxMap[data.dbLx].label }}</view>
           </view>
         </view>
       </template>
@@ -44,101 +39,77 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, watch, onMounted} from "vue";
+import {ref, onMounted} from "vue";
+import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
+import { dbListApi } from "@/api/base/server";
+import { dicApi } from "@/api/system/dic";
+import { getTimeAgo } from "@/utils/dateUtils";
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+const { setDb } = useDataStore();
+const { getUser } = useUserStore();
 
-import {useLayout} from "@/components/BasicListLayout/hooks/useLayout";
-import {jsdFindPageTaskApi} from "@/api/base/server";
+const dbLxMap = ref<any>({});
 
-// 模拟待办列表数据
-const mockTodoList = [
-  {
-    title: "教务通知 (待办)",
-    desc: "学校召开期初教学准备会议暨首次教学工作例会",
-    date: "2025-02-17",
-    timeAgo: "8 mins 前",
-    tagText: "通知",
-    tagType: "notice",
-    likes: 6,
-    comments: 12,
-  },
-  {
-    title: "教学日志 (待办)",
-    desc: "请于2025年3月15日前上传教学日志",
-    date: "2025-02-17",
-    timeAgo: "8 mins 前",
-    tagText: "任务",
-    tagType: "task",
-    likes: 6,
-    comments: 12,
-  },
-];
-
-const testList = async (param: any): Promise<Requests<any>> => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({message: "测试", resultCode: 1, rows: mockTodoList});
-    }, 1000);
-  });
+// 获取待办类型
+const fetchDbLxMap = async () => {
+  try {
+    // 待办类型
+    const res = await dicApi({pid: 186148807});
+    if (res && res.result) {
+      // 将res.result的list转换成对象，key为dictionaryValue，value为dictionary
+      dbLxMap.value = res.result.reduce((acc: any, item: any) => {
+        acc[item.dictionaryCode] = {
+          value: item.dictionaryCode,
+          label: item.dictionaryValue,
+          className: item.remark
+        };
+        return acc;
+      }, {});
+    }
+  } catch (error) {
+    console.error("获取状态选项失败", error);
+    // 使用默认状态
+    dbLxMap.value = {};
+  }
 };
 
 const [register, {reload, setParam}] = useLayout({
-  api: jsdFindPageTaskApi,
+  api: dbListApi,
   componentProps: {
     auto: false
   },
 });
 
-const currentTab = ref(1); // 0: 待办, 1: 已办
+const currentTab = ref('A'); // 0: 待办, 1: 已办
 
-const fetchListData = async (tabIndex: number) => {
+const fetchListData = async (tabIndex: string) => {
   setParam({
-    type: tabIndex,
-    mobile: getUser.mobile
+    dbZt: tabIndex,
+    userId: getUser.id
   });
   reload();
 };
 
-const changeTab = (tabIndex: number) => {
+const changeTab = (tabIndex: string) => {
   if (currentTab.value !== tabIndex) {
     currentTab.value = tabIndex;
     fetchListData(tabIndex);
   }
 };
-import {useUserStore} from "@/store/modules/user";
 
-const {getUser} = useUserStore()
 // 组件加载完成后，获取初始数据 (待办)
 onMounted(() => {
+  fetchDbLxMap();
   fetchListData(currentTab.value);
 });
 
 const goToDetail = (data: any) => {
-  // if (currentTab.value != 1) {
-  //   return;
-  // }
-  // if(true){
-  //   const encodedTitle = encodeURIComponent("教学日志 (待办)");
-  //   uni.navigateTo({
-  //     url: `/pages/base/message/detail?id=${encodedTitle}`
-  //   });
-  //   return;
-  // }
-  // Ensure data and data.id exist before navigating
   if (data && data.id) {
-    // Encode the ID in case it contains special characters
+    setDb(data);
     uni.navigateTo({
-      url: `/pages/base/message/detail?id=${data.id}`
+      url: data.mobileUrl
     });
-  } else if (data && data.rwmc) {
-    // Fallback: use title if id is missing (less reliable)
-    console.warn("Navigating using title as ID fallback for:", data);
-    const encodedTitle = encodeURIComponent(data.title);
-    uni.navigateTo({
-      url: `/pages/base/message/detail?id=${encodedTitle}`
-    });
-  } else {
-    console.error("Cannot navigate to detail: Missing identifier (id or title) in data:", data);
-    uni.showToast({title: "无法打开详情", icon: "none"});
   }
 };
 </script>
@@ -258,6 +229,7 @@ const goToDetail = (data: any) => {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
+    line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
@@ -265,10 +237,8 @@ const goToDetail = (data: any) => {
   .card-meta {
     font-size: 12px;
     color: #999;
-
-    text {
-      margin-right: 10px;
-    }
+    display: flex;
+    justify-content: space-between;
   }
 }
 
@@ -278,26 +248,29 @@ const goToDetail = (data: any) => {
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0; // 防止被压缩
+  flex: 0 0 75px;
 
   .tag {
-    padding: 5px 10px;
     border-radius: 4px;
     font-size: 13px;
     font-weight: bold;
     color: #ffffff;
-    margin-bottom: 10px;
     white-space: nowrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 1px;
+    width: 100%;
 
-    &.notice {
+    &.db-xs-qj {
       background-color: #447ade;
     }
 
-    &.task {
+    &.db-js-qj {
       background-color: #19be6b;
     }
 
-    // 添加新的标签样式示例
-    &.approval {
+    &.db-task {
       background-color: #ff9f0a; // 橙色
     }
 
diff --git a/src/pages/base/xs/qj/sp.vue b/src/pages/base/xs/qj/sp.vue
new file mode 100644
index 0000000..da94295
--- /dev/null
+++ b/src/pages/base/xs/qj/sp.vue
@@ -0,0 +1,238 @@
+<template>
+  <BasicLayout>
+    <view class="qj-detail">
+      <!-- 请假信息卡片 -->
+      <view class="info-card">
+        <view class="card-header">
+          <text class="applicant-name" v-if="dbFlag">{{ dbData.dbZy }}</text>
+          <text class="applicant-name" v-if="dbFlag">学生{{ qjData.xsxm }}的请假申请</text>
+        </view>
+        <view class="divider"></view>
+        <view class="card-body">
+          <view class="info-row">
+            <text class="label">请假类型:</text>
+            <text class="value">{{ qjData.qjlx }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">开始时间:</text>
+            <text class="value">{{ qjData.qjkstime }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">结束时间:</text>
+            <text class="value">{{ qjData.qjjstime }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">请假时长:</text>
+            <text class="value">{{ qjData.qjsc }}</text>
+          </view>
+          <view class="info-row">
+            <text class="label">是否离校:</text>
+            <text class="value">{{ qjData.sflx === 1 ? '是' : '否' }}</text>
+          </view>
+          <view class="info-column">
+            <text class="label">请假事由:</text>
+            <text class="value">{{ qjData.qjsy }}</text>
+          </view>
+        </view>
+      </view>
+      <!-- 请假信息卡片 -->
+      <view class="info-card">
+        <view class="card-header">
+          <text class="applicant-name">审批意见</text>
+        </view>
+        <view class="divider"></view>
+        <BasicForm @register="register" />
+      </view>
+
+    </view>
+    <template #bottom>
+      <view class="white-bg-color py-5">
+        <view class="flex-row items-center pb-10 pt-5">
+          <u-button
+            text="取消"
+            class="ml-15 mr-7"
+            :plain="true"
+            @click="navigateBack"
+          />
+          <u-button
+            text="提交"
+            class="mr-15 mr-7"
+            type="primary"
+            @click="submit"
+          />
+        </view>
+      </view>
+    </template>
+  </BasicLayout>
+</template>
+
+<script setup lang="ts">
+import { onLoad } from "@dcloudio/uni-app";
+import { useForm } from "@/components/BasicForm/hooks/useForm";
+import { navigateBack } from "@/utils/uniapp";
+import { xsQjFindByIdApi, xsQjSpApi, dbBlApi } from "@/api/base/server";
+import { useDataStore } from "@/store/modules/data";
+const { getData, getDb, setData } = useDataStore();
+
+const dbFlag = ref(false);
+
+const [register, { getValue }] = useForm({
+  schema: [
+    {
+      field: "flag",
+      label: "审批意见",
+      component: "BasicCheckbox",
+      required: true,
+      itemProps: {
+        labelPosition: "top",
+      },
+      componentProps: {
+        data: [
+          { value: 0, text: "同意" },
+          { value: 1, text: "拒绝" },
+        ],
+      },
+    },
+    {
+      field: "comment",
+      label: "审批说明",
+      component: "BasicInput",
+      required: true,
+      itemProps: {
+        labelPosition: "top",
+      },
+      componentProps: {
+        type: "textarea",
+      },
+    },
+  ],
+});
+
+// 请假基础数据
+const qjData = computed(() => getData || {});
+const dbData = computed(() => getDb || {});
+
+const submit = async () => { 
+  const data = await getValue();
+  const params = { ...qjData.value };
+  params.flag = data.flag;
+  params.comment = data.comment;
+  uni.showLoading({
+    title: "提交中...",
+  });
+  const res = await xsQjSpApi(params);
+  // 如果是待办项，更新待办项状态
+  if (dbFlag.value) {
+    await dbBlApi({ id: dbData.value.id });
+  }
+  uni.hideLoading();
+  navigateBack();
+};
+
+onLoad(async (data: any) => {
+  // 从待办过来的，需要从后端获取数据
+  if (data && data.from && data.from == "db") {
+    dbFlag.value = true;
+    const res = await xsQjFindByIdApi({ id: data.id });
+    nextTick(() => {
+      setData(res.result);
+    });
+  } else {
+    dbFlag.value = false;
+  }
+});
+
+</script>
+
+<style lang="scss" scoped>
+.qj-detail {
+  background-color: #f5f7fa;
+}
+
+.info-card {
+  margin: 15px;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  .card-header {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+
+    .applicant-name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background-color: #eee;
+    margin-bottom: 15px;
+  }
+
+
+  .card-body {
+    padding: 15px;
+
+    .info-row {
+      display: flex;
+      margin-bottom: 10px;
+
+      .label {
+        font-size: 14px;
+        color: #bbb;
+        width: 70px;
+        flex-shrink: 0;
+        margin-right: 8px;
+      }
+
+      .value {
+        font-size: 14px;
+        color: #333;
+        flex: 1;
+      }
+    }
+    .info-column {
+      display: flex;
+      flex-direction: column;
+
+      .label {
+        font-size: 14px;
+        color: #bbb;
+        flex-shrink: 0;
+        margin-right: 8px;
+        width: 100%;
+        margin-bottom: 5px;
+      }
+            
+      .value {
+        font-size: 14px;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+
+}
+
+.bottom-action {
+  padding: 15px;
+  margin-top: 20px;
+
+  .back-btn {
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    background-color: #fff;
+    color: #333;
+    border-radius: 22px;
+    font-size: 16px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  }
+}
+</style>
diff --git a/src/store/modules/data.ts b/src/store/modules/data.ts
index 3425a3a..056fc40 100644
--- a/src/store/modules/data.ts
+++ b/src/store/modules/data.ts
@@ -4,6 +4,7 @@ export const useDataStore = defineStore({
   id: "data",
   state: () => ({
     data: {},
+    db: {},
     global: {},
     file: {},
   }),
@@ -11,6 +12,9 @@ export const useDataStore = defineStore({
     getData(): any {
       return this.data;
     },
+    getDb(): any {
+      return this.db;
+    },
     getGlobal(): any {
       return this.global;
     },
@@ -22,6 +26,9 @@ export const useDataStore = defineStore({
     setData(data: any) {
       this.data = data;
     },
+    setDb(data: any) {
+      this.db = data;
+    },
     setGlobal(data: any) {
       this.global = data;
     },
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
new file mode 100644
index 0000000..9ad2f84
--- /dev/null
+++ b/src/utils/dateUtils.ts
@@ -0,0 +1,27 @@
+import dayjs from "dayjs";
+const getTimeAgo = (time: string) => {
+  const now = dayjs();
+  const inputTime = dayjs(time);
+  const diffInSeconds = now.diff(inputTime, 'second');
+  
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds}秒前`;
+  }
+  
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}分钟前`;
+  }
+  
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}小时前`;
+  }
+  
+  const diffInDays = Math.floor(diffInHours / 24);
+  return `${diffInDays}天前`;
+};
+
+export { 
+  getTimeAgo 
+};