链条

src/api/home/index-enterprise.ts

@@ -45,3 +45,92 @@ export const customerMessageDetail = (id: any) => {
     method: 'get'
   });
 };
+
+//推荐设置
+
+export const recommendThemeConfig = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/recommendThemeConfig',
+    method: 'get',
+    params: query
+  });
+};
+
+//头部分类
+export const headerCategoryList = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/headerCategoryList',
+    method: 'get',
+    params: query
+  });
+};
+
+//获取当前左侧广告设置
+
+export const getCurrentAdLeft = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/getCurrentAdLeft',
+    method: 'get',
+    params: query
+  });
+};
+
+//获取当前搜索页面设置
+
+export const currentSearchConfig = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/currentSearchConfig',
+    method: 'get',
+    params: query
+  });
+};
+
+//场景方案设置
+
+export const currentScenarioGlobalSetting = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/currentScenarioGlobalSetting',
+    method: 'get',
+    params: query
+  });
+};
+
+//快捷入口模块设置
+
+export const currentQuickEntryModule = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/currentQuickEntryModule',
+    method: 'get',
+    params: query
+  });
+};
+
+//分类设置
+
+export const categoryMainList = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/categoryMainList',
+    method: 'get',
+    params: query
+  });
+};
+
+//轮播图设置
+
+export const carouselList = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/carouselList',
+    method: 'get',
+    params: query
+  });
+};
+
+//广告模块
+
+export const adModuleConfigList = (query: any) => {
+  return request({
+    url: '/mall/pcEnterprisePurchase/adModuleConfigList',
+    method: 'get',
+    params: query
+  });
+};

src/views/home/index-enterprise.vue

@@ -5,8 +5,8 @@
     <section class="banner-area w">
       <!-- 极简而纯粹的悬挂式广告大图，挂于 1600px 外部左侧 -->
       <!-- 悬停时通过 CSS 自动扩宽并享有绝对最高层级 9999 -->
-      <div class="expand-ad-layer">
-        <img src="@/assets/jd/banner_green_ad.png" alt="促销大图" class="expand-img-full" />
+      <div class="expand-ad-layer" @click="onPath(adLeft.link)">
+        <img :src="adLeft.imageUrl" alt="促销大图" class="expand-img-full" />
 
         <!-- 作为大图一部分直接漂浮在上面的文案，不破坏图片的整体性 -->
         <div class="ad-left-text">
@@ -55,9 +55,9 @@
 
               <!-- 导航滚动视口 -->
               <ul class="nav-list flex" ref="navListRef" @scroll="checkScroll">
-                <li v-for="(item, index) in navItems" :key="index" :class="{ active: index === 0 }">
-                  <img :src="`../../assets/jd/icons/icon_${item.icon}.svg`" class="n-ic-img" />
-                  {{ item.name }}
+                <li v-for="(item, index) in navItems" :key="index" :class="{ active: index === 0 }" @click="onPath(item.link)">
+                  <el-image class="n-ic-img" :src="item.icon" />
+                  {{ item.title }}
                 </li>
               </ul>
 
@@ -124,6 +124,11 @@ 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 { onPath } from '@/utils/siteConfig';
+
+const navItems = ref<any>([]);
+const adLeft = ref<any>({});
 
 const isLargeScreen = ref(window.innerWidth >= 1600);
 const adHovered = ref(false);
@@ -132,23 +137,17 @@ const check = () => {
   setTimeout(checkScroll, 0);
 };
 
-const navItems = ref([
-  { name: '公共采购', icon: '1' },
-  { name: '跟买指南', icon: '2' },
-  { name: '五金城', icon: '3' },
-  { name: '电脑数码', icon: '4' },
-  { name: '企业超市', icon: '5' },
-  { name: '企业服务', icon: '6' },
-  { name: '家电家居', icon: '7' },
-  { name: '京东京造', icon: '8' },
-  { name: '企业养车', icon: '9' },
-  { name: '员工福利', icon: '10' },
-  { name: '商用家电', icon: '11' },
-  { name: '办公设备', icon: '12' },
-  { name: '耗材采购', icon: '13' },
-  { name: '员工团建', icon: '14' },
-  { name: '防暑降温', icon: '15' }
-]);
+headerCategoryList({}).then((res) => {
+  if (res.code == 200) {
+    navItems.value = res.rows;
+  }
+});
+
+getCurrentAdLeft({}).then((res) => {
+  if (res.code == 200) {
+    adLeft.value = res.data;
+  }
+});
 
 const navListRef = ref(null);
 const showPrev = ref(false);

src/views/home/index.vue

@@ -315,7 +315,6 @@ getClassificationFloorList({}).then(async (res) => {
           }
         }
         const datas2 = await getClassificationFloorLabel(item.floorNo);
