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

<template>
  <div class="supplier_one">
    <div class="count">
      已入驻 <span v-text="all"></span>
    </div>
    <ul class="list-unstyled">
      <li v-for="item in list.content" @click="jumpResource(item.enUU)">
        <div class="content_name" v-text="item.storeName">深圳英优软科技有限公司</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.newMerchant.data
      },
      all () {
        let count = this.$store.state.supplier.merchant.merchantAll.data
        let supplierCount = count.content ? '00000' + count.totalElements : '00000'
        return supplierCount.substr(-5)
      }
    },
    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_one{
  position:relative;
  border:1px solid #ccc;
  padding-top:90px;
  border-radius:5px;
  padding-bottom:5px;
  margin-bottom:15px;
  background: #fff;
  min-height:400px;
  .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;
      }
    }
  }
  &:before{
    content: '';
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:92px;
    background: url(/images/supplier/header_img.png)no-repeat center center
  }
  .count{
    text-align: center;
    font-size: 25px;
    color:#2496f1;
    font-weight: bold;
    margin-bottom:5px;
  }
  ul{
    li{
      position:relative;
      padding: 0 18px 0 20px;
      line-height: 25px;
      height:25px;
      color:#666;
      overflow: hidden;
      &:before{
        content: '';
        position:absolute;
        top: 12px;
        left: 7px;
        display:block;
        width:5px;
        height:5px;
        line-height: 30px;
        background: #2496f1;
      }
      &:hover{
        cursor:pointer;
        color:#2496f1;
      }
      .content_name{
        width:180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
      }
    }
  }
}
</style>