155 lines
4.3 KiB
Vue
155 lines
4.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 位置和搜索 -->
|
|
<view class="location-search">
|
|
<view class="location" @click="chooseLocation">
|
|
<image
|
|
id="local"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_localIcon.png"
|
|
mode="aspectFill"
|
|
></image>
|
|
|
|
<text class="location-text">{{ currentLocation }}</text>
|
|
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
|
</view>
|
|
<view class="search-box">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
|
class="search-icon"
|
|
></image>
|
|
<input class="search-placeholder" placeholder="请输入您要找的服务" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="main">
|
|
<view class="left-menu">
|
|
<scroll-view class="menu-scroll" scroll-y>
|
|
<view
|
|
v-for="(item, index) in categories"
|
|
:key="index"
|
|
class="menu-item"
|
|
:class="{ active: currentIndex === index }"
|
|
@click="scrollToSection(item.id, index)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="right-content">
|
|
<scroll-view
|
|
class="content-scroll"
|
|
:scroll-into-view="currentSection"
|
|
scroll-y
|
|
scroll-with-animation
|
|
>
|
|
<view id="top" style="height: 1px; opacity: 0"></view>
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
|
class="content-img"
|
|
></image>
|
|
<view
|
|
v-for="(item, index) in categories"
|
|
:key="index"
|
|
:id="item.id"
|
|
class="content-section"
|
|
>
|
|
<view class="section-title">
|
|
<text class="section-text">|</text>
|
|
{{ item.name }}
|
|
</view>
|
|
<!-- 这里添加每个分类对应的内容 -->
|
|
<view class="section-content">
|
|
<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>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
request,
|
|
picUrl,
|
|
NavgateTo,
|
|
menuButtonInfo,
|
|
} from "../../../utils/index";
|
|
import { apiArr } from "../../../api/reservation";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
top: "",
|
|
localHeight: "",
|
|
currentLocation: "衡水市桃城区",
|
|
categories: [
|
|
{ id: "category1", name: "家电维修" },
|
|
{ id: "category2", name: "数码维修" },
|
|
{ id: "category3", name: "家电清洗" },
|
|
{ id: "category4", name: "洗衣洗鞋" },
|
|
{ id: "category5", name: "精细擦窗" },
|
|
{ id: "category6", name: "家庭保姆" },
|
|
{ id: "category7", name: "管道疏通" },
|
|
{ id: "category8", name: "家庭保洁" },
|
|
{ id: "category9", name: "整理收纳" },
|
|
{ id: "category10", name: "母婴服务" },
|
|
],
|
|
serviceCategories: [
|
|
{
|
|
name: "家电维修",
|
|
icon: "",
|
|
},
|
|
{
|
|
name: "数码维修",
|
|
icon: "",
|
|
},
|
|
{
|
|
name: "电器清洗",
|
|
icon: "",
|
|
},
|
|
{
|
|
name: "洗衣洗鞋",
|
|
icon: "",
|
|
},
|
|
{
|
|
name: "精细擦窗",
|
|
icon: "",
|
|
},
|
|
],
|
|
currentIndex: 0,
|
|
currentSection: "top",
|
|
};
|
|
},
|
|
methods: {
|
|
scrollToSection(id, index) {
|
|
this.currentIndex = index;
|
|
this.$nextTick(() => {
|
|
this.currentSection = index === 0 ? "top" : id;
|
|
});
|
|
},
|
|
|
|
navigateToService(item) {
|
|
uni.navigateTo({
|
|
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
|
JSON.stringify(item)
|
|
)}`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |