✨ feat(幼儿园选择书籍页面): 数据调用优化

+import { ref } from 'vue'
+import axios from '@/utils/axios';
+import { Toast } from 'vant';
+
+export const bookFn = ($route) => {
+  const kg_id = $route.query.kg_id ? $route.query.kg_id : '';
+  const kgInfo = ref({
+    id: '',
+    logo: '',
+    name: '',
+    book_list: []
+  });
+  if (kg_id) { // 从学校列表进入
+    axios.get('/srv/?a=kg_book_list', {
+      params: {
+        kg_id
+      }
+    })
+      .then(res => {
+        if (res.data.code === 1) {
+          kgInfo.value = res.data.data;
+        } else {
+          console.warn(res);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      })
+  } else { // 从访客进入
+    axios.get('/srv/?a=book_list')
+      .then(res => {
+        if (res.data.code === 1) {
+          kgInfo.value = {
+            book_list: res.data.data
+          }
+        } else {
+          console.warn(res);
+          Toast({
+            icon: 'close',
+            message: res.data.msg
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      })
+  }
+  return {
+    kg_id,
+    kgInfo
+  }
+}
\ No newline at end of file

@@ -3,11 +3,11 @@
     <div class="modify-top"></div>
     <div class="modify-top"></div>
     <div class="belong-school">
     <div class="belong-school">
       <template v-if="kg_id">
       <template v-if="kg_id">
-        <van-image round width="2rem" height="2rem" lazy-load :src="kindergartenInfo.logo"
+        <van-image round width="2rem" height="2rem" lazy-load :src="kgInfo.logo"
           style="vertical-align: text-bottom;">
           style="vertical-align: text-bottom;">
           <template v-slot:error>加载失败</template>
           <template v-slot:error>加载失败</template>
         </van-image>
         </van-image>
-        <p class="title">{{ kindergartenInfo.name }}</p>
+        <p class="title">{{ kgInfo.name }}</p>
       </template>
       </template>
     </div>
     </div>
     <div style="position: relative;">
     <div style="position: relative;">
@@ -24,7 +24,7 @@
       <div class="ding right"></div>
       <div class="ding right"></div>
     </div>
     </div>
     <div class="book-list">
     <div class="book-list">
-      <template v-for="(item, key) in kindergartenInfo.book_list" :key="key">
+      <template v-for="(item, key) in kgInfo.book_list" :key="key">
         <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
         <book-card type="C" :item="item" @on-click="onClick(item)"></book-card>
       </template>
       </template>
     </div>
     </div>
@@ -37,15 +37,18 @@
 import MyButton from '@/components/MyButton/index.vue'
 import MyButton from '@/components/MyButton/index.vue'
 import BookCard from '@/components/BookCard/index.vue'
 import BookCard from '@/components/BookCard/index.vue'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
-import { ref, reactive, onMounted } from 'vue'
+
+import { bookFn } from '@/composables/useBookList.js'
+
+import { reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
-import axios from '@/utils/axios';
 import _ from 'lodash'
 import _ from 'lodash'
-import $ from 'jquery'
-import { Toast } from 'vant';
+
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
+const { kg_id, kgInfo } = bookFn($route)
+
 // 自定义按钮颜色样式
 // 自定义按钮颜色样式
 const styleObject = reactive({
 const styleObject = reactive({
   backgroundColor: '#F4675A',
   backgroundColor: '#F4675A',
@@ -53,56 +56,6 @@ const styleObject = reactive({
   borderColor: '#F4675A'
   borderColor: '#F4675A'
 })
 })
 
 
-// 页面数据绑定
-const kg_id = $route.query.kg_id ? $route.query.kg_id : '';
-const kindergartenInfo = ref({
-  id: '',
-  logo: '',
-  name: '',
-  book_list: []
-});
-onMounted(() => {
-  if (kg_id) { // 从学校列表进入
-    axios.get('/srv/?a=kg_book_list', {
-      params: {
-        kg_id
-      }
-    })
-      .then(res => {
-        if (res.data.code === 1) {
-          kindergartenInfo.value = res.data.data;
-        } else {
-          console.warn(res);
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      })
-  } else { // 从访客进入
-    axios.get('/srv/?a=book_list')
-      .then(res => {
-        if (res.data.code === 1) {
-          kindergartenInfo.value = {
-            book_list: res.data.data
-          }
-        } else {
-          console.warn(res);
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      })
-  }
-})
-
 // 跳转书籍详情页
 // 跳转书籍详情页
 const onClick = (item) => {
 const onClick = (item) => {
   $router.push({
   $router.push({
@@ -112,10 +65,6 @@ const onClick = (item) => {
     }
     }
   });
   });
 }
 }
-
-const gotoMe = () => {
-  console.warn('跳转我的地址');
-}
 </script>
 </script>
 
 
 <script>
 <script>