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

<template>
  <div id="goods-list-fragment">
    <div class="container" style="width: 1190px; padding: 0;">
      <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"></el-tree>
        </div>
      </div>
      <!-- 产品列表 -->
      <div class="goods-area">
        <div class="row" style="margin: 0;width: 970px;">
          <div class="col-md-3 btn-group btn-group-sm" style="padding: 0;">
            <a type="button" class="btn btn-default btn-line btn-info">产品列表</a>
          </div>
          <div class="col-md-4 col-md-offset-5" style="padding: 0;">
            <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>
            </div>
          </div>
        </div>

        <!-- 列表展示 -->
        <table class="goodslist" style="width: 970px">
          <thead>
          <tr style="height: 40px;">
            <th width="90"></th>
            <th width="150">品牌/型号</th>
            <th width="100">包装/生产日期</th>
            <th width="90">库存</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="100">交期</th>
            <th width="100">操作</th>
          </tr>
          </thead>
          <tbody id="goodslist-content">
          <tr v-for="commodity in commodities.content">
            <td class="commodity-icon">
              <a :href="'/store/' + commodity.storeid + '/' + commodity.batchCode" target="_blank">
                <div class="img"><img :src="commodity.img || '/images/store/common/default.png'"/></div>
              </a>
            </td>
            <td class="brand-code">
              <div class="brand" v-text="commodity.brandNameEn"></div>
              <div class="code" v-text="commodity.code"></div>
            </td>
            <td>
              <div class="package" v-text="commodity.packaging || '暂无包装信息'"></div>
              <div class="date" v-text="commodity.produceDate">2016-12-01</div>
            </td>
            <td style="text-align: left;vertical-align: middle;">
              <div class="goods">
                库存：<span v-text="commodity.reserve">31500</span>
              </div>
              <div class="from">
                起拍：<span v-text="commodity.minBuyQty">300</span>
              </div>
              <div class="multiple">
                倍数：<span>1</span>
              </div>
            </td>
            <td>
              <div v-for="price in commodity.prices" v-text="price.start + '+'"></div>
            </td>
            <td>
              <div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
                <span>—</span>
              </div>
              <div v-for="price in commodity.prices" v-text="price.uSDPrice"></div>
            </td>
            <td>
              <div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">
                <span>—</span>
              </div>
              <div v-for="price in commodity.prices" v-text="price.rMBPrice"></div>
            </td>
            <td>
              <div v-if="commodity.b2cMinDelivery">交期：{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天</div>
            </td>
            <td>
              <div>
                <button class="btn btn-primary btn-buy-now" ng-click="addToCart(commodity, true, commodity.minBuyQty, commodity.currencyName)"><span class="watch">立即购买</span></button>
              </div>
              <div>
                <button class="btn btn-add-cart" ng-click="addToCart(commodity, false, commodity.minBuyQty, commodity.currencyName)"><span class="watch">加入购物车</span></button>
              </div>
            </td>
          </tr>
          <tr 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/all/empty-cart.png">
                </div>
                <div class="col-xs-4 txt-info">
                  <p class="grey f16">暂无器件信息</p>
                  <i class="iconfont">&#xe610;</i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <div style="float: right;">
          <el-pagination
            :current-page.sync="pageParams.page"
            :page-size="pageParams.count"
            layout="prev, pager, next, jumper"
            :total="commodities.totalElements"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </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('-')
  }
}

export default {
  name: 'commodity-list',
  props: ['kinds'],
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'nameCn'
      },
      pageParams: {
        page: 1,
        count: 6
      },
      searchCode: '',
      parentKindId: 0,
      ids: null
    }
  },
  computed: {
    commodities () {
      return this.$store.state.shop.storeInfo.storeCommodity.data
    }
  },
  methods: {
    handlerCurrentNode (data, node) {
      this.searchCode = ''
      if (this.parentKindId === data.id) {
        this.parentKindId = 0
        this.ids = null
        console.log('取消选中状态')
      } else {
        if (data.level === 1) {
          this.parentKindId = data.id
        }
        this.ids = getAllLeafIds(data)
      }
      console.log('data', data.id + '-' + data.nameCn)
      this.pageParams.page = 1

      this.pageCommodity(this.pageParams, this.ids)
    },
    goodsSearch (keyword) {
      console.log(keyword)
      this.pageParams.page = 1

      this.pageCommodity(this.pageParams, this.ids, keyword)
    },
    async 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)
      }
    },
    handleCurrentChange (page) {
      console.log(page)
      this.pageParams.page = page

      this.pageCommodity(this.pageParams, this.ids, this.searchCode)
    }
  }
}
</script>
<style>
/*  产品分类调整*/
  .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: #5078cb;
  }
  .el-pagination .el-pager li.active{
    background-color: #5078cb;
    border-color: #337ab7;
  }
.el-tree-node__expand-icon{
  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{
		font-family: "Microsoft Yahei", "微软雅黑";
	}
	#goods-list-fragment .category-title {
		height: 34px;
		background-color: #5078cb;
		font-size: 14px;
		color: rgb(255,255,255);
		font-weight: 600;
		text-align: center;
	}

	#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: 200px;
		float: left;
	}
	#goods-list-fragment .category-content{
		border: 1px solid #e8e8e8;
	}
	/* goods-area */
	#goods-list-fragment .goods-area {
		margin-left: 20px;
		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: 14px;
		text-align: center;
	}

	#goods-list-fragment #search_btn {
		background: #5078CB;
		color: #FFFFFF;
	}

	#goods-list-fragment #search_input {
		font-size: 14px;
	}

	#goods-list-fragment .brand-code .code {
		font-weight: 600;
	}

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

	#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 {
		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 td {
		font-size: 12px;
		color: #333;
		text-align: center;
		line-height: 20px;
	}

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

	#goods-list-fragment .btn-add-cart {
		margin-top: 10px;
		color: #214797;
		width: 80px;
		height: 30px;
		font-size: 12px;
		background-color: #fff;
		border: 1px solid #e8e8e8;
	}
	#goods-list-fragment .btn-buy-now:hover{
		background: #214797;
	}
	#goods-list-fragment .btn-add-cart:hover{
		background-color: #5078CB;
		color: #fff;
	}
	.category-content{
		min-height: 243px;
	}
	.no-record{
		font-size: 14px;
		color: #999;
		text-align: center;
		line-height: 200px;
	}
	.no-record i{
		margin-right: 5px;
	}
	.text-center{
		text-align: center;
		margin-top: 30px;
	}
	.text-center  .col-xs-2  img{
		margin: 50px 0 50px 95px;
		vertical-align: middle;
	}
	.text-center .txt-info{
		font-size: 14px;
		margin-top: 70px;
	}
	.text-center  .col-xs-4  p{
		color: #999;
		margin-top: 3px;
		margin-bottom: 2px;
	}
	.text-center  .txt-info a{
		font-size: 14px;
	}
	.text-center  .col-xs-4 i{
		color: #5078cb;
		font-size: 14px;
	}
	.goodslist{
		margin-bottom: 16px;
	}

	@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>