修改到家服务的顶部分类逻辑

packages/homeServer/index/index.css

@@ -394,3 +394,77 @@
     width: 100%;
     height: 100%;
 }
+
+/* swiperBox 样式 - 与 localLife 页面保持一致 */
+/* swiperBox 样式 - 每行展示5个，平均分配空间 */
+.swiperBox {
+    height: 350rpx;
+    width: 100%;
+    position: relative;
+}
+
+.swiper {
+    height: 350rpx;
+    width: 100%;
+}
+
+.navList {
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    height: 350rpx;
+    width: 100%;
+    padding: 30rpx 20rpx;
+    background-color: #fff;
+    margin-top: 20rpx;
+}
+
+.navItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 20%; /* 每行5个，平均分配宽度 */
+    height: 105rpx;
+    margin-bottom: 43rpx;
+    box-sizing: border-box;
+}
+
+.navItemImg {
+    width: 70rpx;
+    height: 70rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.navItem image {
+    width: 70rpx;
+    height: 70rpx;
+}
+
+.dot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20rpx;
+    position: absolute;
+    left: 50%;
+    bottom: 25rpx;
+    transform: translateX(-50%);
+}
+
+.dotItem {
+    width: 8rpx;
+    height: 8rpx;
+    border-radius: 50%;
+    background-color: #E6E6E6;
+    margin-right: 5rpx;
+}
+
+.actives {
+    width: 20rpx;
+    height: 8rpx;
+    background: #FF370B;
+    border-radius: 10rpx 10rpx 10rpx 10rpx;
+}

packages/homeServer/index/index.vue

@@ -13,25 +13,30 @@
         <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
       </view>
       <view class="search-box" @click="searchService">
-        <image
+        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
-          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
+          class="search-icon" mode="aspectFit"></image>
-          class="search-icon"
-          mode="aspectFit"
-        ></image>
         <text class="search-placeholder">请输入您要找的服务</text>
       </view>
     </view>
 
-    <!-- 服务分类 -->
+    <!-- 服务分类 - 修改为 swiper 形式 -->
-    <view class="service-category">
+    <view class="swiperBox">
-      <view
+      <swiper class="swiper" @change="swiperChange" :current="currentIndex">
-        class="category-item"
+        <swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
-        v-for="(item, index) in serviceCategories"
+          <view class="navList">
-        :key="index"
+            <view class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex" @click="changeNav(item)">
-        @click="navigateToService(item)"
+              <view class="navItemImg">
-      >
+                <image :src="picUrl + item.cate_image" mode="widthFix"></image>
-        <image :src="item.icon" class="category-icon"></image>
+              </view>
-        <text class="category-name">{{ item.name }}</text>
+              <view class="navName">{{ item.cate_name }}</view>
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
+
+      <view class="dot">
+        <view class="dotItem" v-for="(page, index) in swiperList" :key="index"
+          :class="currentIndex == index ? 'actives' : ''"></view>
       </view>
     </view>
 
@@ -40,41 +45,29 @@
       <view class="announcement-flex">
         到家
         <text class="announcement-title"> 公告</text>
-        <image
+        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice1.png"
-          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice1.png"
+          class="announcement-img" mode="aspectFit"></image>
-          class="announcement-img"
-          mode="aspectFit"
-        ></image>
       </view>
       <view class="hrStyle">|</view>
-      <text class="announcement-content"
+      <text class="announcement-content">公告内容公告内容公告内容公告内容...</text>
-        >公告内容公告内容公告内容公告内容...</text
+      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice2.png"
-      >
+        class="arrow-right" @click="lookNotice" mode="aspectFit"></image>
-      <image
-        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice2.png"
-        class="arrow-right"
-        @click="lookNotice"
-        mode="aspectFit"
-      ></image>
     </view>
 
     <!-- 广告横幅 -->
     <view class="serverList">
       <view class="serverList_left">
         <!-- <view> -->
-        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao1.png" mode="aspectFit"/>
+        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao1.png"
+          mode="aspectFit" />
         <!-- <swiper-item v-for="(item, index) in homeLeftList" :key="index">
             <image :src="item.pic_src" alt="" mode="aspectFit" />
           </swiper-item> -->
         <!-- </view> -->
       </view>
       <view class="serverList_right">
-        <view
+        <view :class="['serverItem', `serverItem${index + 1}`]" @tap="headerServerClick(item)"
-          :class="['serverItem', `serverItem${index + 1}`]"
+          v-for="(item, index) in homeRightList" :key="index">
-          @tap="headerServerClick(item)"
-          v-for="(item, index) in homeRightList"
-          :key="index"
-        >
           <image :src="item.pic_src" mode="" />
         </view>
       </view>
@@ -82,49 +75,35 @@
 
     <!-- 立即联系 -->
     <view class="contact-section" @click="contactService">
-      <image
+      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu1.png"
-        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu1.png"
+        class="contact-icon"></image>
-        class="contact-icon"
-      ></image>
       <view class="contact-text">
         <text class="contact-title">立即联系</text>
         <br />
         <text class="contact-subtitle">未找到您需要的服务？</text>
       </view>
