hookehuyr

refactor(teacher): 优化班级页面搜索功能并移除无用代码

- 移除性别图标显示和排序功能
- 修改搜索触发逻辑为blur和clear事件
- 增加清空搜索功能
- 调整分页limit从3改为10
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-01-20 10:00:00 3 * @Date: 2025-01-20 10:00:00
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-06-26 11:06:33 5 + * @LastEditTime: 2025-06-26 11:13:22
6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue 6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
7 * @Description: 我的班级页面 7 * @Description: 我的班级页面
8 --> 8 -->
...@@ -83,12 +83,12 @@ ...@@ -83,12 +83,12 @@
83 <div class="p-4 border-b border-gray-100 bg-white"> 83 <div class="p-4 border-b border-gray-100 bg-white">
84 <div class="flex items-center justify-between mb-3"> 84 <div class="flex items-center justify-between mb-3">
85 <h3 class="text-lg font-bold text-gray-800">班级成员 ({{ studentCount }})</h3> 85 <h3 class="text-lg font-bold text-gray-800">班级成员 ({{ studentCount }})</h3>
86 - <div @click="showSortPopup = true" class="flex items-center text-sm text-gray-600 cursor-pointer"> 86 + <!-- <div @click="showSortPopup = true" class="flex items-center text-sm text-gray-600 cursor-pointer">
87 <span>{{ sortFilter }}</span> 87 <span>{{ sortFilter }}</span>
88 <van-icon name="arrow-down" size="14" class="ml-1" /> 88 <van-icon name="arrow-down" size="14" class="ml-1" />
89 + </div> -->
89 </div> 90 </div>
90 - </div> 91 + <van-search v-model="searchKeyword" placeholder="请搜索" shape="round" @blur="handleSearch" @clear="handleClearSearch" @input="handleSearchInput" />
91 - <van-search v-model="searchKeyword" placeholder="请搜索" shape="round" @search="handleSearch" @input="handleSearchInput" />
92 </div> 92 </div>
93 93
94 <!-- 学生列表 --> 94 <!-- 学生列表 -->
...@@ -103,8 +103,8 @@ ...@@ -103,8 +103,8 @@
103 <div class="flex-1"> 103 <div class="flex-1">
104 <div class="flex items-center"> 104 <div class="flex items-center">
105 <span class="font-medium text-gray-800 mr-2">{{ student.name }}</span> 105 <span class="font-medium text-gray-800 mr-2">{{ student.name }}</span>
106 - <font-awesome-icon v-if="student.gender === 'male'" icon="venus" color="#3b82f6" class="mr-2" style="font-size: 0.85rem;" /> 106 + <!-- <font-awesome-icon v-if="student.gender === 'male'" icon="venus" color="#3b82f6" class="mr-2" style="font-size: 0.85rem;" />
107 - <font-awesome-icon v-else icon="mars" color="#ec4899" class="mr-2" style="font-size: 0.85rem;" /> 107 + <font-awesome-icon v-else icon="mars" color="#ec4899" class="mr-2" style="font-size: 0.85rem;" /> -->
108 </div> 108 </div>
109 <div class="text-sm text-gray-500" style="text-align: left;"> 109 <div class="text-sm text-gray-500" style="text-align: left;">
110 <span v-for="(item, index) in student.class_list" :key="index" class="mr-2">{{ item.class_name }}</span> 110 <span v-for="(item, index) in student.class_list" :key="index" class="mr-2">{{ item.class_name }}</span>
...@@ -204,7 +204,7 @@ const studentCount = ref(0); ...@@ -204,7 +204,7 @@ const studentCount = ref(0);
204 // 列表加载状态 204 // 列表加载状态
205 const loading = ref(false) 205 const loading = ref(false)
206 const finished = ref(false) 206 const finished = ref(false)
207 -const limit = ref(3) 207 +const limit = ref(10)
208 const page = ref(0) 208 const page = ref(0)
209 209
210 // 请求控制器,用于取消重复请求 210 // 请求控制器,用于取消重复请求
...@@ -312,8 +312,7 @@ const handleSearchInput = (value) => { ...@@ -312,8 +312,7 @@ const handleSearchInput = (value) => {
312 * 处理搜索 - 立即搜索,无需防抖 312 * 处理搜索 - 立即搜索,无需防抖
313 * @param {string} value - 搜索关键词 313 * @param {string} value - 搜索关键词
314 */ 314 */
315 -const handleSearch = (value) => { 315 +const handleSearch = () => {
316 - console.log('搜索:', value);
317 316
318 // 清除之前的定时器 317 // 清除之前的定时器
319 if (searchTimer) { 318 if (searchTimer) {
...@@ -321,7 +320,16 @@ const handleSearch = (value) => { ...@@ -321,7 +320,16 @@ const handleSearch = (value) => {
321 } 320 }
322 321
323 // 立即执行搜索 322 // 立即执行搜索
324 - searchKeyword.value = value; 323 + resetAndReload();
324 +}
325 +
326 +const handleClearSearch = () => {
327 + // 清除之前的定时器
328 + if (searchTimer) {
329 + clearTimeout(searchTimer);
330 + }
331 +
332 + searchKeyword.value = '';
325 resetAndReload(); 333 resetAndReload();
326 } 334 }
327 335
......