供应商banner图cms

components/supplier/banner.vue

@@ -1,10 +1,51 @@
 <template>
-  <div class="banner"></div>
+  <div class="banner">
+    <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="banner in banners">
+          <a>
+            <img :src="banner.pictureLink"/>
+          </a>
+        </div>
+        <div v-if="banners.length === 0" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
+        <div v-if="banners.length === 0"class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
+      </div>
+      <div v-if="banners.length === 0" class="swiper-pagination swiper-pagination-bullets"></div>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'BannerView'
+    name: 'BannerView',
+    data () {
+      return {
+        swiperOption: {
+          autoplay: 6000,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          mousewheelControl: false,
+          effect: 'fade',
+          lazyLoading: true,
+          loop: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next',
+          onTransitionStart: (swiper) => {
+            if (this.banners.data && this.banners.data.length && (swiper.activeIndex > this.banners.data.length)) {
+              swiper.activeIndex = 1
+            }
+            if (this.banners.data && this.banners.data.length && swiper.activeIndex <= 0) {
+              swiper.activeIndex = this.banners.data.length
+            }
+          }
+        }
+      }
+    },
+    computed: {
+      banners () {
+        return this.$store.state.supplier.detail.banner.data.data
+      }
+    }
   }
 </script>
 

pages/eCommerce/home/_type.vue

@@ -14,6 +14,7 @@
         store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
         store.dispatch('supplier/loadNewMerchant', {filter: 'page', size: 10}),
         store.dispatch('supplier/loadRecommend', {size: 19}),
+        store.dispatch('supplier/loadSupplierBanner')
       ]) : params.type === 'brand' ? Promise.all([
         store.dispatch('loadFloors'),
         store.dispatch('loadBanners', {type: 'Brand-v3'}),

pages/supplier/index.vue

@@ -25,7 +25,8 @@
         store.dispatch('supplier/loadVendorList', {page: 1, size: 10}),
         store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
         store.dispatch('supplier/loadNewMerchant', {filter: 'page', size: 10}),
-        store.dispatch('supplier/loadRecommend', {size: 19})
+        store.dispatch('supplier/loadRecommend', {size: 19}),
+        store.dispatch('supplier/loadSupplierBanner')
       ])
     },
     components: {

store/supplier.js

@@ -109,5 +109,15 @@ export const actions = {
       }, (err) => {
         commit('merchant/GET_RECOMMEND_FAILURE', err)
       })
+  },
+  // 获取供应商轮播
+  loadSupplierBanner ({commit}) {
+    commit('detail/REQUEST_BANNER')
+    return axios.get(`/cmsApi?method=queryContentPage&module=supplier_banner_carousel&orderBy=order_number ASC`)
+      .then(res => {
+        commit('detail/GET_BANNER_SUCCESS', res.data)
+      }, (err) => {
+        commit('detail/GET_BANNER_FAILURE', err)
+      })
   }
 }

store/supplier/detail.js

@@ -6,6 +6,10 @@ export const state = () => ({
   cmpInfo: {
     fetching: false,
     data: []
+  },
+  banner: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +33,15 @@ export const mutations = {
   },
   GET_CMPINFO_FAILURE (state) {
     state.cmpInfo.fetching = false
+  },
+  REQUEST_BANNER (state) {
+    state.banner.detching = true
+  },
+  GET_BANNER_SUCCESS (state, result) {
+    state.banner.fetching = false
+    state.banner.data = result
+  },
+  GET_BANNER_FAILURE (state) {
+    state.banner.fetching = false
   }
 }