✨ 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
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-03 00:05:56
+ * @LastEditTime: 2022-06-09 02:02:04
  * @FilePath: /tswj/src/main.js
  * @FilePath: /tswj/src/main.js
  * @Description: 
  * @Description: 
  */
  */
 import { createApp } from 'vue';
 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 router from './router';
 import App from './App.vue';
 import App from './App.vue';
 // import axios from './utils/axios';
 // import axios from './utils/axios';
@@ -20,7 +20,7 @@ const app = createApp(App);
 
 
 app.config.globalProperties.$http = axios; // 关键语句
 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);
 app.use(ConfigProvider);
 
 

@@ -4,7 +4,8 @@
     <div class="belong-school">
     <div class="belong-school">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
       <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);">
         <van-col span="2">
         <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>
         <van-col span="22">
         <van-col span="22">
           <p class="title">{{ kgInfo.name }}</p>
           <p class="title">{{ kgInfo.name }}</p>
@@ -61,8 +62,12 @@
           </van-col>
           </van-col>
         </van-row>
         </van-row>
       </div>
       </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">
       <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>
       </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>
@@ -75,34 +80,43 @@
 import { no_image, icon_logo, icon_book } from '@/utils/generateIcons'
 import { no_image, icon_logo, icon_book } from '@/utils/generateIcons'
 import { ShortcutFixed, BookCard } from '@/utils/generateModules'
 import { ShortcutFixed, BookCard } from '@/utils/generateModules'
 import { USER_ROLE } from '@/constant'
 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 emptyStatus = ref(false);
 
 
 const kgInfo = ref({});
 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) {
+onMounted(async () => {
+  const { data } = await kgInfoAPI()
+  kgInfo.value = data
+  kgInfo.value.book.forEach(item => {
+    item.show = true;
+  });
+  if (!data.book.length) {
     emptyStatus.value = true;
     emptyStatus.value = true;
   }
   }
-  } else {
-    console.warn(res);
-    if (!res.data.show) return false;
-    Toast({
-      icon: 'close',
-      message: res.data.msg
+})
+
+/********************* 搜索功能栏 **********************/
+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;
       });
       });
     }
     }
-})
-.catch(err => {
-  console.error(err); 
-});
+  }
+)
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>