mall-web-ssr/components/product/ComponentGoods.vue

<template>
  <div class="component-table">
    <!-- 筛选结果展示 -->
    <div class="search-record">
      筛选后现为您找到以下<span class="red">{{componentGoods.totalElements}}</span>个结果
    </div>
    <!-- 列表展示 -->
    <table class="product-list">
      <thead>
      <tr style="height: 40px;">
        <th width="180">品牌/物料名称/型号/规格</th>
        <th width="100">包装</th>
        <th width="120">卖家名称</th>
        <th width="110">库存</th>
        <th width="210">价格梯度(PCS)</th>
        <th width="100">交期(天)</th>
        <th width="100">操作</th>
      </tr>
      </thead>
      <tbody id="productList-content">
      <!--| orderBy : dir + orderType  ng-class="{'tr-even' : !compGoods.isOdd}"-->
      <tr v-for="compGoods in componentGoods.content">
        <!--<td>
          &lt;!&ndash;store/{{compGoods.storeId}}#/batchInfo/{{compGoods.batchCode}}&ndash;&gt;
          <nuxt-link v-if="compGoods.batchCode" :to="`/store/${compGoods.storeId}/${compGoods.batchCode}`" target="_blank">
            <img :src="compGoods.img?compGoods.img:'/images/all/default.png'"/>
          </nuxt-link>
          <img v-if="!compGoods.batchCode" :src="compGoods.img || '/images/all/default.png'"/>
          &lt;!&ndash;store/{{compGoods.storeId}}#/home&ndash;&gt;
          <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank">{{compGoods.storeName}}</nuxt-link>
        </td>-->
        <td class="brand-code">
          <div class="brand" v-if="compGoods.brand.nameEn"><nuxt-link :to="`/product/brand/${compGoods.brand.uuid}/`" :title="compGoods.brand.nameEn">{{compGoods.brand.nameEn | nameFilter}}</nuxt-link></div>
          <div class="brand" v-if="!compGoods.brand.nameEn">—</div>
          <div class="list" v-if="compGoods.kind"><nuxt-link :to="`/product/kind/${compGoods.kind.id}`" :title="compGoods.kind.nameCn">{{compGoods.kind.nameCn | listFilter}}</nuxt-link></div>
          <div class="list" v-if="!compGoods.kind">—</div>
          <div class="code" v-if="compGoods.code"><nuxt-link :to="`/product/component/${compGoods.uuid}/`" :title="compGoods.code">{{compGoods.code | codeFilter}}</nuxt-link></div>
          <div class="code" v-if="!compGoods.code">—</div>
          <div class="code" :title="compGoods.spec"><span class="text-ellipse inline-block fl" style="width: 160px">{{compGoods.spec || '-'}}</span></div>
        </td>
        <td>
          <div class="package" v-if="compGoods.packaging">{{compGoods.packaging}}</div>
          <div class="package" v-else>—</div>
          <!--<div v-if="!compGoods.produceDate && !compGoods.packaging">—</div>-->
          <!--<div class="date" v-if="compGoods.produceDate">{{compGoods.produceDate}}</div>-->
          <!--<div class="date" v-if="!compGoods.produceDate && compGoods.packaging">—</div>-->
        </td>
        <td class="merchantName">
          <div v-if="!compGoods.storeName" style="margin-top: 20px;">—</div>
          <!--<div v-for="price in compGoods.prices">
            &lt;!&ndash;| number&ndash;&gt;
            <span>{{price.start}}</span> +
          </div>-->
          <div v-if="compGoods.storeName">
            <nuxt-link :to="'/store/' + compGoods.storeId" class="contact" :title="compGoods.storeName" target="_blank"><span>{{compGoods.storeName | storeNameFilter}}</span></nuxt-link>
          </div>
        </td>
        <td class="text-left">
          <div class="goods" v-if="compGoods.reserve">
            库存：<span>{{compGoods.reserve}}</span>
          </div>
          <div v-if="!compGoods.reserve" style="text-align: center;margin-left: 0;"><span>—</span></div>
          <div class="from" v-if="compGoods.reserve && compGoods.reserve > 0">
            起拍：<span v-if="compGoods.minBuyQty">{{compGoods.minBuyQty}}</span>
          </div>
          <!--<div class="multiple" v-if="compGoods.reserve > 0">
            倍数：<span>{{compGoods.minPackQty}}</span>
          </div>-->
          <div class="can-div-sell" v-if="compGoods.reserve" v-text="compGoods.breakUp?'可拆卖':''"></div>
        </td>
        <td>
          <div v-if="!compGoods.prices">
            <span>—</span>
          </div>
          <div class="amount">
            <div v-for="price in compGoods.prices"><span>{{price.start}}</span> +</div>
          </div>
          <!-- <div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('USD')==-1) || !compGoods.prices">
             <span>—</span>
           </div>
           <div v-for="price in compGoods.prices">
             &lt;!&ndash;| formateNumber : 6&ndash;&gt;
             <span>{{price.uSDPrice | currency}}</span>
           </div>-->
          <div class="price">
            <!--<div v-if="(compGoods.currencyName && compGoods.currencyName.indexOf('RMB')==-1) || !compGoods.prices">
              <span>—</span>
            </div>-->
            <div v-for="price in compGoods.prices">
              <!--formateNumber : 6-->
              <span>￥{{price.rMBPrice | currency}}</span>
            </div>
          </div>
        </td>
        <td>
          <div v-if="!compGoods.b2cMinDelivery">
            <span>—</span>
          </div>
          <div v-if="compGoods.b2cMinDelivery"><span v-if="compGoods.b2cMinDelivery != compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery + '-' + compGoods.b2cMaxDelivery}}</span>
            <span v-if="compGoods.b2cMinDelivery == compGoods.b2cMaxDelivery">{{compGoods.b2cMinDelivery}}</span>
          </div>
        </td>
        <td>
          <div v-show="!compGoods.reserve">
            <span>—</span>
          </div>
          <div v-if="compGoods.reserve > 0">
            <buy :item="compGoods" :btnColor="'#3975f4'"></buy>
          </div>
        </td>
      </tr>
      <tr v-if="componentGoods.totalElements == 0">
        <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
          <i class="fa fa-smile-o fa-lg"></i> 暂无产品信息
        </td>
      </tr>
      </tbody>
    </table>
    <div style="float: right; margin-bottom: 15px;">
      <page :total="componentGoods.totalElements" :page-size="pageParams.count"
            :current="pageParams.page" @childEvent="handleCurrentChange"></page>
    </div>
  </div>
