mall-web-ssr/components/provider/Suppliers.vue

<template>
  <div>
    <div id="store-list">
      <table class="table">
        <thead>
        <tr>
          <td width="120"><span v-text="storeType === 'factory' ? '原 厂' : '代理经销'">原厂</span></td>
          <td width="100"></td>
          <td width="460"></td>
          <td width="150" style="vertical-align: middle"></td>
          <td width="120" style="vertical-align: middle;"></td>
        </tr>
        </thead>
        <tbody>
        <!--<tr>{{$data}}</tr>-->
        <tr style="height: 50px;">
          <td colspan="5">
            <search-header :outerKeyword="keyword" @searchAction="search" :placeholder="'品牌/类目/型号/店铺名'"></search-header>
            <a @click="goStoreApply" class="btn-sure"><button class="btn btn-primary">立即入驻</button></a>
          </td>
        </tr>
        <tr v-for="store in stores.content" v-if="store">
          <td>
            <div class="logo">
              <a :href="'/store/' + store.uuid" target="_blank"><img :src="store.logoUrl || '/images/store/common/default.png'" :alt="store.storeName"></a>
            </div>
          </td>
          <td colspan="3">
            <a class="store-name" :href="'/store/' + store.uuid" target="_blank"><div :title="store.storeName">{{store.storeName}}</div></a>
            <div class="store-message">
              <span>企业介绍：</span>
              <span style="word-break: break-word;">{{showLittleDescription(store.enterprise.description)}}<em v-if="store.description && store.description.length > 160">...</em></span>
            </div>
          </td>
          <td class="vertical-middle" style="text-align: center">
            <a :href="'/store/' + store.uuid" target="_blank"><button class="btn btn-primary">进入店铺</button></a>
          </td>
        </tr>
        <tr v-if="!stores.content || stores.content.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>
    <div style="float: right;">
      <page :total="stores.totalElements" :page-size="pageParams.count"
            :current="pageParams.page" v-on:childEvent="handleCurrentChange"></page>
    </div>
  </div>
