mall-web-ssr/components/search/GoodList.vue

<template>
  <div>
    <div>
      <div class="tab-filter" >
        <div class="fl">&nbsp;&nbsp;| 产品信息(<span class="text-num"></span><span class="text-num" v-text="good_list.total"></span>)</div>
        <div class="fr">
          <div @click="sortBy('normal1')" :class="activeTag==='normal1'?'active':''"><a >综合排序</a></div>
          <div @click="sortBy('normal2')" :class="activeTag==='normal2'?'active':''"><a >现货优选</a></div>
          <div @click="sortBy('type')" :class="activeTag==='type'?'active':''"><a >型号精确</a></div>
          <div style="display:none"><a href="">销量</a></div>
          <div style="display:none"><a href="">人气</a></div>
          <div style="display:none"><a href="">信用</a></div>
          <div @click="sortBy('price')" :class="activeTag==='price'?'active':''"><a>价格<i class="fa fa-long-arrow-down" v-show="price_asc"></i><i class="fa fa-long-arrow-up" v-show="!price_asc"></i></a></div>
          <div class="price-filter">
            <div class="price-input">
              <input type="number" min="0" step="0.01" v-model="min_price" class="form-control" placeholder="￥" onfocus="this.placeholder=''" onblur="this.placeholder='￥'" />
              <span>-</span>
              <input type="number" :min="min_price === ''?0:min_price" step="0.01" v-model="max_price" class="form-control" placeholder="￥" onfocus="this.placeholder=''" onblur="this.placeholder='￥'" />
            </div>
            <div class="price-hover">
              <a @click="clear_price">清空</a>
              <a @click="filter_price">确定</a>
            </div>
          </div>
          <div style="display:none;padding-top: 5px; margin-left: 0;">
            <select class="select-adder form-control" style="width: 120px;">
              <option value="1">发货地</option>
            </select>
          </div>
          <div class="off">
            <a @click="list_open=!list_open">
              <span v-text="list_open?'收起':'展开'"></span>
              <i class="fa fa-angle-down" v-show="!list_open"></i>
              <i class="fa fa-angle-up"v-show="list_open"></i>
            </a>
          </div>
        </div>
      </div>
      <div v-if="list_open">
        <table class="product-list" >
          <thead>
          <tr style="height: 40px;">
            <th width="80"></th>
            <th width="160">品牌/型号</th>
            <th width="90">类目</th>
            <th width="100">封装/生产日期</th>
            <th width="110">库存</th>
            <th width="90">阶梯</th>
            <th width="90">香港交货</th>
            <th width="110">大陆交货<span style="font-size: 12px;">(含税)</span></th>
            <th width="110">货期<span style="font-size: 12px;">(工作日)</span></th>
            <th width="100">操作</th>
          </tr>
          </thead>
          <tbody id="productList-content">
          <tr v-for="item in good_list.components">
            <td>
              <a href="">
                <img width="80px" height="80px" :src="item.brand.logoUrl?item.brand.logoUrl:'http://static.usoftmall.com/img/all/default.png?_v=1499336134257'"></a>
            </td>
            <td class="brand-code">
              <div class="brand"><a class="text-num" v-text="item.brand.nameEn"></a></div>
              <div class="code"><a class="f16 text-bold text-num" v-text="item.code"></a></div>
            </td>
            <td>
              <div><i class="fa fa-th-large f14" aria-hidden="true"></i>&nbsp;&nbsp;
                <a v-text="item.kind.nameCn">
                </a>
              </div>
            </td>
            <td>
              <div class="package" v-text="item.packing?item.packing:'暂无包装方式信息'"></div>
              <div class="date" v-text="item.produceDate"></div>
            </td>
            <td class="text-left">
              <div class="goods">
                库存：<span v-text="item.reserve || '暂无库存'"></span>
              </div>
              <div class="from" v-if="item.reserve > 0">
                起拍：<span v-text="item.minBuyQty"></span>
              </div>
              <div class="multiple" v-if="item.reserve > 0">
                倍数：<span v-text="item.minPackQty"></span>
              </div>
            </td>
            <td>
              <div v-show="!item.prices">
                <span>—</span>
              </div>
              <div v-for="price in item.prices">
                <span v-text="price.start"></span> +
              </div>
            </td>
            <td >
              <div >
                <span>—</span>
              </div>
              <div >
                <span ></span>
              </div>
            </td>
            <td >
              <div >
                <span>—</span>
              </div>
              <div >
                <span ></span>
              </div>
            </td>
            <td>
              <div v-show="!item.b2cMinDelivery">
                <span>—</span>
              </div>
              <div v-if="item.b2cMinDelivery">交期: <span v-text="item.b2cMinDelivery + '-' + item.b2cMaxDelivery"></span></div>
            </td>
            <td>
              <div v-show="!item.reserve">
                <span>—</span>
              </div>
              <div v-if="item.reserve > 0">
                <button class="btn btn-primary btn-buy-now" ><span class="watch">立即购买</span></button>
              </div>
              <div v-if="item.reserve > 0">
                <button class="btn btn-add-cart"><span class="watch">加入购物车</span></button>
              </div>
            </td>
          </tr>
          <tr v-if="good_list.components.length == 'undefined' ||good_list.components.length == 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>
      <page :total="total_count" :page-size="pageSize"
      :current="nowPage" v-on:childEvent="listenPage" v-show="good_list.components.length>0"></page>
    </div>
  </div>
