276 lines
8.9 KiB
Vue
276 lines
8.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 头部标题 -->
|
||
<!-- <view class="header">
|
||
<text class="title">榴园到家 服务至上</text>
|
||
</view> -->
|
||
|
||
<!-- 位置和搜索 -->
|
||
<view class="location-search">
|
||
<view class="location" @click="chooseLocation">
|
||
<text class="location-text">{{ currentLocation }}</text>
|
||
<!-- <image src="" class="arrow-down"></image> -->
|
||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||
</view>
|
||
<view class="search-box" @click="searchService">
|
||
<image src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
|
||
class="search-icon" mode="aspectFit"></image>
|
||
<text class="search-placeholder">请输入您要找的服务</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务分类 - 修改为 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>
|
||
|
||
<!-- 到家公告 -->
|
||
<view class="announcement">
|
||
<view class="announcement-flex">
|
||
到家
|
||
<text class="announcement-title"> 公告</text>
|
||
<image src="https://static.hshuishang.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://static.hshuishang.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://static.hshuishang.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">
|
||
<image :src="item.pic_src" mode="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 立即联系 -->
|
||
<view class="contact-section" @click="contactService">
|
||
<image src="https://static.hshuishang.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://static.hshuishang.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://static.hshuishang.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://static.hshuishang.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://static.hshuishang.com/property-img-file/index_bottom2.png"
|
||
class="service-image2"></image>
|
||
<text class="service-tag">{{ service.tag }}</text>
|
||
</view>
|
||
<br />
|
||
<text class="service-desc">{{ service.description }}</text>
|
||
</view>
|
||
<view class="service-info-right">
|
||
<view class="service-footer">
|
||
<view class="service-button" @click="navigateToReservation(service)">
|
||
<text class="button-text">去预约</text>
|
||
</view>
|
||
<text class="service-count">{{ service.count }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <nav-footer :current="4" /> -->
|
||
|
||
<!-- 回到顶部 -->
|
||
<div class="toUp" @click="scrollToTop">
|
||
<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
|
||
<image src="https://static.hshuishang.com/property-img-file/toUp.png"></image>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
NavgateTo,
|
||
menuButtonInfo,
|
||
} from "../../../utils/index";
|
||
import { apiArr } from "../../../api/v2local";
|
||
import nav from "../../../components/nav/nav";
|
||
|
||
export default {
|
||
components: {
|
||
nav,
|
||
},
|
||
data() {
|
||
return {
|
||
picUrl,
|
||
// 当前位置
|
||
currentLocation: "衡水市桃城区",
|
||
// 服务分类数据
|
||
serviceCategories: [],
|
||
swiperList: [],
|
||
currentIndex: 0,
|
||
homeLeftList: [
|
||
{
|
||
title: "",
|
||
pic_src: "https://static.hshuishang.com/property-img-file/guanggao1.png",
|
||
},
|
||
],
|
||
homeRightList: [
|
||
{
|
||
title: "",
|
||
pic_src: "https://static.hshuishang.com/property-img-file/guanggao2.png",
|
||
},
|
||
{
|
||
title: "",
|
||
pic_src: "https://static.hshuishang.com/property-img-file/guanggao3.png",
|
||
},
|
||
],
|
||
// 热门服务数据
|
||
hotServiceList: [
|
||
{
|
||
id: 1,
|
||
name: "空调清洗",
|
||
badge: "推荐",
|
||
tag: "平台保障",
|
||
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
||
count: "已预约100+",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
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({
|
||
// url: "/packages/areaPopup/index",
|
||
// });
|
||
},
|
||
// 搜索服务
|
||
searchService() {
|
||
// uni.navigateTo({
|
||
// url: "/packages/homeServer/search/index",
|
||
// });
|
||
},
|
||
// 导航到服务详情（保留原方法但修改为与changeNav一致）
|
||
navigateToService(item) {
|
||
// uni.navigateTo({
|
||
// url: "/packages/homeServer/classify/index",
|
||
// });
|
||
// uni.navigateTo({
|
||
// url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
||
// JSON.stringify(item)
|
||
// )}`,
|
||
// });
|
||
},
|
||
// 导航到预约页面
|
||
navigateToReservation(service) {
|
||
// uni.navigateTo({
|
||
// url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
|
||
// });
|
||
// NavgateTo("/packages/homeServer/searchInfo/index");
|
||
},
|
||
// 联系客服
|
||
contactService() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: "400-123-4567",
|
||
});
|
||
},
|
||
// 获取当前位置
|
||
getCurrentLocation() {
|
||
// 实际项目中应该调用定位API获取真实位置
|
||
console.log("获取当前位置信息");
|
||
},
|
||
|
||
// 回到顶部
|
||
scrollToTop() {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300,
|
||
});
|
||
},
|
||
|
||
// 查看公告
|
||
lookNotice() {
|
||
// NavgateTo("/packages/homeServer/noticeManage/index");
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.getCurrentLocation();
|
||
this.getServiceCategories();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |