mall-web-ssr/components/pcb/home/EnterpriseInfo.vue

<template>
  <div id="recommend-fragment-self">
    <div class="recommend-product">
      <ul class="main-list clearfix">
        <li>
          <div>
            <div class="introduce">
              <div><h4>企业简介</h4></div>
              <p class="intro-content" v-if="storeInfo.enterprise">
                <span class="info" v-text="getIntro(storeInfo.enterprise.description)"></span>
                <span class="look" @click="dialogVisible = true" v-if="showMore">查看更多 <img src="/images/store/home/angle-right.png" style="margin-top:-2px;"></span>
              </p>
              <p v-else class="empty-introduce">暂无简介</p>
            </div>
            <div class="introduce qualification">
              <div><h4 class="prof">资质证明</h4><span @click="dialogCertificate = true">查看 <img src="/images/store/home/angle-right.png"></span></div>
            </div>
            <div class="product-show">
              <recommend-pcb></recommend-pcb>
            </div>
          </div>
        </li>
        <li>
          <div style="width: 962px; margin-left: 3px;">
            <commodity-list :kindIds="kindIds" :kindItem="kindItem"></commodity-list>
          </div>
        </li>
      </ul>
      <div class="remind-area">
        <img src="/images/store/store-remind.png" alt="">
        所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
        <a @click="goLink" class="link-seller">联系卖家</a>
      </div>
    </div>
    <!--企业简介-->
    <el-dialog class="dialog-description"
               :visible.sync="dialogVisible"
               size="tiny">
      <div>
        <div class="header">
          <span><img src="/images/store/home/blue.png">企业简介</span>
          <span class="close" @click="dialogVisible = false">&times;</span>
        </div>
        <div class='content'>
          <p v-if="storeInfo.enterprise">{{storeInfo.enterprise.description}}</p>
          <p v-else class="empty-introduce">暂无简介</p>
        </div>
      </div>
    </el-dialog>
    <!--资质证明-->
    <el-dialog class="dialog-description certificate"
               :visible.sync="dialogCertificate"
               size="tiny">
      <div>
        <div class="header">
          <span><img src="/images/store/home/blue.png">资质证明</span>
          <span class="close" @click="dialogCertificate = false">&times;</span></div>
        <div class="content" style="height: 270px; width: 1070px; padding: 0 50px;"><qualification-certificate></qualification-certificate></div>
      </div>
    </el-dialog>
    <!--联系卖家-->
    <link-saler-box
      :tel="tel"
      v-if="showLinkBox"
      @cancelAction="showLinkBox = false">
    </link-saler-box>
  </div>
</template>
<script>
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import RecommendPcb from './RecommendPcb.vue'
  import CommodityList from './CommodityList.vue'
  import QualificationCertificate from './QualificationCertificate.vue'
  import LinkSalerBox from '~components/common/LinkSalerBox.vue'
  export default {
    name: 'product-recommend-self',
    props: {
      kindIds: {
        type: String,
        default: null
      },
      kindItem: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        dialogVisible: false,
        dialogCertificate: false,
        showMore: false,
        showLinkBox: false
      }
    },
    components: {
      Buy,
      CommodityList,
      QualificationCertificate,
      LinkSalerBox,
      RecommendPcb
    },
    computed: {
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      }
    },
    methods: {
      // 店铺简介
      getIntro (text) {
        let realLength = this.baseUtils.getRealLen(text)
        if (realLength > 494) {
          this.showMore = true
          text = this.baseUtils.cutOutString(text, 494) + '...'
        } else {
          this.showMore = false
        }
        return text
      },
      // 联系卖家
      goLink: function () {
        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
      },
      buyNow: function (isBuy, item) {
        if (!this.$store.state.option.user.logged) {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              this.$router.push('/auth/login')
            }
          })
        } else {
          this.baseUtils.buyOrCar(true, null, this, item, '/user#/order/pay/')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  #recommend-fragment-self {
    min-width: 1190px;
    background: #ece9ec;
    margin:-18px 0px 0 0px;
    .recommend-product {
      position: relative;
      width: 1190px;
      margin: 0 auto;
      padding-bottom: 50px;
      .main-list {
        width: 100%;
        /*overflow: hidden;*/
        > li {
          position: relative;
          float: left;
          width: 962px;
          margin-left: 9px;
          &:first-child {
            width: 218px;
            /*height: 356px;*/
            /*background: #fff;*/
            margin: -5px 0 0 1px;
            border-radius: 5px;
           .list{
             margin-top: -20px;
             height: 170px;
             border-radius: 5px;
             background: #fff;
            .information-list {
              font-size: 12px;
              color: #333;
              margin-bottom: 2px;
              /*background: #fff;*/
            &:first-child{
               /*padding-top: 10px;*/
             }
            div:first-child {
              width: 72px;
              text-align: right;
              line-height: 20px;
            }
            div:last-child {
              width: 158px;
              line-height: 20px;
              padding: 0px 0px 0px 6px;
            }
            }
            .information-list > div {
              display: table-cell;
            }
           }
            .introduce {
              margin-top: 15px;
              width: 100%;
              height: 336px;
              font-size: 12px;
              line-height: 15px;
              color: #333;
              background: #fff;
              border-radius: 5px;
              p{
                span.info{
                  font-size: 12px;
                  color: #333;
                  word-break: break-all;
                  word-wrap:break-word;
                }
                span.look {
                  color: #2496f1;
                  cursor: pointer;
                  position: absolute;
                  right: 10px;
                }
              }
              div{
                overflow: hidden;
                height: 35px;
                h4 {
                  float: left;
                  background: url(/images/store/home/detail1.png) no-repeat 15% 10%;
                  font-size: 14px;
                  padding: 0 0 5px 30px;
                  margin:10px 0;
                }
                h4.prof {
                  background: url("/images/store/home/prof.png") no-repeat 15% 10%;
                }
                span{
                  float: right;
                  margin-top: 10px;
                  padding-right: 10px;
                  font-size: 12px;
                  color: #2496f1;
                  cursor: pointer;
                  img{
                    margin-top: -3px;
                  }
                }
              }
              p {
                margin: -7px 0px 0px 9px;
                text-indent: 2em;
                width: 200px;
                line-height: 19px;
                height: 308px;
                overflow: hidden;
              }
              .empty-introduce{
                text-align: center;
                line-height: 153px;
                color: #666;
              }
            }
            .qualification {
              height: 35px;
              min-height: 35px;
            }
            .product-show{
              margin-top: 8px;
            }
          }
        }
      }
    }
  }

</style>