企业购

src/api/home/index-enterprise.ts

@@ -57,7 +57,7 @@ export const recommendThemeConfig = (query: any) => {
 };
 
 //头部分类
-export const headerCategoryList = (query: any) => {
+export const jdheaderCategoryList = (query: any) => {
   return request({
     url: '/mall/pcEnterprisePurchase/headerCategoryList',
     method: 'get',
@@ -107,7 +107,7 @@ export const currentQuickEntryModule = (query: any) => {
 
 //分类设置
 
-export const categoryMainList = (query: any) => {
+export const jdcategoryMainList = (query: any) => {
   return request({
     url: '/mall/pcEnterprisePurchase/categoryMainList',
     method: 'get',

src/layout/components/nav.vue

@@ -58,6 +58,7 @@ import { getHomeNav } from '@/api/home/index';
 import { useUserStore } from '@/store/modules/user';
 import { stationStore } from '@/store/modules/station';
 import { categoryMainList, headerCategoryList } from '@/api/home/index-data';
+import { jdcategoryMainList, jdheaderCategoryList } from '@/api/home/index-enterprise';
 const station = stationStore();
 const userStore = useUserStore();
 const categoryStoreStore = categoryStore();
@@ -112,20 +113,38 @@ const headerType = computed(() => {
 
 onMounted(async () => {
   initData();
-
-  // 获取导航栏
-  // getHomeNav(1).then((res) => {
-  //   if (res.code == 200) {
-  //   }
-  // });
 });
 
-const initData = () => {
+const initData = async () => {
   if (headerType.value == 'jdHeader') {
+    jdheaderCategoryList({ status: 1 }).then((res) => {
+      if (res.code == 200) {
+        document.documentElement.style.setProperty('--hover-nav2', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
+        res.rows.forEach((item: any) => {
+          item.url = item.link;
+        });
+        navList.value = res.rows;
+      }
+    });
+    try {
+      const datas1 = await getProductCategoryTree({});
+      const datas2 = await jdcategoryMainList({ status: 1 });
+      document.documentElement.style.setProperty('--hover-nav1', datas2.rows.length > 0 ? datas2.rows[0].categoryThemeColor || '#E7000B' : '#E7000B');
+      datas1.data.forEach((item1: any) => {
+        datas2.rows.forEach((item2: any) => {
+          item2.label = item2.name;
+          item2.id = item2.syncCategoryId;
+          if (item2.syncCategoryId == item1.id) {
+            item2.children = item1.children ? item1.children : [];
+          }
+        });
+      });
+      classifyList.value = datas2.rows;
+    } catch (error) {}
   } else if (headerType.value == 'dataHeader') {
     categoryMainList({ status: 1 }).then((res) => {
       if (res.code == 200) {
-        document.documentElement.style.setProperty('--hover-data2', res.rows.length > 0 ? res.rows[0].categoryThemeColor || '#E7000B' : '#E7000B');
+        document.documentElement.style.setProperty('--hover-nav1', res.rows.length > 0 ? res.rows[0].categoryThemeColor || '#E7000B' : '#E7000B');
         res.rows.forEach((item1: any) => {
           item1.label = item1.name;
           item1.id = item1.syncCategoryId;
@@ -144,7 +163,7 @@ const initData = () => {
     });
     headerCategoryList({}).then((res) => {
       if (res.code == 200) {
-        document.documentElement.style.setProperty('--hover-data3', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
+        document.documentElement.style.setProperty('--hover-nav2', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
         res.rows.forEach((item: any) => {
           item.url = item.linkUrl;
         });
@@ -152,11 +171,21 @@ const initData = () => {
       }
     });
   } else {
+    document.documentElement.style.setProperty('--hover-nav1', '#E7000B');
+    document.documentElement.style.setProperty('--hover-nav2', '#E7000B');
     getProductCategoryTree({ platform: 0 }).then((res) => {
       if (res.code == 200) {
         classifyList.value = res.data;
       }
     });
+    getHomeNav(1).then((res) => {
+      if (res.code == 200) {
+        res.data.forEach((item: any) => {
+          item.title = item.navigationName;
+        });
+        navList.value = res.data;
+      }
+    });
   }
 };
 
@@ -185,7 +214,7 @@ const leaveClassify = () => {
 .nav-pages {
   width: 100%;
   background-color: #ffffff;
-  border-bottom: 2px solid var(--hover-data2);
+  border-bottom: 2px solid var(--hover-nav1);
 
   .nav-bos {
     margin: 0 auto;
@@ -200,7 +229,7 @@ const leaveClassify = () => {
     .nav-all {
       width: 234px;
       height: 40px;
-      background: var(--hover-data2);
+      background: var(--hover-nav1);
       padding: 0 10px;
       font-size: 15px;
       color: #ffffff;
@@ -224,7 +253,7 @@ const leaveClassify = () => {
       cursor: pointer;
 
       &.hig {
-        color: var(--hover-data3);
+        color: var(--hover-nav2);
         position: relative;
 
         &::before {
@@ -235,13 +264,13 @@ const leaveClassify = () => {
           display: inline-block;
           width: 100%;
           height: 3px;
-          background: var(--hover-data3);
+          background: var(--hover-nav2);
           margin-right: 8px;
         }
       }
 
       &:hover {
-        color: var(--hover-data3);
+        color: var(--hover-nav2);
       }
     }
 
@@ -254,6 +283,7 @@ const leaveClassify = () => {
       width: 100%;
       .classify {
         width: 234px;
+        min-height: 540px;
         background: #ffffff;
         padding: 10px 0px;
         border-radius: 5px 0px 0px 5px;
@@ -268,8 +298,8 @@ const leaveClassify = () => {
           position: relative;
 
           &.classify-hig {
-            border: 1px solid var(--hover-data2);
-            border-right: 0px solid var(--hover-data2);
+            border: 1px solid var(--hover-nav1);
+            border-right: 0px solid var(--hover-nav1);
           }
 
           .label {
@@ -281,7 +311,7 @@ const leaveClassify = () => {
             margin-right: 10px;
 
             &:hover {
-              color: var(--hover-data2);
+              color: var(--hover-nav1);
             }
           }
 
@@ -296,7 +326,7 @@ const leaveClassify = () => {
             }
 
             &:hover {
-              color: var(--hover-data2);
+              color: var(--hover-nav1);
             }
           }
 
@@ -319,7 +349,7 @@ const leaveClassify = () => {
         left: 234px;
         // width: 966px;
         height: 540px;
-        border: 1px solid var(--hover-data2);
+        border: 1px solid var(--hover-nav1);
         background-color: #ffffff;
         overflow-y: auto;
         padding-left: 30px;
@@ -332,7 +362,7 @@ const leaveClassify = () => {
           .two-level {
             width: 90px;
             font-size: 14px;
-            color: var(--hover-data2);
+            color: var(--hover-nav1);
             cursor: pointer;
           }
 
@@ -353,7 +383,7 @@ const leaveClassify = () => {
               cursor: pointer;
 
               &:hover {
-                color: var(--hover-data2);
+                color: var(--hover-nav1);
               }
             }
           }

src/views/home/index-enterprise.vue

@@ -115,7 +115,7 @@ import JDScene from '@/views/home/jdcomponents/JDScene.vue';
 import JDProducts from '@/views/home/jdcomponents/JDProducts.vue';
 import JDFooter from '@/views/home/jdcomponents/JDFooter.vue';
 import '@/views/home/jdcomponents/jd-repro.css';
-import { headerCategoryList, getCurrentAdLeft } from '@/api/home/index-enterprise';
+import { jdheaderCategoryList, getCurrentAdLeft } from '@/api/home/index-enterprise';
 import { onPath } from '@/utils/siteConfig';
 
 const navItems = ref<any>([]);
@@ -128,7 +128,7 @@ const check = () => {
   setTimeout(checkScroll, 0);
 };
 
-headerCategoryList({ status: 1 }).then((res) => {
+jdheaderCategoryList({ status: 1 }).then((res) => {
   if (res.code == 200) {
     document.documentElement.style.setProperty('--hover-jd', res.rows.length > 0 ? res.rows[0].headerThemeColor || '#E7000B' : '#E7000B');
     navItems.value = res.rows;

src/views/home/jdcomponents/JDCategory.vue

@@ -10,7 +10,7 @@
           @mouseenter="onMouseenter(i)"
         >
           <img :src="c.icon" class="cate-icon" />
-          <a href="#">{{ c.name }}</a>
+          <a @click="onPath('/search?type=1&topCategoryId=' + c.syncCategoryId)" href="#">{{ c.name }}</a>
         </li>
       </template>
     </ul>
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { categoryMainList } from '@/api/home/index-enterprise';
+import { jdcategoryMainList } from '@/api/home/index-enterprise';
 import { getProductCategoryTree } from '@/api/home/index';
 import { onPath } from '@/utils/siteConfig';
 const activeIndex = ref(-1);
@@ -66,7 +66,7 @@ onMounted(() => {
 const getHead = async () => {
   try {
     const datas1 = await getProductCategoryTree({});
-    const datas2 = await categoryMainList({ status: 1 });
+    const datas2 = await jdcategoryMainList({ status: 1 });
     document.documentElement.style.setProperty('--hover-jd2', datas2.rows.length > 0 ? datas2.rows[0].categoryThemeColor || '#E7000B' : '#E7000B');
     datas1.data.forEach((item1: any) => {
       datas2.rows.forEach((item2: any) => {

src/views/home/jdcomponents/JDHeader.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="jd-header">
+  <div class="jd-header" :class="headerClass">
     <!-- 顶部窄条 -->
     <div class="header-top">
-      <div class="w flex-between">
+      <div class="flex-between top-inner" :class="{ 'w': headerClass == 'header-indexEnterprise' }">
         <div class="loc-wrap">
           <svg
             width="12"
@@ -36,7 +36,7 @@
 
     <!-- 中间搜索行 -->
     <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
-      <div class="header-mid w flex">
+      <div class="header-mid flex" :class="{ 'w': headerClass == 'header-indexEnterprise' }">
         <div class="logo-box">
           <div class="logo-text" :style="{ color: config.themeColor }">{{ config.mainTitle }}</div>
           <p class="logo-desc">{{ config.subTitle }}</p>
@@ -77,6 +77,7 @@
 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>([]);
@@ -114,6 +115,20 @@ onMounted(() => {
 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>
@@ -321,4 +336,24 @@ onUnmounted(() => {
 .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>

src/views/search/index.vue

@@ -161,6 +161,7 @@
 
 <script setup lang="ts">
 import { getPcProductPage, getBrandPage, getBrandByCategoryList, getBrandDetail } from '@/api/search/index';
+import { jdcategoryMainList } from '@/api/home/index-enterprise';
 import { getProductCategoryTree } from '@/api/home/index';
 import { onPath } from '@/utils/siteConfig';
 import Pagination from '@/components/Pagination/index.vue';
@@ -250,8 +251,23 @@ const headerType = computed(() => {
   return 'default';
 });
 // 获取分类
-const getClassify = () => {
+const getClassify = async () => {
   if (headerType.value == 'jdHeader') {
+    try {
+      const datas1 = await getProductCategoryTree({});
+      const datas2 = await jdcategoryMainList({ status: 1 });
+      datas1.data.forEach((item1: any) => {
+        datas2.rows.forEach((item2: any) => {
+          item2.label = item2.name;
+          item2.id = item2.syncCategoryId;
+          if (item2.syncCategoryId == item1.id) {
+            item2.children = item1.children ? item1.children : [];
+          }
+        });
+      });
+      classifyData.value = datas2.rows;
+      onClassify();
+    } catch (error) {}
   } else if (headerType.value == 'dataHeader') {
     categoryMainList({ status: 1 }).then((res) => {
       if (res.code == 200) {