diff --git a/packages/homeServer/index/index.css b/packages/homeServer/index/index.css index 16fc9b38..1548c5a3 100644 --- a/packages/homeServer/index/index.css +++ b/packages/homeServer/index/index.css @@ -393,4 +393,78 @@ .toUp image { 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; } \ No newline at end of file diff --git a/packages/homeServer/index/index.vue b/packages/homeServer/index/index.vue index 5f5462d3..b801aab2 100644 --- a/packages/homeServer/index/index.vue +++ b/packages/homeServer/index/index.vue @@ -13,25 +13,30 @@ - + 请输入您要找的服务 - - - - - {{ item.name }} + + + + + + + + + + {{ item.cate_name }} + + + + + + + @@ -40,41 +45,29 @@ 到家 公告 - + | - 公告内容公告内容公告内容公告内容... - + 公告内容公告内容公告内容公告内容... + - + - + @@ -82,49 +75,35 @@ - + 立即联系
未找到您需要的服务？ - + - + 推荐热门服务 - - + + {{ service.name }} - + {{ service.tag }}
@@ -132,10 +111,7 @@ - + 去预约 {{ service.count }} @@ -150,12 +126,7 @@
- +
@@ -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: [ - { - name: "家电维修", - 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", - }, - ], + serviceCategories: [], + swiperList: [], + currentIndex: 0, 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(); }, }; diff --git a/packages/localLife/index/index.vue b/packages/localLife/index/index.vue index 27b7c30e..d64ed180 100644 --- a/packages/localLife/index/index.vue +++ b/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个一组