求购数据绑定

components/applyPurchase/ApplyInfo.vue

@@ -20,60 +20,10 @@
         <span>操作</span>
       </p>
       <ul>
-        <li>
-          <span>2017-10-10&nbsp;11:11</span>
-          <span>158****8888</span>
-          <span>asdasdasdasd</span>
-          <span>panasonic</span>
-          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
-          <span class="number-content"><span>1000</span>&nbsp;条</span>
-          <span class="btn-content">
-            <a>联系买家</a>
-            <a>我要报价</a>
-          </span>
-        </li>
-        <li>
-          <span>2017-10-10&nbsp;11:11</span>
-          <span>158****8888</span>
-          <span>asdasdasdasd</span>
-          <span>panasonic</span>
-          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
-          <span class="number-content"><span>1000</span>&nbsp;条</span>
-          <span class="btn-content">
-            <a>联系买家</a>
-            <a>我要报价</a>
-          </span>
-          <div class="expand-content">
-            <div>
-              生产日期：2017-06-36
-            </div>
-            <div>
-              封装：盘装
-            </div>
-            <div>
-              采购数量：<span>5000</span>个
-            </div>
-            <div>
-              单价预算：<span>￥999</span>
-            </div>
-          </div>
-        </li>
-        <li>
-          <span>2017-10-10&nbsp;11:11</span>
-          <span>158****8888</span>
-          <span>asdasdasdasd</span>
-          <span>panasonic</span>
-          <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
-          <span class="number-content"><span>1000</span>&nbsp;条</span>
-          <span class="btn-content">
-            <a>联系买家</a>
-            <a>我要报价</a>
-          </span>
-        </li>
-        <li>
-          <span>2017-10-10&nbsp;11:11</span>
-          <span>158****8888</span>
-          <span>asdasdasdasd</span>
+        <li v-for="purchaseMan in purchaseManList.content">
+          <span>{{purchaseMan.releaseDate | date}}</span>
+          <span>{{purchaseMan.tel | phone}}</span>
+          <span>{{purchaseMan.code}}</span>
           <span>panasonic</span>
           <span class="date-content"><span>剩余</span><span> 8 </span>天<span> 8 </span>小时</span>
           <span class="number-content"><span>1000</span>&nbsp;条</span>
@@ -84,8 +34,53 @@
         </li>
       </ul>
     </div>
