mall-web-ssr/components/store/home/CommodityList.vue

<template>
  <div id="goods-list-fragment">
    <div class="container">
      <div style="margin-bottom: 15px;width: 100%;">
        <div class="input-group">
          <input type="search" class="form-control" id="search_input" title="code" placeholder="型号/品牌"
                 v-model="searchCode" @search="goodsSearch(searchCode)"/>
          <span class="input-group-btn">
            <button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;搜&nbsp;索&nbsp;</button>
          </span>
          <span class="input-group-btn">
            <button type="button" class="btn sendprove" @click="sendprove()">我要发布产品</button>
          </span>
        </div>
      </div>
      <div class="title-area">
        <div class="category-title">
          <span style="line-height: 34px;">产品分类</span>
        </div>
        <div class="category-content">
          <el-tree :data="kinds" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode" :default-expanded-keys="[0]" node-key="level">
          </el-tree>
          <!--<span class="empty" v-if="!kinds[0].children || !kinds[0].children.length">暂无数据</span>-->
        </div>
      </div>
      <!-- 产品列表 -->
      <div class="goods-area">
        <!-- 列表展示 -->
        <table class="goodslist" style="width: 936px;background:#fff;" >
          <thead>
          <tr>
            <th width="189"><div>品牌/类目(产品名称)</div></th>
            <th width="148"><div>型号/规格</div></th>
            <th width="114"><div>包装/生产日期</div></th>
            <th width="100"><div>库存</div></th>
            <!-- <th width="90">数量</th>
             <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
             <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>-->
            <th width="149"><div>价格梯度(PCS)</div></th>
            <th width="67"><div>交期(天)</div></th>
            <th width="66"><div>规格书</div></th>
            <th width="95"><div>操作</div></th>
          </tr>
          </thead>
          <tbody id="goodslist-content">
          <tr v-for="commodity in commodities.content" @click="goBatchDetail(commodity.batchCode)">
            <td class="brand-code">
              <img class="sellout-store-commodity" v-if="commodity.status === 602" src="/images/search/sellout-search.png" alt="">
              <img class="specific-price-tag" v-if="isSpecificPriceTag(commodity.tag) && isConsignment" src="/images/floor/specificPrice-store.png" alt="">
              <div class="brand" v-if="commodity.brandNameEn || commodity.brandEn">
                <a v-if="commodity.brandNameEn && commodity.branduuid" @click="goBrandDetail('/product/brand/' + commodity.branduuid, $event)" v-text="commodity.brandNameEn"></a>
                <span v-if="commodity.brandNameEn && !commodity.branduuid" v-text="commodity.brandNameEn"></span>
                <span v-if="commodity.brandEn">{{commodity.brandEn}}</span>
              </div>
              <div class="brand" v-if="!commodity.brandNameEn && !commodity.brandEn">—</div>
              <a v-if="commodity.kindNameCn" @click="goBrandDetail('/product/kind/' + commodity.kindUuid, $event)" v-text="commodity.kindNameCn"></a>
              <div class="brand" v-if="!commodity.kindNameCn">—</div>
            </td>
            <td class="brand-code">
              <div class="code" v-if="commodity.code" v-text="commodity.code"></div>
              <div class="code" v-if="!commodity.code">—</div>
              <div class="brand spec" v-text="commodity.spec || '—'"></div>
            </td>
            <td>
              <div class="package" v-if="commodity.packaging" v-text="commodity.packaging"></div>
              <div class="package" v-if="!commodity.packaging && !commodity.produceDate">—</div>
              <div class="date" v-if='commodity.produceDate' v-text="commodity.produceDate">2016-12-01</div>
            </td>
            <td style="text-align: left;vertical-align: middle;">
              <div class="goods" v-if="commodity.reserve">
                库存：<span v-text="commodity.reserve">31500</span>
              </div>
              <div v-if="!commodity.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
              <div class="from" v-if="commodity.reserve && commodity.reserve>0">
                起拍：<span v-if="commodity.minBuyQty" v-text="commodity.minBuyQty">300</span>
              </div>
              <!--<div class="multiple">
                倍数：<span>1</span>
              </div>-->
              <div class="can-div-sell" v-if="commodity.reserve" v-text="commodity.breakUp?'可拆卖':'不可拆卖'"></div>
            </td>
            <td>
              <div class="amount">
                <div  v-for="price in commodity.prices" v-text="price.start + '+'"></div>
              </div>
              <!--<div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
                <span>—</span>
              </div>
              <div v-for="price in commodity.prices">{{price.uSDPrice | currency}}</div>-->
              <div class="price">
                <div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">
                  <span>—</span>
                </div>
                <div v-for="price in commodity.prices">￥{{price.rMBPrice | currency}}</div>
              </div>
            </td>
            <td>
              <div v-if="commodity.b2cMinDelivery">
                <!--{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天-->
                <span v-if="commodity.b2cMinDelivery != commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery + '-' + commodity.b2cMaxDelivery"></span>
                <span v-if="commodity.b2cMinDelivery == commodity.b2cMaxDelivery" v-text="commodity.b2cMinDelivery"></span>
              </div>
              <div v-if="!commodity.b2cMinDelivery"><span>—</span></div>
            </td>
            <td>
              <div v-if="commodity.attach">
                <a @click="goAttach(commodity.attach, $event)" target="_blank"><img src="/images/store/common/pdf.png" alt=""/></a>
              </div>
              <div v-if="!commodity.attach">—</div>
            </td>
            <td>
              <buy :item="commodity"></buy>
            </td>
          </tr>
          <tr class="active-empty" v-if="!commodities.content || commodities.content.length == 0">
            <td colspan="10">
              <div class="text-center">
                <div class="col-xs-offset-3 col-xs-2">
                  <img src="/images/brandList/empty-cart.jpg">
                </div>
                <div class="col-xs-4 txt-info">
                  <!--<p class="grey f16">暂无器件信息</p>-->
                  <p class="grey f16"> 暂无产品信息</p>
                  <i class="iconfont" v-if="emptyShow === false">&#xe610;</i>&nbsp;<a v-if="emptyShow === false" href="/">返回首页</a>
                  <img v-if="emptyShow === true" src="/images/brandList/upload.png">&nbsp;<a v-if="emptyShow === true" href="/vendor#/vendor_upload?type=company">马上去上传</a>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="remind-area">
          <img src="/images/store/store-remind.png" alt="">
          所有报价、库存信息的真实性及准确性均由店铺负责，如有疑问请点击
          <a @click="goLink" class="link-seller">联系卖家</a>
        </div>
        <div style="float: right;">
          <page :total="commodities.totalElements" :page-size="pageParams.count"
                :current="pageParams.page" @childEvent="handleCurrentChange"></page>
        </div>
        <link-saler-box
          :tel="tel"
          v-if="showLinkBox"
          @cancelAction="showLinkBox = false">
        </link-saler-box>
      </div>
    </div>
  </div>
</template>
<script>
  function getAllLeafIds (kind) {
    if (!kind) {
      return null
    }
    if (kind.isLeaf === 1) {
      return kind.id
    } else {
      if (!kind.children || kind.children.length === 0) {
        return null
      }
      let ids = []
      for (let i = 0; i < kind.children.length; i++) {
        ids.push(getAllLeafIds(kind.children[i]))
      }
      return ids.join(',')
    }
  }
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import Page from '~components/common/page/pageComponent.vue'
  import LinkSalerBox from '~components/common/LinkSalerBox.vue'
  export default {
    name: 'commodity-list',
    props: ['kinds'],
    components: {
      Buy,
      Page,
      LinkSalerBox
    },
    data () {
      return {
        defaultProps: {
          children: 'children',
          label: 'nameCn'
        },
        pageParams: {
          page: 1,
          count: 6
        },
        searchCode: '',
        parentKindId: 0,
        ids: null,
        showLinkBox: false,
        tel: ''
      }
    },
    filters: {
      currency: function (num) {
        if (typeof num === 'number') {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum.length > 6) {
                num = inputStr.substring(0, arr[0].length + 7)
                if (Number(floatNum.charAt(6)) > 4) {
                  num = (Number(num) * 1000000 + 1) / 1000000
                }
              } else if (floatNum.length === 1) {
                num = num + '0'
              }
            }
          }
        }
        return num
      }
    },
    computed: {
      commodities () {
        return this.$store.state.shop.storeInfo.storeCommodity.data
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      user () {
        return this.$store.state.option.user
      },
      tab () {
        return this.$store.state.chat.tab.tab.data
      },
      isConsignment () {
        return this.storeInfo.type === 'CONSIGNMENT'
      },
      storeStatus () {
        return this.$store.state.option.storeStatus.data
      },
      emptyShow () {
        let loggedStatus = false
        if (this.user.logged && this.user.data.enterprise.uu) {
          if (this.storeStatus.uuid === this.storeInfo.uuid) {
            loggedStatus = true
          } else {
            loggedStatus = false
          }
        } else {
          loggedStatus = false
        }
        return loggedStatus
      },
      enterprise () {
        let ens = this.user.data.enterprises
        if (ens && ens.length) {
          return ens.find(item => item.current) || {enName: '个人账户'}
        } else {
          return {enName: '个人账户'}
        }
      }
    },
    mounted () {
      this.kinds.forEach((item) => {
        this.KindsNameChange(item)
      })
//    alert(JSON.stringify(this.kinds))
    },
    methods: {
      sendprove: function () {
        if (this.user.logged) {
          if (this.enterprise && this.enterprise.isVendor === 313) {
            window.open('/vendor#/vendor_upload')
          } else {
            this.$router.push('/register-saler')
          }
        } else {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      },
      goLink: function () {
        this.baseUtils.goLinkUser(this, this.storeInfo.enUU)
      },
      KindsNameChange: function (obj) {
//        obj.nameCn += ()${obj.level}
        document.getElementsByClassName('el-tree-node__label').innerHTML = "<span style='color: red;'>(RUNOOB)</span>"
//      console.log(obj.nameCn)
        if (obj.children && obj.children.length) {
          console.log(obj.children)
          obj.children.forEach((item) => {
            this.KindsNameChange(item)
          })
        }
      },
      goAttach: function (url, event) {
        event.stopPropagation()
        if (this.user.logged) {
          if (url && url !== '1') {
            window.open(url)
          } else {
            this.$message.error('规格书地址错误')
          }
        } else {
          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
            if (response.data) {
              window.location.href = response.data.content + '&baseUrl=' + encodeURIComponent(window.location.protocol + '//' + window.location.host + response.data.baseUrl)
            }
          })
        }
      },
      handlerCurrentNode (data, node) {
        this.searchCode = ''
        if (this.parentKindId === data.id) {
          this.parentKindId = 0
          this.ids = null
        } else {
          if (data.level === 1) {
            this.parentKindId = data.id
          }
          this.ids = getAllLeafIds(data)
        }
        this.pageParams.page = 1

        this.pageCommodity(this.pageParams, this.ids)
      },
      goodsSearch (keyword) {
        this.pageParams.page = 1
        this.pageCommodity(this.pageParams, this.ids, keyword)
      },
      async pageCommodity (pageParams, kindId, keyword) {
//    pageCommodity (pageParams, kindId, keyword) {
        let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
        params.page = pageParams.page
        params.count = pageParams.count

        try {
          let { data } = await this.$http.get('/api/commodity/commodities', { params })
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
        } catch (err) {
          this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
        }
//      this.$http.get('/api/commodity/commodities', { params }).then(response => {
//        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', response)
//      }, err => {
//        this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_FAILURE', err)
//      })
      },
      handleCurrentChange (page) {
        this.pageParams.page = page
        this.pageCommodity(this.pageParams, this.ids, this.searchCode)
      },
//    goBack () {
//      this.$router.back(-1)
//    }
      isSpecificPriceTag: function (tag) {
        return tag && tag.indexOf('特价') !== -1
      },
      goBatchDetail (batchCode) {
        window.open('/store/productDetail/' + batchCode)
      },
      goBrandDetail (url, event) {
        event.stopPropagation()
        window.open(url)
      }
    }
  }
