处理供应商页面的优化

components/supplier/articleOne.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="supplier_one">
+    <div class="count">
+      已入驻 <span v-text="all"></span>
+    </div>
+    <ul class="list-unstyled">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
+        <div class="content_name" v-text="item.storeName">深圳英优软科技有限公司</div>
+      </li>
+    </ul>
+    <el-dialog
+      title="提示"
+      :visible.sync="hasDialog ">
+      <div class="form_dialog">
+        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <a type="button" @click="hasDialog=false">我知道了</a>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        hasDialog: false
+      }
+    },
+    computed: {
+      list () {
+        console.log('newMerchant', this.$store.state.supplier.merchant.newMerchant.data)
+        return this.$store.state.supplier.merchant.newMerchant.data
+      },
+      all () {
+        let count = this.$store.state.supplier.merchant.merchantAll.data
+        let supplierCount = count.content ? '00000' + count.totalElements : '00000'
+        return supplierCount.substr(-5)
+      }
+    },
+    methods: {
+      jumpResource (id) {
+        if (!this.hasJump) {
+          this.isVaildSupplier(id)
+        }
+      },
+      // 判断是否有有效物料信息
+      isVaildSupplier (id) {
+        this.$http.get('vendor/introduction/product/count', {params: {vendUU: id}})
+          .then(res => {
+            if (res.data.count !== 0) {
+              this.$router.push('supplier/' + id)
+            } else {
+              this.hasDialog = true
+            }
+          }, err => {
+            console.log(err)
+          })
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+.supplier_one{
+  position:relative;
+  border:1px solid #ccc;
+  padding-top:90px;
+  border-radius:5px;
+  padding-bottom:5px;
+  margin-bottom:15px;
+  background: #fff;
+  min-height:400px;
+  .el-dialog{
+    width: 290px!important;
+    .el-dialog__header{
+      background: #4290f7;
+      line-height: 40px;
+      padding: 0 20px 0;
+      .el-dialog__title{
+        color:#fff;
+      }
+      .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
+        color:#fff;
+      }
+    }
+    .el-dialog__body{
+      padding: 10px 20px;
+    }
+    .el-dialog__footer{
+      text-align: center;
+      a{
+        display:inline-block;
+        background: #3c7cf5;
+        color:#fff;
+        font-size: 14px;
+        line-height: 30px;
+        height:30px;
+        padding:0 10px;
+        border-radius:5px;
+      }
+    }
+  }
+  .form_dialog{
+    p{
+      width:200px;
+      font-size: 14px;
+      color:#666666;
+      margin:0 auto;
+      padding-top:5px;
+      line-height: 20px;
+      span{
+        color:#eb6054;
+      }
+    }
+  }
+  &:before{
+    content: '';
+    position:absolute;
+    top:0;
+    left:0;
+    display:block;
+    width:100%;
+    height:92px;
+    background: url(/images/supplier/header_img.png)no-repeat center center
+  }
+  .count{
+    text-align: center;
+    font-size: 25px;
+    color:#2496f1;
+    font-weight: bold;
+    margin-bottom:5px;
+  }
+  ul{
+    li{
+      position:relative;
+      padding: 0 18px 0 20px;
+      line-height: 25px;
+      height:25px;
+      color:#666;
+      overflow: hidden;
+      &:before{
+        content: '';
+        position:absolute;
+        top: 12px;
+        left: 7px;
+        display:block;
+        width:5px;
+        height:5px;
+        line-height: 30px;
+        background: #2496f1;
+      }
+      &:hover{
+        cursor:pointer;
+        color:#2496f1;
+      }
+      .content_name{
+        width:180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space:nowrap;
+      }
+    }
+  }
+}
+</style>

components/supplier/articleTwo.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="supplier_two">
+    <div class="title">
+      <span>供应商推荐</span>
+    </div>
+    <ul class="list-unstyled">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
+        <div class="img">
+          <img :src="item.enLogoUrl || '/images/all/default.png'">
+        </div>
+        <div class="content_name" v-text="item.enName">深圳英优软科技有限公司</div>
+      </li>
+    </ul>
+    <el-dialog
+      title="提示"
+      :visible.sync="hasDialog ">
+      <div class="form_dialog">
+        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <a type="button" @click="hasDialog=false">我知道了</a>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        hasDialog: false
+      }
+    },
+    computed: {
+      list () {
+        console.log('recommend', this.$store.state.supplier.merchant.recommend.data)
+        return this.$store.state.supplier.merchant.recommend.data
+      }
+    },
+    methods: {
+      jumpResource (id) {
+        if (!this.hasJump) {
+          this.isVaildSupplier(id)
+        }
+      },
+      // 判断是否有有效物料信息
+      isVaildSupplier (id) {
+        this.$http.get('vendor/introduction/product/count', {params: {vendUU: id}})
+          .then(res => {
+            if (res.data.count !== 0) {
+              this.$router.push('supplier/' + id)
+            } else {
+              this.hasDialog = true
+            }
+          }, err => {
+            console.log(err)
+          })
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+  .supplier_two{
+    position:relative;
+    border:1px solid #ccc;
+    border-radius:5px;
+    padding-bottom:5px;
+    margin-bottom:15px;
+    background: #fff;
+    min-height:300px;
+    .el-dialog{
+      width: 290px!important;
+      .el-dialog__header{
+        background: #4290f7;
+        line-height: 40px;
+        padding: 0 20px 0;
+        .el-dialog__title{
+          color:#fff;
+        }
+        .el-dialog__headerbtn:hover .el-dialog__close, .el-dialog__headerbtn:focus .el-dialog__close{
+          color:#fff;
+        }
+      }
+      .el-dialog__body{
+        padding: 10px 20px;
+      }
+      .el-dialog__footer{
+        text-align: center;
+        a{
+          display:inline-block;
+          background: #3c7cf5;
+          color:#fff;
+          font-size: 14px;
+          line-height: 30px;
+          height:30px;
+          padding:0 10px;
+          border-radius:5px;
+        }
+      }
+    }
+    .form_dialog{
+      p{
+        width:200px;
+        font-size: 14px;
+        color:#666666;
+        margin:0 auto;
+        padding-top:5px;
+        line-height: 20px;
+        span{
+          color:#eb6054;
+        }
+      }
+    }
+    .title{
+      height:35px;
+      text-align: center;
+      background: #2496f1;
+      margin-bottom:5px;
+      span{
+        line-height: 35px;
+        font-size: 18px;
+        color:#fff;
+      }
+    }
+    ul{
+      li{
+        position:relative;
+        padding: 0 10px;
+        line-height: 50px;
+        height:50px;
+        color:#666;
+        overflow: hidden;
+        margin-bottom:10px;
+        &:hover{
+          cursor:pointer;
+          color:#2496f1;
+        }
+        .img{
+          float:left;
+          width:50px;
+          height:50px;
+          vertical-align: middle;
+          border:1px solid #ccc;
+          img{
+            width:100%;
+            height:100%;
+            vertical-align: top;
+          }
+        }
+        .content_name{
+          margin-left:60px;
+          width:140px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space:nowrap;
+        }
+      }
+    }
+  }
+</style>

components/supplier/banner.vue

@@ -10,7 +10,8 @@
 
 <style type="text/scss" lang="scss" scoped>
 .banner{
-  height:470px;
-  background: url(/images/supplier/bgImg.jpg)no-repeat center center
+  height:400px;
+  background: url(/images/supplier/banner.png)no-repeat center center;
+  margin-bottom:15px;
 }
 </style>

components/supplier/index.js

@@ -2,5 +2,7 @@ import MerchantView from './merchant'
 import Resource from './resource'
 import DetailsView from './details'
 import Banner from './banner'
+import ArticleOne from './articleOne'
+import ArticleTwo from './articleTwo'
 
-export { MerchantView, Resource, DetailsView, Banner }
+export { MerchantView, Resource, DetailsView, Banner, ArticleOne, ArticleTwo }

components/supplier/merchant.vue

@@ -1,66 +1,59 @@
 <template>
 <div class="merchant">
-  <div class="container">
-    <div class="top clearfix">
-      <div class="title">
-        <p>High quality dealer</p>
-        <h2>供应商列表</h2>
-       <!-- <div class="count">
-          <img src="/images/supplier/count.png" alt=""/>
-          <div class="count_num">
-            <span v-for="spCount in all" v-text="spCount"></span>
-          </div>
-        </div>-->
-      </div>
-       <div class="count">
-          <img src="/images/supplier/count1.png" alt=""/>
-          <div class="count_num">
-            <span v-for="spCount in all" v-text="spCount"></span>
-          </div>
-        </div>
-      <div class="search">
-        <search-header :outerKeyword="searchCode" :similarUrl="similarUrl" :type="'supplier'" @searchAction="search" :placeholder="'品牌/类目/型号/公司名'"></search-header>
+  <div class="top clearfix">
+    <div class="title">
+      <span>供应商列表</span>
+    </div>
+    <div class="search">
+      <search-header :outerKeyword="searchCode" :similarUrl="similarUrl" :type="'supplier'" @searchAction="search" :placeholder="'品牌/类目/型号/公司名'"></search-header>
+    </div>
+  </div>
+  <div class="list_info">
+    <div class="empty" v-if="!list.content || list.content.length === 0">
+      <img src="/images/supplier/icon/empty.png">
+      <div class="supplier-empty-info">
+        <p>暂无供应商信息</p>
+        <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
       </div>
     </div>
-    <div class="list_info">
-      <div class="empty" v-if="!list.content || list.content.length === 0">
-        <img src="/images/supplier/icon/empty.png">
-        <div class="supplier-empty-info">
-          <p>暂无供应商信息</p>
-          <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+    <ul class="list-inline">
+      <li v-for="item in list.content" @click="jumpResource(item.enUU)" class="clearfix">
+        <div class="img">
+          <img :src="item.logoUrl || '/images/all/default.png'">
+          <span class="has_shop" v-if="item.isStore === 1"></span>
         </div>
-      </div>
-      <ul class="list-inline">
-        <li v-for="item in list.content" @click="jumpResource(item.enUU)">
-          <div class="has_shop" v-if="item.isStore === 1">已开店</div>
-          <div class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</div>
-          <div class="select_btn" v-html="isInFrame ? '添加为<br/>供应商' : '查看<br/>更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
-          <div class="popups">
-            <p>企业执照号：</p><p v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</p>
-            <p>地址：</p><p v-text="item.enAddress ? item.enAddress : '暂无信息'">1</p>
-            <p>邮箱：</p><p v-text="item.enEmail ? item.enEmail : '暂无信息'">h</p>
-            <p>电话：</p><p v-text="item.enTel ? item.enTel : '暂无信息'">1</p>
-            <p>行业：</p><p v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</p>
-          </div>
-        </li>
-      </ul>
-      <div style="float: right;">
-        <page :total="list.totalElements" :page-size="pageParams.count"
-              :current="pageParams.page" v-on:childEvent="handleCurrentChange">
-        </page>
-      </div>
+        <div class="content">
+          <h3 class="enterprise_name" v-text="item.enName">深圳英优软科技有限公司</h3>
+          <p>
+            <span>企业执照号：</span><span v-text="item.enBusinesscode ? item.enBusinesscode : '暂无信息'">1</span>
+            <span class="split_line">|</span>
+            <span>地址：</span><span v-text="item.enAddress ? item.enAddress : '暂无信息'">1</span>
+          </p>
+          <p>
+            <span>邮箱：</span><span v-text="item.enEmail ? item.enEmail : '暂无信息'">h</span>
+            <span>电话：</span><span v-text="item.enTel ? item.enTel : '暂无信息'">1</span>
+            <span>行业：</span><span v-text="item.enIndustry ? item.enIndustry : '暂无信息'">1</span>
+          </p>
+        </div>
+        <div class="select_btn" v-html="isInFrame ? '+ 添加为供应商' : '+ 查看更多'" @mouseleave="hasJump = false" @mouseenter="hasJump = true" @click="addResource(item.enUU)"></div>
+      </li>
+    </ul>
+    <div style="float: right;">
+      <page :total="list.totalElements" :page-size="pageParams.count"
+            :current="pageParams.page" v-on:childEvent="handleCurrentChange">
+      </page>
     </div>
-    <el-dialog
-      title="提示"
-      :visible.sync="hasDialog ">
-      <div class="form_dialog">
-        <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
-      </div>
-      <span slot="footer" class="dialog-footer">
+  </div>
+  <el-dialog
+    title="提示"
+    :visible.sync="hasDialog ">
+    <div class="form_dialog">
+      <p><span>供应商正在完善产品信息，</span>暂时不能查看更多。 </p>
+    </div>
+    <span slot="footer" class="dialog-footer">
         <a type="button" @click="hasDialog=false">我知道了</a>
       </span>
-    </el-dialog>
-  </div>
+  </el-dialog>
 </div>
 </template>
 
@@ -75,7 +68,7 @@
         hasJump: false,
         searchCode: '',
         pageParams: {
-          count: 20,
+          count: 10,
           page: 1
         },
         similarUrl: '/search/product/similarKeywords',
@@ -89,23 +82,9 @@
     computed: {
       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'
-        return this.formatNumber(supplierCount, 5)
       }
     },
     methods: {
-      // 供应商数字格式转换
-      formatNumber (num, key) {
-        let count = ('00000' + num).substr(-key)
-        let _arr = []
-        for (var i = 0; i < count.length; i++) {
-          _arr.push(count[i])
-        }
-        return _arr
-      },
       addResource (id) {
         if (this.isInFrame) {
           this.$http.get(`/basic/enterprise /${id}/info`)
@@ -159,10 +138,10 @@
 
 <style type="text/scss" lang="scss">
 .merchant{
-  background: #ecf1f1 url(/images/supplier/banner.jpg)no-repeat;
-  border-top:3px solid #000;
   padding-bottom:25px;
-  margin-top:-1.5em;
+  border-radius:5px;
+  overflow:hidden;
+  background: #fff;
   .el-dialog{
     width: 290px!important;
     .el-dialog__header{
@@ -207,72 +186,26 @@
     }
   }
   .top{
-    padding-top:30px;
-    margin-bottom:40px;
+    border-bottom:1px solid #d3d3d3;
     .title{
-      margin:0 auto;
-      text-align: center;
-      width:215px;
-      border-bottom:1px solid #ff5151;
-      color:#fff;
-      padding-bottom: 3px;
-      p{
-        margin:0;
-      }
-      h2{
-        font-size: 32px;
-        margin:0;
-        line-height: 46px;
-      }
-      &:before{
-        content: '';
-        display:block;
-        position:relative;
-        left:55px;
-        top:63px;
-        width:105px;
-        height:1px;
-        background: #ff8a00;
-      }
-      &:after{
-        content: '';
-        display:block;
-        position:relative;
-        left:55px;
-        top:8px;
-        width:105px;
-        height:1px;
-        background: #fff600;
-      }
-    }
-    .count{
-      position: relative;
-      width: 200px;
-      margin: 20px auto;
-      margin-bottom: 0px;
-      .count_num {
-        position:absolute;
-        top: 9px;
-        left: 24px;
-        span {
-          display:inline-block;
-          text-align: center;
-          width: 20px;
-          font-size: 28px;
-          color: #0066e4;
-          font-family: "Microsoft Yahei", "微软雅黑";
-          font-weight: bold;
-        }
+      background: #2496f1;
+      height:35px;
+      line-height: 35px;
+      span{
+        margin-left:10px;
+        font-size: 18px;
+        color:#fff;
       }
     }
     .search{
       float:right;
+      height:50px;
       width:370px;
-      padding-top:50px;
+      padding-top:7px;
       margin-right:10px;
       .btn{
         width:68px;
-        background: #ffa200;
+        background: #2496f1;
         color:#fff;
       }
       .title{
@@ -282,9 +215,7 @@
     }
   }
   .list_info{
-    padding: 0 10px;
-    min-height:300px;
-    margin-bottom:100px;
+    margin-bottom:50px;
     .empty{
       height:418px;
       border:15px solid #c4e9f9;
@@ -301,122 +232,88 @@
       }
     }
     > ul{
-      margin-left:5px;
+      margin:0;
       li{
         position:relative;
+        width:100%;
         vertical-align: top;
-        width:267px;
-        height:115px;
-        border-radius:5px;
-        margin-right:32px;
-        margin-bottom:60px;
-        background: #ffffff;
-        box-shadow: 0 3px 10px rgba(0,0,0,.8);
-        &:nth-child(4n) {
-          margin-right:0;
-        }
-        &:after{
-          content: '';
-          display:block;
-          position:absolute;
-          top:99%;
-          left:50%;
-          z-index:200;
-          width:88px;
-          height:22px;
-          margin-left:-44px;
-          background: url(/images/supplier/icon/bottom_center_img.png)no-repeat;
-        }
-        .has_shop {
-          position:absolute;
-          right:0;
-          top:0;
-          width:68px;
-          height:22px;
-          background: url(/images/supplier/icon/top_right_img.png)no-repeat;
-          color:#fff;
-          font-weight: bold;
-          text-align: center;
-          line-height: 22px;
+        height:112px;
+        padding:15px;
+        border-bottom:1px solid #d3d3d3;
+        .img{
+          position:relative;
+          float:left;
+          width:80px;
+          height:80px;
+          border:1px solid #ccc;
+          img{
+            width:100%;
+            height:100%;
+            vertical-align: top;
+          }
+          .has_shop {
+            position:absolute;
+            left:0;
+            top:0;
+            width:68px;
+            height:22px;
+            background: url(/images/supplier/icon/top_left.png)no-repeat;
+            color:#fff;
+            font-weight: bold;
+            text-align: center;
+            line-height: 22px;
+          }
         }
-        .enterprise_name{
-          padding-top:15px;
-          width:98%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space:nowrap;
-          border-bottom:1px solid #b9def7;
-          font-weight: bold;
-          color:#1891e4;
-          font-size: 18px;
-          line-height: 48px;
-          text-align: center;
+        .content{
+          margin-left:100px;
+          color:#333;
+          padding-top:2px;
+          .enterprise_name{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-weight: bold;
+            color:#333;
+            font-size: 16px;
+            margin:0 0 10px;
+          }
+          p{
+            width:690px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space:nowrap;
+            font-size: 14px;
+            color:#333;
+            margin:0 0 5px;
+            span{
+              &.split_line{
+                margin:0 5px;
+              }
+            }
+          }
         }
         .select_btn{
           position:absolute;
-          bottom:-10px;
-          left:50%;
+          top:40%;
+          right:20px;
           z-index:250;
-          width:56px;
-          height:56px;
-          padding:10px 0;
-          margin-left:-28px;
+          padding:5px 10px;
           text-align: center;
-          line-height: 18px;
           background: #1891e4;
-          border-radius:50%;
           color:#fff;
+          border-radius:3px;
         }
         &:hover{
           cursor:pointer;
-          .popups{
-            top:99%;
-            opacity:1;
-            z-index:100;
-          }
-        }
-        .popups{
-          position:absolute;
-          top:50px;
-          left:0;
-          background: #6c6c6c;
-          width:267px;
-          min-height:20px;
-          padding:20px 15px 5px 10px;
-          transition: all .5s ease;
-          opacity: 0;
-          color:#fff;
-          overflow: hidden;
-          p{
-            float:left;
-            margin: 0 !important;
-            line-height: 18px;
-            max-height:18px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            &:nth-child(2n-1){
-              width:42px;
-            }
-            &:first-child{
-              width:85px;
-            }
-            &:nth-child(2n){
-              width:200px;
-            }
-            &:nth-child(2){
-              width:155px;
-            }
-            &:nth-child(4){
-              max-height:38px;
-              overflow: hidden;
-              white-space:pre-wrap;
-              word-wrap:break-word;
+          box-shadow: 0 0 5px rgba(0,0,0,.8);
+          .content{
+            color:#2496f1;
+            .enterprise_name{
+              color:#2496f1;
             }
-            &:last-child{
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
+            p{
+              color:#2496f1;
             }
           }
         }

pages/supplier/index.vue

@@ -1,23 +1,33 @@
 <template>
-  <div class="supplier">
-    <!--<carousel>-->
-      <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
-    <!--</carousel>-->
-    <banner/>
-    <merchant-view/>
+  <div class="supplier" style="background: #f2f1f1;padding-top:20px; margin-top:-20px;">
+    <div class="container">
+      <div class="article">
+        <article-one></article-one>
+        <article-two></article-two>
+      </div>
+      <div class="section">
+        <banner/>
+        <!--<carousel>-->
+        <!--<kind-category @loadchild="loadProductKinds"></kind-category>-->
+        <!--</carousel>-->
+        <merchant-view/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   import { KindCategory, Carousel } from '~components/home'
-  import { MerchantView, Banner } from '~components/supplier'
+  import { MerchantView, Banner, ArticleOne, ArticleTwo } from '~components/supplier'
   export default {
     name: 'SupplierView',
     layout: 'main',
     fetch ({store}) {
       return Promise.all([
-        store.dispatch('supplier/loadVendorList', {page: 1, size: 20}),
+        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: 10}),
         store.dispatch('loadBanners', {type: 'home'}),
         store.dispatch('loadProductKinds', { id: 0 })
       ])
@@ -26,7 +36,9 @@
       KindCategory,
       Carousel,
       MerchantView,
-      Banner
+      Banner,
+      ArticleOne,
+      ArticleTwo
     },
     methods: {
       loadProductKinds (id) {

store/supplier.js

@@ -89,5 +89,25 @@ export const actions = {
       }, (err) => {
         commit('material/GET_ENUSER_FAILURE', err)
       })
+  },
+  // 获取新入驻供应商列表
+  loadNewMerchant ({commit}, params = {}) {
+    commit('merchant/REQUEST_NEWMERCHANT')
+    return axios.get(`/api/store-service/stores`, {params})
+      .then(res => {
+        commit('merchant/GET_NEWMERCHANT_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_NEWMERCHANT_FAILURE', err)
+      })
+  },
+  // 获取供应商推荐列表
+  loadRecommend ({commit}, params = {}) {
+    commit('merchant/REQUEST_RECOMMEND')
+    return axios.get(`/vendor/introduction/vendor/recommend`, {params})
+      .then(res => {
+        commit('merchant/GET_RECOMMEND_SUCCESS', res.data)
+      }, (err) => {
+        commit('merchant/GET_RECOMMEND_FAILURE', err)
+      })
   }
 }

store/supplier/merchant.js

@@ -1,11 +1,23 @@
 export const state = () => ({
+  // 供应商列表信息
   merchant: {
     fetching: false,
     data: []
   },
+  // 供应商入驻总数
   merchantAll: {
     fetching: false,
     data: []
+  },
+  // 供应商新入驻列表
+  newMerchant: {
+    fetching: false,
+    data: []
+  },
+  // 供应商推荐列表
+  recommend: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -29,5 +41,25 @@ export const mutations = {
   },
   GET_MERCHANTALL_FAILURE (state) {
     state.merchantAll.fetching = false
+  },
+  REQUEST_NEWMERCHANT (state) {
+    state.newMerchant.fetching = true
+  },
+  GET_NEWMERCHANT_SUCCESS (state, result) {
+    state.newMerchant.fetching = false
+    state.newMerchant.data = result
+  },
+  GET_NEWMERCHANT_FAILURE (state) {
+    state.newMerchant.fetching = false
+  },
+  REQUEST_RECOMMEND (state) {
+    state.recommend.fetching = true
+  },
+  GET_RECOMMEND_SUCCESS (state, result) {
+    state.recommend.fetching = false
+    state.recommend.data = result
+  },
+  GET_RECOMMEND_FAILURE (state) {
+    state.recommend.fetching = false
   }
 }