-        console.log(datas2.data, '??????????????');
         if (datas2.code == 200) {
           datas2.data.forEach((item1: any) => {
             if (item1.position == 0) {

src/views/home/jdcomponents/JDBannerCards.vue

@@ -5,43 +5,30 @@
       <!-- 智能选品 Banner (多图轮播) -->
       <div class="slider-box" @mouseenter="stopAuto" @mouseleave="startAuto">
         <div class="slider-list flex" :style="{ transform: `translateX(-${currentIdx * 100}%)` }">
-          <div class="slider-item" v-for="(slide, i) in bannerSlides" :key="i">
-            <img :src="slide.img" class="banner-img" />
-            <div class="slider-content">
-              <h1>{{ slide.h1 }}</h1>
-              <h2>{{ slide.h2 }}</h2>
-              <p>{{ slide.p }}</p>
-            </div>
+          <div class="slider-item" v-for="(slide, i) in carouseData" :key="i" @click="onPath(slide.link)">
+            <img :src="slide.imageUrl" class="banner-img" />
           </div>
         </div>
-        <div class="ai-logo"><span>A</span><span>i</span></div>
         <div class="dots">
-          <span v-for="(_, i) in bannerSlides" :key="i" :class="{ active: currentIdx === i }" @click="currentIdx = i"></span>
+          <span v-for="(_, i) in carouseData" :key="i" :class="{ active: currentIdx === i }" @click="carouseData = i"></span>
         </div>
       </div>
 
       <!-- 百亿补贴 -->
       <div class="subsidy-box card-base">
         <div class="c-header flex-between">
-          <span class="title">企业购×百亿补贴</span>
-          <span class="tag">先采后付 享底价</span>
+          <span class="title">{{ dataInfo1.mainTitle }}</span>
+          <span class="tag">{{ dataInfo1.subTitle }}</span>
         </div>
         <div class="p-list flex">
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_it.png" />
-            <p class="price"><span>¥</span>69.9</p>
-          </div>
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_office.png" />
-            <p class="price"><span>¥</span>84.8</p>
-          </div>
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_lifestyle.png" />
-            <p class="price"><span>¥</span>139.9</p>
-          </div>
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_it.png" />
-            <p class="price"><span>¥</span>1749</p>
+          <div
+            class="p-mini"
+            v-for="(item, index) in dataInfo1.adModuleItemList"
+            :key="index"
+            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+          >
+            <el-image class="p-img" :src="item.imageUrl" />
+            <p class="price"><span>¥</span>{{ item.price }}</p>
           </div>
         </div>
       </div>
@@ -52,19 +39,14 @@
       <!-- 企采榜单 -->
       <div class="card-base b-item">
         <div class="c-header flex-between">
-          <span class="title">企采榜单</span>
-          <span class="tag-orange">同行都在买</span>
+          <span class="title">{{ dataInfo2.mainTitle }}</span>
+          <span class="tag-orange">{{ dataInfo2.mainTitle }}</span>
         </div>
         <div class="rank-list flex">
-          <div class="r-i">
-            <div class="r-title yellow-t">办公电脑榜<i class="arr"> &gt;</i></div>
-            <img src="@/assets/jd/prod_it.png" />
-            <span class="sold">已售1543件</span>
-          </div>
-          <div class="r-i">
-            <div class="r-title red-t">文具榜<i class="arr"> &gt;</i></div>
-            <img src="@/assets/jd/prod_office.png" />
-            <span class="sold">已售2.3万件</span>
+          <div class="r-i" v-for="(item, index) in dataInfo2.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
+            <div class="r-title yellow-t">{{ item.tagText }}<i class="arr"> &gt;</i></div>
+            <el-image class="r-img" :src="item.imageUrl" />
+            <span class="sold">已售{{ item.salesCount }}件</span>
           </div>
         </div>
       </div>
@@ -72,19 +54,14 @@
       <!-- 品牌好店 -->
       <div class="card-base b-item">
         <div class="c-header flex-between">
-          <span class="title">品牌好店</span>
-          <span class="tag-orange">返2000元E卡</span>
+          <span class="title">{{ dataInfo3.mainTitle }}</span>
+          <span class="tag-orange">{{ dataInfo3.mainTitle }}</span>
         </div>
         <div class="brand-box flex">
-          <div class="brand-i">
-            <img src="@/assets/jd/brand_logo_1.png" class="logo" />
-            <p class="name">鲁花京东自营旗舰店</p>
-            <span class="btn btn-red">品质保障</span>
-          </div>
-          <div class="brand-i">
-            <img src="@/assets/jd/brand_logo_2.png" class="logo" />
-            <p class="name">金龙鱼京东自营旗舰</p>
-            <span class="btn btn-red">热销品牌</span>
+          <div class="brand-i" v-for="(item, index) in dataInfo3.adModuleItemList" :key="index" @click="onPath(item.tagLink)">
+            <el-image class="logo" :src="item.imageUrl" />
+            <p class="name">{{ item.productName }}</p>
+            <span class="btn btn-red">{{ item.tagText }}</span>
           </div>
         </div>
       </div>
@@ -92,17 +69,21 @@
       <!-- 企业精选 -->
       <div class="card-base b-item">
         <div class="c-header flex-between">
-          <span class="title">企业精选</span>
-          <span class="tag-gray">品牌专供 库存足</span>
+          <span class="title">{{ dataInfo4.mainTitle }}</span>
+          <span class="tag-gray">{{ dataInfo4.mainTitle }}</span>
         </div>
         <div class="p-list flex">
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_it.png" />
-            <p class="price"><span>¥</span>10740 <span class="badge-blue">企业价</span></p>
-          </div>
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_lifestyle.png" />
-            <p class="price"><span>¥</span>877</p>
+          <div
+            class="p-mini"
+            v-for="(item, index) in dataInfo4.adModuleItemList"
+            :key="index"
+            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+          >
+            <el-image class="p-img" :src="item.imageUrl" />
+            <p class="price">
+              <span>¥</span>{{ item.price }}
+              <!-- <span class="badge-blue">企业价</span> -->
+            </p>
           </div>
         </div>
       </div>
@@ -110,17 +91,18 @@
       <!-- 京东新品 -->
       <div class="card-base b-item">
         <div class="c-header flex-between">
-          <span class="title">企业购×京东新品</span>
-          <span class="tag-orange">美的新鲜</span>
+          <span class="title">{{ dataInfo5.mainTitle }}</span>
+          <span class="tag-orange">{{ dataInfo5.mainTitle }}</span>
         </div>
         <div class="p-list flex">
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_lifestyle.png" />
-            <p class="price"><span>¥</span>7188</p>
-          </div>
-          <div class="p-mini">
-            <img src="@/assets/jd/prod_office.png" />
-            <p class="price"><span>¥</span>34.9</p>
+          <div
+            class="p-mini"
+            v-for="(item, index) in dataInfo5.adModuleItemList"
+            :key="index"
+            @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
+          >
+            <el-image class="p-img" :src="item.imageUrl" />
+            <p class="price"><span>¥</span>{{ item.price }}</p>
           </div>
         </div>
       </div>
@@ -128,20 +110,45 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-
+import { carouselList, adModuleConfigList } from '@/api/home/index-enterprise';
+import { onPath } from '@/utils/siteConfig';
 const currentIdx = ref(0);
-const bannerSlides = [
-  { h1: '智能选品', h2: '让采购更高效', p: '需求清单极速匹配', img: '@/assets/jd/prod_it.png' }, // Use it as default or generate dedicated
-  { h1: '办公大促', h2: '职场焕新季', p: '精选文具低至5折', img: '@/assets/jd/banner_office.png' },
-  { h1: '工业采买', h2: '正品低价保障', p: '专业工具 一站购齐', img: '@/assets/jd/banner_industrial.png' },
-  { h1: '员工福利', h2: '温情定制礼', p: '打造有温度的职场', img: '@/assets/jd/banner_welfare.png' }
-];
+const carouseData = ref<any>([]);
+const dataInfo1 = ref<any>({});
+const dataInfo2 = ref<any>({});
+const dataInfo3 = ref<any>({});
+const dataInfo4 = ref<any>({});
+const dataInfo5 = ref<any>({});
+carouselList({}).then((res) => {
+  if (res.code == 200) {
+    carouseData.value = res.rows;
+  }
+});
+
+adModuleConfigList({}).then((res) => {
+  if (res.code == 200) {
+    if (res.rows.length > 0) {
+      dataInfo1.value = res.rows[0];
+    }
+    if (res.rows.length > 1) {
+      dataInfo2.value = res.rows[1];
+    }
+    if (res.rows.length > 2) {
+      dataInfo3.value = res.rows[2];
+    }
+    if (res.rows.length > 3) {
+      dataInfo4.value = res.rows[3];
+    }
+    if (res.rows.length > 4) {
+      dataInfo5.value = res.rows[4];
+    }
+  }
+});
 
 let timer = null;
 const startAuto = () => {
   timer = setInterval(() => {
-    currentIdx.value = (currentIdx.value + 1) % bannerSlides.length;
+    currentIdx.value = (currentIdx.value + 1) % carouseData.value.length;
   }, 4000);
 };
 const stopAuto = () => {
@@ -213,12 +220,14 @@ onUnmounted(() => stopAuto());
   margin-bottom: 2px;
   letter-spacing: 1px;
 }
+
 .slider-content h2 {
   font-size: 26px;
   font-weight: 800;
   margin-bottom: 16px;
   letter-spacing: 1px;
 }
+
 .slider-content p {
   font-size: 13px;
   font-weight: 500;
@@ -235,6 +244,7 @@ onUnmounted(() => stopAuto());
   align-items: baseline;
   text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
+
 .ai-logo span:first-child {
   font-size: 110px;
   color: #fff;
@@ -242,6 +252,7 @@ onUnmounted(() => stopAuto());
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
 .ai-logo span:last-child {
   font-size: 80px;
   color: #66b2ff;
@@ -255,6 +266,7 @@ onUnmounted(() => stopAuto());
   display: flex;
   gap: 6px;
 }
+
 .dots span {
   display: block;
   width: 6px;
@@ -262,6 +274,7 @@ onUnmounted(() => stopAuto());
   background: rgba(255, 255, 255, 0.4);
   border-radius: 50%;
 }
+
 .dots span.active {
   width: 14px;
   background: #fff;
@@ -273,7 +286,8 @@ onUnmounted(() => stopAuto());
 }
 
 .card-base {
-  background: #f8f9fa; /* 与侧边分类背景色相同 */
+  background: #f8f9fa;
+  /* 与侧边分类背景色相同 */
   border-radius: 8px;
   padding: 16px;
   display: flex;
@@ -284,6 +298,7 @@ onUnmounted(() => stopAuto());
   cursor: pointer;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
 }
+
 .card-base:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
@@ -309,10 +324,12 @@ onUnmounted(() => stopAuto());
   color: #d46b08;
   font-weight: bold;
 }
+
 .tag-orange {
   font-size: 11px;
   color: #d46b08;
 }
+
 .tag-gray {
   font-size: 11px;
   color: #8c8c8c;
@@ -331,8 +348,9 @@ onUnmounted(() => stopAuto());
   justify-content: space-between;
 }
 
-.p-mini img {
+.p-img {
   width: 90%;
+  aspect-ratio: 1;
   margin: 0 auto 6px;
 }
 
@@ -341,6 +359,7 @@ onUnmounted(() => stopAuto());
   font-size: 16px;
   font-weight: bold;
 }
+
 .price span {
   font-size: 12px;
   font-weight: normal;
@@ -361,6 +380,7 @@ onUnmounted(() => stopAuto());
   gap: 12px;
   flex: 1;
 }
+
 .r-i {
   flex: 1;
   background: #fff;
@@ -370,6 +390,7 @@ onUnmounted(() => stopAuto());
   justify-content: space-between;
   position: relative;
 }
+
 .r-title {
   position: absolute;
   top: -10px;
@@ -382,23 +403,29 @@ onUnmounted(() => stopAuto());
   white-space: nowrap;
   z-index: 2;
 }
+
 .yellow-t {
   background: #fff3e0;
   color: #e65100;
 }
+
 .red-t {
   background: #ffebee;
   color: #c62828;
 }
+
 .r-title .arr {
   font-style: normal;
   font-size: 9px;
   opacity: 0.8;
 }
-.r-i img {
+
+.r-img {
   width: 80%;
+  aspect-ratio: 1;
   margin: 15px auto 5px;
 }
+
 .sold {
   font-size: 11px;
   font-weight: bold;
@@ -414,6 +441,7 @@ onUnmounted(() => stopAuto());
   gap: 12px;
   flex: 1;
 }
+
 .brand-i {
   flex: 1;
   text-align: center;
@@ -422,17 +450,20 @@ onUnmounted(() => stopAuto());
   align-items: center;
   justify-content: space-between;
 }
+
 .logo {
-  width: 50px;
-  height: 50px;
+  width: 80%;
+  aspect-ratio: 120 / 50;
   margin-top: 5px;
 }
+
 .name {
   font-size: 11px;
   color: #1890ff;
   white-space: nowrap;
   transform: scale(0.9);
 }
+
 .btn-red {
   font-size: 11px;
   color: #e1251b;

src/views/home/jdcomponents/JDCategory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cate-menu" @mouseleave="activeIndex = -1">
     <ul class="cate-list">
-      <li v-for="(c, i) in categories" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="activeIndex = i">
+      <li v-for="(c, i) in dataList" :key="i" class="cate-item" :class="{ active: activeIndex === i }" @mouseenter="onMouseenter(i)">
         <img :src="c.icon" class="cate-icon" />
         <a href="#">{{ c.name }}</a>
       </li>
@@ -11,65 +11,30 @@
     <div class="category-pop" v-show="activeIndex !== -1">
       <div class="pop-header flex-between">
         <div class="pop-tags flex">
-          <span class="p-tag">设备固资</span>
-          <span class="p-tag">职场环境</span>
-          <span class="p-tag">3C数码电子城</span>
+          <span v-for="(item, index) in dataInfo.tags" :key="index" class="p-tag" @click="onPath(item.link)">{{ item.name }}</span>
         </div>
         <div class="pop-logo">
-          <span class="red-t">京东</span><span class="black-t">3C数码</span><br />
-          <span class="small-t">电脑 | 数码 | 手机 | 图书 | 文具</span>
+          <span class="red-t">{{ dataInfo.panelMainTitle }}</span
+          ><span class="black-t">{{ dataInfo.panelSubTitle }}</span
+          ><br />
+          <span class="small-t" v-for="(item, index) in dataInfo.notes" :key="index" @click="onPath(item.link)"
+            >{{ index != 0 ? ' | ' : '' }}{{ item.name }}</span
+          >
         </div>
       </div>
 
       <div class="pop-body">
-        <dl class="sub-dl flex">
-          <dt>办公电脑</dt>
+        <dl class="sub-dl flex" v-for="(item, index) in dataInfo.categoryList" :key="index">
+          <dt class="item-label" @click="onPath('/search?type=2&mediumCategoryId=' + item.id)">{{ item.label }}</dt>
           <dd>
-            <a href="#">台式机</a><a href="#">平板电脑</a><a href="#">显示器</a><a href="#">服务器</a><a href="#">工作站</a><a href="#">一体机</a
-            ><a href="#">组装电脑</a><a href="#">游戏本</a><a href="#">设计师本</a><a href="#">笔记本配件</a><a href="#">平板电脑配件</a
-            ><a href="#">阅卷机</a><a href="#">办公本</a>
-          </dd>
-        </dl>
-        <dl class="sub-dl flex">
-          <dt>办公打印</dt>
-          <dd>
-            <a href="#">复合机</a><a href="#">打印机</a><a href="#">多功能一体机</a><a href="#">扫描仪</a><a href="#">条码打印机</a
-            ><a href="#">碎纸机</a><a href="#">装订机</a><a href="#">高拍仪</a><a href="#">标签打印机</a><a href="#">传真设备</a>
-          </dd>
-        </dl>
-        <dl class="sub-dl flex">
-          <dt>电脑组件</dt>
-          <dd>
-            <a href="#">显示器</a><a href="#">硬盘</a><a href="#">SSD固态硬盘</a><a href="#">机械硬盘</a><a href="#">显卡</a><a href="#">内存</a
-            ><a href="#">主板CPU套装</a><a href="#">组装机</a><a href="#">装机配件</a><a href="#">机箱</a><a href="#">刻录机</a><a href="#">光驱</a
-            ><a href="#">散热器</a><a href="#">电源</a>
-          </dd>
-        </dl>
-        <dl class="sub-dl flex">
-          <dt>电脑外设</dt>
-          <dd>
-            <a href="#">机柜</a><a href="#">键盘</a><a href="#">扩展坞</a><a href="#">手柄方向盘</a><a href="#">鼠标</a><a href="#">鼠标垫</a
-            ><a href="#">移动固态硬盘</a><a href="#">移动机械硬盘</a><a href="#">硬盘盒</a><a href="#">游戏耳机</a><a href="#">游戏机</a
-            ><a href="#">游戏软件</a><a href="#">游戏周边</a>
-          </dd>
-        </dl>
-        <dl class="sub-dl flex">
-          <dt>智能会议</dt>
-          <dd>
-            <a href="#">直播设备</a><a href="#">U盘</a><a href="#">UPS电源</a><br />
-            <a href="#">办公大屏</a><a href="#">投影机</a><a href="#">会议平板</a><a href="#">会议摄像头</a><a href="#">音响</a
-            ><a href="#">会议音响</a><a href="#">麦克风</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">交换机</a
-            ><a href="#">网络存储</a><a href="#">网线</a><a href="#">网卡</a><a href="#">话务耳机</a><br />
-            <a href="#">安防监控</a><a href="#">电动幕布</a><a href="#">网络仪器仪表</a><a href="#">白板</a><a href="#">功放</a
-            ><a href="#">电视配件</a><a href="#">回音壁Soundbar</a><a href="#">会议音视频</a><a href="#">手写板</a><a href="#">投影配件</a
-            ><a href="#">录音笔</a><a href="#">翻译机</a><a href="#">翻译设备</a>
-          </dd>
-        </dl>
-        <dl class="sub-dl flex">
-          <dt>IT运维</dt>
-          <dd>
-            <a href="#">交换机</a><a href="#">路由器</a><a href="#">网络机顶盒</a><a href="#">网络存储</a><a href="#">网卡</a><a href="#">网线</a
-            ><a href="#">网络配件</a><a href="#">网络仪器仪表</a><a href="#">线缆</a><a href="#">普通网络设备</a>
+            <div
+              @click="onPath('/search?type=3&bottomCategoryId=' + item1.id)"
+              class="item1-label"
+              v-for="(item1, index1) in item.children"
+              :key="index1"
+            >
+              {{ item1.label }}
+            </div>
           </dd>
         </dl>
       </div>
@@ -78,41 +43,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
+import { categoryMainList } from '@/api/home/index-enterprise';
+import { getProductCategoryTree } from '@/api/home/index';
+import { onPath } from '@/utils/siteConfig';
 const activeIndex = ref(-1);
-
-// 线条风格 SVG base64 图标
-const iconPC =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgcng9IjIiLz48cGF0aCBkPSJNOCAyMmgybS0yIDBsNC00bTQgNGgybS0yIDBsLTQtNCIvPjwvc3ZnPg==';
-const iconAC =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjIiIHk9IjYiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIgcng9IjIiLz48cGF0aCBkPSJNMiAxMGgyMG0tMTYgNGg0Ii8+PC9zdmc+';
-const iconPrint =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik02IDlWMmgtNHY3bTggMEg0djExaDE2VjltLTYgMTB2LTVoOHY1Ii8+PC9zdmc+';
-const iconTea =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik00IDhoMTJ2OGExIDEgMCAwIDEtMSAxSDVhMSAxIDAgMCAxLTEtMVY4em0xMiAyYTQgNCAwIDAgMSAwIDhoLTJtLTItMTh2NG0tNCAwdjQiLz48L3N2Zz4=';
-const iconPhone =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjUiIHk9IjIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyMCIgcng9IjIiLz48cGF0aCBkPSJNMTIgMThoLjAxIi8+PC9zdmc+';
-const iconMask =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAyMmM0LjQgMCA4LTMuNiA4LThzLTMuNi04LTgtOC04IDMuNi04IDhzMy42IDggOCA4em0wIDB2LThtLTQgNGg4Ii8+PC9zdmc+';
-const iconMed =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiA0djE2bS04LThoMTZtLTQgNGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSA0IDB6Ii8+PC9zdmc+';
-const iconCar =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xOSA4bDEgNG0tMTYgMGwxLTRoMTJtLTIgMmgybTEgMTB2LTJIM3YybTEwIDBoNG0tNiAwSDRtMTQgMGgydjRINnYtNCIvPjwvc3ZnPg==';
-const iconTent =
-  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0xMiAzTDIgMjFoMjBtLTEwLTE4bDkgMTguNW0tMTggMGg4Ii8+PC9zdmc+';
-
-const categories = [
-  { name: '办公电脑 / 办公打印 / 电脑组件', icon: iconPC },
-  { name: '室温调节 / 冷藏保鲜 / 办公家具', icon: iconAC },
-  { name: '打印耗材 / 办公文具 / 清洁用品', icon: iconPrint },
-  { name: '茶歇福利 / 个护清洁 / 日用福利', icon: iconTea },
-  { name: '电子数码 / 茗茶酒水 / 美妆护肤', icon: iconPhone },
-  { name: '个人防护 / 清洁用品 / 电动工具', icon: iconMask },
-  { name: '养生茶饮 / 滋补礼盒 / 营养保健', icon: iconMed },
-  { name: '汽车用品 / 车辆养护 / 整车采购', icon: iconCar },
-  { name: '户外装备 / 体育用品 / 工装工服', icon: iconTent }
-];
+const dataList = ref<any>([]);
+const dataInfo = ref<any>({});
+const category = ref<any>([]);
+
+onMounted(() => {
+  getHead();
+});
+
+const getHead = async () => {
+  try {
+    const datas1 = await getProductCategoryTree({});
+    const datas2 = await categoryMainList({});
+    document.documentElement.style.setProperty('--enterprise-color', '#E7000B');
+    datas1.data.forEach((item1: any) => {
+      datas2.rows.forEach((item2: any) => {
+        if (item2.syncCategoryId == item1.id) {
+          item2.categoryList = item1.children ? item1.children : [];
+        }
+      });
+    });
+    dataList.value = datas2.rows;
+    if (datas2.rows.length > 0) {
+      dataInfo.value = datas2.rows[0];
+    }
+  } catch (error) {}
+};
+
+const onMouseenter = (index: any) => {
+  activeIndex.value = index;
+  dataInfo.value = dataList.value[index];
+};
 </script>
 
 <style scoped>
@@ -227,6 +192,7 @@ const categories = [
   font-size: 9px;
   color: #e1251b;
   letter-spacing: 1px;
+  cursor: pointer;
 }
 
 /* 主体列表区域 */
@@ -235,7 +201,7 @@ const categories = [
   align-items: flex-start;
   line-height: 1.8;
 }
-.sub-dl dt {
+.item-label {
   width: 75px;
   font-weight: bold;
   font-size: 12px;
@@ -243,6 +209,10 @@ const categories = [
   margin-right: 15px;
   text-align: right;
   white-space: nowrap;
+  cursor: pointer;
+}
+.item-label:hover {
+  color: var(--enterprise-color);
 }
 .sub-dl dd {
   flex: 1;
@@ -250,13 +220,14 @@ const categories = [
   flex-wrap: wrap;
   gap: 0 16px;
 }
-.sub-dl dd a {
+.item1-label {
   font-size: 12px;
   color: #8c8c8c;
   text-decoration: none;
   white-space: nowrap;
+  cursor: pointer;
 }
-.sub-dl dd a:hover {
-  color: #e1251b;
+.item1-label:hover {
+  color: var(--enterprise-color);
 }
 </style>

src/views/home/jdcomponents/JDHeader.vue

@@ -19,17 +19,17 @@
           湖北
         </div>
         <ul class="top-nav-links flex">
-          <li>我的订单</li>
+          <li @click="onPath('/order/orderManage')">我的订单</li>
           <li class="spacer"></li>
-          <li>我的工作台</li>
+          <li @click="onPath('/enterprise/companyInfo')">我的工作台</li>
           <li class="spacer"></li>
-          <li>企业会员</li>
+          <li @click="onPath('/enterprise/companyInfo')">企业会员</li>
           <li class="spacer"></li>
           <li class="red">企业采购</li>
           <li class="spacer"></li>
           <li>客户服务</li>
           <li class="spacer"></li>
-          <li class="hotline">咨询热线 400-028-0000</li>
+          <li class="hotline">咨询热线 {{ servicePhone }}</li>
         </ul>
       </div>
     </div>
@@ -38,25 +38,26 @@
     <div :class="['header-mid-wrap', { 'is-fixed': isFixed }]">
       <div class="header-mid w flex">
         <div class="logo-box">
-          <div class="logo-text">优易企业购</div>
-          <p class="logo-desc">省钱 · 省心 · 省时间</p>
+          <div class="logo-text" :style="{ color: config.themeColor }">{{ config.mainTitle }}</div>
+          <p class="logo-desc">{{ config.subTitle }}</p>
         </div>
 
         <div class="search-box-wrap flex-1">
-          <div class="search-bar flex">
+          <div class="search-bar flex" :style="{ borderColor: config.themeColor }">
             <div class="input-group flex-1 flex">
-              <input type="text" placeholder="企业端午福利" />
+              <input v-model="input" type="text" :placeholder="config.placeholderText" />
             </div>
-            <button class="search-btn">搜 索</button>
+            <button class="search-btn" :style="{ backgroundColor: config.themeColor }" @click="onPath('/search?type=1&input=' + input)">搜 索</button>
           </div>
           <div class="hot-links">
-            <span>企业权益不止5折</span>
-            <span>定制礼盒低至83折</span>
+            <span @click="onPath(item.link)" v-for="(item, index) in config.hotWordList" :key="index">{{ item.name }}</span>
           </div>
         </div>
 
         <div class="header-actions">
-          <div class="btn-keeper">Ai 采购管家</div>
+          <div :style="{ borderColor: config.themeColor }" class="btn-keeper" @click="onPath(config.rightBtnLink)">
+            <img :src="config.rightBtnIcon" alt="" />{{ config.rightBtnText }}
+          </div>
         </div>
       </div>
     </div>
@@ -66,6 +67,28 @@
 </template>
 
 <script setup lang="ts">
+import { currentSearchConfig } from '@/api/home/index-enterprise';
+import { getPlatformConfigList } from '@/api/breg/index';
+import { onPath } from '@/utils/siteConfig';
+const input = ref<any>('');
+const servicePhone = ref<any>('');
+const config = ref<any>({
+  hotWordList: []
+});
+
+currentSearchConfig({}).then((res) => {
+  if (res.code == 200) {
+    config.value = res.data;
+  }
+});
+
+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 = () => {
@@ -81,7 +104,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .jd-header {
   background: #fff;
 }
@@ -246,6 +269,11 @@ onUnmounted(() => {
 .header-actions {
   margin-left: 30px;
   flex-shrink: 0;
+  img {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
 }
 .btn-keeper {
   height: 40px;
@@ -260,6 +288,8 @@ onUnmounted(() => {
   cursor: pointer;
   transition: all 0.2s;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
 .btn-keeper:hover {
   background: #fef0f0;

src/views/home/jdcomponents/JDProducts.vue

@@ -18,11 +18,11 @@
       </div>
 
       <div class="cat-nav-list" ref="navListRef" @scroll="checkScroll">
-        <div class="cat-item" v-for="(cat, i) in categories" :key="i" :class="{ active: currentCat === i }" @click="currentCat = i">
-          <img :src="`/icons/icon_${cat.icon}.svg`" class="cat-img" />
+        <div class="cat-item" v-for="(cat, i) in categories" :key="i" :class="{ active: currentCat === i }" @click="onCurrentCat(i)">
+          <img :src="cat.iconUrl" class="cat-img" />
           <div class="cat-text">
-            <span class="c-t">{{ cat.title }}</span>
-            <span class="c-s">{{ cat.sub }}</span>
+            <span class="c-t">{{ cat.name }}</span>
+            <span class="c-s">{{ cat.subTitle }}</span>
           </div>
         </div>
       </div>
@@ -45,13 +45,13 @@
 
     <!-- 商品列表 -->
     <div class="product-grid">
-      <div class="p-card" v-for="(p, i) in productsList" :key="i">
+      <div class="p-card" v-for="(p, i) in baseProducts" :key="i">
         <div class="p-img-box">
-          <img :src="p.img" @error="handleImgError" />
+          <img :src="p.image" @error="handleImgError" />
         </div>
         <div class="p-info">
           <div class="p-name">
-            <span class="tag-zy">自营</span>
+            <span class="tag-zy">{{ p.isSelf == 1 ? '自营' : '非自营' }}</span>
             {{ p.name }}
           </div>
           <div class="p-price-row">
@@ -61,14 +61,14 @@
             <span class="tag-ep">企业价</span>
           </div>
           <div class="p-actions">
-            <button class="btn-cart-icon">
+            <button class="btn-cart-icon" @click.stop="onCart(p)">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="9" cy="21" r="1"></circle>
                 <circle cx="20" cy="21" r="1"></circle>
                 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
               </svg>
             </button>
-            <button class="btn-buy">
+            <button class="btn-buy" @click="onPath('/item?id=' + p.id + '&productNo=' + p.productNo)">
               <span class="txt-normal">加入采购清单</span>
               <span class="txt-hover">注册企业用户可享</span>
             </button>
@@ -76,64 +76,42 @@
         </div>
       </div>
     </div>
+    <div class="empty-bos" v-if="baseProducts.length === 0">
+      <el-empty description="暂无数据" />
+    </div>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
-import { ref, onMounted, computed } from 'vue';
-
-const categories = [
-  { title: '为你推荐', sub: '每日低价 领券', icon: '1' },
-  { title: '新客专享', sub: '精选爆品 低价', icon: '2' },
-  { title: '办公设备', sub: '电脑设备 批量', icon: '12' },
-  { title: '办公耗材', sub: '低价直供 囤货', icon: '13' },
-  { title: '工业生产', sub: '车间工具 规格', icon: '3' },
-  { title: '员工福利', sub: '节日礼盒 一键', icon: '10' },
-  { title: '办公环境', sub: '电器家具 焕新', icon: '7' },
-  { title: '营销礼赠', sub: '客户礼包 特惠', icon: '8' },
-  { title: '员工餐饮', sub: '茶水间 零食', icon: '5' },
-  { title: '个人防护', sub: '劳保用品 齐全', icon: '6' },
-  { title: '企业服务', sub: '工商注册 财税', icon: '4' },
-  { title: '包装耗材', sub: '纸箱胶带 批采', icon: '11' },
-  { title: '商用家电', sub: '空调冰洗 采购', icon: '9' },
-  { title: '安防监控', sub: '门禁摄像头 全', icon: '14' },
-  { title: '五金建材', sub: '管件工具 直供', icon: '15' }
-];
+import { recommendThemeConfig } from '@/api/home/index-enterprise';
+import { onPath } from '@/utils/siteConfig';
+import { addProductShoppingCart } from '@/api/goods/index';
 
-const baseProducts = [
-  { name: '佛山照明 (FSL) LED投光灯 led户外灯室外防水大功率工程广告牌泛光灯', price: '185', dec: '27', img: '@/assets/jd/prod_light.png' },
-  { name: '初工 门锁卧室门锁室内门锁可调节通用门锁免改孔门锁 双孔可调孔距', price: '49', dec: '90', img: '@/assets/jd/prod_lock.png' },
-  { name: '潘洁擦机布 棉布工业擦机抹布 10KG(20斤)吸水吸油抹布40*60cm', price: '113', dec: '00', img: '@/assets/jd/prod_rags.png' },
-  { name: '德力西电气 (DELIXI ELECTRIC) 硬质合金开孔器不锈钢钻头扩孔', price: '18', dec: '79', img: '@/assets/jd/prod_switch.png' },
-  { name: '世达 (SATA) 150件小飞中飞大飞棘轮扳手套筒综合套装工具箱09510', price: '2025', dec: '78', img: '@/assets/jd/prod_toolset.png' },
-  { name: '普达防毒面具全面罩自吸过滤式防毒农药化工防甲苯醋酸等有机气体', price: '116', dec: '60', img: '@/assets/jd/prod_mask.png' },
-  { name: '华为平板电脑 MatePad 11.5英寸 120Hz高刷全面屏 8+128GB WIFI版', price: '1499', dec: '00', img: '@/assets/jd/prod_it.png' },
-  { name: '惠普（HP）打印机 激光打印机 办公商用家用黑白打印机', price: '899', dec: '00', img: '@/assets/jd/prod_office.png' },
-  { name: '福临门 食用油 精炼一级大豆油 5升*4桶/箱（企业专享）', price: '259', dec: '00', img: '@/assets/jd/prod_office.png' },
-  { name: '得力(deli) A4复印纸 70g 500张/包 5包/箱 办公打印纸', price: '129', dec: '00', img: '@/assets/jd/prod_rags.png' },
-  { name: '智能门禁系统 考勤机 打卡机 刷脸指纹密码识别', price: '399', dec: '00', img: '@/assets/jd/prod_lock.png' },
-  { name: '工业级大功率风扇 车间用强力落地扇 降温通风', price: '288', dec: '00', img: '@/assets/jd/prod_light.png' }
-];
+const categories = ref<any>([]);
+const baseProducts = ref<any>([]);
 
-baseProducts.forEach((p) => {
-  if (!p.img) p.img = '@/assets/jd/prod_office.png';
-});
-
-// 生成更多数据用于测试吸顶
-const productsList = computed(() => {
-  let list = [];
-  for (let i = 0; i < 3; i++) {
-    // 36 items
-    list = list.concat(baseProducts.map((p) => ({ ...p, id: i + '_' + p.name })));
+recommendThemeConfig({}).then((res) => {
+  if (res.code == 200) {
+    categories.value = res.data.categoryConfigList;
+    categories.value.forEach((item: any) => {
+      item.goodsList = [];
+      if (item.selectedProductIds) {
+        item.goodsList = JSON.parse(item.selectedProductIds);
+      }
+    });
+    baseProducts.value = categories.value[0].goodsList;
   }
-  return list;
 });
 
-const currentCat = ref(0);
+const currentCat = ref<any>(0);
 const navListRef = ref(null);
 const showPrev = ref(false);
 const showNext = ref(true);
 
+const onCurrentCat = (index: any) => {
+  currentCat.value = index;
+  baseProducts.value = categories.value[index].goodsList;
+};
 const checkScroll = () => {
   if (!navListRef.value) return;
   const { scrollLeft, scrollWidth, clientWidth } = navListRef.value;
@@ -155,6 +133,21 @@ const handleImgError = (e) => {
   e.target.onerror = null;
 };
 
+import { cartStore } from '@/store/modules/cart';
+const cart = cartStore();
+//加入购物车
+const onCart = (row: any) => {
+  addProductShoppingCart({
+    productId: row.id,
+    productNum: row.minOrderQuantity
+  }).then((res) => {
+    if (res.code == 200) {
+      cart.onCartCount();
+      ElMessage.success('加入购物车成功');
+    }
+  });
+};
+
 onMounted(() => {
   setTimeout(checkScroll, 100);
 });
@@ -461,4 +454,11 @@ onMounted(() => {
   background: #c81623;
   border-color: #c81623;
 }
+
+.empty-bos {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
 </style>

src/views/home/jdcomponents/JDScene.vue

@@ -1,30 +1,30 @@
 <template>
   <div class="scene-integrated w">
-    <div class="scene-inner flex">
+    <div class="scene-inner flex" :style="{ background: dataInfo.themeColor }">
       <!-- 左侧标题区 -->
       <div class="scene-left">
         <div class="s-h-group flex">
-          <h3 class="s-main-t">场景解决方案</h3>
-          <span class="s-sub-t">一站全买齐</span>
+          <h3 class="s-main-t">{{ dataInfo.mainTitle }}</h3>
+          <span class="s-sub-t">{{ dataInfo.subTitle }}</span>
         </div>
-        <a href="#" class="enter-pill"> 进入全场景 <i class="arr-ic"></i> </a>
+        <div class="enter-pill" @click="onPath(dataInfo.jumpLink)">{{ dataInfo.btnText }} <i class="arr-ic"></i></div>
       </div>
 
       <!-- 右侧卡片区 -->
       <div class="scene-right flex-1">
         <div class="s-grid-h flex">
-          <div class="s-item-card" v-for="(s, i) in scenes" :key="i">
+          <div class="s-item-card" :style="{ background: s.bgColor, opacity: s.opacity }" v-for="(s, i) in dataInfo.cardList" :key="i">
             <div class="item-top flex-between">
               <div class="item-info flex">
-                <p class="item-t">{{ s.title }}</p>
-                <p class="item-d">{{ s.desc }}</p>
+                <p class="item-t" :style="{ color: s.titleColor }">{{ s.title }}</p>
+                <p class="item-d" :style="{ color: s.subTitleColor }">{{ s.subTitle }}</p>
               </div>
               <div class="item-arrow">
                 <i class="icon-arr"></i>
               </div>
             </div>
             <div class="item-pic">
-              <img :src="s.img" />
+              <el-image class="item-img" :src="s.imageUrl" />
             </div>
           </div>
         </div>
@@ -34,6 +34,16 @@
 </template>
 
 <script setup name="Index" lang="ts">
+import { currentScenarioGlobalSetting } from '@/api/home/index-enterprise';
+import { onPath } from '@/utils/siteConfig';
+const dataInfo = ref<any>({
+  cardList: []
+});
+currentScenarioGlobalSetting({}).then((res) => {
+  if (res.code == 200) {
+    dataInfo.value = res.data;
+  }
+});
 const scenes = [
   { title: '耗材采购', desc: '纸墨随买随用', img: '@/assets/jd/scene_stationery.png' },
   { title: '防暑降温', desc: '守护员工健康', img: '@/assets/jd/scene_cooling.png' },
@@ -86,6 +96,7 @@ const scenes = [
   font-size: 13px;
   font-weight: bold;
   text-decoration: none;
+  cursor: pointer;
 }
 .arr-ic {
   display: inline-block;
@@ -176,7 +187,7 @@ const scenes = [
   overflow: hidden;
   padding: 0 8px 8px;
 }
-.item-pic img {
+.item-img {
   width: 100%;
   height: 100%;
   object-fit: cover;

src/views/home/jdcomponents/JDUserPanel.vue

@@ -6,11 +6,11 @@
     <!-- 用户信息区 -->
     <div class="u-auth flex">
       <div class="avatar">
-        <img src="@/assets/jd/user_avatar.png" />
+        <img :src="logo2" />
       </div>
       <div class="u-info">
-        <p class="name">52k9i2wwed3jx2</p>
-        <p class="links">切换企业账号<span class="divider">|</span>注册</p>
+        <p class="name">{{ userInfo.nickName }}</p>
+        <p @click="onPath('/breg')" class="links">切换企业账号<span class="divider">|</span>注册</p>
       </div>
     </div>
 
@@ -28,133 +28,38 @@
     <!-- 订单状态统计 -->
     <div class="order-stats">
       <div class="stat-item">
-        <div class="num">0</div>
-        <div class="label">待审核</div>
+        <div class="num">{{ countData.pendingapprovalCount || 0 }}</div>
+        <div class="label">待审批</div>
       </div>
       <div class="stat-item">
-        <div class="num">0</div>
+        <div class="num">{{ countData.pendingPaymentCount || 0 }}</div>
         <div class="label">待付款</div>
       </div>
       <div class="stat-item">
-        <div class="num">0</div>
+        <div class="num">{{ countData.pendingShipmentCount || 0 }}</div>
         <div class="label">待发货</div>
       </div>
       <div class="stat-item">
-        <div class="num">0</div>
+        <div class="num">{{ countData.pendingReceiptCount || 0 }}</div>
         <div class="label">待收货</div>
       </div>
     </div>
 
     <!-- 企业工作台 -->
     <div class="tools-sec relative">
-      <div class="t-h flex-between">
-        <span>企业工作台</span>
+      <div class="t-h flex-between" @click="onPath(dataInfo.jumpLink)">
+        <span>{{ dataInfo.moduleName }}</span>
         <i class="icon-more">&gt;</i>
       </div>
 
       <!-- 滑动翻页组件 -->
       <div class="t-slider-wrap">
         <div class="t-track" :style="{ transform: `translateX(-${currentPage * 100}%)` }">
-          <!-- 第 1 页 -->
-          <div class="t-page">
+          <div class="t-page" v-for="(item1, index1) in dataList" :key="index1">
             <div class="t-grid">
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE5IDIxSDVDNC40IDIxIDQgMjAuNiA0IDIwVjRDNCAzLjQgNC40IDMgNSAzSDE0TDIwIDlWMjBDMjAgMjAuNiAxOS42IDIxIDE5IDIxWiIvPjxwYXRoIGQ9Ik0xNCAzVjloNiIvPjxwb2x5Z29uIHBvaW50cz0iOSAxMyAxMSAxNSAxNSAxMSA5IDEzIi8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>订单中心</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjEwIiB5Mj0iNiIvPjxsaW5lIHgxPSI2IiB5MT0iMTAiIHgyPSIxMCIgeTI9IjEwIi8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>发票中心</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMkgxNVY2SDlaTTUgNlYyMkgxOVY2SDVaIi8+PGxpbmUgeDE9IjkiIHkxPSIxMiIgeDI9IjE1IiB5Mj0iMTIiLz48bGluZSB4MT0iOSIgeTE9IjE2IiB4Mj0iMTUiIHkyPSIxNiIvPjwvc3ZnPg=="
-                  class="t-icon"
-                />
-                <span>采购清单</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDJDOC4xIDIgNSA1LjEgNSA5QzUgMTQuMiAxMiAyMiAxMiAyMiAxMkMxMiAyMiAxOSAxNC4yIDE5IDlDMTkgNS4xIDE1LjkgMiAxMiAyWiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iOSIgcj0iMiIvPjwvc3ZnPg=="
-                  class="t-icon"
-                />
-                <span>多地下单</span>
-              </div>
-              <div class="t-i">
-                <div class="badge">返100</div>
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMThWMTVIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg=="
-                  class="t-icon"
-                />
-                <span>达量返</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIvPjxwYXRoIGQ9Ik03IDlMMTEgMTVNMTUgOVYxNU0xNSA5TDEzIDEySDE3TTEzIDE1SDE3Ii8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>智能选品</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgMThWMTRIN0E1IDUgMCAwIDEgMTIgOUgxMmE1IDUgMCAwIDEgNSA1VjE4SDE3YTIgMiAwIDAgMSAyIDJWMjBIM2EwIDAgMCAwIDEtLS0yVjE4WiIvPjwvc3ZnPg=="
-                  class="t-icon"
-                />
-                <span>电子合同</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEyIiByeD0iMiIvPjxsaW5lIHgxPSI2IiB5MT0iMTIiIHgyPSIxMCIgeTI9IjEyIi8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>极速认款</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 第 2 页 -->
-          <div class="t-page">
-            <div class="t-grid">
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iOSIgY3k9IjIxIiByPSIxIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMSIgcj0iMSIvPjxwYXRoIGQ9Ik0xIDFoNGwyLjY4IDEzLjM5YTIgMiAwIDAgMCAyIDEuNjFoOS43MmEyIDIgMCAwIDAgMi0xLjYxTDIzIDZINiIvPjwvc3ZnPg=="
-                  class="t-icon"
-                />
-                <span>采购报告</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iMSIgeDI9IjEyIiB5Mj0iMjMiLz48cGF0aCBkPSJNMTcgNVYzbS0xMCAyeTJoMTAiLz48cGF0aCBkPSJNNSAxNXYyaDEwIi8+PHBhdGggZD0iTTEyIDljLTIuMjEgMC00IDEuNzktNCA0cyAxLjc5IDQgNCA0Ii8+PHBhdGggZD0iTTEyIDE3YzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00Ii8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>对公转账</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDhWMk0xOCAyMjEtdi02Ii8+PHBhdGggZD0iTTE0IDhWMk0xNCAyMnYtNiIvPjxwYXRoIGQ9Ik0xMCA4VjJNMTAgMjJ2LTYiLz48cGF0aCBkPSJNMjIgMnY4YTUgNSAwIDAgMS01IDVoLTE0YTUgNSAwIDAgMS01LTVWMloiLz48L3N2Zz4="
-                  class="t-icon"
-                />
-                <span>员工饭卡</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJIMlYyMkgxNEwxOCAxOEwxNCAxNFYyWiIvPjxwb2x5Z29uIHBvaW50cz0iNiAxMCA4IDEyIDEyIDgiLz48L3N2Zz4="
-                  class="t-icon"
-                />
-                <span>计划购</span>
-              </div>
-              <div class="t-i">
-                <img
-                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJIMTlNMTEgMThWMk0xNiAybC01IDUtNSA1Ii8+PC9zdmc+"
-                  class="t-icon"
-                />
-                <span>预算管理</span>
+              <div class="t-i" v-for="(item2, index2) in item1" :key="index2" @click="onPath(item2.jumpLink)">
+                <el-image class="t-icon" :src="item2.iconUrl" />
+                <span>{{ item2.name }}</span>
               </div>
             </div>
           </div>
@@ -166,7 +71,7 @@
             <polyline points="15 18 9 12 15 6"></polyline>
           </svg>
         </div>
-        <div class="flip-btn next-btn" v-show="currentPage < 1" @click="currentPage++">
+        <div class="flip-btn next-btn" v-show="currentPage < 1 && dataList.length > 1" @click="currentPage++">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
             <polyline points="9 18 15 12 9 6"></polyline>
           </svg>
@@ -177,7 +82,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { currentQuickEntryModule } from '@/api/home/index-enterprise';
+import { getInfo } from '@/api/login';
+import { onPath } from '@/utils/siteConfig';
+import { countOrder } from '@/api/home/index';
+import logo2 from '@/assets/images/pcdiy/logo2.png';
+const dataList = ref<any>([]);
+const dataInfo = ref<any>({});
+const userInfo = ref<any>({});
+const countData = ref<any>({});
+
+currentQuickEntryModule({}).then((res) => {
+  if (res.code == 200) {
+    dataInfo.value = res.data;
+    if (res.data && res.data.items.length > 0) {
+      dataList.value = chunkArray(res.data.items, 8);
+    }
+  }
+});
+
+const chunkArray = (arr, size) => {
+  const result = [];
+  for (let i = 0; i < arr.length; i += size) {
+    result.push(arr.slice(i, i + size));
+  }
+  return result;
+};
+
+getInfo().then((res) => {
+  if (res.code == 200) {
+    userInfo.value = res.data.user;
+  }
+});
+
+countOrder({}).then((res) => {
+  if (res.code == 200) {
+    countData.value = res.data || {};
+  }
+});
 
 const currentPage = ref(0);
 </script>
@@ -239,6 +181,7 @@ const currentPage = ref(0);
   font-size: 11px;
   color: #666;
   margin-top: 4px;
+  cursor: pointer;
 }
 
 .divider {
@@ -337,6 +280,7 @@ const currentPage = ref(0);
   font-size: 12px;
   color: #999;
   font-style: normal;
+  cursor: pointer;
 }
 
 .t-slider-wrap {

src/views/index.vue

@@ -532,7 +532,6 @@ getClassificationFloorList({}).then(async (res) => {
         }
 
         const datas2 = await getClassificationFloorLabel(item.floorNo);
-        console.log(datas2.'?????????????????');
         if (datas2.code == 200) {
           item.navList = datas2.data;
         }