add top img carousel navigateTo detail url

src/components/TopSwiper.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="swiper">
+    <swiper
+      :indicator-dots="true"
+      indicator-color="#EA5A49"
+      :autoplay="true"
+      :interval="6000"
+      :duration="1000"
+      :circular="true"
+    >
+      <div :key="imgindex" v-for="(top, imgindex) in imgUrls">
+         <swiper-item>
+           <!-- img中mode是小程序提供图片大小格式  -->
+           <img 
+             @click='bookDetail(img)'
+             class="slide-image" 
+             mode="aspectFit" 
+             v-for="img in top"
+             :key="img.id"
+             :src="img.image"
+             >
+         </swiper-item>
+      </div>
+    </swiper>
+  </div>
+</template>
+<script>
+export default {
+  props: ['tops'],
+  computed: {
+    imgUrls() {
+      // 如果通用 请用chunk函数 比如lodash的chunk方法
+      let res = this.tops;
+      console.log([res.slice(0,3), res.slice(3,6), res.slice(6)]);
+      return [res.slice(0,3), res.slice(3,6), res.slice(6)];
+    }
+  },
+  methods: {
+    bookDetail(item) {
+      // console.log('top options', item);
+      wx.navigateTo({
+        url: '/pages/detail/main?id='+item.id
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.swiper{
+  margin-top:5px;
+  .slide-image{
+    width:33%;
+    height:250rpx;
+  }
+}
+</style>
+

src/pages/books/Book.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <TopSwiper :tops='tops'></TopSwiper>
     <!-- <p>图书列表</p> -->
     <Card v-for="book in books" :key="book.openid" :book='book'></Card>
     <p class="text-footer" v-if="!more">
@@ -21,15 +22,18 @@
 
 import {get} from '@/util'
 import Card from '@/components/Card'
+import TopSwiper from '@/components/TopSwiper'
 export default {
   components: {
-    Card
+    Card,
+    TopSwiper
   },
   data () {
     return {
       books: [],
       page: 0,
       more: true,
+      tops: []
     }
   },
   methods: {