yoe-shop-web/src/views/home/index-fuli.vue

<template>
  <div class="home-pages">
    <!--  头部 -->
    <comHead v-if="headData.show" :row="headData" :datas="realList"></comHead>

    <!-- 场景采购 -->
    <indexFuilTitle :datas="{ title: '场景采购' }"></indexFuilTitle>
    <imageCube v-if="scenario.length > 0" :datas="scenario" :row="imageCubeData"></imageCube>

    <!-- 热门定制 -->
    <indexFuilTitle :datas="{ title: '热门定制' }"></indexFuilTitle>
    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="popular"></comGoods>

    <!-- 循环数据 -->
    <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
      <div class="h-[15px]"></div>
      <floor v-if="item.floorData && item.floorData.show" :row="item.floorData"></floor>
    </div>

    <!-- 为您推荐 -->
    <indexFuilTitle :datas="{ title: '为您推荐' }"></indexFuilTitle>
    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="recommend"></comGoods>
  </div>
</template>

<script setup lang="ts">
import indexFuilTitle from '@/views/home/pccomponents/pages/indexFuilTitle.vue';
import comHead from '@/views/home/pccomponents/pages/head.vue';
import imageCube from '@/views/home/pccomponents/pages/imageCube.vue';
import comGoods from '@/views/home/pccomponents/pages/goods.vue';
import floor from '@/views/home/pccomponents/pages/floor.vue';
import fuli from '@/assets/images/fuli.png';
import {
  getHomeAdList,
  getIconAdList,
  getRecommendAdList,
  getHotCustomGiftFloorList,
  getAdvertisementGiftFloorList,
  getGiftFloorLinkProductList,
  getRecommendGiftFloorList,
  getFulillNoticeList
} from '@/api/home/index-fuli';
import { getSearchTitle, getHomeNav } from '@/api/home/index';

const headData = ref<any>({});
const imageCubeData = ref<any>({});
const realList = ref<any>([]);
const scenario = ref<any>([]);
const popular = ref<any>([]);
const goodsList = ref<any>([]);
const recommend = ref<any>([]);

onMounted(() => {
  document.documentElement.style.setProperty('--hover-color', '#E7000B');
  getHead();
});

//头部
const getHead = async () => {
  headData.value.topStyle = 2;
  headData.value.logo = fuli;
  headData.value.toplabel = [];
  headData.value.classifyShow = true;
  headData.value.carouselStyle = true;
  headData.value.headType = 2;
  headData.value.leftStyle = 1;
  headData.value.carouselList = [];
  headData.value.advertNum = 0;
  headData.value.advertList = [];
  headData.value.realDataType = 1;
  headData.value.realNumber = 6;
  headData.value.navlList = [];
  try {
    const datas1 = await getSearchTitle(3);
    if (datas1.code == 200) {
      datas1.data.forEach((item: any) => {
        headData.value.toplabel.push({
          title: item.navigationName
        });
      });
    }

    const datas2 = await getHomeNav(3);
    headData.value.topNav = [];
    datas2.data.forEach((item: any) => {
      headData.value.topNav.push({
        title: item.navigationName,
        url: item.url ? item.url : ''
      });
    });

    const datas3 = await getHomeAdList({});
    if (datas3.code == 200) {
      datas3.data.forEach((item: any) => {
        headData.value.carouselList.push({
          imageUrl: item.imageUrl,
          url: item.link ? item.link : ''
        });
      });
    }

    const datas5 = await getFulillNoticeList({});
    if (datas5.code == 200) {
      datas5.rows.forEach((item: any) => {
        item.announcementTitle = item.title;
        item.pathType = 3;
      });
      realList.value = datas5.rows;
    }

    const datas6 = await getIconAdList({});
    if (datas6.code == 200) {
      datas6.data.forEach((item: any) => {
        headData.value.navlList.push({
          imageUrl: item.imageUrl,
          title: item.title,
          url: item.link ? item.link : ''
        });
      });
    }

    headData.value.show = true;
  } catch (error) {}
};

// 场景采购
getRecommendAdList({}).then((res) => {
  if (res.code == 200) {
    imageCubeData.value.aspectRatio = 292.5 / 183;
    imageCubeData.value.number = 4;
    imageCubeData.value.gap = 10;
    imageCubeData.value.imageTopRounded = 5;
    imageCubeData.value.imageBottomRoundedRounded = 5;
    res.data.forEach((item: any) => {
      item.imageUrl = item.imageUrl;
      item.url = item.link ? item.link : '';
    });
    scenario.value = res.data;
  }
});

//热门定制
getHotCustomGiftFloorList({}).then((res) => {
  if (res.code == 200) {
    getGiftFloorLinkProductList({ floorId: res.data[0].id }).then((res1) => {
      if (res1.code == 200) {
        popular.value = res1.data;
      }
    });
  }
});

//外面的循环
getAdvertisementGiftFloorList({}).then(async (res) => {
  if (res.code == 200) {
    for (const item of res.data) {
      item.floorData = {};
      item.floorData.imageUrl = item.mainImg;
      item.floorData.url = item.link ? item.link : '';
      item.floorData.imgType = 1;
      item.floorData.brandList = [];
      item.floorData.styleType = 1;
      item.floorData.imageRadius = 5;
      item.floorData.goodsIds = [];
      item.floorData.goodsShow = [1, 2, 3];
      item.floorData.btnStyle = 1;
      item.floorData.btnColor = '#ffffff';
      item.floorData.btnbackgroundColor = '#E7000B';
      item.floorData.moreUrl = '';
      item.floorData.moreColor = '#E7000B';
      item.floorData.moreShow = true;
      try {
        const datas2 = await getGiftFloorLinkProductList({ floorId: item.id });
        if (datas2.code == 200) {
          item.goodsList = datas2.data;
          item.floorData.goodsList = datas2.data;
          item.floorData.goodsDefault = true;
        }
        item.floorData.show = true;
      } catch (error) {}
    }
    goodsList.value = res.data;
  }
});

// 为您推荐
getRecommendGiftFloorList({}).then((res) => {
  if (res.code == 200) {
    getGiftFloorLinkProductList({ floorId: res.data[0].id }).then((res1) => {
      if (res1.code == 200) {
        recommend.value = res1.data;
      }
    });
  }
});
</script>

<style lang="scss" scoped>
.home-pages {
  width: 100%;
  padding-bottom: 30px;

  :deep(.hover-color) {
    cursor: pointer;

    &:hover {
      color: var(--hover-color) !important;

      .zi-hover {
        color: var(--hover-color) !important;
      }
    }
  }
}
</style>