mall-web-ssr/components/pcb/brand/BrandList.vue

<template>
  <div class="component-list container">
    <nuxt-link to="/product/brand/_code"><div class="type-list">产品列表</div></nuxt-link>
    <div class="input-group">
      <input  type="search" class="input-sm form-control" placeholder="请输入型号" title="code"
              v-model="searchCode" @search="goodsSearch(searchCode)"/>
      <span class="input-group-btn">
					<button class="search btn btn-default" type="button" @click="goodsSearch(searchCode)">搜索</button>
			</span>
    </div>
    <table class="table">
      <thead>
      <tr class="bgf7">
        <th width="330">产品名称</th>
        <th width="330">价格</th>
        <th width="330">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr class="text-center" v-for="item in list.content">
        <td><nuxt-link :to="`/pcb/product/${item.productid}/${item.batchCode}`"><span>{{item.code}}</span></nuxt-link></td>
        <td>
          <div v-if="item.prices" v-text="item.currencyName === 'RMB' ? '¥' + item.prices[0].rMBPrice : '$' + item.prices[0].uSDPrice"></div>
          <div v-else>-</div>
        </td>
        <!--<td><a :href="item.attach" target="_blank"><button class="btn btn-default"  :disabled="!item.attach" :class="{'disabledbtn':!item.attach}">Datasheet手册</button></a></td>-->
        <td>
          <button class="btn btn-default applay" @click="addToCar(item)">加入购物车</button>
        </td>
      </tr>
      <tr v-if="!list.content || list.content.length === 0">
        <td colspan="10" class="text-center">
          <div class="empty">
            <div class="empty-img">
              <img src="/images/brandList/empty-cart.png">
            </div>
            <div class="empty-info">
              <p class="grey f16"> 暂无器件信息 </p>
              <i class="fa fa-mail-reply fa-xs"></i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <div style="float: right;">
      <page :total="list.totalElements" :page-size="pageParams.count"
            :current="pageParams.page" @childEvent="handleCurrentChange"></page>
    </div>
  </div>
</template>
<script>
  import Page from '~components/common/page/pageComponent.vue'
  import { buyOrCar } from '~utils/baseUtils'
  export default {
    name: 'BrandComponent',
    data () {
      return {
        pageParams: {
          page: 1,
          count: 10,
          filter: {}
        },
        searchCode: ''
      }
    },
    props: ['kindid'],
    components: {
      Page
    },
    computed: {
      lists () {
        return this.$store.state.brandComponent.component
      },
      list () {
        return this.lists.data
      },
      brand () {
        return this.$store.state.brandDetail.detail.data
      }
    },
    methods: {
      goodsSearch (keyword) {
        this.pageParams.page = 1
        this.pageParams.filter.code = keyword
        this.pageCmpGoods(this.pageParams)
      },
      handlerCurrentNode () {
        this.searchCode = ''
        this.pageParams.page = 1
        this.pageCmpGoods(this.pageParams)
      },
      async pageCmpGoods (params) {
//      pageCmpGoods (params) {
//        params.filter.brandid = this.brand.id
        let param = {
          branduuid: this.brand.uuid,
          count: this.pageParams.count,
          page: this.pageParams.page,
          kindid: this.kindid,
          keyword: this.searchCode || null
        }
        let { data } = await this.$http.get('/api/product/goods', {params: param})
        this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
//        this.$http.get('/api/product/component/list', { params }).then(response => {
//          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', response)
//        })
      },
      handleCurrentChange (page) {
        this.pageParams.page = page
        this.pageParams.filter.brandid = this.brand.id
        this.pageCmpGoods(this.pageParams)
      },
      toAttach: function (url) {
        if (url === '1') {
          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)
            }
          })
        } else {
          window.open(url)
        }
      },
      addToCar: function (item) {
        buyOrCar(false, null, this, item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .component-list {
    float: left;
    margin-left: 20px;
    width: 970px;
    .type-list{
      height: 34px;
      width: 150px;
      border: 1px solid #3a75f5;
      background-color: #3a75f5;
      float: left;
      color: #fff;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
    }
    .agency {
      height: 34px;
      width: 150px;
      border: 1px solid #3a75f5;
      background-color: #fff;
      float: left;
      color: #3a75f5;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
    }
    .input-group {
      width: 300px;
      float: right;
      border-radius: 3px;
      .form-control{
        border-radius: 3px;
        height: 34px;
      }
      .input-group-btn .search{
        background: #3a75f5;
        color: #fff;
        height: 34px;
        border-radius: 3px;
        padding: 3px 24px;
      }
    }
  }

  .component-list table {
    margin-top: 10px;
    width: 970px;
    border: 1px solid #e8e8e8;
  }
  .component-list table>thead {
    height: 40px;
  }
  .component-list table>thead>th {
    text-align: center;
  }
  .component-list table tbody tr{
    text-align: center;
    height: 60px;
  }
  .component-list table tbody tr:hover{
    background-color: #f6f9ff;
  }
  .component-list .table>tbody>tr>td{
    vertical-align: middle;
    border-top: #e8e8e8 1px solid;
  }
  .component-list table tbody tr td a{
    color: #333;
    font-size: 14px;
    &:hover{
      color: #5078cb;
    }
  }
  .component-list .btn-default {
    color: #214797;
    font-size: 12px;
    line-height: 12px;
    height: 30px;
  }
  .component-list .disabledbtn {
    color: #A0A0A0;
  }
  .component-list .applay {
    color: #3a75f5;
    font-size: 12px;
    line-height: 12px;
    height: 30px;
    width: 80px;
    padding: 0;
    border: 1px solid #3a75f5;
    border-radius: 0;
  }
  .component-list td.text-center{
    padding: 30px 0;
    font-size: 20px;
    line-height: 40px;
  }
  .bgf7{
    height: 40px;
    th{
      background: #f7f7f7;
      border-bottom: none !important;
      font-size: 14px;
      text-align: center;
      color: #333;
      vertical-align: middle;
    }
  }
  .component-list .empty{
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
  }
  .component-list .empty-img{
    float: left;
    margin-left: 335px;
  }
  .component-list .empty-info{
    float: left;
    line-height: 10px;
    width: 143px;
    margin-top: 30px;
  }
  .empty-info .grey{
    color: #999;
    font-size: 14px;
  }
  .component-list .empty-info a{
    font-size: 14px;
    color: #5078cb;
  }
  .component-list .empty-info i{
    font-size: 14px;
    color: #5078cb;
  }
</style>