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 v-if="pickData.length >= PICK_COUNT_MIN" :data="pickData" />
    </div>
  </div>
</template>

<script>
import {
  ApiGetHomeSeckill,
  ApiGetCurrentTime,
  ApiGetSeckillGoods,
} from "@/plugins/api/seckill";
import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
import Banner from "./module/Banner.vue";
import Seckil from "./module/Seckill.vue";
import Pick from "./module/Pick.vue";
const PICK_COUNT_MIN = 3; // 甄选推荐最小商品数

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: 20,
        activityTimeId: seckillData.activityTimeVO.id,
      });
      if (result) {
        sekillGoodsList = result.records;
      }
    }
    // 获取服务器当前时间
    const { result: currentTime } = await ApiGetCurrentTime();

    const { result: pickData } = await ApiGetRecommendedGoodsList();
    return {
      currentTime,
      seckillData: seckillData || { activityTimeVO: null },
      sekillGoodsList,
      pickData: pickData || [],
    };
  },
  data() {
    return {
      PICK_COUNT_MIN,
    };
  },
  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>