</template>
<script>
import Page from '~components/common/page/pageComponent.vue'
import SearchHeader from '~components/common/PcSearchHeader.vue'
export default {
  name: 'suppliers',
  components: {
    Page,
    SearchHeader
  },
  data () {
    return {
      keyword: '',
      pageParams: {
        page: 1,
        count: 10,
        keyword: '',
        type: this.storeType === 'factory' ? 'ORIGINAL_FACTORY' : 'AGENCY-DISTRIBUTION',
        field: ''
      }
    }
  },
  computed: {
    storeType () {
      if (this.pageParams) {
        this.pageParams.page = 1
      }
      return this.$store.state.provider.stores.storeType.data
    },
    stores () {
      return this.$store.state.provider.stores.storeList.data
    },
    user () {
      return this.$store.state.option.user
    },
    enterprise () {
      let ens = this.user.data.enterprises
      if (ens && ens.length) {
        return ens.find(item => item.current) || {enName: '个人账户'}
      } else {
        return {enName: '个人账户'}
      }
    }
  },
  methods: {
    search (obj) {
      this.pageParams.page = 1
      this.pageParams.keyword = obj.keyword === '' ? null : obj.keyword
      this.pageParams.field = obj.type ? 'similar' : null
      this.pageCommodity(this.pageParams)
    },
    showLittleDescription (description) {
      if (!description || description === '') {
        return '暂无企业介绍'
      }
      return description.slice(0, 160)
    },
    async pageCommodity (pageParams) {
//    pageCommodity (pageParams) {
      pageParams.op = 'similar'

      try {
        let { data } = await this.$http.get('/api/store-service/stores', { params: pageParams })
        this.$store.commit('provider/stores/GET_STORE_LIST_SUCCESS', data)
      } catch (err) {
        this.$store.commit('provider/stores/GET_STORE_LIST_FAILURE', err)
      }
//      this.$http.get('/api/store-service/stores', { params: pageParams }).then(response => {
//        this.$store.commit('provider/stores/GET_STORE_LIST_SUCCESS', response)
//      }, err => {
//        this.$store.commit('provider/stores/GET_STORE_LIST_FAILURE', err)
//      })
    },
    handleCurrentChange (page) {
      this.pageParams.page = page
      this.pageParams.keyword = this.keyword === '' ? null : this.keyword

      this.pageCommodity(this.pageParams)
    }
  }
}
</script>
<style lang="scss" scoped>
  #store-list{
		width: 955px;
    height: 1213px;
    background: #fff;
    table{
      table-layout: fixed;
      width: 955px;
      thead{
        padding: 10px 0 9px 9px;
        width: 955px;
        height: 34px;
        line-height: 34px;
        tr{
          vertical-align: middle;
          td{
            padding: 0!important;
            height: 34px;
            line-height: 34px;
            background-color: #2496f1;
            span{
              padding-left: 10px;
              font-size: 16px;
              color: #fff;
            }
            &:first-child {
               border-top-left-radius: 5px;
             }
           &:last-child {
              border-top-right-radius: 5px;
            }
          }
        }
      }
      tbody{
        background: #fff;
        tr{
          height: 112px;
          td{
            padding: 0!important;
            vertical-align: middle;
            a.btn-sure{
              button{
                margin: 0px 0 0 80px;
                width: 110px !important;
                height: 28px;
                font-size: 14px;
                color: #2496f1;
                background-color: #fff;
                border-radius: 3px;
                border: solid 1px #2496f1;
                &:hover{
                   background-color: #2496f1;
                   font-size: 14px;
                   color: #fff;
                 }
              }
            }
          }
          &:hover td div{
             color: #2496f1;
           }
        }
      }
    }
	}
	#store-list table>thead>tr input {
		font-weight: 100;
	}
	#store-list .text-message {
		color: rgb(80,120,203);
	}

	#store-list .btn-primary {
    width: 88px;
    height: 28px;
    font-size: 14px;
    color: #2496f1;
    background-color: #ffffff;
    border-radius: 3px;
    border: solid 1px #2496f1;
	}
  #store-list .btn-primary:hover{
    background-color: #2496f1;
    border: solid 1px #2496f1;
    color: #fff;
  }
	#store-list table>tbody .logo {
    margin-left: 15px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 2px;
    border: solid 1px #e2e2e2;
    overflow: hidden;
	}

	#store-list table>tbody img {
		max-width: 80px;
		max-height: 80px;
	}

	#store-list table>tbody .vertical-middle{
		vertical-align: middle;
	}

	#store-list table>tbody .store-mark {
		margin: 10px 0;
	}

	#store-list table>tbody .text-point {
		color: #ff3737;
		font-weight: 600;
	}

	#store-list table>tbody .store-name {
		font-size: 17px;
		font-weight: 600;
		color: #000;
    div{
      width: 410px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
	}

	#store-list table>tbody .store-message {
    margin-top: 5px;
    color: #666;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 18px;
	}
  #store-list table>tbody tr:hover{
    box-shadow: 1px 1px 12px rgb(145, 197, 239);
    -moz-box-shadow: 1px 1px 12px rgb(145, 197, 239);
    -o-box-shadow: 1px 1px 12px rgb(145, 197, 239);
    -webkit-box-shadow: 1px 1px 12px rgb(145, 197, 239) ;
    cursor: pointer;
  }
  #store-list table>tbody tr:first-child:hover{
    box-shadow: none;
    cursor: default ;
  }
	#store-list table>tbody tr td{
		padding: 15px;
	}

	@font-face {
    font-family: 'iconfont';  /* project id 357960 */
    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot');
    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.woff') format('woff'),
    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.svg#iconfont') format('svg');
  }
  .el-pagination .el-pager li.active{
    background-color: #5078cb;
    border-color: #337ab7;
  }
</style>