+    <page :total="totalCount" :page-size="pageSize"
+          :current="nowPage" v-on:childEvent="listenPage"></page>
   </div>
 </template>
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    components: {
+      Page
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(Number(input))
+        const year = d.getFullYear()
+        const monthTemp = d.getMonth() + 1
+        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
+        const hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours() + ' '
+        const minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes() + ' '
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
+        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes
+      },
+      phone: function (str) {
+        return str.substring(0, 3) + '****' + str.substring(7, 11)
+      }
+    },
+    computed: {
+      purchaseManList () {
+        return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
+      },
+      totalCount () {
+        return this.purchaseManList.totalElements
+      }
+    },
+    methods: {
+      listenPage: function (page) {
+        this.nowPage = page
+        this.$store.dispatch('applyPurchase/loadPurchaseManList', {page: this.nowPage, count: this.pageSize})
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .apply-info {
     width: 1190px;

components/applyPurchase/PublishApply.vue

@@ -5,25 +5,9 @@
         <img src="/images/applyPurchase/good-purchaser-title.png" alt="">
       </p>
       <ul>
-        <li>
-          <i>1</i>
-          <span>华商龙商务互联科技有限公司</span>
-        </li>
-        <li>
-          <i>2</i>
-          <span>华商龙商务互联科技有限公司</span>
-        </li>
-        <li>
-          <i>3</i>
-          <span>华商龙商务互联科技有限公司</span>
-        </li>
-        <li>
-          <i>4</i>
-          <span>华商龙商务互联科技有限公司</span>
-        </li>
-        <li>
-          <i>5</i>
-          <span>华商龙商务互联科技有限公司</span>
+        <li v-for="(goodMan, index) in goodPurchaseMan.content">
+          <i v-text="index + 1" :style="'background: url(/images/applyPurchase/level-' + getRankBg(index)  + '.png) center no-repeat;'"></i>
+          <span v-text="goodMan.name"></span>
         </li>
       </ul>
     </div>
@@ -131,6 +115,20 @@
     </div>
   </div>
 </template>
+<script>
+  export default {
+    computed: {
+      goodPurchaseMan () {
+        return this.$store.state.applyPurchase.goodPurchaseMan.goodPurchaseMan.data
+      }
+    },
+    methods: {
+      getRankBg: function (index) {
+        return index === 0 ? 1 : index < 3 ? 2 : 3
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .publish-apply {
     background: url('/images/applyPurchase/banner.png') center center/cover no-repeat;
@@ -151,6 +149,7 @@
         height: 55px;
         line-height: 55px;
         background: #3975f4;
+        margin: 0;
       }
       ul {
         padding: 0 22px 0 10px;
@@ -168,7 +167,6 @@
             display: inline-block;
             float: left;
             width: 25px;
-            background: url('/images/applyPurchase/level-1.png') center no-repeat;
             color: #fff;
             font-size: 16px;
             font-style: normal;

components/default/RightBar.vue

@@ -113,15 +113,15 @@
         return this.$store.state.chat.tab.tab.data
       }
     },
-    mounted () {
-      this.$nextTick(() => {
-        this.getChatCount()
-        // 刷新统计信息
-        setInterval(() => {
-          this.getChatCount()
-        }, 10000)
-      })
-    },
+//    mounted () {
+//      this.$nextTick(() => {
+//        this.getChatCount()
+//        // 刷新统计信息
+//        setInterval(() => {
+//          this.getChatCount()
+//        }, 10000)
+//      })
+//    },
     methods: {
       listenPage: function (p) {
         this.page = p

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://192.168.253.60:9090/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://192.168.253.158:8080/platform-b2c/')
 
 module.exports = {
   router: {
@@ -107,5 +107,5 @@ module.exports = {
     ssr: false
   }],
   /* TODO 暂时代理到商城测试版，之后再做出调整 */
-  proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**', '/rate/**', '/log/**', '/help-service/**']
+  proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**', '/rate/**', '/log/**', '/help-service/**', '/seek/**']
 }

pages/applyPurchase/index.vue

@@ -11,6 +11,13 @@
     components: {
       ApplyInfo,
       PublishApply
+    },
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('applyPurchase/loadPurchaseManList', {page: 1, count: 10}),
+        store.dispatch('applyPurchase/loadPurchaseApplyRank'),
+        store.dispatch('applyPurchase/loadGoodPurchaseManList')
+      ])
     }
   }
 </script>

store/applyPurchase.js

@@ -0,0 +1,35 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+// 采购商列表
+  loadPurchaseManList ({ commit }, params = {}) {
+    commit('purchaseManList/REQUEST_PURCHASEMAN')
+    return axios.get('/seek/getSeekPageInfo', params)
+      .then(response => {
+        commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
+      }, err => {
+        commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
+      })
+  },
+  // 求购排行榜
+  loadPurchaseApplyRank ({ commit }, params = {}) {
+    commit('purchaseApplyRank/REQUEST_PURCHASERANK', params)
+    return axios.get(`/seek/getSeekRanking`)
+      .then(response => {
+        commit('purchaseApplyRank/GET_PURCHASERANK_SUCCESS', response.data)
+      }, err => {
+        commit('purchaseApplyRank/GET_PURCHASERANK_FAILURE', err)
+      })
+  },
+  // 优质采购商列表
+  loadGoodPurchaseManList ({ commit }, params = {}) {
+    commit('goodPurchaseMan/REQUEST_GOODPURCHASE')
+    return axios.get('/seek/qualityBuyer/getBuyerPageInfo', params)
+      .then(response => {
+        commit('goodPurchaseMan/GET_GOODPURCHASE_SUCCESS', response.data)
+      }, err => {
+        commit('goodPurchaseMan/GET_GOODPURCHASE_FAILURE', err)
+      })
+  }
+}
+

store/applyPurchase/goodPurchaseMan.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+  goodPurchaseMan: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_GOODPURCHASE (state) {
+    state.goodPurchaseMan.fetching = true
+  },
+  GET_GOODPURCHASE_FAILURE (state) {
+    state.goodPurchaseMan.fetching = false
+  },
+  GET_GOODPURCHASE_SUCCESS (state, result) {
+    state.goodPurchaseMan.fetching = false
+    state.goodPurchaseMan.data = result
+  }
+}
+

store/applyPurchase/purchaseApplyRank.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+  purchaseApplyRank: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PURCHASERANK (state) {
+    state.purchaseApplyRank.fetching = true
+  },
+  GET_PURCHASERANK_FAILURE (state) {
+    state.purchaseApplyRank.fetching = false
+  },
+  GET_PURCHASERANK_SUCCESS (state, result) {
+    state.purchaseApplyRank.fetching = false
+    state.purchaseApplyRank.data = result
+  }
+}
+

store/applyPurchase/purchaseManList.js

@@ -0,0 +1,20 @@
+export const state = () => ({
+  purchaseManList: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PURCHASEMAN (state) {
+    state.purchaseManList.fetching = true
+  },
+  GET_PURCHASEMAN_FAILURE (state) {
+    state.purchaseManList.fetching = false
+  },
+  GET_PURCHASEMAN_SUCCESS (state, result) {
+    state.purchaseManList.fetching = false
+    state.purchaseManList.data = result
+  }
+}
+