🦄 refactor: name单独搜索

src/views/components/InstructionalVideo/index.vue

@@ -4,18 +4,23 @@
       placeholder="请输入内容"
       prefix-icon="el-icon-search"
       v-model.trim="searchText"
+      @input="debouncedGetVideoList"
     >
     </el-input>
+
     <el-cascader
       class="w-full mt-[8px]"
       v-model="categoryValue"
       :props="{ emitPath: false, expandTrigger: 'click' }"
       :options="categoryList"
-      @change="getVideoList"
+      @change="debouncedGetVideoList"
     ></el-cascader>
-    <div class="mt-[16px] space-y-[8px] flex-1 overflow-auto pb-[10px]">
+    <div
+      class="mt-[16px] space-y-[8px] flex-1 overflow-auto pb-[10px]"
+      v-loading="loading"
+    >
       <div
-        v-for="item in list"
+        v-for="item in videoList"
         :key="item.id"
         class="flex justify-between items-center py-[3px] px-[8px] bottom-[1px] border border-[#E5E7EB] rounded-[4px]"
       >
@@ -66,24 +71,27 @@ export default {
       categoryValue: {},
       categoryList: [],
       videoList: [],
+      debouncedGetVideoList: null,
+      loading: false,
     };
   },
   mounted() {
     this.getCategoryList();
+    // 初始化防抖函数，延迟300ms执行
+    this.debouncedGetVideoList = debounce(() => {
+      this.loading = true;
+      this.getVideoList().finally(() => {
+        this.loading = false;
+      });
+    }, 300);
   },
   computed: {
     ...mapState("user", ["userInfo", "weixin_blongs_id"]),
-    list() {
-      return this.videoList.filter((item) =>
-        item.video_name.includes(this.searchText)
-      );
-    },
   },
   methods: {
     ...mapMutations("common", ["set_sendSkillMessage"]),
     // 视频分类
     async getCategoryList() {
-      console.log(this.userInfo);
       // return;
       const { data } = await teachingVideoCategoryListApi({
         weixin_blongs_id: this.weixin_blongs_id,
@@ -108,9 +116,11 @@ export default {
         return;
       }
       const { data } = await teachingVideoVideoListApi({
-        weixin_blongs_id: this.categoryValue.weixin_blongs_id,
+        weixin_blongs_id:
+          this.categoryValue.weixin_blongs_id || this.weixin_blongs_id,
         main_game_id: this.categoryValue.main_game_id,
         video_type: this.categoryValue.id,
+        video_name: this.searchText,
         page: 1,
         page_size: 200,
       });