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

<template>
  <div class="floor-list">
    <div class="container">
      <floor-bar :floors="floors"></floor-bar>
      <floor :floor="defaultFloors[0]" :isDefault="true"></floor>
      <floor :floor="defaultFloors[1]" :isDefault="true"></floor>
      <floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
    </div>
  </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: '',
                pictureUrl: '/images/floor/banner1.jpg',
                size: 'large'
              }
            ]
          },
          {
            items: [
              {
                backGroundColor: '',
                body: '',
                hrefUrl: 'https://www.usoftmall.com/product/kind/11',
                pictureUrl: '/images/floor/banner2.jpg',
                size: 'large'
              }
            ]
          }
        ]
      }
    },
//    mounted () {
//      this.$http.get('/api/floors/home')
//        .then(response => {
//          this.floors = response
//        })
//    }
    computed: {
      floors () {
        return this.$store.state.floor.list
      }
    },
    created () {
      let arr = []
      this.$http.post('api/commodity/detail', arr).then(response => {
        let data = response.data
//        {
//          backGroundColor: '',
//            body: 'Rohm<br>晶体管',
//          hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
//          name: 'RHU002N06T106',
//          pictureUrl: '/images/floor/RHU002N06T106.png',
//          size: 'medium',
//          price: 1.111111,
//          currency: 'RMB'
//        }
        let obj = {
          backGroundColor: '',
          body: '',
          hrefUrl: '',
          name: '',
          pictureUrl: '',
          size: '',
          price: '',
          currency: 'RMB'
        }
        for (let i = 0; i < data.length; i++) {
          if (data[i]) {
            obj.name = data[i].code
            obj.body = data[i].brandNameEn + '<br/>' + data[i].kindNameCn
            obj.hrefUrl = 'https://www.usoftmall.com/store/productDetail/' + data[i].batchCode
            obj.pictureUrl = '/images/floor/' + data[i].code + '.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.items[i < 6 ? 0 : 1].append(obj)
          }
        }
      })
    },
    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;
  }
</style>