btb商务页开发

components/btbBusiness/banner.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="banner">
+    <div class="content">
+      <p class="title" v-if="showAd"><marquee scrollAmount=1 width=501 direction="left" behavior="alternate">B2B商务】和【优软商城】牵手成功！大家可以更全面、便捷地了解和享受平台的各项服务咯!</marquee><a @click="showAd = false"><img src="/images/btbBusiness/close.png"></a></p>
+      <div class="clearfix">
+        <h4 class="pull-left">B2B商务</h4>
+        <a class="pull-left enter">立即体验</a>
+      </div>
+      <p class="first">十年深耕，携您飞跃<br>
+        优软B2B商务，为您提供更强大的功能服务</p>
+      <p>优软平台构造了面向制造业和流通业的垂直B2B，不仅仅提供平台服务，还包括企业内部管理、存货服务、人力资源等。优软平台建立了 生产商与供应商之间形成的供需关系，通过一系列工具辅助供需双方形成交易。这是一个企业集合的云端服务，企业</p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'BannerView',
+    data () {
+        return {
+            showAd: true
+        }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+  .banner{
+    width: 100%;
+    height: 620px;
+    min-width: 1190px;
+    background: url('/images/btbBusiness/btbBanner.png')no-repeat center center;
+    .content{
+      width:1190px;
+      position: relative;
+      border: 1px solid transparent;
+      margin: 0 auto;
+      margin-top: -1px;
+      padding: 0;
+      .title{
+        position: absolute;
+        top: 10px;
+        left: 0px;
+        width: 1190px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 12px;
+        color: #fdfbfb;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 0.18);
+        &::before{
+           content: '';
+           display: inline-block;
+           position: relative;
+           top: 7px;
+           left: 10px;
+           margin-right: 10px;
+           width: 20px;
+           height: 20px;
+           background: url('/images/btbBusiness/alert.png') no-repeat;
+         }
+      }
+      h4{
+        margin: 125px 0px 70px 0px;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 54px;
+        line-height: 40px;
+        letter-spacing: 2px;
+        color: #fff600;
+      }
+      .enter{
+        display: inline-block;
+        padding-left: 21px;
+        margin: 128px 0px 70px 20px;
+        width: 148px;
+        height: 38px;
+        line-height: 38px;
+        background-color: #15d2fc;
+        border-radius: 19px;
+        font-size: 18px;
+        color: #fefefe;
+        font-family: MicrosoftYaHei-Bold;
+        &::after{
+          content: '';
+          display: inline-block;
+          position: relative;
+          top: 4px;
+          left: 15px;
+          width: 20px;
+          height: 20px;
+          background: url('/images/btbBusiness/arrow.png') no-repeat;
+        }
+        &:hover{
+           background: #059ec0;
+        }
+      }
+      p.first{
+        width: 594px;
+        font-size: 30px;
+        letter-spacing: 1px;
+        color: #fcfdfe;
+        line-height: 43px;
+      }
+      p:last-child{
+        width: 582px;
+        font-size: 18px;
+        line-height: 30px;
+        color: #feffff;
+      }
+    }
+  }
+</style>

components/btbBusiness/features.vue

@@ -0,0 +1,413 @@
+<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="search">
+          <div class="input-group">
+            <input type="search" class="form-control" title="code" placeholder="名称/地址/行业"
+                   v-model="searchCode" @keyup.13="goodsSearch(searchCode)" @search="goodsSearch(searchCode)"/>
+            <span class="input-group-btn">
+            <button type="button" class="btn" @click="goodsSearch(searchCode)">&nbsp;查 询</button>
+          </span>
+          </div>
+        </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="info">
+            <p>暂无供应商信息</p>
+            <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+          </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>
+      <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>
+  </div>
+</template>
+
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    name: 'MerchantView',
+    data () {
+      return {
+        hasDialog: false,
+        hasJump: false,
+        searchCode: '',
+        pageParams: {
+          count: 20,
+          page: 1
+        }
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      isInFrame () {
+        if (this.$route.query.type === 'erp') {
+          return true
+        }
+      },
+      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`)
+            .then(res => {
+              if (res.data) {
+                window.open(this.$route.query.localPath + this.$route.query.erpPath + '?b2bdata=' + encodeURIComponent(JSON.stringify(res.data)))
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          this.isVaildSupplier(id)
+        }
+      },
+      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)
+          })
+      },
+      goodsSearch (type) {
+        this.pageParams.page = 1
+        this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
+      },
+      handleCurrentChange (type) {
+        this.pageParams.page = type
+        this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count, keyword: this.searchCode})
+      }
+    }
+  }
+</script>
+
+<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;
+    .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;
+        }
+      }
+    }
+    .top{
+      padding-top:30px;
+      margin-bottom:40px;
+      .title{
+        margin:0 auto;
+        text-align: center;
+        width:215px;
+        border-bottom:1px solid #ff5151;
+        color:#fff;
+        p{
+          margin:0;
+        }
+        h2{
+          font-size: 32px;
+          margin:0;
+          line-height: 46px;
+        }
+        div.count{
+          position: relative;
+          .count_num {
+            position:absolute;
+            top:4px;
+            left:3px;
+            span {
+              display:inline-block;
+              width:29px;
+              text-align: center;
+              font-size: 28px;
+              color:#4a2f01;
+            }
+          }
+        }
+        &:before{
+          content: '';
+          display:block;
+          position:relative;
+          left:55px;
+          top:61px;
+          width:105px;
+          height:1px;
+          background: #ff8a00;
+        }
+        &:after{
+          content: '';
+          display:block;
+          position:relative;
+          left:55px;
+          top:4px;
+          width:105px;
+          height:1px;
+          background: #fff600;
+        }
+      }
+      .search{
+        float:right;
+        width:310px;
+        text-align: right;
+        margin-right:10px;
+        .btn{
+          width:68px;
+          background: #ffa200;
+          color:#fff;
+        }
+      }
+    }
+    .list_info{
+      padding: 0 10px;
+      min-height:300px;
+      margin-bottom:100px;
+      .empty{
+        height:418px;
+        border:15px solid #c4e9f9;
+        background: #eef9fd;
+        padding-top:165px;
+        text-align: center;
+        img{
+          vertical-align: top;
+          margin-right:15px;
+        }
+        .info{
+          display: inline-block;
+          padding-top:10px;
+        }
+      }
+      > ul{
+        margin-left:5px;
+        li{
+          position:relative;
+          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;
+          }
+          .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;
+          }
+          .select_btn{
+            position:absolute;
+            bottom:-10px;
+            left:50%;
+            z-index:250;
+            width:56px;
+            height:56px;
+            padding:10px 0;
+            margin-left:-28px;
+            text-align: center;
+            line-height: 18px;
+            background: #1891e4;
+            border-radius:50%;
+            color:#fff;
+          }
+          &: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;
+              }
+              &:last-child{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/btbBusiness/index.js

@@ -0,0 +1,6 @@
+import Banner from './banner'
+import PlatformService from './service'
+import FiveFeatures from './features'
+import AuxiliaryMeans from './means'
+
+export { Banner, PlatformService, FiveFeatures, AuxiliaryMeans }

components/btbBusiness/means.vue

@@ -0,0 +1,413 @@
+<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="search">
+          <div class="input-group">
+            <input type="search" class="form-control" title="code" placeholder="名称/地址/行业"
+                   v-model="searchCode" @keyup.13="goodsSearch(searchCode)" @search="goodsSearch(searchCode)"/>
+            <span class="input-group-btn">
+            <button type="button" class="btn" @click="goodsSearch(searchCode)">&nbsp;查 询</button>
+          </span>
+          </div>
+        </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="info">
+            <p>暂无供应商信息</p>
+            <a href="javascript:history.go(-1)"><i class="fa fa-reply" style="margin-right:5px;"></i>返回上一页</a>
+          </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>
+      <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>
+  </div>
+</template>
+
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    name: 'MerchantView',
+    data () {
+      return {
+        hasDialog: false,
+        hasJump: false,
+        searchCode: '',
+        pageParams: {
+          count: 20,
+          page: 1
+        }
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      isInFrame () {
+        if (this.$route.query.type === 'erp') {
+          return true
+        }
+      },
+      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`)
+            .then(res => {
+              if (res.data) {
+                window.open(this.$route.query.localPath + this.$route.query.erpPath + '?b2bdata=' + encodeURIComponent(JSON.stringify(res.data)))
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          this.isVaildSupplier(id)
+        }
+      },
+      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)
+          })
+      },
+      goodsSearch (type) {
+        this.pageParams.page = 1
+        this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
+      },
+      handleCurrentChange (type) {
+        this.pageParams.page = type
+        this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count, keyword: this.searchCode})
+      }
+    }
+  }
+</script>
+
+<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;
+    .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;
+        }
+      }
+    }
+    .top{
+      padding-top:30px;
+      margin-bottom:40px;
+      .title{
+        margin:0 auto;
+        text-align: center;
+        width:215px;
+        border-bottom:1px solid #ff5151;
+        color:#fff;
+        p{
+          margin:0;
+        }
+        h2{
+          font-size: 32px;
+          margin:0;
+          line-height: 46px;
+        }
+        div.count{
+          position: relative;
+          .count_num {
+            position:absolute;
+            top:4px;
+            left:3px;
+            span {
+              display:inline-block;
+              width:29px;
+              text-align: center;
+              font-size: 28px;
+              color:#4a2f01;
+            }
+          }
+        }
+        &:before{
+          content: '';
+          display:block;
+          position:relative;
+          left:55px;
+          top:61px;
+          width:105px;
+          height:1px;
+          background: #ff8a00;
+        }
+        &:after{
+          content: '';
+          display:block;
+          position:relative;
+          left:55px;
+          top:4px;
+          width:105px;
+          height:1px;
+          background: #fff600;
+        }
+      }
+      .search{
+        float:right;
+        width:310px;
+        text-align: right;
+        margin-right:10px;
+        .btn{
+          width:68px;
+          background: #ffa200;
+          color:#fff;
+        }
+      }
+    }
+    .list_info{
+      padding: 0 10px;
+      min-height:300px;
+      margin-bottom:100px;
+      .empty{
+        height:418px;
+        border:15px solid #c4e9f9;
+        background: #eef9fd;
+        padding-top:165px;
+        text-align: center;
+        img{
+          vertical-align: top;
+          margin-right:15px;
+        }
+        .info{
+          display: inline-block;
+          padding-top:10px;
+        }
+      }
+      > ul{
+        margin-left:5px;
+        li{
+          position:relative;
+          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;
+          }
+          .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;
+          }
+          .select_btn{
+            position:absolute;
+            bottom:-10px;
+            left:50%;
+            z-index:250;
+            width:56px;
+            height:56px;
+            padding:10px 0;
+            margin-left:-28px;
+            text-align: center;
+            line-height: 18px;
+            background: #1891e4;
+            border-radius:50%;
+            color:#fff;
+          }
+          &: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;
+              }
+              &:last-child{
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/btbBusiness/service.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="service">
+    <div class="container">
+      <div class="top clearfix">
+        <div class="title">
+          <p>Platform service</p>
+          <h2>平台服务</h2>
+        </div>
+      </div>
+      <ul class="content clearfix list-unstyled">
+        <li v-for="(data, index) in serviceData" >
+          <div>
+            <img :src="data.imgUrl">
+          </div>
+          <div>
+            <h2>{{data.chinaName}}</h2>
+            <p>{{data.englishName}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    name: 'PlatformService',
+    data () {
+      return {
+        serviceData: [{
+            imgUrl: '/images/btbBusiness/customer0.png',
+            englishName: 'customer service',
+            chinaName: '客户服务'
+          }, {
+            imgUrl: '/images/btbBusiness/procurement0.png',
+            englishName: 'Procurement management',
+            chinaName: '采购管理'
+          }, {
+            imgUrl: '/images/btbBusiness/sales0.png',
+            englishName: 'Sales management',
+            chinaName: '销售管理'
+          }, {
+            imgUrl: '/images/btbBusiness/subcontract0.png',
+            englishName: 'subcontract',
+            chinaName: '委外加工'
+          }, {
+            imgUrl: '/images/btbBusiness/quality0.png',
+            englishName: 'Quality Control',
+            chinaName: '品质管理'
+          }, {
+            imgUrl: '/images/btbBusiness/financial0.png',
+            englishName: 'Financial docking',
+            chinaName: '财务对接'
+          }]
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      isInFrame () {
+        if (this.$route.query.type === 'erp') {
+          return true
+        }
+      },
+      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`)
+            .then(res => {
+              if (res.data) {
+                window.open(this.$route.query.localPath + this.$route.query.erpPath + '?b2bdata=' + encodeURIComponent(JSON.stringify(res.data)))
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          this.isVaildSupplier(id)
+        }
+      },
+      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)
+          })
+      },
+      goodsSearch (type) {
+        this.pageParams.page = 1
+        this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: type})
+      },
+      handleCurrentChange (type) {
+        this.pageParams.page = type
+        this.$store.dispatch('supplier/loadVendorList', {page: type, size: this.pageParams.count, keyword: this.searchCode})
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+  .service{
+    height: 450px;
+    .container{
+      width: 1190px;
+      margin: 0 auto;
+      .top{
+        padding-top:30px;
+        margin-bottom:50px;
+        .title{
+          margin: 0 auto;
+          text-align: center;
+          width:215px;
+          border-bottom:1px solid #ff7070;
+          p{
+            margin:0;
+            font-family: FZLTXHK;
+            font-size: 14px;
+            color: #666;
+          }
+          h2{
+            font-size: 32px;
+            margin:0;
+            line-height: 46px;
+            color: #333;
+          }
+          &::before{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:61px;
+            width:105px;
+            height:1px;
+            background: #00caff;
+          }
+          &::after{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:4px;
+            width:105px;
+            height:1px;
+            background: #4391f7;
+          }
+        }
+
+      }
+      .content{
+        width: 1096px;
+        margin: 0 auto;
+        li{
+          float: left;
+          width: 225px;
+          margin: 0px 170px 0px 2px;
+          &:nth-child(2), &:nth-child(5) {
+            width: 295px;
+          }
+          &:nth-child(3), &:nth-child(6) {
+           margin-right: 0;
+          }
+          &:nth-child(4), &:nth-child(5), &:nth-child(6) {
+            margin-top: 82px;
+          }
+          div{
+            float: left;
+             h2{
+               margin: 0;
+               position: relative;
+               top: 10px;
+               left: 20px;
+               color: #666;
+               font-size: 20px;
+             }
+             p{
+               margin: 0px;
+               position: relative;
+               top: 12px;
+               left: 20px;
+               font-size: 10px;
+             }
+          }
+        }
+      }
+    }
+  }
+</style>

components/main/Nav.vue

@@ -14,6 +14,10 @@
       <nuxt-link to="/supplier" class="item">
         <span>供应商</span>
       </nuxt-link>
+      <nuxt-link to="/btbBusiness" class="item">
+        <span>B2B商务</span>
+        <img class="new-animate" src="/images/all/hot.png" alt="">
+      </nuxt-link>
       <a class="item expand-item" :class="{'active': isActive}">
         <span>{{name}}
           <i class="iconfont icon-arrow-down"></i>

pages/btbBusiness/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="btb-business">
+    <banner/>
+    <platform-service/>
+    <five-features/>
+    <auxiliary-means/>
+  </div>
+</template>
+<script>
+  import { Banner, PlatformService, FiveFeatures, AuxiliaryMeans } from '~components/btbBusiness'
+  export default {
+    name: 'btbBusiness',
+    layout: 'main',
+    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 })
+      ])
+    },
+    components: {
+      Banner,
+      PlatformService,
+      FiveFeatures,
+      AuxiliaryMeans
+    },
+    methods: {
+      loadProductKinds (id) {
+        this.$store.dispatch('loadAllProductKinds', {id})
+      }
+    }
+  }
+</script>