yoe-shop-web/src/views/home/pccomponents/pages/head.vue

<template>
  <div class="head-all" :style="warpCss">
    <!-- 搜索组件 -->
    <div class="search-bos">
      <div class="search-content">
        <img
          class="logo"
          :src="componentData.logo ? componentData.logo : logo1"
          alt=""
          :style="{ 'width': componentData.topStyle == 1 ? '170px' : '430px' }"
          @click="onPath('/')"
        />
        <div v-if="componentData.topStyle == 1" style="width: 34px"></div>
        <div class="search-box">
          <div class="search-div flex-row-start">
            <div class="search-input flex-row-center">
              <el-input class="el-input" v-model="input" placeholder="搜索商品、品牌、分类..." />
              <div class="bnt flex-row-center" @click="onPath('/search?type=1&input=' + input + '&cType=' + componentData.headType)">
                <el-icon color="#ffffff" size="20">
                  <Search />
                </el-icon>
              </div>
            </div>

            <div class="cat-bos flex-row-center">
              <el-badge :value="cartCount" v-if="cartCount > 0">
                <img src="@/assets/images/layout/layout4.png" alt="" />
              </el-badge>
              <img v-else src="@/assets/images/layout/layout4.png" alt="" />
              <span @click="onPath('/cart')" class="ml-[15px]">我的购物车</span>
            </div>
          </div>
          <div class="search-text">
            <div
              @click="onPath('/search?type=1&input=' + item.title + '&cType=' + componentData.headType)"
              v-for="(item, index) in componentData.toplabel"
              :key="index"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <img class="code" :src="componentData.code ? componentData.code : code" alt="" />
      </div>
    </div>
    <!-- 分类 -->
    <div class="nav-pages">
      <div class="nav-bos">
        <div class="nav-all flex-row-start" v-if="componentData.classifyShow">
          <img src="@/assets/images/pcdiy/layout2.png" alt="" />
          <div>全部商品分类</div>
        </div>
        <div v-for="(item, index) in componentData.topNav" :key="index" class="nav-list" :class="index == 0 ? 'hig' : ''" @click="onPath(item.url)">
          {{ item.title }}
        </div>
      </div>
    </div>
    <!--  头部 -->
    <div class="head-pages">
      <div class="bg-img" v-if="componentData.carouselStyle">
        <img :src="componentData.carouselList && componentData.carouselList[0].imageUrl" alt="" />
      </div>
      <div class="home-head">
        <div @mouseleave="leaveClassify">
          <div
            class="classify"
            :class="classifyShow ? 'classify-show' : ''"
            :style="{
              backgroundColor: componentData.leftBackground
            }"
          >
            <div
              @mouseenter="enterClassify(item)"
              v-show="classifyShow ? true : Number(index) < 13"
              v-for="(item, index) in classifyList"
              :key="index"
              :class="[
                item.id == classifyId && classifyShow ? 'classify-hig' : '',
                componentData.leftStyle == 1 ? 'classify-list1' : 'classify-list2'
              ]"
            >
              <template v-if="componentData.leftStyle == 1">
                <div
                  @click="onPath('/search?type=1&topCategoryId=' + item.id + '&cType=' + componentData.headType)"
                  :style="{ 'color': componentData.leftColor1 }"
                  class="label ellipsis hover-color"
                >
                  {{ item.label }}
                </div>
                <div v-if="item.extra && item.extra.oneLable1" :style="{ 'color': componentData.leftColor2 }" class="info info1 ellipsis hover-color">
                  {{ item.extra.oneLable1 }}
                </div>
                <div v-if="item.extra && item.extra.oneLable2" :style="{ 'color': componentData.leftColor2 }" class="info ellipsis hover-color">
                  {{ item.extra.oneLable2 }}
                </div>
              </template>
              <template v-if="componentData.leftStyle == 2">
                <div :style="{ 'color': componentData.leftColor1 ? componentData.leftColor1 : '' }" class="label ellipsis">{{ item.label }}</div>
                <div class="two-level">
                  <template v-for="(item1, index1) in item.children" :key="index1">
                    <div :style="{ 'color': componentData.leftColor2 }" 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>
              </template>
              <div
                v-if="item.id == classifyId && classifyShow"
                class="classify-border"
                :class="componentData.leftStyle == 1 ? 'classify-border1' : 'classify-border2'"
              ></div>
            </div>
          </div>
          <div class="classify-bos" v-if="classifyShow">
            <div
              v-for="(item, index) in classifyInfo"
              :key="index"
              class="classify-item"
              @click="onPath('/search?type=2&mediumCategoryId=' + item.id + '&cType=' + componentData.headType)"
            >
              <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
                  @click="onPath('/search?type=3&bottomCategoryId=' + item1.id + '&cType=' + componentData.headType)"
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                >
                  {{ item1.label || '' }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="head-bos">
          <div
            class="carousel"
            :class="[
              { 'carousel-type': componentData.carouselType == 2 },
              'position' + componentData.carouselPosition,
              'styleType' + componentData.carouselStyleType
            ]"
            :style="{
              height: componentData.advertNum == 0 ? '540px' : '400px',
              borderRadius: componentData.carouselRadius + 'px'
            }"
          >
            <el-carousel :height="componentData.advertNum == 0 ? '540px' : '400px'" arrow="always">
              <template v-if="componentData.carouselList && componentData.carouselList.length > 0">
                <el-carousel-item v-for="item in componentData.carouselList" :key="item" @click.stop="onPath(item.url)">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="item.imageUrl ? item.imageUrl : figure"
                    :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
                  />
                </el-carousel-item>
              </template>
              <template v-else>
                <el-carousel-item>
                  <el-image style="width: 100%; height: 100%" :src="figure" fit="cover" />
                </el-carousel-item>
              </template>
            </el-carousel>
          </div>
          <div class="head-box" v-if="componentData.advertNum != 0">
            <template v-for="(item, index) in componentData.advertList" :key="index">
              <div class="head-item" v-if="item.show" @click="onPath(item.url)">
                <el-image
                  class="img"
                  :src="item.imageUrl ? item.imageUrl : figure"
                  :fit="item.imageUrl ? (item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover') : 'cover'"
                />
              </div>
            </template>
          </div>
        </div>
        <!-- 右边 -->
        <div
          class="head-right"
          :style="{
            borderRadius: componentData.rightRadius + 'px'
          }"
        >
          <div v-if="userInfo.userId" class="order-bos flex-column-between">
            <div class="flex-row-start">
              <img :src="logo2" alt="" />
              <div class="ellipsis">{{ userInfo.nickName }}</div>
            </div>
            <div class="flex-row-start">
              <div class="flex-1 flex-column-center">
                <div>待付款</div>
                <div class="order-num">{{ countData.pendingPaymentCount || 0 }}</div>
              </div>
              <div class="flex-1 flex-column-center">
                <div>待发货</div>
                <div class="order-num">{{ countData.pendingShipmentCount || 0 }}</div>
              </div>
              <div class="flex-1 flex-column-center">
                <div>待收货</div>
                <div class="order-num">{{ countData.pendingReceiptCount || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="login-bos" v-else>
            <div class="login-box">
              <img :src="logo2" alt="" />
              <div>
                <div class="login1">您好,欢迎来到优易达</div>
                <div class="login2">请先登录</div>
              </div>
            </div>
            <div class="loginBtn-bos flex-row-center">
              <div class="login-bnt1 flex-row-center" @click="onPath('/login')">登录</div>
              <div class="login-bnt2 flex-row-center" @click="onPath('/breg')">注册</div>
            </div>
          </div>
          <div class="real-time">
            <div class="real-title flex-row-between">
              <div class="real1">优易资讯</div>
              <!-- <div class="real2 flex-row-start">
                <div class="hover-color">更多</div>
                <el-icon :size="13" color="#83899F">
                  <ArrowRight />
                </el-icon>
              </div> -->
            </div>
            <template v-for="(item, index) in realList" :key="index">
              <div
                @click="onPath('/solve/real?id=' + item.id)"
                class="real-list ellipsis hover-color"
                v-if="componentData.realDataType == 2 ? true : Number(index) < componentData.realNumber"
              >
                {{ item.announcementTitle }}
              </div>
            </template>
          </div>
          <div class="interests">
            <div class="interests-title">企业会员权益</div>
            <div class="interests-bos">
              <div v-for="(item, index) in componentData.navlList" :key="index" class="interests-item flex-column-center" @click="onPath(item.url)">
                <el-image
                  class="img"
                  :src="item.imageUrl ? item.imageUrl : figure"
                  :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
                />
                <div style="height: 18px" class="hover-color">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import figure from '@/assets/images/figure.png';
import logo1 from '@/assets/images/pcdiy/logo1.png';
import logo2 from '@/assets/images/pcdiy/logo2.png';
import code from '@/assets/images/pcdiy/code.png';
import { getProductCategoryTree, countOrder } from '@/api/home/index';
import { getAnnouncementPage } from '@/api/home/diy';
import { onPath } from '@/utils/siteConfig';
import Cookies from 'js-cookie';
import { getInfo } from '@/api/login';
import { cartStore } from '@/store/modules/cart';
const props = defineProps<{
  row?: any;
  datas?: any;
}>();
const componentData = props.row || {};
const userInfo = ref<any>({});
const countData = ref<any>({});
//左侧分类
const classifyList = ref<any>([]);
const realList = ref<any>([]);
const classifyShow = ref<any>(false);
const classifyId = ref<any>('');
const classifyInfo = ref<any>([]);
const cartStoreData = cartStore();
const cartCount = computed(() => cartStoreData.cartCount);
const input = ref<any>('');

document.documentElement.style.setProperty('--carousel-color', componentData.carouselStyleColor ? componentData.carouselStyleColor : '#ffffff');
onMounted(() => {
  if (props.datas) {
    realList.value = props.datas;
  } else {
    getDataList();
  }
  const token = Cookies.get('Authorization');
  if (token) {
    getInfo().then((res) => {
      if (res.code == 200) {
        userInfo.value = res.data.user;

        countOrder({}).then((res1) => {
          if (res1.code == 200) {
            countData.value = res1.data || {};
          }
        });
      }
    });
  }
});

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

const getDataList = () => {
  realList.value = [];
  // 默认
  if (componentData.realDataType == 1) {
    getAnnouncementPage({ pageSize: 20 }).then((res) => {
      if (res.code == 200) {
        realList.value = res.rows;
      }
    });
  } else {
    //手动选择
    getAnnouncementPage({ pageSize: 20, ids: componentData.realIds.join(',') }).then((res) => {
      if (res.code == 200) {
        const result = res.rows.filter((item: any) => componentData.realIds.includes(item.id));
        realList.value = result;
      }
    });
  }
};

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

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

const warpCss = computed(() => {
  let style = '';
  style += 'position:relative;';
  //边距
  if (componentData.padding) {
    if (componentData.padding.top > 0) {
      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
    }
    if (componentData.padding.bottom > 0) {
      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
    }
    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
  }
  //间距
  if (componentData.margin) {
    if (componentData.margin.top > 0) {
      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
    }
    if (componentData.margin.bottom > 0) {
      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
    }
  }

  return style;
});
</script>

<style lang="scss" scoped>
.head-all {
  width: 100%;

  // 搜索栏
  .search-bos {
    width: 100%;
    background-color: #ffffff;

    .search-content {
      margin: 0 auto;
      width: 100%;
      max-width: 1500px;
      min-width: 1200px;
      display: flex;
      // padding: 0 30px;
    }

    .logo {
      width: 170px;
      height: 88px;
      border-radius: 4px;
      margin-top: 10px;
      margin-right: 30px;
      cursor: pointer;
    }

    .search-box {
      flex: 1;
      height: 88px;
      padding-top: 40px;

      .search-div {
        .search-input {
          flex: 1;
          height: 38px;
          border-radius: 3px;
          border: 2px solid #fb2c36;
          padding-right: 4px;
          font-size: 14px;

          .el-input {
            height: 30px;
            width: 100%;
            font-size: 16px;

            :deep(.el-input__wrapper) {
              border: none;
              /* 可选：去除聚焦时的高亮 */
              box-shadow: none;
              outline: none;
            }
          }

          .bnt {
            width: 50px;
            height: 30px;
            background: #e7000b;
            border-radius: 3px;
            font-weight: bold;
            cursor: pointer;
          }
        }

        .cat-bos {
          width: 143px;
          height: 38px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          margin-left: 24px;
          font-size: 14px;
          color: #e7000b;
          cursor: pointer;

          img {
            width: 14px;
            height: 14px;
            margin-top: 2px;
          }
        }
      }

      .search-text {
        font-size: 12px;
        display: flex;
        margin-top: 4px;

        div {
          margin-left: 10px;
          cursor: pointer;
          &:first-child {
            color: #e7000b;
          }
        }
      }
    }

    .code {
      height: 90px;
      width: 90px;
      margin-top: 10px;
      margin-left: 70px;
      // border-radius: 4px;
    }
  }

  //分类
  .nav-pages {
    width: 100%;
    background-color: #ffffff;

    .nav-bos {
      margin: 0 auto;
      width: 100%;
      max-width: 1500px;
      min-width: 1200px;
      display: flex;
      position: relative;
      padding-top: 15px;

      .nav-all {
        width: 234px;
        height: 40px;
        background: #e7000b;
        padding: 0 10px;
        font-size: 15px;
        color: #ffffff;
        cursor: pointer;

        img {
          height: 16px;
          width: 16px;
          margin-right: 6px;
        }
      }

      .nav-list {
        line-height: 40px;
        font-size: 15px;
        color: #364153;
        margin: 0 16px;
        text-align: center;
        cursor: pointer;

        &.hig {
          color: #e7000b;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0px;
            display: inline-block;
            width: 100%;
            height: 3px;
            background: #e7000b;
            margin-right: 8px;
          }
        }

        &:hover {
          color: #e7000b;
        }
      }
    }
  }

  // 头部
  .head-pages {
    // width: 1200px;
    width: 100%;
    margin: 0 auto;
    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: 100%;
      min-width: 1200px;
      max-width: 1500px;
      position: relative;
      display: flex;
      gap: 0px 10px;
      margin: 10px auto 0 auto;

      .classify {
        width: 234px;
        height: 540px;
        background: #ffffff;
        border-radius: 5px 0px 0px 5px;
        padding: 10px 0px;
        overflow: hidden;

        &.classify-show {
          position: absolute;
          z-index: 9999;
          height: auto;
          min-height: 540px;
          overflow: visible;
        }

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

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

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

            &:hover {
              color: #e7000b;
            }
          }

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

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

            &:hover {
              color: #e7000b;
            }
          }
        }
        .classify-list2 {
          width: 100%;
          height: 58px;
          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: #101828;
            white-space: nowrap;
            margin-right: 10px;
            font-weight: 600;

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

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

            .two-hig {
              &:hover {
                color: var(--el-color-primary);
              }
            }
          }
        }
        .classify-border {
          position: absolute;
          right: -1px;
          top: 0px;
          width: 1px;
          z-index: 199;
          &.classify-border1 {
            height: 38px;
            background-color: #ffffff;
          }
          &.classify-border2 {
            height: 58px;
            background-color: #323232;
          }
        }
      }
      .classify-bos {
        position: absolute;
        top: 0;
        right: 0;
        left: 234px;
        height: 100%;
        border: 1px solid var(--el-color-primary);
        background-color: #ffffff;
        overflow-y: auto;
        padding-left: 30px;
        z-index: 99;

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

      // 头部中间
      .head-bos {
        flex: 1;

        .carousel {
          overflow: hidden;
          width: 100%;
          background: #ffffff;
          cursor: pointer;
          border-radius: 5px;

          :deep(.el-carousel__button) {
            background-color: var(--carousel-color);
          }

          &.carousel-type {
            :deep(.el-carousel__arrow) {
              border-radius: 0;
            }
          }

          &.position1 {
            :deep(.el-carousel__indicators--horizontal) {
              left: 5%;
            }
          }
          &.position2 {
            :deep(.el-carousel__indicators--horizontal) {
              left: 50%;
            }
          }
          &.position3 {
            :deep(.el-carousel__indicators--horizontal) {
              left: 95%;
            }
          }
          &.styleType2 {
            :deep(.el-carousel__button) {
              height: 10px;
              width: 10px;
              border-radius: 10px;
            }
          }
        }

        .head-box {
          width: 100%;
          height: 130px;
          margin-top: 10px;
          display: flex;
          gap: 0 10px;

          .head-item {
            flex: 1;
            background-color: #ffffff;
            height: 130px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

            .img {
              aspect-ratio: 244 / 120;
              height: 100%;
            }
          }
        }
      }

      //右边
      .head-right {
        width: 210px;
        height: 540px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        border-radius: 5px;
        .order-bos {
          width: calc(100% - 20px);
          height: 110px;
          font-size: 14px;
          padding: 16px 0;
          border-bottom: 1px solid #e5e7eb;
          margin: 0 10px;
          img {
            width: 28px;
            height: 28px;
          }
          .order-num {
            color: #e7000b;
            font-size: 14px;
            margin-top: 2px;
          }
        }

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

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

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

          .loginBtn-bos {
            width: 100%;

            .login-bnt1 {
              width: 64px;
              height: 24px;
              background-color: #e7000b;
              color: #ffffff;
              border-radius: 24px;
              font-size: 12px;
              cursor: pointer;
            }

            .login-bnt2 {
              width: 64px;
              height: 24px;
              border: 1px solid #e7000b;
              color: #e7000b;
              border-radius: 24px;
              font-size: 12px;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }

        .real-time {
          width: calc(100% - 20px);
          height: 230px;
          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: #e7000b;
            }

            .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: 12px;
            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: #e7000b;
            }
          }

          .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;
                border-radius: 6px;
                margin-bottom: 7px;
              }
            }
          }
        }
      }
    }
  }
}
</style>