<template>
  <div class="bg">
    <HomeLayout />

    <div class="product-box">
      <h2>今日推荐</h2>
      <ProductList :products="newProducts" />
    </div>

    <div class="product-box">
      <h2>热销排行</h2>
      <ProductList :products="newProducts" />
    </div>

    <div class="product-box">
      <h2>新品上市</h2>
      <ProductList :products="newProducts" />
    </div>
  </div>
</template>

<script>
import HomeLayout from "@/components/layout/HomeLayout.vue";
import ProductList from "@/components/product/ProductList.vue";

export default {
  components: {
    HomeLayout,
    ProductList,
  },
  data() {
    return {
      topBanner: [],
      newProducts: [
        {
          id: 7,
          name: "高清投影仪高清投影仪高清投影仪高清投影仪高清投影仪高清投影仪高清投影仪高清投影仪",
          price: 3299,
          originalPrice: 3699,
          image:
            "https://static.ticket.sz-trip.com/jundaosuzhou/images/scenicType/topImg.png",
          sales: 156,
          categoryId: 1,
        },
        {
          id: 8,
          name: "保湿面霜",
          price: 299,
          originalPrice: 359,
          image:
            "https://static.ticket.sz-trip.com/jundaosuzhou/images/scenicType/topImg.png",
          sales: 423,
          categoryId: 4,
        },
        {
          id: 9,
          name: "有机水果礼盒",
          price: 159,
          originalPrice: 199,
          image:
            "https://static.ticket.sz-trip.com/jundaosuzhou/images/scenicType/topImg.png",
          sales: 287,
          categoryId: 5,
        },
        {
          id: 10,
          name: "经典文学名著",
          price: 129,
          originalPrice: 199,
          image:
            "https://static.ticket.sz-trip.com/jundaosuzhou/images/scenicType/topImg.png",
          sales: 342,
          categoryId: 6,
        },
      ],
    };
  },
  created() {
    this.getTopBanner();
  },
  methods: {
    getTopBanner() {
      // 头部banner
      this.post(
        {
          type_id: 6,
          position: 0,
        },
        "/api/adv/getAdv"
      ).then((res) => {
        if (res) {
          this.topBanner = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.product-box {
  margin: 30px 0;

  h2 {
    margin-bottom: 20px;
  }
}
</style>