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

<template>
  <div class="supplier_two">
    <div class="title">
      <span>供应商推荐</span>
    </div>
    <ul class="list-unstyled">
      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
        <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>
</template>

<script>
  export default {
    data () {
      return {
        hasDialog: false
      }
    },
    computed: {
      list () {
        return 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_two{
    position:relative;
    border:1px solid #ccc;
    border-radius:5px;
    padding-bottom:5px;
    margin-bottom:15px;
    background: #fff;
    min-height:300px;
    .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;
        }
      }
    }
    .title{
      height:35px;
      text-align: center;
      background: #2496f1;
      margin-bottom:5px;
      span{
        line-height: 35px;
        font-size: 18px;
        color:#fff;
      }
    }
    ul{
      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>