318 lines
9.6 KiB
Vue
318 lines
9.6 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://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>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 到家公告 -->
|
||
<view class="announcement">
|
||
<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>
|
||
</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>
|
||
</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"/>
|
||
<!-- <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://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>
|
||
</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>
|
||
<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-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>
|
||
<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://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/toUp.png"></image>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
NavgateTo,
|
||
menuButtonInfo,
|
||
} from "../../../utils/index";
|
||
import { apiArr } from "../../../api/reservation";
|
||
import nav from "../../../components/nav/nav";
|
||
|
||
export default {
|
||
components: {
|
||
nav,
|
||
},
|
||
data() {
|
||
return {
|
||
// 当前位置
|
||
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",
|
||
},
|
||
],
|
||
homeLeftList: [
|
||
{
|
||
title: "",
|
||
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao1.png",
|
||
},
|
||
],
|
||
homeRightList: [
|
||
{
|
||
title: "",
|
||
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao2.png",
|
||
},
|
||
{
|
||
title: "",
|
||
pic_src: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/guanggao3.png",
|
||
},
|
||
],
|
||
// 热门服务数据
|
||
hotServiceList: [
|
||
{
|
||
id: 1,
|
||
name: "空调清洗",
|
||
badge: "推荐",
|
||
tag: "平台保障",
|
||
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
||
count: "已预约100+",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
// 选择位置
|
||
chooseLocation() {
|
||
uni.navigateTo({
|
||
url: "/packages/areaPopup/index",
|
||
});
|
||
},
|
||
// 搜索服务
|
||
searchService() {
|
||
uni.navigateTo({
|
||
url: "/packages/homeServer/search/index",
|
||
});
|
||
},
|
||
// 导航到服务详情
|
||
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/noticeDetials/index");
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.getCurrentLocation();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |