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

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

    <!-- 热门方案 -->
    <indexTitle :datas="hotTitle"></indexTitle>
    <div class="hot-bos">
      <div v-for="(item, index) in hotList" :key="index" class="data-list flex-column-center hover-color" @click="onPath(item.url)">
        <div class="zi-hover color-[#101828] font-size-[16px] fw-600">{{ item.title || '' }}</div>
        <div class="mt-[2px] mb-[12px] color-[#364153] font-size-[14px]">{{ item.subtitle || '' }}</div>
        <el-image
          class="img"
          :src="item.imageUrl ? item.imageUrl : figure"
          :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
        />
      </div>
    </div>
    <!-- <navigation v-if="hotList.length > 0" :datas="hotList" :row="{ aspectRatio: 170 / 112, imageHeight: 112, number: 5 }"></navigation> -->

    <!-- 场景采购 -->
    <indexTitle :datas="sceneTitle"></indexTitle>
    <imageCube v-if="sceneList.length > 0" :datas="sceneList" :row="{ aspectRatio: 232 / 300 }"></imageCube>

    <!-- 大牌推荐 -->
    <indexTitle :datas="bigbrandTitle"></indexTitle>
    <brand
      v-if="bigbrandOne.coverImage && bigbrandList.length > 0"
      :row="{ imageUrl: bigbrandOne.coverImage, url: bigbrandOne.url, brandList: bigbrandList }"
    ></brand>

    <!-- 行家精选 -->
    <indexTitle :datas="expertTitle"></indexTitle>
    <comGoods :row="{ styleType: 1, goodsShow: [1, 2, 3], goodsTitleType: 3 }" :datas="expertList"></comGoods>

    <!-- 采购指南 -->
    <indexTitle :datas="procureTitle"></indexTitle>
    <advert v-if="procureList.length > 0" :row="{ navlList: procureList, styleType: 1, aspectRatio: 393 / 220 }"></advert>

    <!-- 循环-商品楼层 -->
    <div v-for="(item1, index1) in homeList" :key="index1">
      <discover :row="item1" :datas="item1.shopList"></discover>
    </div>

    <!-- 项目案例 -->
    <indexTitle :datas="projectTitle"></indexTitle>
    <comArticle v-if="projectList.length > 0" :datas="projectList" :row="{ dataType: 1, dataNumber: 4 }"></comArticle>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import indexTitle from '@/views/home/pccomponents/pages/indexTitle.vue';
import comHead from '@/views/home/pccomponents/pages/head.vue';
import navigation from '@/views/home/pccomponents/pages/navigation.vue';
import imageCube from '@/views/home/pccomponents/pages/imageCube.vue';
import brand from '@/views/home/pccomponents/pages/brand.vue';
import comGoods from '@/views/home/pccomponents/pages/goods.vue';
import advert from '@/views/home/pccomponents/pages/advert.vue';
import discover from '@/views/home/pccomponents/pages/discover.vue';
import comArticle from '@/views/home/pccomponents/pages/article.vue';
import figure from '@/assets/images/figure.png';
import {
  getSearchTitle,
  getHomeAdList,
  getYouYiZiXunPage,
  getEnterpriseMemberEquityList,
  getHomeThreeAdList,
  getHotSchemeTitle,
  getHotSchemeList,
  getScenePurchaseTitle,
  getScenePurchaseList,
  getPlatformFlashSaleTitle,
  getPlatformFlashSaleList,
  getPlatformFlashSaleBrand,
  getExpertSelectionTitle,
  getProcurementTopicsList,
  getPurchaseGuideTitle,
  getExpertSelectionList,
  getClassificationFloorList,
  getClassificationFloorDetail,
  getClassificationFloorLabel,
  getClassificationFloorDetail2,
  getProjectCaseTitle,
  getProjectCaseList,
  getHomeNav
} from '@/api/home/index';

const headData = ref<any>({});
const realList = ref<any>([]);
const hotTitle = ref<any>('');
const hotList = ref<any>([]);
const sceneTitle = ref<any>('');
const sceneList = ref<any>([]);
const expertTitle = ref<any>('');
const expertList = ref<any>([]);
const procureTitle = ref<any>('');
const procureList = ref<any>([]);
const projectTitle = ref<any>('');
const projectList = ref<any>([]);
const bigbrandTitle = ref<any>('');
const bigbrandList = ref<any>([]);
const bigbrandOne = ref<any>({});
const homeList = ref<any>([]);

onMounted(() => {
  document.documentElement.style.setProperty('--hover-color', '#E7000B');
  getHead();
});
//头部
const getHead = async () => {
  headData.value.topStyle = 1;
  headData.value.toplabel = [];
  headData.value.classifyShow = true;
  headData.value.headType = 0;
  headData.value.leftStyle = 1;
  headData.value.carouselList = [];
  headData.value.advertNum = 1;
  headData.value.advertList = [];
  headData.value.realDataType = 1;
  headData.value.realNumber = 6;
  headData.value.navlList = [];
  try {
    const datas1 = await getSearchTitle(1);
    if (datas1.code == 200) {
      datas1.data.forEach((item: any) => {
        headData.value.toplabel.push({
          title: item.navigationName
        });
      });
    }

    const datas2 = await getHomeNav(1);
    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 datas4 = await getHomeThreeAdList({});
    if (datas4.code == 200) {
      datas4.data.forEach((item: any) => {
        headData.value.advertList.push({
          imageUrl: item.imageUrl,
          url: item.link ? item.link : '',
          show: true
        });
      });
      // headData.value.advertList.push( headData.value.advertList[0]);
    }

    const datas5 = await getYouYiZiXunPage({});
    if (datas5.code == 200) realList.value = datas5.data;

    const datas6 = await getEnterpriseMemberEquityList({});
    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) {}
};

