shop-pc/pages/index/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-03 22:14:16
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 22:21:04
 * @Description: file content
-->
<template>
  <div class="home">
    <Banner />
    <div class="home-wrap">
      <Seckil
        v-if="seckillData.activityTimeVO"
        :data="seckillData"
        :list="sekillGoodsList"
        :current="currentTime"
        @refresh="handleSeckillRefresh"
      />
      <Pick :recommend-data="recommendData" :new-data="newData" />
    </div>
  </div>
</template>

<script>
import {
  ApiGetHomeSeckill,
  ApiGetCurrentTime,
  ApiGetSeckillGoods,
} from "@/plugins/api/seckill";
import {
  ApiGetRecommendedGoodsList,
  ApiGetGoodsList,
} from "@/plugins/api/goods";
import Banner from "./module/Banner.vue";
import Seckil from "./module/Seckill.vue";
import Pick from "./module/Pick.vue";
const SECKILL_COUNT = 20; // 秒杀商品数
const NEW_COUNT = 5; // 新品上架商品数

export default {
  components: { Banner, Seckil, Pick },
  async asyncData() {
    // 获取秒杀数据
    const { result: seckillData } = await ApiGetHomeSeckill();
    // 获取秒杀商品列表
    let sekillGoodsList = [];
    if (seckillData.activityTimeVO) {
      const { result } = await ApiGetSeckillGoods({
        pageIndex: 1,
        length: SECKILL_COUNT,
        activityTimeId: seckillData.activityTimeVO.id,
      });
      if (result) {
        sekillGoodsList = result.records;
      }
    }
    // 获取服务器当前时间
    const { result: currentTime } = await ApiGetCurrentTime();

    // 获取甄选商品
    const { result: recommendData } = await ApiGetRecommendedGoodsList();

    // 获取新品上架商品
    let newData = [];
    const { result: newDataResult } = await ApiGetGoodsList({
      pageIndex: 1,
      length: NEW_COUNT,
    });
    if (newDataResult) {
      newData = newDataResult.records || [];
    }

    return {
      currentTime,
      newData,
      sekillGoodsList,
      seckillData: seckillData || { activityTimeVO: null },
      recommendData: recommendData || [],
    };
  },
  methods: {
    // 刷新秒杀活动状态
    async handleSeckillRefresh() {
      const { result: seckillData } = await ApiGetHomeSeckill();
      const { result: currentTime } = await ApiGetCurrentTime();
      this.seckillData = seckillData;
      this.currentTime = currentTime;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  background: #f8f8f8;
  .home-wrap {
    @include layout-box;
    padding: 30px 0 30px 0;
  }
}
</style>