修改到家服务的顶部分类逻辑
This commit is contained in:
赵毅
parent
86c74c27b0
commit
c3174d2809
@ -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;
|
||||
}
|
||||
@ -13,25 +13,30 @@
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</view>
|
||||
<view class="search-box" @click="searchService">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
class="search-icon"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
class="search-icon" mode="aspectFit"></image>
|
||||
<text class="search-placeholder">请输入您要找的服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务分类 -->
|
||||
<view class="service-category">
|
||||
<view
|
||||
class="category-item"
|
||||
v-for="(item, index) in serviceCategories"
|
||||
:key="index"
|
||||
@click="navigateToService(item)"
|
||||
>
|
||||
<image :src="item.icon" class="category-icon"></image>
|
||||
<text class="category-name">{{ item.name }}</text>
|
||||
<!-- 服务分类 - 修改为 swiper 形式 -->
|
||||
<view class="swiperBox">
|
||||
<swiper class="swiper" @change="swiperChange" :current="currentIndex">
|
||||
<swiper-item v-for="(page, pageIndex) in swiperList" :key="pageIndex">
|
||||
<view class="navList">
|
||||
<view class="navItem" v-for="(item, itemIndex) in page" :key="itemIndex" @click="changeNav(item)">
|
||||
<view class="navItemImg">
|
||||
<image :src="picUrl + item.cate_image" mode="widthFix"></image>
|
||||
</view>
|
||||
<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
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice1.png"
|
||||
class="announcement-img"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_notice1.png"
|
||||
class="announcement-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="hrStyle">|</view>
|
||||
<text class="announcement-content"
|
||||
>公告内容公告内容公告内容公告内容...</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>
|
||||
<text class="announcement-content">公告内容公告内容公告内容公告内容...</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>
|
||||
</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
|
||||
:class="['serverItem', `serverItem${index + 1}`]"
|
||||
@tap="headerServerClick(item)"
|
||||
v-for="(item, index) in homeRightList"
|
||||
:key="index"
|
||||
>
|
||||
<view :class="['serverItem', `serverItem${index + 1}`]" @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
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu1.png"
|
||||
class="contact-icon"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu1.png"
|
||||
class="contact-icon"></image>
|
||||
<view class="contact-text">
|
||||
<text class="contact-title">立即联系</text>
|
||||
<br />
|
||||
<text class="contact-subtitle">未找到您需要的服务？</text>
|
||||
</view>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu2.png"
|
||||
class="contact-icon2"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_kefu2.png"
|
||||
class="contact-icon2"></image>
|
||||
</view>
|
||||
<view class="interval"></view>
|
||||
|
||||
<!-- 推荐热门服务 -->
|
||||
<view class="hot-services">
|
||||
<view class="section-header">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom1.png"
|
||||
class="section-arrow"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom1.png"
|
||||
class="section-arrow"></image>
|
||||
<text class="section-title">推荐热门服务</text>
|
||||
</view>
|
||||
<view class="service-list">
|
||||
<view
|
||||
class="service-card"
|
||||
v-for="(service, index) in hotServiceList"
|
||||
: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-card" v-for="(service, index) in hotServiceList" :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
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
|
||||
class="service-image2"
|
||||
></image>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/index_bottom2.png"
|
||||
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
|
||||
class="service-button"
|
||||
@click="navigateToReservation(service)"
|
||||
>
|
||||
<view 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
|
||||
numberType="limit"
|
||||
type="error"
|
||||
max="99"
|
||||
:value="value"
|
||||
></u-badge>
|
||||
<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: [
|
||||
{
|
||||
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();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -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个一组
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user