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

<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floors"></floor-bar>
      <a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>
      <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 {
        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
        for (let i = 0; i < data.length; i++) {
          if (!(data.length && 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
          }
        }
      }
    }
  }
</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-bottom: -48px;
    margin-top: 30px;
  }
</style>