处理店铺数据绑定

components/provider/Carousel.vue

@@ -3,8 +3,8 @@
     <div v-swiper:mySwiper="swiperOption">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="banner in banners">
-          <a :href="banner.hrefUrl" target="_blank">
-            <img :src="banner.pictureUrl">
+          <a :href="banner.detailsLink" target="_blank">
+            <img :src="banner.pictureLink">
           </a>
         </div>
       </div>
@@ -38,9 +38,9 @@
       },
       banners () {
         if (this.$store.state.carousel.banners) {
-          let banner = this.$store.state.carousel.banners.data.slice()
+          let banner = this.$store.state.carousel.banners.data.data.slice()
           banner.sort(function (a, b) {
-            return a.orderNumber - b.orderNumber
+            return a.contentId - b.contentId
           })
           return banner
         } else {

components/provider/RecommendStore.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container marketing">
     <div class="toggle-store">
-      <toggle-store />
+      <toggle-store/>
     </div>
     <div class="carousel">
       <carousel />

components/provider/Suppliers.vue

@@ -3,11 +3,12 @@
     <table class="table">
       <thead>
       <tr data-v-12978a78="">
-        <td width="120" data-v-12978a78=""><span data-v-12978a78="">原&nbsp;&nbsp;厂</span></td>
+        <td width="120"><span v-text="storeType === 'factory' ? '原 厂' : '代理经销'">原厂</span></td>
         <td width="100" data-v-12978a78=""></td>
         <td width="450" data-v-12978a78=""></td>
         <td width="150" style="vertical-align: middle" data-v-12978a78=""></td>
-        <td width="120" style="vertical-align: middle;" data-v-12978a78=""></td></tr>
+        <td width="120" style="vertical-align: middle;" data-v-12978a78=""></td>
+      </tr>
       </thead>
       <tbody>
       <!--<tr>{{$data}}</tr>-->
@@ -70,6 +71,9 @@ export default {
     }
   },
   computed: {
+    storeType () {
+      return this.$store.state.provider.stores.storeType.data
+    },
     stores () {
       return this.$store.state.provider.stores.storeList.data
     },

components/provider/ToggleStore.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="toggleStore">
     <!--原厂-->
-    <div class="factory list-item">
+    <div class="factory list-item" :class="{active: storeType === 'factory'}" @click="toggleStore('factory')">
       <div class="header">
         <div class="kind"><span></span>原&nbsp;&nbsp;&nbsp;&nbsp;厂</div>
         <div class="count">
           <span>已入驻</span>
           <div class="count_num">
-            <span>1</span><span>2</span><span>3</span>
+            <span>1</span><span>2</span><span>3</span><span>3</span>
           </div>
         </div>
       </div>
@@ -18,13 +18,13 @@
       </div>
     </div>
     <!--代理经销-->
-    <div class="agent list-item">
+    <div class="agent list-item" :class="{active: storeType === 'origin'}" @click="toggleStore('origin')">
       <div class="header">
         <div class="kind"><span></span>代理经销</div>
         <div class="count">
           <span>已入驻</span>
           <div class="count_num">
-            <span>1</span><span>2</span><span>3</span>
+            <span>1</span><span>2</span><span>3</span><span>3</span>
           </div>
         </div>
       </div>
@@ -52,13 +52,24 @@
 
 export default {
   name: 'excellent-suppliers',
-  props: ['isShowMore'],
   computed: {
-    stores () {
+    storeType () {
+      return this.$store.state.provider.stores.storeType.data
+    },
+    store () {
       return this.$store.state.provider.storeCms.recommendStore.data
+    },
+    storeCount () {
+      return this.$store.state.provider.storeCms.storeCount.data
     }
   },
   methods: {
+    // 切换Store
+    toggleStore (type) {
+      this.$store.commit('provider/stores/SET_STORETYPE', type)
+      this.$store.dispatch('loadBanners', {type: type + '_banner_carousel'})
+      this.$store.dispatch('provider/findSimilarStoreList', { page: 1, count: 10, types: type === 'factory' ? 'ORIGINAL_FACTORY' : 'AGENCY-DISTRIBUTION' })
+    },
     // 店铺入驻数量
     formatNumber (num, key) {
       let count = ('000' + num).substr(-key)
@@ -106,9 +117,9 @@ export default {
           overflow: hidden;
           float: right;
           padding: 0 5px;
-          width: 112px;
+          width: 120px;
           height: 26px;
-          line-height: 26px;
+          line-height: 24px;
           background-color: #fff;
           border-radius: 2px;
           border: solid 1px #bfbfbf;
@@ -124,8 +135,7 @@ export default {
             margin-top: 3px;
             span{
               display: inline-block;
-              margin-right: 3px;
-              width: 18px;
+              width: 14px;
               height: 18px;
               line-height: 18px;
               font-size: 12px;
@@ -162,8 +172,8 @@ export default {
         }
       }
       .body {
-        margin-top: 20px;
-        padding: 0 12px 0;
+        margin-top: 15px;
+        padding: 0 20px 0;
         p{
           width: 195px;
           overflow: hidden;
@@ -174,7 +184,7 @@ export default {
           color: #666666;
         }
       }
-      &:hover{
+      &:hover, &.active{
          background: #fa9819;
          cursor: pointer;
         .kind {

pages/provider/shop.vue

@@ -14,7 +14,7 @@ export default {
   layout: 'main',
   fetch ({ store }) {
     return Promise.all([
-      store.dispatch('loadBanners', {type: 'Brand'}),
+      store.dispatch('loadBanners', {type: 'factory_banner_carousel'}),
       store.dispatch('provider/loadSalesStore', { isOriginal: true }),
       store.dispatch('provider/loadNewStores', { types: 'ORIGINAL_FACTORY' }),
       store.dispatch('provider/loadRecommendOriginal', { types: 'ORIGINAL_FACTORY', num: 5 }),

store/provider/storeCms.js

@@ -7,10 +7,7 @@ export const state = () => ({
     fetching: false,
     data: []
   },
-  storeCount: {
-    fetching: false,
-    data: 0
-  },
+
   recommendStore: {
     fetching: false,
     data: []
@@ -42,16 +39,6 @@ export const mutations = {
     state.newStores.fetching = false
     state.newStores.data = result
   },
-  REQUEST_STORE_COUNT (state) {
-    state.storeCount.fetching = true
-  },
-  GET_STORE_COUNT_FAILURE (state) {
-    state.storeCount.fetching = false
-  },
-  GET_STORE_COUNT_SUCCESS (state, result) {
-    state.storeCount.fetching = false
-    state.storeCount.data = result
-  },
   REQUEST_RECOMMEND_STORE (state) {
     state.recommendStore.fetching = true
   },

store/provider/stores.js

@@ -2,6 +2,17 @@ export const state = () => ({
   storeList: {
     fetching: false,
     data: {}
+  },
+  originalCount: {
+    fetching: false,
+    data: 0
+  },
+  storeCount: {
+    fetching: false,
+    data: 0
+  },
+  storeType: {
+    data: 'factory'
   }
 })
 
@@ -15,5 +26,28 @@ export const mutations = {
   GET_STORE_LIST_SUCCESS (state, result = {}) {
     state.storeList.fetching = false
     state.storeList.data = result
+  },
+  REQUEST_ORIGINALCOUNT (state) {
+    state.originalCount.fetching = true
+  },
+  GET_ORIGINALCOUNT_FAILURE (state) {
+    state.originalCount.fetching = false
+  },
+  GET_ORIGINALCOUNT_SUCCESS (state, result) {
+    state.originalCount.fetching = false
+    state.originalCount.data = result
+  },
+  REQUEST_STORE_COUNT (state) {
+    state.storeCount.fetching = true
+  },
+  GET_STORE_COUNT_FAILURE (state) {
+    state.storeCount.fetching = false
+  },
+  GET_STORE_COUNT_SUCCESS (state, result) {
+    state.storeCount.fetching = false
+    state.storeCount.data = result
+  },
+  SET_STORETYPE (state, result) {
+    state.storeType.data = result || 'factory'
   }
 }