feat：类目接口联调

src/api/home.js

@@ -6,3 +6,10 @@ export function getBanner() {
     method: 'get'
   })
 }
+
+export function getCategory() {
+  return request({
+    url: '/home/category',
+    method: 'get'
+  })
+}

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <Header />
-    <Swiper :banner="banner"/>
+    <Swiper :banner="banner" />
     <Category :cateList="cateList" />
     <Goods />
     <back-top />
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { getBanner } from '@/api/home'
+import { getBanner, getCategory } from '@/api/home'
 import Header from './modules/Header'
 import Swiper from './modules/Swiper'
 import Category from './modules/Category'
@@ -33,119 +33,7 @@ export default {
   },
   mounted() {
     this.getBanner()
-    const data = [
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      },
-      {
-        categoryName: '食品',
-        index: 0,
-        oneCategoryIcon:
-          'https://cdn.webuy.ai/assets/img/2019/11/06/n_1573033162472_4895___size132x132.png',
-        oneCategoryId: 293
-      }
-    ]
-    data.forEach((item, idx) => {
-      item.index = idx
-    })
-    if (data.length <= 5) {
-      this.cateList = {
-        prev: data,
-        next: []
-      }
-    } else if (data.length > 5 && data.length <= 10) {
-      this.cateList = {
-        prev: data.slice(0, 5),
-        next: data.slice(5)
-      }
-    } else {
-      const breakPoint = Math.ceil(data.length / 2)
-      this.cateList = {
-        prev: data.slice(0, breakPoint),
-        next: data.slice(breakPoint)
-      }
-    }
+    this.getCategory()
   },
   methods: {
     getBanner() {
@@ -153,8 +41,27 @@ export default {
         this.banner = res.entry
       })
     },
-    onConfirm() {
-      this.$refs.item.toggle()
+    getCategory() {
+      getCategory().then(res => {
+        const data = res.entry
+        if (data.length <= 5) {
+          this.cateList = {
+            prev: data,
+            next: []
+          }
+        } else if (data.length > 5 && data.length <= 10) {
+          this.cateList = {
+            prev: data.slice(0, 5),
+            next: data.slice(5)
+          }
+        } else {
+          const breakPoint = Math.ceil(data.length / 2)
+          this.cateList = {
+            prev: data.slice(0, breakPoint),
+            next: data.slice(breakPoint)
+          }
+        }
+      })
     }
   }
 }

src/views/home/modules/Category.vue

@@ -10,8 +10,8 @@
             :key="index"
             @click="onClick(item)"
           >
-            <img :src="item.oneCategoryIcon" />
-            <p class="text">{{item.categoryName}}</p>
+            <img :src="item.icon" />
+            <p class="text">{{item.name}}</p>
           </div>
         </div>
       </div>