</template>

<script>
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    layout: 'mian',
    props: ['brandid', 'propertyJSON'],
    components: {
      Buy,
      Page
    },
    data () {
      return {
        pageParams: {
          page: 1,
          count: 10,
          filter: {
            kindid: this.$route.params.id,
            brandid: this.brandid,
            propertyJSON: this.propertyJSON
          }
        }
      }
    },
    computed: {
      componentGoods () {
        let goodsPage = this.$store.state.product.component.componentGoods.data
        this.pageParams.page = goodsPage.number
        return goodsPage
      }
    },
    filters: {
      nameFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      },
      codeFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      },
      listFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      },
      storeNameFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      },
      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
      }
    },
    methods: {
      addToCart: function (goods, buyNow) {
        return null
      },
      handlerCurrentNode (data, node) {
        this.pageParams.page = 1
        this.pageCmpGoods(this.pageParams)
      },
      async pageCmpGoods (pageParams) {
        let params = {}
        params.filter = { kindid: pageParams.filter.kindid }
        if (pageParams.filter.brandid && pageParams.filter.brandid !== '') {
          params.filter.brandid = pageParams.filter.brandid
        }
        if (pageParams.filter.propertyJSON !== null && Object.getOwnPropertyNames(pageParams.filter.propertyJSON).length > 3) {
          params.filter.properties = pageParams.filter.propertyJSON
        }
        params.page = pageParams.page
        params.count = pageParams.count
        let { data } = await this.$http.get('/api/product/product/getCompGoodsByKindid', { params })
        this.$store.commit('product/component/GET_CMPGOODS_SUCCESS', data)
      },
      handleCurrentChange (page) {
        this.pageParams.page = page
        this.pageParams.filter.brandid = this.brandid
        this.pageParams.filter.propertyJSON = this.propertyJSON
        this.pageParams.filter.kindid = this.$route.params.id
        this.pageCmpGoods(this.pageParams)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .product-list{
    width: 1190px;
    margin-bottom: 20px;
  }
  .product-list thead tr{
    color: #333;
    background: none;
  }
  /* 物品列表 */
  .product-list .brand-code {
    font-size: 14px;
    text-align: center;
  }
  .product-list .brand-code .code,.product-list .brand-code .brand,.product-list .brand-code .list {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    a {
      color: #333;
      &:hover{
        font-weight: 600;
        color: #3975f4;
      }
    }
  }
  .product-list th {
    color: rgb(50,50,50);
    font-size: 14px;
    font-weight: 600;
    background-color: #edf3ff;
    text-align: center;
    height: 46px;
  }
  .product-list .merchantName{
    span {
      color: #333;
      &:hover{
        font-weight: 600;
        color: #3975f4;
      }
    }
  }
  .product-list tbody>tr {
    border: 1px solid #d4e1ff;
    background: #fff;
  }
  .product-list tbody>tr:hover {
    background: #f9fbff;
  }

  .product-list tbody>tr img {
    border: 1px solid #e8e8e8;
    margin: 10px 0 5px 0;
    width: 36px;
    height: 36px;
  }
  .product-list tbody>tr .contact{
    font-size: 14px;
    color: #5078cb;
    width: 90%;
    margin: 0 auto;
    display: inline-block;
  }
  .product-list tbody>tr .contact:hover{
    color: #d32526;
  }

  .product-list td {
    font-size: 14px;
    /*color: #333;*/
    text-align: center;
    line-height: 20px;
    height: 100px;
  }
  .product-list td a{
    color: #337ab7;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .product-list td a:hover {
    color: #23527c;
  }

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

  .btn-add-cart {
    margin-top: 10px;
    color: #3975f4!important;
    width: 80px;
    height: 30px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #3975f4!important;
  }
  .product-list .btn-buy-now:hover{
    background: #214797;
  }
  .product-list .btn-add-cart:hover{
    background-color: #3975f4;
    color: #fff;
  }
  .product-list .text-left{
    text-align: left;
    .goods {
      span {
        color: #f01010;
      }
    }
  }
  .product-list .text-left div{
    margin-left: 30px;
  }
  .product-list tbody tr td{
    padding: 10px 0;
  }
  .product-list tbody tr td .can-div-sell {
    color: #333;
  }
  .product-list tbody tr td .amount {
    width: 60%;
    float: left;
    padding-left: 60px;
    text-align: left;
  }
  .product-list tbody tr td .amount div:last-child, .product-list tbody tr td .price div:last-child{
    color: #f01010;
  }
  .product-list tbody tr td .price {
    width: 40%;
    float:right;
    text-align:left;
  }
  .search-record{
    width: 100%;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    margin: 14px 0px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding-left: 10px;
  }
  .search-record span.red{
    color: #ff0909;
  }
  .el-pagination .el-pager li.active{
    background-color: #5078cb;
    border-color: #337ab7;
  }
  /*<!-- 分页 -->*/
  .el-pagination .el-pager li.active {
    border-color: #5078cb !important;
    background-color: #5078cb !important;
  }
</style>