</template>

<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    data () {
      return {
        list_open: true,
        nowPage: 1,
        pageSize: 15,
        sorting: {},
        price_asc: true,
        min_price: '',
        max_price: '',
        filter: {},
        activeTag: 'normal1'
      }
    },
    components: {
      Page
    },
    computed: {
      good_lists () {
        return this.$store.state.searchData.searchList.lists
      },
      good_list () {
        return this.good_lists.data
      },
      total_count () {
        return Math.min(this.good_list.total, 100 * this.pageSize)
      }
    },
    methods: {
      listenPage: function (changedPage) {
        this.nowPage = changedPage
        this.$emit('pageEvent', this.nowPage)
      },
      sortBy: function (param) {
        if (param === 'normal1') {
          this.sorting = {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
          this.activeTag = 'normal1'
        } else if (param === 'normal2') {
          this.sorting = {'GO_SEARCH': 'DESC', 'GO_RESERVE': 'DESC'}
          this.activeTag = 'normal2'
        } else if (param === 'type') {
          this.sorting = {'GO_SEARCH': 'DESC', 'GO_RESERVE': 'DESC'}
          this.activeTag = 'type'
        } else if (param === 'price') {
          if (this.price_asc) {
            this.sorting = {'GO_MINPRICERMB': 'ASC', 'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
          } else {
            this.sorting = {'GO_MINPRICERMB': 'DESC', 'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}
          }
          this.activeTag = 'price'
          this.price_asc = !this.price_asc
        }
        this.$emit('sortEvent', this.sorting)
      },
      filter_price: function () {
        if (this.min_price === '' && this.max_price !== '') {
          this.filter.goods_maxpricermb = this.max_price
        } else if (this.min_price !== '' && this.max_price === '') {
          this.filter.goods_minpricermb = this.min_price
        } else if (this.min_price !== '' && this.max_price !== '') {
          if (this.min_price <= this.max_price) {
            this.filter.goods_minpricermb = this.min_price
            this.filter.goods_maxpricermb = this.max_price
          }
        } else {
          delete this.filter.goods_minpricermb
          delete this.filter.goods_maxpricermb
        }
        this.$emit('filterPriceEvent', this.filter)
      },
      clear_price: function () {
        this.min_price = ''
        this.max_price = ''
      }
    }
  }
</script>
<style scoped>
  .tab-filter {
    width: 1190px;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #f1efef;
  }
  .tab-filter .fl {
    font-size: 14px;
  }
  .tab-filter .fl, .tab-filter .fr {
    float: left;
  }
  .tab-filter .fl span {
    font-size: 14px;
  }
  .text-num {
    font-style: normal;
    font-family: verdana;
  }
  .tab-filter .fr {
    max-width: 1050px;
  }
  .tab-filter .fr div {
    float: left;
    margin: 0 5px;
  }
  .tab-filter .fr a {
    display: inline-block;
    padding: 1px 10px;
    border: #ccc 1px solid;
    line-height: 26px;
    font-size: 14px;
    text-align: center;
    color: #333;
    max-height: 30px;
    background: #fff;
  }

  .tab-filter .fr .price-filter {
    padding-top: 5px;
    width: 176px;
    margin: 0;
  }
  .price-filter {
    position: relative;
  }
  .price-filter .price-input {
    position: relative;
    z-index: 10;
    margin: 0 10px !important;
    width: 180px;
  }
  .tab-filter .fr .price-filter input, .tab-filter .fr .price-filter span {
    float: left;
  }
  .tab-filter .fr .form-control {
    width: 70px;
    height: 30px;
    border-radius: 0;
    padding-left: 5px;
  }
  .tab-filter .fr .price-filter span {
    margin: 0 5px;
    line-height: 30px;
  }
  .price-filter .price-hover {
    display: none;
    width: 165px;
    height: 25px;
    padding: 60px 6px 6px;
    margin: 0 10px;
    border: 1px solid #999;
    position: absolute;
    background: #fff;
    top: 0;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
  }
  .price-filter .price-hover a:first-child {
    position: absolute;
    top: 37px;
    left: 6px;
    width: 36px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #5078cb;
    display: inline-block;
    border: none;
    padding: 0;
  }
  .price-filter .price-hover a:last-child {
    position: absolute;
    top: 37px;
    right: 7px;
    width: 38px;
    height: 25px;
    line-height: 24px;
    border: 1px solid #ccc;
    text-align: center;
    background: #f7f7f7;
    color: #333;
    display: inline-block;
    padding: 0;
  }
  .tab-filter .fr .off {
    margin-left: 130px;
    float: right;
  }
  .tab-filter .fr .off a {
    border: none;
    text-align: right;
    padding-left: 360px;
    background: none;
  }
  .tab-filter .fr .off a i {
    font-size: 16px;
  }
  .product-list{
    width: 1190px;
    /*margin-bottom: 20px;*/
  }
  .product-list thead tr{
    /*border-top: #6493ff 2px solid;*/
    color: #323232;
    background: none;
  }
  /* 物品列表 */
  .product-list .brand-code {
    font-size: 14px;
    text-align: center;
  }

  .product-list .brand-code .code {
    font-weight: 600;
  }

  .product-list th {
    color: rgb(50,50,50);
    font-size: 14px;
    font-weight: 600;
    background-color: #f7f7f7;
    text-align: center;
  }

  .product-list tbody>tr {
    border: 1px solid #e8e8e8;
  }

  .product-list tbody>tr img {
    border: 1px solid #e8e8e8;
    margin: 10px 0 5px 0;
    width: 80px;
    height: 80px;
  }
  .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: 12px;
    color: #333;
    text-align: center;
    line-height: 20px;
  }

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

  .product-list .btn-add-cart {
    margin-top: 10px;
    color: #214797;
    width: 80px;
    height: 30px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
  }
  .product-list .btn-buy-now:hover{
    background: #214797;
  }
  .product-list .btn-add-cart:hover{
    background-color: #5078CB;
    color: #fff;
  }
  .product-list .text-left{
    text-align: left;
  }
  .product-list .text-left div{
    margin-left: 30px;
  }
  .product-list tbody tr td{
    padding: 10px 0;
  }
  .search-record{
    width: 100%;
    margin: 0 auto;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    margin-top: 20px;
  }
  .search-record span.red{
    color: #ff0909;
  }
  .tab-filter{
    width: 1190px;
    height: 40px;
    margin: 0 auto;
    background: #fff;
    line-height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #f1efef;
  }
  .tab-filter .fl,.tab-filter .fr{
    float: left;
  }
  .tab-filter .fl{
    font-size: 14px;
  }
  .tab-filter .fr{
    max-width: 1050px;
  }
  .tab-filter .fl span{
    font-size: 14px;
  }
  .tab-filter .fr div{
    float: left;
    margin: 0 5px;
  }
  .tab-filter .fr div.active a{
    border: #5078cb 1px solid;
    color: #5078cb;
  }
  .tab-filter .fr a{
    display: inline-block;
    padding: 1px 10px;
    border: #ccc 1px solid;
    line-height: 26px;
    font-size: 14px;
    text-align: center;
    color: #333;
    max-height: 30px;
    background: #fff;
  }
  .tab-filter .fr a i{
    /*margin-left: 5px;*/
  }
  .tab-filter .fr a:hover{
    border: #5078cb 1px solid;
    color: #5078cb;
  }
  .tab-filter .fr .off{
    margin-left : 129px;
    float: right;
  }
  .tab-filter .fr .off a:hover{
    border: none;
    color: #5078cb;
  }
  .tab-filter .fr .off a{
    border: none;
    text-align: right;
    padding-left: 360px;
    background: none;
  }
  .tab-filter .fr .off a i{
    font-size: 16px;
  }
  .tab-filter .fr .form-control{
    width: 70px;
    height: 30px;
    border-radius: 0;
    padding-left: 5px;
  }
  .tab-filter .fr .price-filter input,.tab-filter .fr .price-filter span{
    float: left;
  }
  .tab-filter .fr select{
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    -o-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    width: 120px;
  }
  .tab-filter .fr .price-filter{
    padding-top: 5px;
    width: 176px;
    margin: 0;
  }
  .tab-filter .fr .price-filter span{
    margin: 0 5px;
    line-height: 30px;
  }
  .close{
    display: none;
  }
  .price-filter{
    position: relative;
  }
  .price-filter:hover .price-hover{
    display: block;
  }
  .price-filter .price-hover{
    background: transparent;
  }
  .price-filter .price-input{
    position: relative;
    z-index: 10;
    margin: 0 10px !important;
  }
  .price-filter .price-hover{
    display: none;
    width: 165px;
    height: 25px;
    padding: 60px 6px 6px;
    margin: 0 10px;
    border: 1px solid #999;
    position: absolute;
    background: #fff;
    top: 0;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
  }
  .price-filter .price-hover a:first-child{
    position: absolute;
    top: 37px;
    left: 6px;
    width: 36px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #5078cb;
    display: inline-block;
    border: none;
    padding: 0;
  }
  .price-filter .price-hover a:last-child{
    position: absolute;
    top: 37px;
    right: 7px;
    width: 38px;
    height: 25px;
    line-height: 24px;
    border: 1px solid #ccc;
    text-align: center;
    background: #f7f7f7;
    color: #333;
    display: inline-block;
    padding: 0;
  }
  .price-filter .price-hover a:last-child:hover{
    background: #5078cb;
    color: #fff;
  }
  div.ng-table-pager input.page-number {
    vertical-align: inherit;
    display: inline-block;
    width: 40px;
    height: 31px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #9B9792;
    text-align: center;
    background-color: #F6F5F4;
    background-image: none;
    border: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  div.ng-table-pager a.page-a{
    background: #5078cb !important;
    color: #fff;
    float: right;
  }
</style>