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

<template>
  <div class="home-pages">
    <div class="head-pages">
      <!--  头部 -->
      <div class="home-head" @mouseleave="leaveClassify">
        <div class="classify" :class="classifyShow ? 'classify-show' : ''">
          <div
            class="classify-list"
            v-for="(item, index) in classifyList"
            :class="item.id == classifyId && classifyShow ? 'classify-hig' : ''"
            :key="index"
            @mouseenter="enterClassify(item)"
            v-show="classifyShow ? true : Number(index) < 13"
          >
            <div class="label ellipsis" @click="onPath('/search?id=' + item.id)">{{ item.label }}</div>
            <div class="info info1 ellipsis" v-if="item.extra && item.extra.oneLable1">{{ item.extra.oneLable1 }}</div>
            <div class="info ellipsis" v-if="item.extra && item.extra.oneLable2">{{ item.extra.oneLable2 }}</div>
            <div v-if="item.id == classifyId && classifyShow" class="classify-border"></div>
            <!--  -->
          </div>
        </div>
        <div class="classify-bos" v-if="classifyShow">
          <div v-for="(item, index) in classifyInfo" :key="index" class="classify-item">
            <div class="two-level ellipsis">{{ item.label || '' }}</div>
            <el-icon class="classify-icon" :size="14" color="#364153">
              <ArrowRight />
            </el-icon>
            <div class="classify-label">
              <div v-for="(item1, index1) in item.children" :key="index1">{{ item1.label || '' }}</div>
            </div>
          </div>
        </div>
        <!-- 轮播区域 -->
        <div class="carousel-bos">
          <el-carousel trigger="click" height="540px">
            <el-carousel-item v-for="item in carouselList" :key="item">
              <img :src="item.imageUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 右边 -->
        <div class="head-right">
          <div class="login-bos">
            <div class="login-box">
              <img :src="userInfo.avatar ? userInfo.avatar : profile" alt="" />
              <div>
                <div class="login1">您好,欢迎来到优易达</div>
                <div class="login2">{{ userInfo.nickName ? userInfo.nickName : '请先登录' }}</div>
              </div>
            </div>
            <div class="login-btn">
              <el-button v-if="!userInfo.nickName" type="primary" round size="small" style="width: 64px" @click="onPath('/login')">登录</el-button>
              <el-button v-if="!userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onPath('/reg')"
                >注册</el-button
              >
              <el-button v-if="userInfo.nickName" type="primary" plain round size="small" style="width: 64px" @click="onPath('/reg')">退出</el-button>
            </div>
          </div>
          <div class="real-time">
            <div class="real-title flex-row-between">
              <div class="real1">优易资讯</div>
              <div class="real2 flex-row-start">
                <div>更多</div>
                <el-icon :size="13" color="#83899F">
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
            <template v-for="(item, index) in realList" :key="index">
              <div class="real-list ellipsis" v-if="Number(index) < 7">{{ item.announcementTitle }}</div>
            </template>
          </div>
          <div class="interests">
            <div class="interests-title">企业会员权益</div>
            <div class="interests-bos">
              <div v-for="(item, index) in interestsList" :key="index" class="interests-item flex-column-center">
                <img :src="item.imageUrl" alt="" />
                <div>{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pages-bos">
      <!-- 场景采购 -->
      <div class="home-title flex-row-center">
        <img src="@/assets/images/home/indexFuli1.png" alt="" />
        场景采购
        <img src="@/assets/images/home/indexFuli2.png" alt="" />
      </div>
      <div class="scenario-bos">
        <template v-for="(item, index) in scenario" :key="index">
          <div v-if="Number(index) < 4" class="scenario-list">
            <img class="shop-img" :src="item.imageUrl" alt="" />
          </div>
        </template>
      </div>
      <!-- 热门定制 -->
      <div class="home-title flex-row-center">
        <img src="@/assets/images/home/indexFuli1.png" alt="" />
        热门定制
        <img src="@/assets/images/home/indexFuli2.png" alt="" />
      </div>
      <div class="sell-bos">
        <template v-for="(item, index) in popular" :key="index">
          <div v-if="Number(index) < 5" class="sell-list">
            <img class="sell-img" :src="item.productImage" alt="" />
            <div class="sell-name ellipsis2">{{ item.itemName || '' }}</div>
            <div class="sell-price">
              <span class="price1">¥{{ item.memberPrice || '' }}</span>
              <span class="price2">¥{{ item.marketPrice || '' }}</span>
            </div>
          </div>
        </template>
      </div>
      <!-- 循环数据 -->
      <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
        <img class="goods-main" :src="item.mainImg" alt="" />
        <div class="goods-box">
          <div v-for="(item1, index1) in 8" :key="index1" class="goods-list">
            <img class="goods-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
            <div class="goods-name ellipsis2">{{ item.name || '' }}</div>
            <div class="goods-price">
              <span class="price1">¥{{ item.memberPrice || '' }}</span>
              <span class="price2">¥{{ item.marketPrice || '' }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 为您推荐 -->
      <div class="home-title flex-row-center">
        <img src="@/assets/images/home/indexFuli1.png" alt="" />
        为您推荐
        <img src="@/assets/images/home/indexFuli2.png" alt="" />
      </div>
      <div class="sell-bos recommend">
        <div v-for="(item, index) in recommend" :key="index" class="sell-list">
          <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" alt="" />
          <div class="sell-name ellipsis2">{{ item.name || '格力KFR-72LW/定频冷暖空调柜机3P格力KFR行车自行车自行车行政村在' }}</div>
          <div class="sell-price">
            <span class="price1">¥{{ item.memberPrice || '23.22' }}</span>
            <span class="price2">¥{{ item.marketPrice || '52.12' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import { getToken } from '@/utils/auth';
import { getInfo } from '@/api/login';
import profile from '@/assets/images/profile.jpg';
import {
  getGiftCategoryList,
  getHomeAdList,
  getIconAdList,
  getNoticeList,
  getRecommendAdList,
  getHotCustomGiftFloorList,
  getAdvertisementGiftFloorList,
  getGiftFloorLinkProductList,
  getRecommendGiftFloorList
} from '@/api/home/index-fuli';

import { getProductCategoryTree } from '@/api/home/index';

onMounted(() => {
  if (getToken()) {
    getInfo().then((res) => {
      if (res.code == 200) {
        userInfo.value = res.data.user;
      }
    });
  }
});

const userInfo = ref<any>({});
const classifyList = ref<any>([]);
const classifyShow = ref<any>(false);
const classifyId = ref<any>('');
const classifyInfo = ref<any>([]);
const carouselList = ref<any>([]);
const realList = ref<any>([]);
const interestsList = ref<any>([]);
const scenario = ref<any>([]);
const popular = ref<any>([]);
const goodsList = ref<any>([]);
const recommend = ref<any>([]);

//头部分类
getProductCategoryTree({}).then((res) => {
  if (res.code == 200) {
    classifyList.value = res.data;
  }
});

//移入分类
const enterClassify = (res: any) => {
  classifyShow.value = true;
  classifyId.value = res.id;
  classifyInfo.value = res.children;
};

//移出分类
const leaveClassify = () => {
  classifyShow.value = false;
};

// //头部分类
// getGiftCategoryList({}).then((res) => {
//   if (res.code == 200) {
//     classifyList.value = res.data;
//   }
// });

//轮播广告
getHomeAdList({}).then((res) => {
  if (res.code == 200) {
    carouselList.value = res.data;
  }
});

// 会员权益
getIconAdList({}).then((res) => {
  if (res.code == 200) {
    interestsList.value = res.data;
  }
});

// 咨询
getNoticeList({}).then((res) => {
  if (res.code == 200) {
    realList.value = res.data;
  }
});

// 荐广告（福利装修-推荐广告）场景采购
getRecommendAdList({}).then((res) => {
  if (res.code == 200) {
    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((res) => {
  if (res.code == 200) {
    goodsList.value = res.data;
    res.data.forEach((item: any) => {
      getGiftFloorLinkProductList({ floorId: item.id }).then((res) => {
        if (res.code == 200) {
        }
      });
    });
  }
});

//为你推荐
getRecommendGiftFloorList({}).then((res) => {
  if (res.code == 200) {
    recommend.value = res.data;
  }
});
</script>

<style lang="scss" scoped>
.home-pages {
  width: 100%;
  .head-pages {
    width: 100%;
    background: #ead3ab;

    // 头部
    .home-head {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      display: flex;
      gap: 0px 10px;

      .classify {
        width: 234px;
        height: 540px;
        background: #ffffff;
        &.classify-show {
          position: absolute;
          z-index: 10;
          height: auto;
          min-height: 540px;
        }

        .classify-list {
          width: 100%;
          height: 40px;
          cursor: pointer;
          display: flex;
          align-items: center;
          padding-left: 15px;
          position: relative;
          z-index: 12;

          &.classify-hig {
            border: 1px solid var(--el-color-primary);
            border-right: 0px solid #ffffff;
          }

          .label {
            max-width: 100px;
            font-weight: 600;
            font-size: 14px;
            color: #101828;
            white-space: nowrap;
            margin-right: 10px;

            &:hover {
              color: var(--el-color-primary);
            }
          }

          .info {
            max-width: 50px;
            font-size: 12px;
            color: #364153;
            white-space: nowrap;

            &.info1 {
              margin-right: 6px;
            }

            &:hover {
              color: var(--el-color-primary);
            }
          }

          .classify-border {
            position: absolute;
            right: -1px;
            top: 0px;
            width: 1px;
            height: 38px;
            background-color: #ffffff;
            z-index: 6;
          }
        }
      }

      .classify-bos {
        position: absolute;
        top: 0;
        right: 0;
        width: 966px;
        height: 100%;
        border: 1px solid var(--el-color-primary);
        background-color: #ffffff;
        overflow-y: auto;
        padding-left: 30px;
        z-index: 5;

        .classify-item {
          display: flex;
          padding-top: 10px;
          border-bottom: 1px solid #e5e7eb;

          .two-level {
            width: 90px;
            font-size: 14px;
            color: var(--el-color-primary);
            cursor: pointer;
          }

          .classify-icon {
            margin: 4px 15px 0 15px;
          }

          .classify-label {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            font-size: 14px;
            color: #364153;

            div {
              margin-right: 20px;
              margin-bottom: 10px;
              cursor: pointer;

              &:hover {
                color: var(--el-color-primary);
              }
            }
          }
        }
      }

      // 头部中间
      .carousel-bos {
        width: 756px;
        height: 540px;
        img {
          width: 756px;
          height: 540px;
        }
      }

      //右边
      .head-right {
        flex: 1;
        width: 0;
        height: 540px;
        background: #ffffff;
        display: flex;
        flex-direction: column;

        .login-bos {
          width: calc(100% - 20px);
          height: 110px;
          border-bottom: 1px solid #e5e7eb;
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 16px 0;

          .login-box {
            display: flex;
            align-items: center;

            img {
              width: 40px;
              height: 40px;
              margin-right: 8px;
              border-radius: 40px;
            }

            .login-btn {
              width: 100%;
            }

            .login1 {
              font-size: 13px;
              color: #444444;
            }

            .login2 {
              margin-top: 2px;
              font-size: 12px;
              color: #6a7282;
            }
          }
        }

        .real-time {
          width: calc(100% - 20px);
          height: 227px;
          border-bottom: 1px solid #e5e7eb;
          margin: 0 10px;
          padding-top: 15px;

          .real-title {
            position: relative;
            margin-bottom: 12px;

            &::after {
              content: '';
              top: 3px;
              left: 0;
              position: absolute;
              width: 4px;
              height: 14px;
              background: var(--el-color-primary);
            }

            .real1 {
              font-weight: 600;
              font-size: 14px;
              color: #1d2129;
              padding-left: 15px;
            }

            .real2 {
              font-size: 13px;
              color: #83899f;
              cursor: pointer;
            }
          }

          .real-list {
            width: 100%;
            font-size: 14px;
            color: #1d2129;
            margin-bottom: 12px;
            cursor: pointer;

            &:hover {
              color: var(--el-color-primary);
            }
          }
        }

        .interests {
          flex: 1;
          width: calc(100% - 20px);
          margin: 0 10px;
          padding-top: 15px;

          .interests-title {
            position: relative;
            font-weight: 600;
            font-size: 14px;
            color: #1d2129;
            padding-left: 15px;

            &::after {
              content: '';
              top: 3px;
              left: 0;
              position: absolute;
              width: 4px;
              height: 14px;
              background: var(--el-color-primary);
            }
          }

          .interests-bos {
            display: flex;
            flex-wrap: wrap;

            .interests-item {
              width: 33.333%;
              font-size: 12px;
              color: #101828;
              margin-top: 15px;
              cursor: pointer;

              &:hover {
                color: var(--el-color-primary);
              }

              img {
                width: 34px;
                height: 34px;
                margin-bottom: 7px;
              }
            }
          }
        }
      }
    }
  }

  .pages-bos {
    width: 1200px;
    margin: 0 auto;

    //标题
    .home-title {
      width: 1200px;
      height: 56px;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 30px;
      font-weight: 600;
      font-size: 20px;
      color: #ff4f20;
      img {
        width: 43px;
        height: 28px;
        margin: 0 10px;
      }
    }

    // 场景采购
    .scenario-bos {
      width: 1200px;
      display: flex;
      gap: 0 10px;
      margin-top: 12px;

      .scenario-list {
        width: 292.5px;
        height: 182px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s ease;
        img {
          width: 292.5px;
          height: 182px;
        }
        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    //热门定制
    .sell-bos {
      width: 1200px;
      display: flex;
      gap: 0 20px;
      margin-top: 12px;

      .sell-list {
        width: 224px;
        height: 306px;
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        transition: transform 0.2s ease;
        &:hover {
          transform: translateY(-2px);
        }

        .sell-img {
          width: 184px;
          height: 182px;
        }

        .sell-name {
          width: 184px;
          height: 38px;
          font-size: 14px;
          color: #101828;
        }

        .sell-price {
          .price1 {
            color: var(--el-color-primary);
            font-size: 16px;
            color: #e7000b;
          }
          .price2 {
            font-size: 12px;
            color: #99a1af;
            line-height: 20px;
            text-decoration-line: line-through;
            text-transform: none;
            margin-left: 6px;
          }
        }
      }
    }

    //循环数据
    .goods-bos {
      width: 1200px;
      margin-top: 30px;
      display: flex;
      .goods-main {
        width: 232px;
        height: 560px;
        border-radius: 10px;
        margin-right: 10px;
      }
      .goods-box {
        flex: 1;
        height: 560px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        .goods-list {
          width: 232px;
          height: 275px;
          background: #ffffff;
          border-radius: 10px;
          padding: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          cursor: pointer;
          transition: transform 0.2s ease;
          &:hover {
            transform: translateY(-2px);
          }
          .goods-img {
            height: 150px;
            width: 192px;
          }
          .goods-name {
            width: 192px;
            height: 38px;
            font-size: 14px;
            color: #101828;
          }

          .goods-price {
            .price1 {
              color: var(--el-color-primary);
              font-size: 16px;
              color: #e7000b;
            }
            .price2 {
              font-size: 12px;
              color: #99a1af;
              line-height: 20px;
              text-decoration-line: line-through;
              text-transform: none;
              margin-left: 6px;
            }
          }
        }
      }
    }

    .recommend {
      margin-bottom: 30px;
      gap: 10px 20px;
      flex-wrap: wrap;
    }
  }
}
</style>