feat：首页接口联调

src/api/home.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function getBanner() {
+  return request({
+    url: '/home/banner',
+    method: 'get'
+  })
+}

src/components/BackTop/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="back-top" v-show="isShow">
     <span v-scroll-to="'body'">
-      <svg-icon icon-class="backtop" :width="30" :height="30"/>
+      <svg-icon icon-class="backtop" :width="28" :height="28"/>
     </span>
   </div>
 </template>

src/components/ImagePic/index.vue

@@ -2,6 +2,9 @@
   <div>
     <!-- https://youzan.github.io/vant/#/zh-CN/image#api -->
     <van-image v-bind="$attrs" lazy-load>
+      <template v-slot:loading>
+        <van-loading type="spinner" size="20" />
+      </template>
       <template v-slot:error>加载失败</template>
     </van-image>
   </div>

src/components/Vant/index.js

@@ -15,7 +15,8 @@ import {
   Image,
   Lazyload,
   Swipe,
-  SwipeItem
+  SwipeItem,
+  Loading
 } from 'vant'
 
 Vue.use(Toast)
@@ -32,3 +33,4 @@ Vue.use(Toast)
   .use(Lazyload)
   .use(Swipe)
   .use(SwipeItem)
+  .use(Loading)

src/views/home/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="home">
     <Header />
-    <Swiper />
+    <Swiper :banner="banner"/>
-    <back-top />
     <Category :cateList="cateList" />
     <Goods />
+    <back-top />
   </div>
 </template>
 
 <script>
+import { getBanner } from '@/api/home'
 import Header from './modules/Header'
 import Swiper from './modules/Swiper'
 import Category from './modules/Category'
-
 import Goods from './modules/Goods'
 import BackTop from '@/components/BackTop'
 
@@ -27,14 +27,12 @@ export default {
   },
   data() {
     return {
-      val: '11111',
+      banner: [],
-      value: 0,
-      switch1: false,
-      switch2: false,
       cateList: {}
     }
   },
   mounted() {
+    this.getBanner()
     const data = [
       {
         categoryName: '食品',
@@ -150,6 +148,11 @@ export default {
     }
   },
   methods: {
+    getBanner() {
+      getBanner().then(res => {
+        this.banner = res.entry
+      })
+    },
     onConfirm() {
       this.$refs.item.toggle()
     }

src/views/home/modules/Swiper.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <van-swipe :autoplay="3000" indicator-color="white">
-      <van-swipe-item v-for="(image, index) in images" :key="index">
+      <van-swipe-item v-for="(image, index) in banner" :key="index">
-        <img v-lazy="image" width="100%" height="150" />
+        <image-pic width="100%" height="150px" :src="image" />
       </van-swipe-item>
     </van-swipe>
   </div>
@@ -10,17 +10,6 @@
 
 <script>
 export default {
-  data() {
+  props: ['banner']
-    return {
-      images: [
-        'https://m.360buyimg.com/babel/s750x300_jfs/t1/91722/36/15702/155940/5e743902E12329b15/bf74028004890c45.jpg',
-        'https://m.360buyimg.com/babel/s750x300_jfs/t1/101273/30/14675/149408/5e698fd3E34e671d0/20f810d02067d342.jpg',
-        'https://m.360buyimg.com/babel/s750x300_jfs/t1/104517/14/15980/188439/5e7311fcE32a88066/4461e1fb99fc7cf6.jpg'
-      ]
-    }
-  }
 }
 </script>
-
-<style>
-</style>