yoe-shop-web/src/views/home/jdcomponents/JDHeader.vue

<template>
  <div class="jd-header" :class="headerClass">
    <!-- 顶部窄条 -->
    <div class="header-top">
      <div class="flex-between top-inner" :class="{ 'w': headerClass == 'header-indexEnterprise' }">
        <div class="loc-wrap">
          <svg
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            style="vertical-align: -2px; margin-right: 2px"
          >
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          湖北
        </div>
        <ul class="top-nav-links flex">
          <li @click="onPath('/order/orderManage')">我的订单</li>
          <li class="spacer"></li>
          <li @click="onPath('/enterprise/companyInfo')">我的工作台</li>
          <li class="spacer"></li>
          <li @click="onPath('/enterprise/companyInfo')">企业会员</li>
          <li class="spacer"></li>
          <li class="red" :style="{ color: config.themeColor }">企业采购</li>
          <li class="spacer"></li>
          <li>客户服务</li>
          <li class="spacer"></li>
          <li class="hotline">咨询热线 {{ servicePhone }}</li>
        </ul>
      </div>
    </div>

    <!-- 中间搜索行 -->
    <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
      <div class="header-mid flex" :class="{ 'w': headerClass == 'header-indexEnterprise' }">
        <div class="logo-box">
          <div class="logo-text" :style="{ color: config.themeColor }" @click="onPath('/indexEnterprise')">{{ config.mainTitle }}</div>
          <p class="logo-desc">{{ config.subTitle }}</p>
        </div>

        <div class="search-box-wrap flex-1">
          <div class="search-bar flex" :style="{ borderColor: config.themeColor }">
            <div class="input-group flex-1 flex">
              <input v-model="input" type="text" />
              <div class="carousel-bos" v-if="placeholderList.length > 0 && input.length === 0">
                <el-carousel height="34px" direction="vertical" autoplay loop :interval="4000">
                  <el-carousel-item v-for="item in placeholderList" :key="item">
                    <div class="carousel-word">{{ item }}</div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <button class="search-btn" :style="{ backgroundColor: config.themeColor }" @click="onPath('/search?type=1&input=' + input)">搜 索</button>
          </div>
          <div class="hot-links">
            <span @click="onPath(item.link)" v-for="(item, index) in config.hotWordList" :key="index">{{ item.name }}</span>
          </div>
        </div>

        <div class="header-actions">
          <div :style="{ borderColor: config.themeColor, color: config.themeColor }" class="btn-keeper" @click="onPath(config.rightBtnLink)">
            <img v-if="config.rightBtnIcon" :src="config.rightBtnIcon" alt="" />{{ config.rightBtnText }}
          </div>
        </div>
      </div>
    </div>
    <!-- 占位符，防止吸顶时页面跳动 -->
    <div class="header-placeholder" v-show="isFixed"></div>
  </div>
</template>

<script setup lang="ts">
import { currentSearchConfig } from '@/api/home/index-enterprise';
import { getPlatformConfigList } from '@/api/breg/index';
import { onPath } from '@/utils/siteConfig';
import '@/views/home/jdcomponents/jd-repro.css';
const input = ref<any>('');
const servicePhone = ref<any>('');
const placeholderList = ref<any>([]);
const config = ref<any>({
  hotWordList: []
});

currentSearchConfig({}).then((res) => {
  if (res.code == 200) {
    config.value = res.data;
    document.documentElement.style.setProperty('--hover-jd1', res.data.themeColor || '#E7000B');
    if (res.data.placeholderText) {
      placeholderList.value = res.data.placeholderText.split(',');
    }
  }
});

getPlatformConfigList({ configKey: 'servicePhone' }).then((res) => {
  if (res.code == 200) {
    if (res.rows && res.rows.length > 0) {
      servicePhone.value = res.rows[0].value;
    }
  }
});
const isFixed = ref(false);

const handleScroll = () => {
  isFixed.value = window.scrollY > 120;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 根据路由路径返回不同的 class
const route = useRoute();
const headerClass = computed(() => {
  const path = route.path;

  if (path === '/indexEnterprise') {
    return 'header-indexEnterprise';
  } else if (path === '/item') {
    return 'header-item';
  } else {
    return 'header-default';
  }
});
</script>

<style lang="scss" scoped>
.jd-header {
  background: #fff;
}
.header-top {
  height: 32px;
  background: #e3e4e5;
  border-bottom: 1px solid #e3e4e5;
  font-size: 12px;
  color: #999;
  line-height: 32px;
}
.top-nav-links li {
  padding: 0 10px;
  cursor: pointer;
  transition: color 0.2s;
}
.top-nav-links li:hover {
  color: var(--hover-jd1);
}
.top-nav-links .spacer {
  width: 1px;
  height: 10px;
  background: #ccc;
  margin-top: 11px;
  padding: 0;
}
.top-nav-links .red {
  color: #e1251b;
  font-weight: bold;
}

/* 吸顶包裹层 */
.header-mid-wrap {
  background: #fff;
  transition: all 0.2s;
}
.header-mid-wrap.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.header-placeholder {
  height: 100px;
} /* header-mid 的总高度估算 */

.header-mid {
  padding: 25px 0 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: padding 0.2s;
}
.is-fixed .header-mid {
  padding: 25px 0;
} /* 增加吸顶时的高度，总高度 90px */

.logo-box {
  width: auto;
  text-align: center;
  margin-right: 30px;
  flex-shrink: 0;
}
.logo-text {
  font-size: 32px;
  font-weight: 900;
  color: #e1251b;
  letter-spacing: 1px;
  font-family: 'Microsoft YaHei', sans-serif;
  line-height: 1.2;
}
.logo-desc {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  letter-spacing: 2px;
}
.is-fixed .logo-desc {
  display: none;
} /* 吸顶时隐藏副标题 */
.is-fixed .logo-text {
  font-size: 26px;
} /* 吸顶时稍微缩小Logo */

.search-box-wrap {
  margin: 0;
  flex: 1;
  max-width: none;
  display: flex;
  flex-direction: column;
}
.search-bar {
  height: 42px;
  border: 2px solid #e1251b;
  border-radius: 8px;
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}
.input-group {
  padding: 0 15px;
  align-items: center;
  height: 100%;
  position: relative;
  .carousel-bos {
    position: absolute;
    top: 0;
    left: 0;
    height: 34px;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    .carousel-word {
      line-height: 34px;
      color: #999;
      padding-left: 15px;
    }
  }
}
.input-group input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}
.input-group input::placeholder {
  color: #999;
}

.search-btn {
  width: 84px;
  height: 100%;
  background: #e1251b;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 2px;
}
.search-btn:hover {
  background: #c81623;
}

.hot-links {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  padding-left: 5px;
}
.hot-links span {
  margin-right: 15px;
  cursor: pointer;
}
.hot-links span:hover {
  color: var(--hover-jd1);
}
.is-fixed .hot-links {
  display: none;
} /* 吸顶时隐藏热搜词 */

.header-actions {
  margin-left: 30px;
  flex-shrink: 0;
  img {
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }
}
.btn-keeper {
  height: 40px;
  line-height: 38px;
  padding: 0 24px;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  color: #e1251b;
  font-size: 14px;
  font-weight: bold;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.btn-keeper:hover {
  background: #f2f2f2;
}

.header-default {
  .top-inner,
  .header-mid {
    min-width: 1200px;
    max-width: 1500px;
    margin: 0 auto;
  }
}

.header-item {
  .top-inner,
  .header-mid {
    margin: 0 auto;
    width: 1200px;
    @media (min-width: 1600px) {
      width: 1600px;
    }
  }
}
</style>