✨ feat(幼儿园端首页): 新增书籍列表搜索功能

+/*
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-06-09 02:25:31
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-09 02:26:54
+ * @FilePath: /tswj/src/api/B/kg.js
+ * @Description: 幼儿园主页接口
+ */
+import { fn, fetch } from '@/api/fn';
+
+const Api = {
+  KG_INFO: '/srv/?a=kg_info',
+}
+
+/**
+ * @description 幼儿园详情
+ * @returns {*} data
+ */
+export const kgInfoAPI = (params) => fn(fetch.get(Api.KG_INFO, params));

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-03 00:05:56
+ * @LastEditTime: 2022-06-09 02:02:04
  * @FilePath: /tswj/src/main.js
  * @Description: 
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -20,7 +20,7 @@ const app = createApp(App);
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search);
 
 app.use(ConfigProvider);
 

@@ -4,7 +4,8 @@
     <div class="belong-school">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
         <van-col span="2">
-          <van-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo" style="vertical-align: text-bottom;" />
+          <van-image round width="3rem" height="3rem" lazy-load :src="kgInfo.logo ? kgInfo.logo : icon_logo"
+            style="vertical-align: text-bottom;" />
         </van-col>
         <van-col span="22">
           <p class="title">{{ kgInfo.name }}</p>
@@ -20,7 +21,7 @@
               <div class="text-box">
                 <span class="text bg-gradient">视频上传</span>
                 <span class="number">&nbsp;{{ kgInfo.mission_num }}<span style="color: #888888;">/{{
-                kgInfo.mission_target }}</span></span>
+                    kgInfo.mission_target }}</span></span>
               </div>
             </van-col>
             <van-col span="12">
@@ -61,8 +62,12 @@
           </van-col>
         </van-row>
       </div>
+      <!-- NOTICE: 新增搜索功能，需要时放出 -->
+      <!-- <van-sticky>
+        <van-search v-model="search_value" placeholder="请输入书籍名称" @search="onSearch" />
+      </van-sticky> -->
       <template v-for="(item, key) in kgInfo.book" :key="key">
-        <book-card :item="item" :type="USER_ROLE.BUSINESS" :user_id="kgInfo.user_id" />
+        <book-card v-if="item.show" :item="item" :type="USER_ROLE.BUSINESS" :user_id="kgInfo.user_id" />
       </template>
       <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无书籍" />
     </div>
@@ -75,34 +80,43 @@
 import { no_image, icon_logo, icon_book } from '@/utils/generateIcons'
 import { ShortcutFixed, BookCard } from '@/utils/generateModules'
 import { USER_ROLE } from '@/constant'
-
-import { ref } from 'vue'
-import axios from '@/utils/axios';
-import { Toast } from 'vant';
+import { kgInfoAPI } from '@/api/B/kg'
+import { onMounted, ref, watch } from 'vue'
 
 // 因为不能让空图标提前出来的写法
 const emptyStatus = ref(false);
 
 const kgInfo = ref({});
-axios.get('/srv/?a=kg_info')
-.then(res => {
-  if (res.data.code === 1) {
-    kgInfo.value = res.data.data;
-    if (!res.data.data.book.length) {
-      emptyStatus.value = true;
-    }
-  } else {
-    console.warn(res);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
-    });
+onMounted(async () => {
+  const { data } = await kgInfoAPI()
+  kgInfo.value = data
+  kgInfo.value.book.forEach(item => {
+    item.show = true;
+  });
+  if (!data.book.length) {
+    emptyStatus.value = true;
   }
 })
-.catch(err => {
-  console.error(err); 
-});
+
+/********************* 搜索功能栏 **********************/
+const search_value = ref('')
+const onSearch = () => { // 前端过滤搜索结果
+  kgInfo.value.book.forEach(item => {
+    if (item.name.indexOf(search_value.value) === -1) {
+      item.show = false;
+    }
+  });
+}
+watch(
+  search_value,
+  (v) => {
+    if (!v) {
+      kgInfo.value.book.forEach(item => {
+        item.show = true;
+      });
+    }
+  }
+)
 </script>
 
 <style lang="less" scoped>