mall-web-ssr/components/home/floor/FloorList.vue

<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floors"></floor-bar>
      <div class="banner">
        <ul>
          <li><a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao01.png" alt=""></a></li>
          <li>
            <div class="banner-cuxiao">
              <table>
                <caption><span>最新求购</span><img src="/images/all/banner-cuxiao03.jpg" alt=""></caption>
                <thead>
                <tr>
                  <th>发布时间</th>
                  <th>买家名称</th>
                  <th>型号</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="data in tableData">
                  <td>{{data.publicTime}}</td>
                  <td>{{data.name.slice(0, 1) + '**'}}</td>
                  <td>{{data.productModel | titleFilter}}</td>
                  <td><a>我要报价</a></td>
                </tr>
                </tbody>
              </table>
              <a class="purchase">我要求购</a>
            </div>
          </li>
        </ul>
      </div>
      <floor :floor="defaultFloors[0]" :isDefault="true" v-if="!isEmpty"></floor>
      <floor :floor="defaultFloors[1]" :isDefault="true" v-if="!isEmpty"></floor>
      <floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
    </div>
    <span v-if="expandFloors && false">floor</span>
  </div>
</template>
<script>
  import Floor from './Floor.vue'
  import FloorBar from './FloorBar.vue'
  export default {
    name: 'floor-list',
    components: {
      Floor,
      FloorBar
    },
    data () {
      return {
        tableData: [{
          publicTime: '7分钟前',
          name: '杨某某',
          productModel: '9w8r9r'
        }, {
          publicTime: '7分钟前',
          name: '杨某某',
          productModel: '9w8r9r8r78e'
        }, {
          publicTime: '7分钟前',
          name: '杨某某',
          productModel: '9w8r9r8r78e'
        }, {
          publicTime: '7分钟前',
          name: '杨某某',
          productModel: '9w8r9r8r78e'
        }, {
          publicTime: '7分钟前',
          name: '杨某某',
          productModel: '9w8r9r8r78e'
        }],
        defaultFloors: [
          {
            items: [
              {
                backGroundColor: '',
                body: '',
                hrefUrl: '/store/33069557578d44e69bd91ad12d28a8d4',
                pictureUrl: '/images/floor/banner1.jpg',
                size: 'large'
              }
            ]
          },
          {
            items: [
              {
                backGroundColor: '',
                body: '',
                hrefUrl: '/store/33069557578d44e69bd91ad12d28a8d4',
                pictureUrl: '/images/floor/banner2.jpg',
                size: 'large'
              }
            ]
          }
        ]
      }
    },
    computed: {
      floors () {
        return this.$store.state.floor.list
      },
      isProd () {
        return this.$store.state.option.url === 'http://www.usoftmall.com'
      },
      expandFloors () {
        let data = this.$store.state.floor.list_expand.data
        let _this = this
        for (let i = 0; i < data.length; i++) {
          let obj = {
            backGroundColor: '',
            body: '',
            hrefUrl: '',
            name: '',
            pictureUrl: '',
            size: '',
            price: '',
            currency: 'RMB'
          }
          if (data[i]) {
            obj.name = data[i].code
            obj.body = data[i].brandNameEn + '<br/>' + (data[i].kindNameCn || '其他')
            obj.hrefUrl = '/store/productDetail/' + data[i].batchCode
            obj.pictureUrl = '/images/floor/' + (this.isProd ? data[i].code : '2SD2704KT146') + '.png'
            obj.size = i % 3 === 0 ? 'medium' : 'small'
            obj.currency = data[i].currencyName
            obj.price = _this.getMinPrice(data[i].prices, data[i].currencyName)
            _this.defaultFloors[i < 6 ? 0 : 1].items.push(obj)
          }
        }
        return data
      },
      isEmpty () {
        let data = this.$store.state.floor.list_expand.data
        if (!data.length) {
          return true
        } else {
          for (let i = 0; i < data.length; i++) {
            if (!(data[0] && data[0] !== null)) {
              return true
            }
          }
        }
        return false
      }
    },
    methods: {
      getMinPrice: function (prices, currency) {
        for (let i = 0; i < prices.length; i++) {
          if (i === prices.length - 1) {
            return currency === 'RMB' ? prices[i].rMBPrice : prices[i].uSDPrice
          }
        }
      }
    },
    filters: {
      titleFilter: 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 > 50) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  /*add*/
  .floor-list .container{
    padding: 0;
  }
  .floor-list {
    margin-bottom: $xlg-pad;
  }
  .floor-list .container > a > img {
    margin-top: 30px;
  }
  @keyframes myfirst {
    0% {
      transform: translate(0px, 0px);
    }
    50% {
      transform: translate(0px, -3px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }
  .banner{
    width:1190px;
    height: 253px;
    margin-top: 20px;
    li{
      float: left;
      padding-left: 14px;
      position: relative;
      &:first-child{
        padding-left: 0px;
      }
    }
    .banner-cuxiao {
      width: 660px;
      height: 253px;
      background: url('/images/all/banner-cuxiao02.png') no-repeat;
      table {
        width: 436px;
        caption {
          color: #f57a2e;
          font-size: 20px;
          font-weight: bold;
          padding: 10px 30px;
          img{
            position: relative;
            top: -7px;
            animation: myfirst 1s infinite;
          }
        }
        thead tr th {
          height: 30px;
          color: #fff;
          font-size: 14px;
          background-color: #f57a2e;
        }
       tr th, tr td {
          height: 30px;
          &:first-child {
            padding: 6px 7px 6px 16px;
          }
         &:nth-child(2) {
           padding-right: 7px;
         }
         &:nth-child(3) {
           text-align: center;
           padding: 6px 10px 6px 10px;
         }
         &:nth-child(4) {
           text-align: center;
           padding: 6px 10px 6px 10px;
         }
          a {
            width: 64px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            padding: 3px 5px;
            color: #fd3904;
            font-size: 12px;
            border-radius: 2px;
            border: 1px solid #fd3904;
            &:hover {
              border: 1px solid #fd3904;
              background-color: #fd3904;
              color: #fff;
              -moz-box-shadow: 0px 3px 5px #f57a2e; /* 老的 Firefox */
              box-shadow: 0px 3px 10px #f57a2e;
            }
          }
        }
        tr td{
          &:first-child {
            color: #f57a2e;
          }
        }
      }
      .purchase {
        position: absolute;
        left: 515px;
        top: 184px;
        width: 100px;
        height: 28px;
        line-height: 28px;
        background-color: #fff;
        color: #f57a2e;
        border-radius: 25px;
        text-align: center;
        font-weight: bold;
        &:hover{
          background-color: #FB6102;
          color: #fff;
          box-shadow: 0px 3px 10px #fd863d;
        }
      }
    }
  }
</style>