添加原厂专区和代理经销的轮播图

components/provider/Carousel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="carousel">
+    <div v-swiper:mySwiper="swiperOption">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="banner in banners">
+          <img :src="banner.pictureUrl">
+        </div>
+      </div>
+      <div class="swiper-pagination swiper-pagination-bullets"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'carousel',
+    data () {
+      return {
+        activeSlide: 0,
+        swiperOption: {
+          autoplay: 5000,
+          initialSlide: 1,
+          loop: true,
+          effect: 'fade',
+          lazyLoading: true,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          paginationElement: 'li',
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
+      }
+    },
+    computed: {
+      banners () {
+        return this.$store.state.carousel.banners.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  $carousel_width: 668px;
+  $carousel_height: 358px;
+
+  .carousel {
+    width: $carousel_width;
+    height: $carousel_height;
+    transition: background-color .3s;
+    position: relative;
+
+    .swiper-wrapper {
+      .swiper-slide {
+        img {
+          display: block;
+          width: $carousel_width;
+          height: $carousel_height;
+        }
+      }
+    }
+  }
+</style>

components/provider/RecommendStore.vue

@@ -4,6 +4,7 @@
       <sales-rank />
     </div>
     <div class="carousel">
+      <carousel />
     </div>
     <div class="new-store">
       <new-store />
@@ -11,14 +12,16 @@
   </div>
 </template>
 <script>
-import SalesRank from './SalesRank'
-import NewStore from './NewStore'
+import SalesRank from './SalesRank.vue'
+import NewStore from './NewStore.vue'
+import Carousel from './Carousel.vue'
 
 export default {
   name: 'recommend-store',
   components: {
     SalesRank,
-    NewStore
+    NewStore,
+    Carousel
   }
 }
 </script>