mall-web-ssr/components/btbBusiness/service.vue

<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>