//热门方案标题
getHotSchemeTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan';
    hotTitle.value = res.data;
  }
});

//热门方案列表
getHotSchemeList({}).then((res) => {
  if (res.code == 200) {
    hotList.value = [];
    res.data.forEach((item: any, index: any) => {
      item.title = item.advertTitle;
      item.subtitle = item.advertBrief;
      item.imageUrl = item.coverImage;
      item.url = item.advertUrl ? item.advertUrl : '';
      hotList.value.push(item);
      // if (index < 4) hotList.value.push(item);
    });
  }
});

//场景采购标题
getScenePurchaseTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/procure';
    sceneTitle.value = res.data;
  }
});

//场景采购列表
getScenePurchaseList({}).then((res) => {
  if (res.code == 200) {
    res.data.forEach((item: any) => {
      item.imageUrl = item.coverImage;
      item.url = item.advertUrl ? item.advertUrl : '';
    });
    sceneList.value = res.data;
  }
});

//大牌推荐标题（平台闪购标题）
getPlatformFlashSaleTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/search/brand';
    bigbrandTitle.value = res.data;
  }
});

//大牌推荐列表（平台闪购列表）
getPlatformFlashSaleList({}).then((res) => {
  if (res.code == 200 && res.data.length > 0) {
    bigbrandOne.value = res.data[0];
    bigbrandOne.value.url = res.data[0].advertUrl ? res.data[0].advertUrl : '';
  }
});

//大牌推荐列表（平台闪购列表）-右
getPlatformFlashSaleBrand({}).then((res) => {
  if (res.code == 200 && res.data.length > 0) {
    res.data.forEach((item: any, index: any) => {
      item.title = item.brandName;
      item.imageUrl = item.brandLogo;
      item.url = '/search?type=1&brandId=' + item.id;
      if (index < 10) bigbrandList.value.push(item);
    });
  }
});

//行家精选标题
getExpertSelectionTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/search/special';
    expertTitle.value = res.data;
  }
});

//行家精选列表
getExpertSelectionList({}).then((res) => {
  if (res.code == 200) {
    expertList.value = res.data;
  }
});

//采购指南标题
getPurchaseGuideTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/guide';
    procureTitle.value = res.data;
  }
});

//采购指南列表
getProcurementTopicsList({}).then((res) => {
  if (res.code == 200) {
    res.data.forEach((item: any) => {
      item.title = item.title;
      item.subtitle = item.subtitle;
      item.imageUrl = item.coverImage;
      item.url = '/plan_info/guide?id=' + item.id;
    });
    procureList.value = res.data;
  }
});

//外面循环
getClassificationFloorList({}).then(async (res) => {
  if (res.code == 200) {
    for (const item of res.data) {
      item.title = item.floorName;
      item.subtitle = item.floorDescribe;
      item.titleUrl = '';
      item.planList = [];
      item.detectList = [];
      item.tabList = [];
      item.labelList = [];
      item.margin = {
        top: 15
      };

      // if (item.floorLabel) {
      //   item.labelList = [];
      //   item.floorLabel.split(',').forEach((item1: any, index1: any) => {
      //     item.labelList.push({
      //       title: item1,
      //       url: ''
      //     });
      //   });
      // }
      try {
        const datas1 = await getClassificationFloorDetail(item.floorNo);
        if (datas1.code == 200 && datas1.data.length > 0) {
          item.imageUrl = datas1.data[0].advertiseImage;
          item.url = datas1.data[0].advertiseLink;
          datas1.data.forEach((item1: any) => {
            item1.title = item1.advertiseName;
            item1.subtitle = item1.advertiseDescribe;
            item1.imageUrl = item1.advertiseImage;
            item1.url = item1.advertiseLink ? item1.advertiseLink : '';
          });

          if (datas1.data.length > 1) {
            item.planList = datas1.data.slice(1, 4);
          }

          if (datas1.data.length > 4) {
            item.detectList = datas1.data.slice(4, 7);
          }
        }
        const datas2 = await getClassificationFloorLabel(item.floorNo);
        if (datas2.code == 200) {
          datas2.data.forEach((item1: any) => {
            if (item1.position == 0) {
              item.tabList.push({
                title: item1.labelName,
                url: item1.labelLink ? item1.labelLink : ''
              });
            } else {
              item.labelList.push({
                title: item1.labelName,
                url: item1.labelLink ? item1.labelLink : ''
              });
            }
          });
        }
        item.navList = datas2.data;
        const datas3 = await getClassificationFloorDetail2(item.floorNo);
        if (datas3.code == 200) item.shopList = datas3.data;
      } catch (error) {}
    }
    homeList.value = res.data;
  }
});

//项目案例标题（平台装修-项目案例）
getProjectCaseTitle({}).then((res) => {
  if (res.code == 200) {
    res.data.linkUrl = res.data.linkUrl ? res.data.linkUrl : '/plan/project';
    projectTitle.value = res.data;
  }
});

//项目案例列表（平台装修-项目案例）
getProjectCaseList({}).then((res) => {
  if (res.code == 200) {
    projectList.value = res.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;
      }
    }
  }

  .hot-bos {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 1500px;
    min-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    .data-list {
      min-height: 170px;
      cursor: pointer;
      flex: 0 0 calc((100% - 30px) / 4);
      background-color: #ffffff;
      border-radius: 5px;
      padding: 15px 10px;
      @media (min-width: 1320px) {
        flex: 0 0 calc((100% - 40px) / 5);
      }

      .img {
        height: 112px;
        aspect-ratio: 170 / 112;
      }
    }
  }
}
</style>