供应商数量显示

components/supplier/merchant.vue

@@ -5,6 +5,12 @@
       <div class="title">
         <p>High quality dealer</p>
         <h2>供应商列表</h2>
+        <div class="count">
+          <img src="/images/supplier/count.png" alt=""/>
+          <span v-for="(spCount, index) in all" :class="'_c' + index">
+          {{spCount}}
+          </span>
+        </div>
       </div>
       <div class="search">
         <div class="input-group">
@@ -85,9 +91,28 @@
       },
       list () {
         return this.$store.state.supplier.merchant.merchant.data
+      },
+      all () {
+        let count = this.$store.state.supplier.merchant.merchantAll.data
+        let supplierCount = count.content ? count.totalElements + '' : '00000'
+        // console.log(this.formatNumber(supplierCount))
+        return this.formatNumber(supplierCount)
       }
     },
     methods: {
+      // 供应商数字格式转换
+      formatNumber (num) {
+        let _arr = []
+        for (var i = 0; i < num.length; i++) {
+          _arr.push(num[i])
+        }
+        if (_arr.length < 5) {
+          for (let j = _arr.length; j < 5; j++) {
+            _arr.unshift('0')
+          }
+        }
+        return _arr
+      },
       addResource (id) {
         if (this.isInFrame) {
           this.$http.get(`/basic/enterprise /${id}/info`)
@@ -199,6 +224,33 @@
         margin:0;
         line-height: 46px;
       }
+      div.count{
+        position: relative;
+        span {
+          font-size: 28px;
+          color: #4a2f01;
+          position: absolute;
+          top: 5px;
+          &:first-child(1){
+            left: 7px;
+          }
+          &:nth-child(2){
+            left: 7px;
+          }
+          &:nth-child(3){
+            left: 37px;
+          }
+          &:nth-child(4){
+            left: 67px;
+          }
+          &:nth-child(5){
+            left: 97px;
+          }
+          &:nth-child(6){
+            left: 127px;
+          }
+        }
+      }
       &:before{
         content: '';
         display:block;

pages/supplier/index.vue

@@ -17,6 +17,7 @@
     fetch ({store}) {
       return Promise.all([
         store.dispatch('supplier/loadVendorList', {page: 1, size: 20}),
+        store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
         store.dispatch('loadBanners', {type: 'home'}),
         store.dispatch('loadProductKinds', { id: 0 })
       ])

store/supplier.js

@@ -41,6 +41,16 @@ export const actions = {
         commit('merchant/GET_MERCHANT_FAILURE', err)
       })
   },
+  // 获取供应商展示列表总数
+  loadVendorAll ({commit}, params) {
+    commit('merchant/REQUEST_MERCHANTALL')
+    return axios.get('/vendor/introduction/vendor/list', {params})
+      .then(res => {
+        commit('merchant/GET_MERCHANTALL_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_MERCHANTALL_FAILURE', err)
+      })
+  },
   // 获取供应商物料列表
   loadMaterialList ({commit}, params = {}) {
     commit('material/REQUEST_MATERIAL')

store/supplier/merchant.js

@@ -2,6 +2,10 @@ export const state = () => ({
   merchant: {
     fetching: false,
     data: []
+  },
+  merchantAll: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -15,5 +19,15 @@ export const mutations = {
   },
   GET_MERCHANT_FAILURE (state) {
     state.merchant.fetching = false
+  },
+  REQUEST_MERCHANTALL (state) {
+    state.merchantAll.fetching = true
+  },
+  GET_MERCHANTALL_SUCCESS (state, result) {
+    state.merchantAll.fetching = false
+    state.merchantAll.data = result
+  },
+  GET_MERCHANTALL_FAILURE (state) {
+    state.merchantAll.fetching = false
   }
 }