</script>
<style>
  #goods-list-fragment{
    width: 100%;
    background: #ece9ec;
    padding-top: 20px;
  }
  #goods-list-fragment .container{
    width: 1190px;
    padding: 0;
  }

  /*  产品分类调整*/
  #goods-list-fragment .category-content{
    max-height: 496px;
    min-height: 224px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
  }
  #goods-list-fragment .category-content .empty{
    display: block;
    width: 56px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-28px, -8px);
    color: #5e7382;
  }

  .category-content el-tree{
    /*border: none;*/
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.el-tree-node:hover{
    background: none !important;
  }
  .el-tree-node__content:hover{
    background: none !important;
  }
  .el-tree-node__content:hover span{
    color: #3c7df3;
  }
  .el-tree-node__content:hover span:last-child {
    /*text-decoration: underline;*/
  }
  .el-pagination .el-pager li.active{
    background-color: #5078cb;
    border-color: #337ab7;
  }
  .el-tree-node__expand-icon{
    margin-left: 3px;
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    width: inherit;
    height: inherit;
    border: inherit;
    font-weight: bold;
    text-shadow: -1px 0px 0 #333;
    margin-right: 3px !important;
  }
  .el-tree-node__content{
    line-height: 30px;
    height: 30px;
  }
  .el-tree-node__expand-icon.is-leaf{
    visibility: hidden;
  }
  .el-tree-node__expand-icon:before{
    content: "\E621";
  }
  #goods-list-fragment .category-title {
    height: 34px;
    background-color: #3c7df5;
    font-size: 16px;
    color: rgb(255,255,255);
    text-align: center;
    border-radius: 5px;
  }

  #goods-list-fragment .category-content li {
    line-height: 33px;
    font-size: 14px;
    color: #333;
    float: left;
    width: 100%;
    padding-left: 10px;
  }

  #goods-list-fragment .category-content li a {
    display: block;
    padding-left: 15px;
    text-decoration: none;
    color: #333;
    /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
  }

  #goods-list-fragment .category-content li a:hover{
    color: #5078cb;
    cursor: pointer;
  }

  #goods-list-fragment .category-content ul.list-body {
    display: none;
    color: #666;
  }

  #goods-list-fragment .category-content ul.list-body.active {
    display: block;
  }

  #goods-list-fragment .category-content ul.list-body li {
    float: none;
    background-image: none;
    min-height: 26px;
    line-height: 26px;
    font-size: 12px;
  }

  #goods-list-fragment .category-content ul.list-body li a {
    padding-left: 15px;
    display: block;
    color: rgb(50,50,50);
    background: none;
  }

  #goods-list-fragment .category-content ul.list-body li a:hover {
    color: #5078cb;
    cursor: pointer;
  }

  #goods-list-fragment .category-content ul.list-body li a.cur {
    text-decoration: none;
    font-size: 14px;
    /* background:url("static/img/store/default/openblackR.png") no-repeat left; */
  }

  #goods-list-fragment .title-area {
    margin-bottom: 30px;
    width: 250px;
    float: left;
    background: #fff;
  }
  #goods-list-fragment .category-content{
    border: 1px solid #e8e8e8;
  }
  /* goods-area */
  #goods-list-fragment .goods-area {
    margin-left: 3px;
    float: left;
    margin-bottom: 30px;
  }

  #goods-list-fragment .goods-area .btn-line {
    border-radius: 0;
  }


  #goods-list-fragment .btn-info.btn-line {
    background-color: #5078CB;
    color: #fff;
    font-weight: 600;
  }

  #goods-list-fragment .btn-line {
    height: 34px;
    width: 150px;
    border: 1px solid #5078cb;
    background-color: #fff;
    color: rgb(80,120,203);
    font-weight: 600;
  }

  #goods-list-fragment .btn-line:hover {
    background-color: #5078CB;
    color: #fff;
  }

  /* 物品列表 */
  #goods-list-fragment .goodslist .brand-code {
    font-size: 12px;
    text-align: center;
    position: relative;
  }
  #goods-list-fragment #search_btn {
    background: #3c7cf5;
    color: #FFF;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    height: 28px;
    width: 69px;
    padding-right: 50px;
  }
  #goods-list-fragment .sendprove {
    width: 110px;
    height: 28px;
    color: #fff;
    background-color: #ff9000;
    border-radius: 3px;
    float: right;
    margin-left: 10px
  }
  .btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
    border-color: transparent;
  }

  #goods-list-fragment #search_input {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    width: 189px;
    float: right;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border: 1px solid #3b7cf4;
  }

  #goods-list-fragment .brand-code .code {
    font-weight: 600;
  }
  #goods-list-fragment .brand-code .brand a {
    color: #3c7df5;
  }
  #goods-list-fragment .goodslist thead tr{
    background-color: #3b7cf4;
    height: 34px;
  }
  #goods-list-fragment .goodslist tr th {
    color: #fefefe;
    font-size: 13px;
  }
  #goods-list-fragment .goodslist tr th:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  #goods-list-fragment .goodslist tr th:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #goods-list-fragment .goodslist tr th div{
    text-align: center;
    border-right: 1px solid #fff;
  }
  #goods-list-fragment .goodslist tr th:last-child div{
    border-right: none;
  }
  #goodslist-content .goods,#goodslist-content .from, #goodslist-content .can-div-sell {
    padding-left: 20px;
  }
  #goodslist-content .goods span{
    color: #f01010;
  }
  #goodslist-content .amount {
    width: 60%;
    float: left;
    padding-left: 30px;
    text-align:left;
  }
  #goodslist-content .amount div:last-child{
    color: #f01010;
  }
  #goodslist-content .price {
    width: 40%;
    float:right;
    text-align:left;
  }
  #goods-list-fragment .category-content a.selected-node,
  #goods-list-fragment .category-content ul.list-body li a.selected-node {
    color: #5078cb;
  }

  #goods-list-fragment .category-content a.selected-parent-node,
  #goods-list-fragment .category-content ul.list-body li a.selected-parent-node {
    /* background:url("static/img/store/default/openblack.png") no-repeat left; */
  }
  #goods-list-fragment .goodslist tbody>tr:hover{
    background: #ecf2fd;
  }
  #goods-list-fragment .goodslist tbody>tr {
    border: 1px solid #e8e8e8;
  }
  #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img{
    border: 1px solid #e8e8e8;
    margin: 10px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    line-height: 75px;
  }
  #goods-list-fragment .goodslist tbody>tr td.commodity-icon .img>img {
    width: 80px;
    height: 80px;
  }
  #goods-list-fragment .goodslist tbody>tr td.brand-code .sellout-store-commodity {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #goods-list-fragment .goodslist tbody>tr td.brand-code .specific-price-tag {
    position: absolute;
    top: 0;
    left: 0;
  }
  #goods-list-fragment .goodslist td {
    font-size: 12px;
    color: #333;
    text-align: center;
    line-height: 20px;
    height: 88px;
  }
  #goods-list-fragment .goodslist tbody>tr td .can-div-sell {
    color: #333;
  }

  /* 物品列表按钮 */
  #goods-list-fragment .btn-buy-now {
    background-color: #ffa422;
    color: #fff;
    width: 80px;
    height: 30px;
    font-size: 12px;
    border: 1px solid #ffa422;
  }

  #goods-list-fragment .btn-add-cart {
    margin-top: 10px;
    color: #3b7cf4;
    width: 80px;
    height: 30px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #3b7cf4;
  }
  #goods-list-fragment .btn-buy-now:hover{
    background: #214797;
    border: 1px solid #214797;
  }
  #goods-list-fragment .btn-add-cart:hover{
    background-color: #5078CB;
    color: #fff;
  }
  .no-record{
    font-size: 14px;
    color: #999;
    text-align: center;
    line-height: 200px;
  }
  .no-record i{
    margin-right: 5px;
  }
  .active-empty:hover{
    background-color: #fff!important;
  }
  .text-center{
    text-align: center;
    margin-top: 30px;
  }
  .text-center  .col-xs-2  img{
    margin: 55px 0 85px 135px;
    vertical-align: middle;
  }
  .text-center .txt-info{
    font-size: 14px;
    margin: 50px 0px 0px -50px;
  }
  .text-center  .col-xs-4  p{
    color: #999;
    margin: 11px 0px 4px -6px;
  }
  .text-center  .txt-info i{
    color: #5078cb;
  }
  .text-center  .txt-info a{
    font-size: 14px;
    color: #5078cb;
  }
  .text-center  .col-xs-5 img{
    margin-left: -235px;
  }
  .goodslist{
    margin-bottom: 20px;
  }
  .remind-area {
    font-size: 12px;
    color: #666;
  }
  .remind-area img {
    margin-right: 12px;
  }
  .remind-area .link-seller {
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    height: 20px;
    padding: 0 7px;
    background: #ef7f03;
    border-radius: 2px;
  }
  @font-face {
    font-family: 'iconfont';  /* project id 357960 */
    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot');
    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.woff') format('woff'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
  }

  <!-- 分页 -->
  #goods-list-fragment .el-pagination .el-pager li.active {
    border-color: #5078cb !important;
    background-color: #5078cb !important;
  }
</style>