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

<template>
  <div class="home-pages">
    <div class="head-pages">
      <div class="bg-img">
        <img :src="carouselList.length && carouselList[carouselIndex].imageUrl" alt="" />
      </div>
      <!--  头部 -->
      <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) < 8"
          >
            <div class="label ellipsis" @click="onPath('/search?id=' + item.id)">{{ item.label }}</div>
            <div class="two-level">
              <template v-for="(item1, index1) in item.children" :key="index1">
                <div class="two-hig" v-if="Number(index1) < 2">{{ item1.label }}</div>
                <div style="margin: 0 4px" v-if="index1 == 0 && item.children.length > 1">/</div>
              </template>
            </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" @change="onCarousel">
            <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="sell-bos">
        <template v-for="(item, index) in sellList" :key="index">
          <div v-if="Number(index) < 5" class="sell-list">
            <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" 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="trade-bos">
        <template v-for="(item, index) in tradeList" :key="index">
          <div v-if="Number(index) < 4" class="trade-list flex-row-between">
            <div class="trade-box flex-column-between">
              <div class="trade-title">{{ item.title || '' }}</div>
              <div class="trade-info ellipsis2">
                {{ item.remark || '' }}
              </div>
              <img class="trade-look" src="@/assets/images/home/indexMro1.png" alt="" />
            </div>
            <img class="trade-img" :src="item.imageUrl" alt="" />
          </div>
        </template>
      </div>
      <!-- 循环-商品 -->
      <div class="goods-bos" v-for="(item, index) in goodsList" :key="index">
        <div class="goods-title flex-row-center">
          <img src="@/assets/images/home/indexMro2.png" alt="" />
          <span class="text-primary">{{ item.name }}</span>
          <span>精选</span>
          <img src="@/assets/images/home/indexMro3.png" alt="" />
        </div>
        <div class="goods-box">
          <img class="goods-one" :src="item.imageUrl" alt="" />
          <div class="goods-shop">
            <template v-for="(item1, index1) in item.goodsList" :key="index1">
              <div v-if="Number(index1) < 8" class="shop-list flex-column-between">
                <img class="shop-img" :src="item1.productImage ? item1.productImage.split(',')[0] : ''" alt="" />
                <div class="shop-name ellipsis2">{{ item1.itemName || '' }}</div>
                <div class="shop-price">
                  <span class="price1">¥{{ item1.memberPrice || '' }}</span>
                  <span class="price2">¥{{ item1.marketPrice || '' }}</span>
                </div>
              </div>
            </template>
          </div>
          <div class="goods-brand flex-column-between" v-if="item.brandList && item.brandList.length > 0">
            <div class="brand-bos">
              <template v-for="(item1, index1) in item.brandList" :key="index1">
                <img clear-both v-if="Number(index1) < 6" class="brand-img" :src="item1.brandLogo" alt="" />
              </template>
            </div>
            <div class="brand-more flex-row-center">
              <div>更多品牌</div>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- 为你推荐 -->
      <div class="goods-title flex-row-center">
        <img src="@/assets/images/home/indexMro2.png" alt="" />
        <span class="text-primary">为你推荐</span>
        <img src="@/assets/images/home/indexMro3.png" alt="" />
      </div>
      <div class="nav-bos flex-row-center">
        <template v-for="(item, index) in recommendNav" :key="index">
          <div @click="onNav(item)" class="nav-list" :class="categoryId == item.id ? 'hig' : ''" v-if="Number(index) < 9">{{ item.title }}</div>
        </template>
      </div>
      <!-- 轮播展位商品 -->
      <div class="sell-bos recommend">
        <div v-for="(item, index) in recommendList" :key="index" class="sell-list">
          <img class="sell-img" :src="item.productImage ? item.productImage.split(',')[0] : ''" 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>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getProductCategoryTree,
  getHomeAdList,
  getHomeIconAd,
  getCarouselDisplayProductList,
  getBusinessLabelList,
  getIndustrialFloor,
  getIndustrialFloorProductList,
  getIndustrialFloorBrand,
  getRecommendedCategory,
  getRecommendedCategoryProductList
} from '@/api/home/index-mro';
import { getYouYiZiXunPage } from '@/api/home/index';
import { onPath } from '@/utils/siteConfig';
import { getToken } from '@/utils/auth';
import { getInfo } from '@/api/login';
import profile from '@/assets/images/profile.jpg';

const userInfo = ref<any>({});
const classifyId = ref<any>('');
const classifyShow = ref<any>(false);
const classifyInfo = ref<any>([]);
const classifyList = ref<any>([]);
const carouselList = ref<any>([]);
const carouselIndex = ref<any>(0);
const realList = ref<any>([]);
const interestsList = ref<any>([]);
const sellList = ref<any>([]);
const tradeList = ref<any>([]);
const goodsList = ref<any>([]);
const recommendNav = ref<any>([]);
const recommendList = ref<any>([]);
const categoryId = ref<any>('');

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

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

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

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

//头部轮播
getHomeAdList({}).then((res) => {
  if (res.code == 200) {
    carouselList.value = res.data;
    carouselIndex.value = 0;
  }
});

//头部优易资讯
getYouYiZiXunPage({}).then((res) => {
  if (res.code == 200) {
    realList.value = res.data;
  }
});

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

//轮播展位商品(工业装修-轮播展位商品)
getCarouselDisplayProductList({}).then((res) => {
  if (res.code == 200) {
    sellList.value = res.data;
  }
});

