✨ feat(爱心书籍列表页): 新增书籍列表搜索功能

@@ -117,6 +117,7 @@ watch(
     }
     }
   }
   }
 )
 )
+/**************************************************/
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>

@@ -37,8 +37,13 @@
       <div class="ding right" />
       <div class="ding right" />
     </div>
     </div>
     <div class="book-list">
     <div class="book-list">
+      <!-- NOTICE: 新增搜索功能，需要时放出 -->
+      <!-- <van-sticky>
+        <van-search v-model="search_value" placeholder="请输入书籍名称" @search="onSearch" />
+      </van-sticky> -->
       <template v-for="(item, key) in kgInfo.book_list" :key="key">
       <template v-for="(item, key) in kgInfo.book_list" :key="key">
-        <book-card :type="USER_ROLE.CLIENT" :item="item" @on-click="go('/client/bookDetail', { id: item.id, kg_id })" />
+        <book-card v-if="item.show" :type="USER_ROLE.CLIENT" :item="item"
+          @on-click="go('/client/bookDetail', { id: item.id, kg_id })" />
       </template>
       </template>
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍信息" />
     </div>
     </div>
@@ -57,7 +62,7 @@ import { useGo } from '@/hooks/useGo';
 import { killPages, store } from '@/hooks/useKeepAlive';
 import { killPages, store } from '@/hooks/useKeepAlive';
 import { Cookies } from '@/utils/generatePackage.js'
 import { Cookies } from '@/utils/generatePackage.js'
 import { DonateBar } from '@/utils/generateModules.js'
 import { DonateBar } from '@/utils/generateModules.js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { USER_ROLE, USER_TYPE } from '@/constant'
 import { USER_ROLE, USER_TYPE } from '@/constant'
 
 
 const go = useGo();
 const go = useGo();
@@ -81,6 +86,27 @@ const userType = Cookies.get('userType')
 const donateType = computed(() => {
 const donateType = computed(() => {
   return userType === 'client' ? USER_TYPE.KINDERGARTEN : USER_TYPE.VISIT;
   return userType === 'client' ? USER_TYPE.KINDERGARTEN : USER_TYPE.VISIT;
 })
 })
+
+/********************* 搜索功能栏 **********************/
+const search_value = ref('')
+const onSearch = () => { // 前端过滤搜索结果
+  kgInfo.value.book_list.forEach(item => {
+    if (item.name.indexOf(search_value.value) === -1) {
+      item.show = false;
+    }
+  });
+}
+watch(
+  search_value,
+  (v) => {
+    if (!v) {
+      kgInfo.value.book_list.forEach(item => {
+        item.show = true;
+      });
+    }
+  }
+)
+/**************************************************/
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>