mall-web-ssr/components/search/SupplierList.vue

<template>
  <div class="search-suppliers-list">
    <ul class="list-inline">
      <li class="clearfix" v-for="item in currentGoods.content" @click="goSup(item)">
        <div class="img">
          <img :src="item.storeLogoUrl || item.enLogoUrl || item.logoUrl || '/images/all/default.png'">
          <!--<span class="has_shop"></span>-->
        </div>
        <div class="content">
          <h3 class="enterprise_name">{{item.enName}}</h3>
          <p>
            <span>企业执照号：</span><span :title="item.enBusinesscode">{{item.enBusinesscode || '暂无信息'}}</span>
            <span class="split_line">|</span>
            <span>地址：</span><span :title="item.enAddress">{{item.enAddress || '暂无信息'}}</span>
          </p>
          <p>
            <!--<span>邮箱：</span><span :title="item.enEmail">{{baseUtils.isEmptyStr(item.enEmail) ? '暂无信息' : item.enEmail}}</span>
            <span class="split_line">|</span>-->
            <span>电话：</span><span :title="item.enTel">{{item.enTel || '暂无信息'}}</span>
            <span class="split_line">|</span>
            <span>行业：</span><span :title="item.enIndustry">{{item.enIndustry || '暂无信息'}}</span>
          </p>
        </div>
        <div class="select_btn">{{resultType === 'current' ? '进入店铺' : '了解详情'}}</div>
      </li>
    </ul>
    <supplier-empty :showObj="showDialogObj"></supplier-empty>
  </div>
</template>
<script>
  import { SupplierEmpty } from '~components/base'
  export default {
    props: {
      resultType: {
        type: String,
        default: 'current'
      }
    },
    components: {
      SupplierEmpty
    },
    data () {
      return {
        showSeekObj: {
          show: false
        },
        productItem: {},
        showDialogObj: {
          show: false
        }
      }
    },
    computed: {
      goods () {
        return this.$store.state.searchData.searchList.listNew.data
      },
      currentGoods () {
        if (this.goods) {
          if (this.resultType === 'current') {
            return this.goods.stock || {}
          } else {
            return this.goods.futures || {}
          }
        } else {
          return {}
        }
      }
    },
    methods: {
      goSup (item) {
        if (this.resultType === 'current') {
          if (item.storeUuid) {
            this.$router.push(`/store/${item.storeUuid}`)
          }
        } else {
          this.$http.get('vendor/introduction/product/count', {params: {vendUU: item.enUU}})
            .then(res => {
              if (res.data.count > 0) {
                this.$router.push('supplier/' + item.enUU)
              } else {
                this.showDialogObj.show = true
              }
            }, err => {
              console.log(err)
            })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  $border: 1px solid #e8e8e8;
  .search-suppliers-list {
    ul{
      margin:0;
      border: {
        left: $border;
        right: $border;
        top: $border;
      }
      li{
        position:relative;
        width:100%;
        vertical-align: top;
        height:112px;
        padding:15px;
        border-bottom: $border;
        .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;
          background: #ecf2fd;
          .content{
            color:#2496f1;
            .enterprise_name{
              color:#2496f1;
            }
            p{
              color:#2496f1;
            }
          }
        }
      }
    }
  }
</style>