//商业标签(工业装修-商业标签)
getBusinessLabelList({}).then((res) => {
  if (res.code == 200) {
    tradeList.value = res.data;
  }
});

//循环
getIndustrialFloor({}).then(async (res) => {
  if (res.code == 200) {
    for (const item of res.data) {
      try {
        const datas2 = await getIndustrialFloorProductList({ floorId: item.id });
        if (datas2.code == 200) {
          item.goodsList = datas2.data;
        }

        const datas3 = await getIndustrialFloorBrand({ floorId: item.id });
        if (datas2.code == 200) {
          item.brandList = datas3.data;
        }
      } catch (error) {}
    }

    goodsList.value = res.data;
  }
});

//为你推荐-分类
getRecommendedCategory({}).then((res) => {
  if (res.code == 200) {
    recommendNav.value = res.data;
    recommendNav.value.unshift({
      id: '',
      title: '全部'
    });
  }
});

//为你推荐-商品
getRecommendedCategoryProductList({}).then((res) => {
  if (res.code == 200) {
    recommendList.value = res.data;
  }
});

const onNav = (item: any) => {
  categoryId.value = item.id;
  getRecommendedCategoryProductList({ categoryId: categoryId.value }).then((res) => {
    if (res.code == 200) {
      recommendList.value = res.data;
    }
  });
};

const onCarousel = (res: any) => {
  carouselIndex.value = res;
};
</script>

<style lang="scss" scoped>
.home-pages {
  width: 100%;
  .head-pages {
    width: 100%;
    // background: #000000;
    margin-top: 10px;

    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    backdrop-filter: blur(95px);
    filter: blur(30rpx);

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: -1;
      filter: blur(30rpx);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        transform: scale(1.2);
        filter: blur(30px);
      }
    }

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

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

        .classify-list {
          width: 100%;
          height: 60px;
          cursor: pointer;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: 25px;

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

          .label {
            width: 100%;
            font-size: 14px;
            color: #ffffff;
            white-space: nowrap;
            margin-right: 10px;

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

          .two-level {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #a2a2a2;
            margin-top: 6px;

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

      .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: 10;

        .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;

    //轮播展位商品
    .sell-bos {
      width: 1200px;
      display: flex;
      gap: 0 20px;
      margin-top: 30px;

      .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;
          }
        }
      }
    }

    //商业标签(工业装修-商业标签)
    .trade-bos {
      width: 1200px;
      display: flex;
      gap: 0 10px;
      margin-top: 30px;
      .trade-list {
        width: 292.5px;
        height: 146px;
        background: #ffffff;
        border-radius: 4px;
        padding: 22px;
        cursor: pointer;
        transition: transform 0.2s ease;
        &:hover {
          transform: translateY(-2px);
        }
        .trade-box {
          width: 144px;
          height: 100%;
          .trade-title {
            font-weight: 600;
            font-size: 16px;
            color: #000000;
          }
          .trade-info {
            font-size: 12px;
            color: #364153;
            height: 32px;
          }
          .trade-look {
            width: 89px;
            height: 28px;
          }
        }
        .trade-img {
          width: 79px;
          height: 79px;
        }
      }
    }
    //标题
    .goods-title {
      width: 1200px;
      height: 56px;
      border-radius: 10px;
      background: #ffffff;
      font-weight: 600;
      font-size: 20px;
      margin-top: 20px;
      img {
        width: 30px;
        height: 21px;
        margin: 0 10px;
      }
    }
    //循环-商品
    .goods-bos {
      .goods-box {
        display: flex;
        gap: 0 10px;
        margin-top: 15px;
        .goods-one {
          width: 236px;
          height: 560px;
          border-radius: 10px;
          background: #ffffff;
          cursor: pointer;
          transition: transform 0.2s ease;
          &:hover {
            transform: translateY(-2px);
          }
        }
        .goods-shop {
          width: 802px;
          height: 560px;
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          .shop-list {
            width: 193px;
            height: 275px;
            background: #ffffff;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: transform 0.2s ease;
            &:hover {
              transform: translateY(-2px);
            }

            .shop-img {
              width: 153px;
              height: 150px;
              border-radius: 6px;
            }

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

            .shop-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-brand {
          width: 142px;
          height: 560px;
          border-radius: 10px;
          background: #ffffff;
          padding: 20px 10px;
          .brand-bos {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px 0;
            img {
              width: 100%;
              height: 74px;
              border-radius: 4px;
              border: 1px solid #e5e7eb;
              cursor: pointer;
              transition: transform 0.2s ease;
              &:hover {
                transform: translateY(-2px);
              }
            }
          }
          .brand-more {
            color: var(--el-color-primary);
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
    }

    //为你推荐
    .nav-bos {
      width: 1200px;
      height: 48px;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 14px;
      padding: 0 1.5px;
      .nav-list {
        width: 133px;
        position: relative;
        font-size: 14px;
        color: #000000;
        text-align: center;
        cursor: pointer;
        &.hig {
          color: var(--el-color-primary);
        }
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 2.5px;
          width: 1px;
          height: 14px;
          background-color: #e5e7eb;
        }
        &:last-child::after {
          display: none;
        }
      }
    }
    .recommend {
      margin-top: 14px;
      gap: 14px 20px;
      flex-wrap: wrap;
      margin-bottom: 60px;
    }
  }
}
</style>