询价求购banner图cms

components/applyPurchase/PublishApply.vue

@@ -1,14 +1,84 @@
 <template>
-  <div class="publish-apply"></div>
+  <div class="publish-apply">
+    <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 {
+    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.applyPurchase.purchaseBannerList.bannerList.data.data
+      }
+    }
+  }
 </script>
 <style lang="scss">
   .publish-apply {
-    border-radius:5px;
-    background: url('/images/applyPurchase/banner.png') center center/cover no-repeat;
+    border-radius: 5px;
     height: 400px;
-    margin-bottom:20px;
+    margin-bottom: 20px;
+    .swiper-container {
+      z-index: 2;
+      width: 955px;
+      height: 400px;
+      .swiper-wrapper {
+        width: 955px;
+        height: 400px;
+        margin: 0 auto;
+        .swiper-slide {
+          height: 400px;
+          margin: 0 auto;
+          display: flex;
+          img {
+            width: 955px;
+            height: 400px;
+            border-radius: 5px;
+          }
+        }
+        .swiper-button-prev i, .swiper-button-next i {
+          font-size: 26px;
+        }
+      }
+      .swiper-pagination-bullets {
+        .swiper-pagination-bullet {
+          width: 10px!important;
+          height: 10px!important;
+        }
+      }
+    }
   }
 </style>

pages/applyPurchase/index.vue

@@ -35,7 +35,8 @@
         store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : null}),
         store.dispatch('applyPurchase/loadPurchaseApplyRank'),
         store.dispatch('applyPurchase/loadGoodPurchaseManList'),
-        store.dispatch('loadStoreStatus', { op: 'check' })
+        store.dispatch('loadStoreStatus', { op: 'check' }),
+        store.dispatch('applyPurchase/loadPurchaseBanner')
       ])
     }
   }

store/applyPurchase.js

@@ -192,6 +192,16 @@ export const actions = {
       }, err => {
         commit('bomMaterial/GET_BOM_INFO_FAILURE', err)
       })
+  },
+  // 获取询价求购轮播图
+  loadPurchaseBanner ({ commit }) {
+    commit('purchaseBannerList/REQUEST_BANNER_LIST')
+    return axios.get('/cmsApi?method=queryContentPage&module=purchase_banner_carousel&orderBy=order_number ASC')
+      .then(response => {
+        commit('purchaseBannerList/GET_BANNER_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('purchaseBannerList/GET_BANNER_LIST_FAILURE', err)
+      })
   }
 }
 

store/applyPurchase/purchaseBannerList.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+ bannerList: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_BANNER_LIST (state) {
+    state.bannerList.fetching = true
+  },
+  GET_BANNER_LIST_FAILURE (state) {
+    state.bannerList.fetching = false
+  },
+  GET_BANNER_LIST_SUCCESS (state, result) {
+    state.bannerList.fetching = false
+    state.bannerList.data = result
+  }
+}
+