mall-web-ssr/components/supplier/merchant.vue

<template>
<div class="merchant">
  <div class="top clearfix">
    <div class="title">
      <span>供应商列表</span>
    </div>
    <div class="search">
      <search-header :outerKeyword="searchCode" :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>
    <ul class="list-inline" v-if="list && list.content">
      <li v-for="item in list.content.slice(0,8)" @click="jumpResource(item.enUU)" class="clearfix">
        <div class="img">
          <img :src="item.storeLogoUrl || item.logoUrl || '/images/all/default.png'">
          <span class="has_shop" v-if="item.isStore === 1"></span>
        </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 class="split_line">|</span>-->
            <span>电话：</span><span v-text="item.enTel ? item.enTel : '暂无信息'">1</span>
            <span class="split_line">|</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>
  <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">
        <a type="button" @click="hasDialog=false">我知道了</a>
      </span>
  </el-dialog>
</div>
</template>

<script>
  import SearchHeader from '~components/common/PcSearchHeader.vue'
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'MerchantView',
    data () {
      return {
        hasDialog: false,
        hasJump: false,
        searchCode: '',
        pageParams: {
          count: 10,
          page: 1
        },
        type: ''
      }
    },
    components: {
      Page,
      SearchHeader
    },
    computed: {
      list () {
        return this.$store.state.supplier.merchant.merchant.data ? this.$store.state.supplier.merchant.merchant.data : []
      }
    },
    methods: {
      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)
          })
      },
      search (type) {
        this.pageParams.page = 1
        this.searchCode = type.keyword
        this.type = type.type && type.type !== 'store' ? type.type : null
        this.handleCurrentChange(1)
      },
      goodsSearch (type) {
        this.searchCode = type
        this.handleCurrentChange(1)
      },
      handleCurrentChange (type) {
        this.pageParams.page = type
        this.$store.dispatch('supplier/loadVendorList', {page: this.pageParams.page, size: this.pageParams.count, keyword: this.searchCode, field: this.type})
      }
    }
  }
</script>

<style type="text/scss" lang="scss">
.merchant{
  border-radius:5px;
  overflow:hidden;
  .el-dialog{
    width: 290px!important;
    .el-dialog__header{
      background: #4290f7;
      line-height: 40px;
      padding: 0 20px 0;
      display:block;
      .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{
    border-bottom:1px solid #d3d3d3;
    background: #fff;
    .title{
      background: #2496f1;
      height: 34px;
      line-height: 34px;
      span{
        margin-left: 10px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
      }
    }
    .search{
      float:right;
      height:50px;
      width:370px;
      padding-top:7px;
      margin-right:10px;
      .search-content-pc input{
        width: 283px !important;
        margin-top: 0!important;
        height: 32px;
        border: 1px solid #2496f1;
        line-height: 32px;
        font-size: 13px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .search-content-pc > ul{
        left:0;
        top: 32px;
        width:283px;
      }
      .btn{
        margin-top: 0!important;
        top: -1px;
        left: -20px;
        width:68px;
        background: #2496f1;
        color:#fff;
      }
      .title{
        width:100%;
        text-align: left;
      }
    }
  }
  .list_info{
    height: 983px;
    background: #fff;
    .empty{
      padding-top:600px;
      text-align: center;
      img{
        vertical-align: top;
        margin-right:15px;
      }
      .supplier-empty-info{
        display: inline-block;
        padding-top:10px;
      }
    }
    > ul{
      margin:0;
      li{
        position:relative;
        width:100%;
        vertical-align: top;
        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;
          }
        }
        .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;
          top:40%;
          right:20px;
          z-index:250;
          padding:5px 10px;
          text-align: center;
          background: #1891e4;
          color:#fff;
          border-radius:3px;
        }
        &:hover{
          cursor:pointer;
          box-shadow: 0 0 5px rgba(0,0,0,.4);
          .content{
            color:#2496f1;
            .enterprise_name{
              color:#2496f1;
            }
            p{
              color:#2496f1;
            }
          }
        }
      }
    }
  }
}
</style>