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

<template>
  <div class="supplier-show">
    <div class="supplier-list">
      <template>
        <article-one/>
      </template>
      <div class="supplier_two">
        <div class="title">
          <span>供应商推荐</span>
        </div>
        <div class="empty" v-if="!list.content || list.content.length === 0">
          <div class="supplier-empty-info">
            <p>暂无供应商推荐信息</p>
          </div>
        </div>
        <ul class="list-unstyled" v-if="list && list.content">
          <li v-for="item in list.content.slice(0,10)" @click="jumpResource(item.uu)">
            <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>
    </div>
    <div class="supplier-table">
      <merchant-view/>
    </div>
  </div>
</template>

<script>
  import MerchantView from '~components/supplier/merchant.vue'
  import ArticleOne from '~components/supplier/articleOne.vue'
  export default {
    data () {
      return {
        hasDialog: false
      }
    },
    components: {
      MerchantView,
      ArticleOne,
    },
    computed: {
      list () {
        return this.$store.state.supplier.merchant.recommend.data ? 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-show {
    overflow: hidden;
    .supplier-list {
      float: left;
      margin-right: 15px;
      width: 220px;
    }
    .supplier-table {
      float: left;
      width: 955px;
    }
  }
  .supplier_two{
    position:relative;
    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;
        }
      }
    }
    .title{
      height: 34px;
      line-height: 34px;
      text-align: center;
      background-color: #2496f1;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      span{
        line-height: 35px;
        font-size: 14px;
        font-weight: bold;
        color:#fff;
      }
    }
    .empty{
      padding-top:30px;
      text-align: center;
      .supplier-empty-info{
       font-size: 14px;
      }
    }
    > ul{
      padding-top: 17px;
      border-radius:5px;
      background: #fff;
      height: 614px;
      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>