refactor(teacher): 优化班级页面搜索功能并移除无用代码
- 移除性别图标显示和排序功能 - 修改搜索触发逻辑为blur和clear事件 - 增加清空搜索功能 - 调整分页limit从3改为10
Showing
1 changed file
with
18 additions
and
10 deletions
| ... | @@ -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" @search="handleSearch" @input="handleSearchInput" /> | 91 | + <van-search v-model="searchKeyword" placeholder="请搜索" shape="round" @blur="handleSearch" @clear="handleClearSearch" @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 | ... | ... |
-
Please register or login to post a comment