-      <image
+      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu2.png"
-        src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu2.png"
+        class="contact-icon2"></image>
-        class="contact-icon2"
-      ></image>
     </view>
     <view class="interval"></view>
 
     <!-- 推荐热门服务 -->
     <view class="hot-services">
       <view class="section-header">
-        <image
+        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom1.png"
-          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom1.png"
+          class="section-arrow"></image>
-          class="section-arrow"
-        ></image>
         <text class="section-title">推荐热门服务</text>
       </view>
       <view class="service-list">
-        <view
+        <view class="service-card" v-for="(service, index) in hotServiceList" :key="index">
-          class="service-card"
+          <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
-          v-for="(service, index) in hotServiceList"
+            class="service-image"></image>
-          :key="index"
-        >
-          <image
-            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
-            class="service-image"
-          ></image>
           <view class="service-info">
             <view class="service-info-left">
               <view class="service-info-left-top">
                 <text class="service-name">{{ service.name }}</text>
-                <image
+                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
-                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
+                  class="service-image2"></image>
-                  class="service-image2"
-                ></image>
                 <text class="service-tag">{{ service.tag }}</text>
               </view>
               <br />
@@ -132,10 +111,7 @@
             </view>
             <view class="service-info-right">
               <view class="service-footer">
-                <view
+                <view class="service-button" @click="navigateToReservation(service)">
-                  class="service-button"
-                  @click="navigateToReservation(service)"
-                >
                   <text class="button-text">去预约</text>
                 </view>
                 <text class="service-count">{{ service.count }}</text>
@@ -150,12 +126,7 @@
 
     <!-- 回到顶部 -->
     <div class="toUp" @click="scrollToTop">
-      <u-badge
+      <u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
-        numberType="limit"
-        type="error"
-        max="99"
-        :value="value"
-      ></u-badge>
       <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/toUp.png"></image>
     </div>
   </view>
@@ -168,7 +139,7 @@ import {
   NavgateTo,
   menuButtonInfo,
 } from "../../../utils/index";
-import { apiArr } from "../../../api/reservation";
+import { apiArr } from "../../../api/v2local";
 import nav from "../../../components/nav/nav";
 
 export default {
@@ -177,51 +148,13 @@ export default {
   },
   data() {
     return {
+      picUrl,
       // 当前位置
       currentLocation: "衡水市桃城区",
       // 服务分类数据
-      serviceCategories: [
+      serviceCategories: [],
-        {
+      swiperList: [],
-          name: "家电维修",
+      currentIndex: 0,
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top1.png",
-        },
-        {
-          name: "数码维修",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top2.png",
-        },
-        {
-          name: "电器清洗",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top3.png",
-        },
-        {
-          name: "洗衣洗鞋",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top4.png",
-        },
-        {
-          name: "精细擦窗",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top5.png",
-        },
-        {
-          name: "整理收纳",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top6.png",
-        },
-        {
-          name: "家庭保姆",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top7.png",
-        },
-        {
-          name: "母婴服务",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top8.png",
-        },
-        {
-          name: "管道疏通",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top9.png",
-        },
-        {
-          name: "家庭保洁",
-          icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_top10.png",
-        },
-      ],
       homeLeftList: [
         {
           title: "",
@@ -252,6 +185,30 @@ export default {
     };
   },
   methods: {
+    // 获取服务分类
+    async getServiceCategories() {
+      const that = this;
+      const params = {
+        isShop: 2
+      }
+      const res = await request(apiArr.getMerChantCateList, "POST", params, { silent: true });
+      // 过滤出可见的分类
+      res.rows = res.rows.filter((item) => item.is_visible == 1);
+      // 将数据分成每10个一组
+      const chunkSize = 10;
+      that.swiperList = [];
+      for (let i = 0; i < res.rows.length; i += chunkSize) {
+        that.swiperList.push(res.rows.slice(i, i + chunkSize));
+      }
+    },
+    // swiper 切换事件
+    swiperChange(e) {
+      this.currentIndex = e.detail.current;
+    },
+    // 导航到分类页面
+    changeNav(item) {
+      NavgateTo(`/packages/localLife/classify/index?item=${JSON.stringify(item)}`);
+    },
     // 选择位置
     chooseLocation() {
       // uni.navigateTo({
@@ -264,7 +221,7 @@ export default {
       //   url: "/packages/homeServer/search/index",
       // });
     },
-    // 导航到服务详情
+    // 导航到服务详情（保留原方法但修改为与changeNav一致）
     navigateToService(item) {
       // uni.navigateTo({
       //   url: "/packages/homeServer/classify/index",
@@ -309,6 +266,7 @@ export default {
   },
   onLoad() {
     this.getCurrentLocation();
+    this.getServiceCategories();
   },
 };
 </script>

packages/localLife/index/index.vue

@@ -178,7 +178,10 @@ export default {
     //查询商家分类
     async getCateList() {
       let that = this;
-      await request(apiArr.getMerChantCateList, "POST").then((res) => {
+      const params = {
+        isShop: 1
+      }
+      await request(apiArr.getMerChantCateList, "POST", params).then((res) => {
         res.rows = res.rows.filter((item) => item.is_visible == 1)
         console.log(res);
         // 将数据分成每10个一组