feat : 完善到家服务模块页面
This commit is contained in:
赵毅
parent
04e3f4eed8
commit
ac23f91ea1
175
packages/homeServer/classify/index.css
Normal file
175
packages/homeServer/classify/index.css
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
.container {
|
||||||
|
height: 95vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 位置和搜索样式 */
|
||||||
|
#local {
|
||||||
|
height: 30rpx;
|
||||||
|
width: 28.08rpx;
|
||||||
|
margin-right: 17rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-search {
|
||||||
|
display: flex;
|
||||||
|
padding: 16rpx 30rpx;
|
||||||
|
/* background-color: #f5f7fb; */
|
||||||
|
border-radius: 60rpx;
|
||||||
|
gap: 16rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
padding-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-down {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
padding: 15rpx 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
width: 25rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-placeholder {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
height: calc(100vh - 20rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-menu {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
border-right: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-scroll {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item.active {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item.active::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-content {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-scroll {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-img{
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text{
|
||||||
|
margin-right: 10rpx;
|
||||||
|
color: #ed3d16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-category {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
155
packages/homeServer/classify/index.vue
Normal file
155
packages/homeServer/classify/index.vue
Normal file
@ -0,0 +1,155 @@
|
|||||||
|
<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>
|
||||||
@ -36,7 +36,6 @@
|
|||||||
background-color: #f5f7fb;
|
background-color: #f5f7fb;
|
||||||
border-radius: 60rpx;
|
border-radius: 60rpx;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
display: flex;
|
|
||||||
height: 35rpx;
|
height: 35rpx;
|
||||||
margin-top: 15rpx;
|
margin-top: 15rpx;
|
||||||
}
|
}
|
||||||
@ -117,13 +116,23 @@
|
|||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.announcement-flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.announcement-title {
|
.announcement-title {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FF512A;
|
color: #FF512A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hrStyle{
|
.announcement-img {
|
||||||
|
width: 25rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hrStyle {
|
||||||
margin: 0 15rpx;
|
margin: 0 15rpx;
|
||||||
color: #c5c5c5;
|
color: #c5c5c5;
|
||||||
}
|
}
|
||||||
@ -156,68 +165,48 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.serverList {
|
.serverList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverItem {
|
.serverItem {
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
width: 208rpx;
|
box-sizing: border-box;
|
||||||
height: 114rpx;
|
font-weight: 600;
|
||||||
box-sizing: border-box;
|
font-size: 26rpx;
|
||||||
padding-top: 11rpx;
|
color: #222222;
|
||||||
padding-left: 13rpx;
|
position: relative;
|
||||||
font-weight: 600;
|
margin-bottom: 12rpx;
|
||||||
font-size: 26rpx;
|
|
||||||
color: #222222;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 12rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverList_left {
|
.serverList_left {
|
||||||
display: block;
|
display: block;
|
||||||
width: 260rpx;
|
width: 260rpx;
|
||||||
height: 369rpx;
|
height: 350rpx;
|
||||||
margin-right: 17rpx;
|
margin-right: 17rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverList_left swiper{
|
.serverList_left image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverList_right {
|
.serverList_right {
|
||||||
flex: 1;
|
width: 445rpx;
|
||||||
display: flex;
|
height: 350rpx;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverItem1 {
|
.serverItem1 {
|
||||||
background: linear-gradient(139deg, #FEF4F4 0%, #FEDCD2 100%);
|
width: 440rpx;
|
||||||
margin-right: 12rpx;
|
height: 170rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverItem2 {
|
.serverItem2 {
|
||||||
background: #FFF4E5;
|
width: 440rpx;
|
||||||
}
|
height: 170rpx;
|
||||||
|
|
||||||
.serverItem1 image {
|
|
||||||
position: absolute;
|
|
||||||
right: 12rpx;
|
|
||||||
top: 14rpx;
|
|
||||||
width: 103rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverItem2 image {
|
|
||||||
position: absolute;
|
|
||||||
right: 6rpx;
|
|
||||||
top: 8rpx;
|
|
||||||
width: 108rpx;
|
|
||||||
height: 108rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 立即联系样式 */
|
/* 立即联系样式 */
|
||||||
@ -232,8 +221,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contact-icon {
|
.contact-icon {
|
||||||
width: 60rpx;
|
width: 80rpx;
|
||||||
height: 60rpx;
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon2 {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-text {
|
.contact-text {
|
||||||
@ -253,7 +247,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* */
|
/* */
|
||||||
.interval{
|
.interval {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 20rpx;
|
height: 20rpx;
|
||||||
background-color: #f7f6fb;
|
background-color: #f7f6fb;
|
||||||
@ -282,7 +276,7 @@
|
|||||||
|
|
||||||
.section-arrow {
|
.section-arrow {
|
||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
margin-right: 10rpx;
|
margin-right: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -310,6 +304,11 @@
|
|||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service-info-left-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
.service-info-right {
|
.service-info-right {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -326,6 +325,11 @@
|
|||||||
height: 240rpx;
|
height: 240rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service-image2 {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.service-badge {
|
.service-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20rpx;
|
top: 20rpx;
|
||||||
@ -341,16 +345,17 @@
|
|||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 4rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-tag {
|
.service-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #e1ca9b;
|
color: #e1ca9b;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
padding: 2rpx 16rpx;
|
padding: 2rpx 0;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-desc {
|
.service-desc {
|
||||||
@ -380,7 +385,7 @@
|
|||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 33rpx;
|
right: 33rpx;
|
||||||
bottom: 250rpx;
|
bottom: 320rpx;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -36,22 +36,34 @@
|
|||||||
|
|
||||||
<!-- 到家公告 -->
|
<!-- 到家公告 -->
|
||||||
<view class="announcement">
|
<view class="announcement">
|
||||||
<text>到家<text class="announcement-title">公告</text></text>
|
<view class="announcement-flex">
|
||||||
|
到家
|
||||||
|
<text class="announcement-title"> 公告</text>
|
||||||
|
<image
|
||||||
|
src="http://localhost:8080/index_notice1.png"
|
||||||
|
class="announcement-img"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
<view class="hrStyle">|</view>
|
<view class="hrStyle">|</view>
|
||||||
<text class="announcement-content"
|
<text class="announcement-content"
|
||||||
>公告内容公告内容公告内容公告内容...</text
|
>公告内容公告内容公告内容公告内容...</text
|
||||||
>
|
>
|
||||||
<image src="" class="arrow-right"></image>
|
<image
|
||||||
|
src="http://localhost:8080/index_notice2.png"
|
||||||
|
class="arrow-right"
|
||||||
|
@click="lookNotice"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 广告横幅 -->
|
<!-- 广告横幅 -->
|
||||||
<view class="serverList">
|
<view class="serverList">
|
||||||
<view class="serverList_left">
|
<view class="serverList_left">
|
||||||
<swiper>
|
<!-- <view> -->
|
||||||
<swiper-item v-for="(item, index) in homeLeftList" :key="index">
|
<image src="http://localhost:8080/guanggao1.png" mode="" />
|
||||||
|
<!-- <swiper-item v-for="(item, index) in homeLeftList" :key="index">
|
||||||
<image :src="item.pic_src" alt="" mode="aspectFit" />
|
<image :src="item.pic_src" alt="" mode="aspectFit" />
|
||||||
</swiper-item>
|
</swiper-item> -->
|
||||||
</swiper>
|
<!-- </view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="serverList_right">
|
<view class="serverList_right">
|
||||||
<view
|
<view
|
||||||
@ -60,7 +72,6 @@
|
|||||||
v-for="(item, index) in homeRightList"
|
v-for="(item, index) in homeRightList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<view class="serverTit">{{ item.title }}</view>
|
|
||||||
<image :src="item.pic_src" mode="" />
|
<image :src="item.pic_src" mode="" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -68,20 +79,29 @@
|
|||||||
|
|
||||||
<!-- 立即联系 -->
|
<!-- 立即联系 -->
|
||||||
<view class="contact-section" @click="contactService">
|
<view class="contact-section" @click="contactService">
|
||||||
<image src="" class="contact-icon"></image>
|
<image
|
||||||
|
src="http://localhost:8080/index_kefu1.png"
|
||||||
|
class="contact-icon"
|
||||||
|
></image>
|
||||||
<view class="contact-text">
|
<view class="contact-text">
|
||||||
<text class="contact-title">立即联系</text>
|
<text class="contact-title">立即联系</text>
|
||||||
<br />
|
<br />
|
||||||
<text class="contact-subtitle">未找到您需要的服务？</text>
|
<text class="contact-subtitle">未找到您需要的服务？</text>
|
||||||
</view>
|
</view>
|
||||||
<image src="" class="arrow-right"></image>
|
<image
|
||||||
|
src="http://localhost:8080/index_kefu2.png"
|
||||||
|
class="contact-icon2"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="interval"></view>
|
<view class="interval"></view>
|
||||||
|
|
||||||
<!-- 推荐热门服务 -->
|
<!-- 推荐热门服务 -->
|
||||||
<view class="hot-services">
|
<view class="hot-services">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<image src="" class="section-arrow"></image>
|
<image
|
||||||
|
src="http://localhost:8080/index_bottom1.png"
|
||||||
|
class="section-arrow"
|
||||||
|
></image>
|
||||||
<text class="section-title">推荐热门服务</text>
|
<text class="section-title">推荐热门服务</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="service-list">
|
<view class="service-list">
|
||||||
@ -90,14 +110,20 @@
|
|||||||
v-for="(service, index) in hotServiceList"
|
v-for="(service, index) in hotServiceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<image :src="service.image" class="service-image"></image>
|
<image
|
||||||
<!-- <view class="service-badge" v-if="service.badge">
|
src="http://localhost:8080/ceshi.png"
|
||||||
<text class="badge-text">{{ service.badge }}</text>
|
class="service-image"
|
||||||
</view> -->
|
></image>
|
||||||
<view class="service-info">
|
<view class="service-info">
|
||||||
<view class="service-info-left">
|
<view class="service-info-left">
|
||||||
<text class="service-name">{{ service.name }}</text>
|
<view class="service-info-left-top">
|
||||||
<text class="service-tag">{{ service.tag }}</text>
|
<text class="service-name">{{ service.name }}</text>
|
||||||
|
<image
|
||||||
|
src="http://localhost:8080/index_bottom2.png"
|
||||||
|
class="service-image2"
|
||||||
|
></image>
|
||||||
|
<text class="service-tag">{{ service.tag }}</text>
|
||||||
|
</view>
|
||||||
<br />
|
<br />
|
||||||
<text class="service-desc">{{ service.description }}</text>
|
<text class="service-desc">{{ service.description }}</text>
|
||||||
</view>
|
</view>
|
||||||
@ -127,9 +153,7 @@
|
|||||||
max="99"
|
max="99"
|
||||||
:value="value"
|
:value="value"
|
||||||
></u-badge>
|
></u-badge>
|
||||||
<image
|
<image src="http://localhost:8080/toUp.png"></image>
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
|
|
||||||
></image>
|
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -156,43 +180,59 @@ export default {
|
|||||||
serviceCategories: [
|
serviceCategories: [
|
||||||
{
|
{
|
||||||
name: "家电维修",
|
name: "家电维修",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top1.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "数码维修",
|
name: "数码维修",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top2.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "电器清洗",
|
name: "电器清洗",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top3.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "洗衣洗鞋",
|
name: "洗衣洗鞋",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top4.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "精细擦窗",
|
name: "精细擦窗",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top5.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "整理收纳",
|
name: "整理收纳",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top6.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "家庭保姆",
|
name: "家庭保姆",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top7.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "母婴服务",
|
name: "母婴服务",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top8.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "管道疏通",
|
name: "管道疏通",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top9.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "家庭保洁",
|
name: "家庭保洁",
|
||||||
icon: "",
|
icon: "http://localhost:8080/index_top10.png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
homeLeftList: [
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
pic_src: "http://localhost:8080/guanggao1.png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
homeRightList: [
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
pic_src: "http://localhost:8080/guanggao2.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
pic_src: "http://localhost:8080/guanggao3.png",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 热门服务数据
|
// 热门服务数据
|
||||||
@ -200,7 +240,6 @@ export default {
|
|||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "空调清洗",
|
name: "空调清洗",
|
||||||
image: "",
|
|
||||||
badge: "推荐",
|
badge: "推荐",
|
||||||
tag: "平台保障",
|
tag: "平台保障",
|
||||||
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
||||||
@ -225,16 +264,20 @@ export default {
|
|||||||
// 导航到服务详情
|
// 导航到服务详情
|
||||||
navigateToService(item) {
|
navigateToService(item) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
url: "/packages/homeServer/classify/index",
|
||||||
JSON.stringify(item)
|
|
||||||
)}`,
|
|
||||||
});
|
});
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
||||||
|
// JSON.stringify(item)
|
||||||
|
// )}`,
|
||||||
|
// });
|
||||||
},
|
},
|
||||||
// 导航到预约页面
|
// 导航到预约页面
|
||||||
navigateToReservation(service) {
|
navigateToReservation(service) {
|
||||||
uni.navigateTo({
|
// uni.navigateTo({
|
||||||
url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
|
// url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
|
||||||
});
|
// });
|
||||||
|
NavgateTo("/packages/homeServer/searchInfo/index");
|
||||||
},
|
},
|
||||||
// 联系客服
|
// 联系客服
|
||||||
contactService() {
|
contactService() {
|
||||||
@ -255,6 +298,11 @@ export default {
|
|||||||
duration: 300,
|
duration: 300,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 查看公告
|
||||||
|
lookNotice() {
|
||||||
|
NavgateTo("/packages/homeServer/noticeDetials/index");
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getCurrentLocation();
|
this.getCurrentLocation();
|
||||||
|
|||||||
@ -1,325 +1,410 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
<div
|
||||||
<view class="searchBox_left">
|
class="searchBox"
|
||||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||||
</view>
|
>
|
||||||
<div class="searchBox_mid">
|
<view class="searchBox_left">
|
||||||
刘师傅
|
<u-icon
|
||||||
</div>
|
bold
|
||||||
<div class="searchBox_right">
|
color="#000"
|
||||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
size="40"
|
||||||
</div>
|
name="arrow-left"
|
||||||
|
@click="back"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="searchBox_mid">刘师傅</div>
|
||||||
|
<div class="searchBox_right">
|
||||||
|
<u-icon
|
||||||
|
bold
|
||||||
|
color="#000"
|
||||||
|
size="40"
|
||||||
|
name="arrow-left"
|
||||||
|
@click="back"
|
||||||
|
></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 阿姨 -->
|
||||||
|
<div class="aunt" v-if="false">
|
||||||
|
<div class="banner">
|
||||||
|
<swiper>
|
||||||
|
<swiper-item>
|
||||||
|
<image
|
||||||
|
src="http://192.168.0.172:5500/homeServer_banner.png"
|
||||||
|
></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<div class="dotList">
|
||||||
|
<div class="dot active"></div>
|
||||||
|
<div class="dot"></div>
|
||||||
|
<div class="dot"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 阿姨 -->
|
</div>
|
||||||
<div class="aunt" v-if="false">
|
<div class="master">
|
||||||
<div class="banner">
|
<div class="master_info">
|
||||||
<swiper>
|
<div class="master_info_left">
|
||||||
<swiper-item>
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
<image src="http://192.168.0.172:5500/homeServer_banner.png"></image>
|
<div class="state state1">待服务</div>
|
||||||
</swiper-item>
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
</swiper>
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
<div class="dotList">
|
</div>
|
||||||
<div class="dot active"></div>
|
<div class="master_info_right">
|
||||||
<div class="dot"></div>
|
<div class="master_info_right1">
|
||||||
<div class="dot"></div>
|
林师傅
|
||||||
</div>
|
<image
|
||||||
|
class="Medal"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
class="Medal"
|
||||||
|
v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
||||||
|
>
|
||||||
|
</image>
|
||||||
|
<image
|
||||||
|
class="star"
|
||||||
|
src="http://192.168.0.172:5500/local_start1.png"
|
||||||
|
></image>
|
||||||
|
<span>4.8</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="master">
|
<div class="master_info_right2">
|
||||||
<div class="master_info">
|
价格范围： <span>￥500-￥800</span>
|
||||||
<div class="master_info_left">
|
|
||||||
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
|
||||||
<div class="state state1">待服务</div>
|
|
||||||
<div class="state state2" v-if="false">休息中</div>
|
|
||||||
<div class="state state3" v-if="false">服务中</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right">
|
|
||||||
<div class="master_info_right1">
|
|
||||||
林师傅
|
|
||||||
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
|
||||||
<image class="Medal" v-if="false" src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
|
||||||
</image>
|
|
||||||
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
|
||||||
<span>4.8</span>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right2">
|
|
||||||
价格范围： <span>￥500-￥800</span>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right3">
|
|
||||||
<div class="master_info_right3_item">
|
|
||||||
<div>专业性</div>
|
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="100"
|
|
||||||
activeColor="transparent"></u-line-progress>
|
|
||||||
<span>80分</span>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right3_item">
|
|
||||||
<div>好评率</div>
|
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
|
||||||
activeColor="transparent"></u-line-progress>
|
|
||||||
<span>80%</span>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right3_item">
|
|
||||||
<div>准时率</div>
|
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
|
||||||
activeColor="transparent"></u-line-progress>
|
|
||||||
<span>80%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_msg">
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon1.png"></image>
|
|
||||||
<div class="master_msg_itemText">52岁</div>
|
|
||||||
<div>广东梅州人</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon2.png"></image>
|
|
||||||
<div class="master_msg_itemText">5-10年</div>
|
|
||||||
<div>服务经验</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon3.png"></image>
|
|
||||||
<div class="master_msg_itemText">500+</div>
|
|
||||||
<div>成功预约</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon4.png"></image>
|
|
||||||
<div class="master_msg_itemText">100+</div>
|
|
||||||
<div>用户评价</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_tagList">
|
|
||||||
<div class="master_tag" v-for="(item, index) in 8" :key="index">积极主动</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="Badge">
|
<div class="master_info_right3">
|
||||||
<div class="Tit">职业证书</div>
|
<div class="master_info_right3_item">
|
||||||
<div class="imgList">
|
<div>专业性</div>
|
||||||
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
<u-line-progress
|
||||||
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
class="gradient-progress"
|
||||||
</div>
|
:showText="false"
|
||||||
</div>
|
:percentage="100"
|
||||||
</div>
|
activeColor="transparent"
|
||||||
<div class="recommend">
|
></u-line-progress>
|
||||||
<div class="Tit">推荐师傅</div>
|
<span>80分</span>
|
||||||
|
</div>
|
||||||
<div class="master_info mt20" v-for="(item, index) in 3" :key="index">
|
<div class="master_info_right3_item">
|
||||||
<div class="master_info_left">
|
<div>好评率</div>
|
||||||
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
<u-line-progress
|
||||||
<div class="state state1">待服务</div>
|
class="gradient-progress"
|
||||||
<div class="state state2" v-if="false">休息中</div>
|
:showText="false"
|
||||||
<div class="state state3" v-if="false">服务中</div>
|
:percentage="30"
|
||||||
</div>
|
activeColor="transparent"
|
||||||
<div class="master_info_right">
|
></u-line-progress>
|
||||||
<div class="master_info_right1">
|
<span>80%</span>
|
||||||
<div class="master_info_right_left">林师傅
|
</div>
|
||||||
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
<div class="master_info_right3_item">
|
||||||
<image class="Medal" v-if="false"
|
<div>准时率</div>
|
||||||
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
<u-line-progress
|
||||||
</image>
|
class="gradient-progress"
|
||||||
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
:showText="false"
|
||||||
<span>4.8</span>
|
:percentage="30"
|
||||||
</div>
|
activeColor="transparent"
|
||||||
<div class="master_info_right_right">
|
></u-line-progress>
|
||||||
查看资料
|
<span>80%</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_info_right2">
|
|
||||||
52岁 广东梅州人 5-10年
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_info_right3">
|
|
||||||
<span>500+</span>预定<span>100+</span>评价
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="MasterItem_Info_right_4">
|
|
||||||
<div class="tagItem tag1">积极主动</div>
|
|
||||||
<div class="tagItem tag2">技术精湛</div>
|
|
||||||
<div class="tagItem tag3">技术精湛</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="MasterItem_Info_right_5">
|
|
||||||
价格范围： <span>￥500-￥800</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 师傅 -->
|
<div class="master_msg">
|
||||||
<div class="masters">
|
<div class="master_msg_item">
|
||||||
<div class="master">
|
<image
|
||||||
<div class="master_info">
|
src="http://192.168.0.172:5500/homeServer_masterIcon1.png"
|
||||||
<div class="master_info_left">
|
></image>
|
||||||
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
<div class="master_msg_itemText">52岁</div>
|
||||||
<div class="state state1">待服务</div>
|
<div>广东梅州人</div>
|
||||||
<div class="state state2" v-if="false">休息中</div>
|
</div>
|
||||||
<div class="state state3" v-if="false">服务中</div>
|
<div class="master_msg_item">
|
||||||
</div>
|
<image
|
||||||
<div class="master_info_right">
|
src="http://192.168.0.172:5500/homeServer_masterIcon2.png"
|
||||||
<div class="master_info_right1">
|
></image>
|
||||||
林师傅
|
<div class="master_msg_itemText">5-10年</div>
|
||||||
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
<div>服务经验</div>
|
||||||
<image class="Medal" v-if="false" src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
</div>
|
||||||
</image>
|
<div class="master_msg_item">
|
||||||
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
<image
|
||||||
<span>4.8</span>
|
src="http://192.168.0.172:5500/homeServer_masterIcon3.png"
|
||||||
</div>
|
></image>
|
||||||
<div class="master_info_right2">
|
<div class="master_msg_itemText">500+</div>
|
||||||
价格范围： <span>￥500-￥800</span>
|
<div>成功预约</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="master_info_right3">
|
<div class="master_msg_item">
|
||||||
<div class="master_info_right3_item">
|
<image
|
||||||
<div>专业性</div>
|
src="http://192.168.0.172:5500/homeServer_masterIcon4.png"
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="100"
|
></image>
|
||||||
activeColor="transparent"></u-line-progress>
|
<div class="master_msg_itemText">100+</div>
|
||||||
<span>80分</span>
|
<div>用户评价</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="master_info_right3_item">
|
|
||||||
<div>好评率</div>
|
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
|
||||||
activeColor="transparent"></u-line-progress>
|
|
||||||
<span>80%</span>
|
|
||||||
</div>
|
|
||||||
<div class="master_info_right3_item">
|
|
||||||
<div>准时率</div>
|
|
||||||
<u-line-progress class="gradient-progress" :showText="false" :percentage="30"
|
|
||||||
activeColor="transparent"></u-line-progress>
|
|
||||||
<span>80%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_msg">
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon1.png"></image>
|
|
||||||
<div class="master_msg_itemText">52岁</div>
|
|
||||||
<div>广东梅州人</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon2.png"></image>
|
|
||||||
<div class="master_msg_itemText">5-10年</div>
|
|
||||||
<div>服务经验</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon3.png"></image>
|
|
||||||
<div class="master_msg_itemText">500+</div>
|
|
||||||
<div>成功预约</div>
|
|
||||||
</div>
|
|
||||||
<div class="master_msg_item">
|
|
||||||
<image src="http://192.168.0.172:5500/homeServer_masterIcon4.png"></image>
|
|
||||||
<div class="master_msg_itemText">100+</div>
|
|
||||||
<div>用户评价</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="master_tagList">
|
|
||||||
<div class="master_tag" v-for="(item, index) in 8" :key="index">积极主动</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="Evaluate">
|
|
||||||
<div class="Tit">客户点评</div>
|
|
||||||
<div class="EvaluateItem">
|
|
||||||
<div class="evaluateItem_header">
|
|
||||||
<div class="evaluateItem_ava">
|
|
||||||
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_msg">
|
|
||||||
<div class="evaluateItem_msg1">TP</div>
|
|
||||||
<div class="evaluateItem_msg2">
|
|
||||||
<image v-for="(item, index) in 5" :key="index"
|
|
||||||
src="http://192.168.0.172:5500/homeServer_stait.png"></image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_time">2025-06-24</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_main">
|
|
||||||
真好啊！真棒啊！优秀！
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="more" @click="EvaluateMore">查看更多</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="Badge">
|
|
||||||
<div class="Tit">职业证书</div>
|
|
||||||
<div class="imgList">
|
|
||||||
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
|
||||||
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部 -->
|
<div class="master_tagList">
|
||||||
<div class="footer">
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">
|
||||||
<div class="footerIcon" @click="Vendor">
|
积极主动
|
||||||
<image id="footerIcon1" src="http://192.168.0.172:5500/homeServer_serverInfoIcon.png"></image>
|
</div>
|
||||||
服务商
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Badge">
|
||||||
|
<div class="Tit">职业证书</div>
|
||||||
|
<div class="imgList">
|
||||||
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="recommend">
|
||||||
|
<div class="Tit">推荐师傅</div>
|
||||||
|
|
||||||
|
<div class="master_info mt20" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
|
<div class="state state1">待服务</div>
|
||||||
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
<div class="master_info_right_left">
|
||||||
|
林师傅
|
||||||
|
<image
|
||||||
|
class="Medal"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
class="Medal"
|
||||||
|
v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
||||||
|
>
|
||||||
|
</image>
|
||||||
|
<image
|
||||||
|
class="star"
|
||||||
|
src="http://192.168.0.172:5500/local_start1.png"
|
||||||
|
></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right_right">查看资料</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footerIcon">
|
|
||||||
<image id="footerIcon2" src="http://192.168.0.172:5500/homeServer_CollectIcon.png"></image>
|
<div class="master_info_right2">52岁 广东梅州人 5-10年</div>
|
||||||
收藏
|
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<span>500+</span>预定<span>100+</span>评价
|
||||||
</div>
|
</div>
|
||||||
<div class="footerbtn1">联系客服</div>
|
|
||||||
<div class="footerbtn2">立即预约</div>
|
<div class="MasterItem_Info_right_4">
|
||||||
|
<div class="tagItem tag1">积极主动</div>
|
||||||
|
<div class="tagItem tag2">技术精湛</div>
|
||||||
|
<div class="tagItem tag3">技术精湛</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 师傅 -->
|
||||||
|
<div class="masters">
|
||||||
|
<div class="master">
|
||||||
|
<div class="master_info">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
|
<div class="state state1">待服务</div>
|
||||||
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
林师傅
|
||||||
|
<image
|
||||||
|
class="Medal"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
class="Medal"
|
||||||
|
v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
||||||
|
>
|
||||||
|
</image>
|
||||||
|
<image
|
||||||
|
class="star"
|
||||||
|
src="http://192.168.0.172:5500/local_start1.png"
|
||||||
|
></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right2">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>专业性</div>
|
||||||
|
<u-line-progress
|
||||||
|
class="gradient-progress"
|
||||||
|
:showText="false"
|
||||||
|
:percentage="100"
|
||||||
|
activeColor="transparent"
|
||||||
|
></u-line-progress>
|
||||||
|
<span>80分</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>好评率</div>
|
||||||
|
<u-line-progress
|
||||||
|
class="gradient-progress"
|
||||||
|
:showText="false"
|
||||||
|
:percentage="30"
|
||||||
|
activeColor="transparent"
|
||||||
|
></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>准时率</div>
|
||||||
|
<u-line-progress
|
||||||
|
class="gradient-progress"
|
||||||
|
:showText="false"
|
||||||
|
:percentage="30"
|
||||||
|
activeColor="transparent"
|
||||||
|
></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="master_msg">
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image
|
||||||
|
src="http://192.168.0.172:5500/homeServer_masterIcon1.png"
|
||||||
|
></image>
|
||||||
|
<div class="master_msg_itemText">52岁</div>
|
||||||
|
<div>广东梅州人</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image
|
||||||
|
src="http://192.168.0.172:5500/homeServer_masterIcon2.png"
|
||||||
|
></image>
|
||||||
|
<div class="master_msg_itemText">5-10年</div>
|
||||||
|
<div>服务经验</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image
|
||||||
|
src="http://192.168.0.172:5500/homeServer_masterIcon3.png"
|
||||||
|
></image>
|
||||||
|
<div class="master_msg_itemText">500+</div>
|
||||||
|
<div>成功预约</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_msg_item">
|
||||||
|
<image
|
||||||
|
src="http://192.168.0.172:5500/homeServer_masterIcon4.png"
|
||||||
|
></image>
|
||||||
|
<div class="master_msg_itemText">100+</div>
|
||||||
|
<div>用户评价</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</view>
|
<div class="master_tagList">
|
||||||
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">
|
||||||
|
积极主动
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Evaluate">
|
||||||
|
<div class="Tit">客户点评</div>
|
||||||
|
<div class="EvaluateItem">
|
||||||
|
<div class="evaluateItem_header">
|
||||||
|
<div class="evaluateItem_ava">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_msg">
|
||||||
|
<div class="evaluateItem_msg1">TP</div>
|
||||||
|
<div class="evaluateItem_msg2">
|
||||||
|
<image
|
||||||
|
v-for="(item, index) in 5"
|
||||||
|
:key="index"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_stait.png"
|
||||||
|
></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_time">2025-06-24</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_main">真好啊！真棒啊！优秀！</div>
|
||||||
|
</div>
|
||||||
|
<div class="more" @click="EvaluateMore">查看更多</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Badge">
|
||||||
|
<div class="Tit">职业证书</div>
|
||||||
|
<div class="imgList">
|
||||||
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footerIcon" @click="Vendor">
|
||||||
|
<image
|
||||||
|
id="footerIcon1"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_serverInfoIcon.png"
|
||||||
|
></image>
|
||||||
|
服务商
|
||||||
|
</div>
|
||||||
|
<div class="footerIcon">
|
||||||
|
<image
|
||||||
|
id="footerIcon2"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_CollectIcon.png"
|
||||||
|
></image>
|
||||||
|
收藏
|
||||||
|
</div>
|
||||||
|
<div class="footerbtn1">联系客服</div>
|
||||||
|
<div class="footerbtn2">立即预约</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
import {
|
||||||
import { apiArr } from '../../../api/reservation';
|
request,
|
||||||
|
picUrl,
|
||||||
|
NavgateTo,
|
||||||
|
menuButtonInfo,
|
||||||
|
} from "../../../utils/index";
|
||||||
|
import { apiArr } from "../../../api/reservation";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: ""
|
localHeight: "",
|
||||||
}
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
EvaluateMore() {
|
||||||
|
NavgateTo("../masterReview/index");
|
||||||
},
|
},
|
||||||
methods: {
|
Vendor() {
|
||||||
EvaluateMore(){
|
NavgateTo("../vendor/index");
|
||||||
NavgateTo("../masterReview/index")
|
|
||||||
},
|
|
||||||
Vendor(){
|
|
||||||
NavgateTo('../vendor/index')
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
onReady() {
|
back() {
|
||||||
|
NavgateTo("1");
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
onReady() {},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {},
|
||||||
|
|
||||||
},
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
/**
|
*/
|
||||||
* 页面上拉触底事件的处理函数
|
onReachBottom() {},
|
||||||
*/
|
};
|
||||||
onReachBottom() {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -327,6 +412,6 @@ export default {
|
|||||||
|
|
||||||
/* 添加渐变色样式 */
|
/* 添加渐变色样式 */
|
||||||
.u-line-progress__line {
|
.u-line-progress__line {
|
||||||
background: linear-gradient(90deg, #FFFFFF 0%, #FF370B 100%) !important;
|
background: linear-gradient(90deg, #ffffff 0%, #ff370b 100%) !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,79 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
<div
|
||||||
<view class="searchBox_left">
|
class="searchBox"
|
||||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
||||||
</view>
|
>
|
||||||
<div class="searchBox_mid">
|
<view class="searchBox_left">
|
||||||
评价(38)
|
<u-icon
|
||||||
</div>
|
bold
|
||||||
<div class="searchBox_right">
|
color="#000"
|
||||||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
size="40"
|
||||||
</div>
|
name="arrow-left"
|
||||||
|
@click="back"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="searchBox_mid">评价(38)</div>
|
||||||
|
<div class="searchBox_right">
|
||||||
|
<u-icon
|
||||||
|
bold
|
||||||
|
color="#000"
|
||||||
|
size="40"
|
||||||
|
name="arrow-left"
|
||||||
|
@click="back"
|
||||||
|
></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="EvaluateList">
|
||||||
|
<div class="EvaluateItem" v-for="(item, index) in 3" :key="index">
|
||||||
<div class="EvaluateList">
|
<div class="evaluateItem_header">
|
||||||
<div class="EvaluateItem" v-for="item,index in 3" :key="index">
|
<div class="evaluateItem_ava">
|
||||||
<div class="evaluateItem_header">
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
<div class="evaluateItem_ava">
|
</div>
|
||||||
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
<div class="evaluateItem_msg">
|
||||||
</div>
|
<div class="evaluateItem_msg1">TP</div>
|
||||||
<div class="evaluateItem_msg">
|
<div class="evaluateItem_msg2">
|
||||||
<div class="evaluateItem_msg1">TP</div>
|
<image
|
||||||
<div class="evaluateItem_msg2">
|
v-for="(item, index) in 5"
|
||||||
<image v-for="(item, index) in 5" :key="index"
|
:key="index"
|
||||||
src="http://192.168.0.172:5500/homeServer_stait.png"></image>
|
src="http://192.168.0.172:5500/homeServer_stait.png"
|
||||||
</div>
|
></image>
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_time">2025-06-24</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_main">
|
|
||||||
真好啊！真棒啊！优秀！
|
|
||||||
</div>
|
|
||||||
<div class="evaluateItem_Score">
|
|
||||||
技术评级：70分
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="evaluateItem_time">2025-06-24</div>
|
||||||
</div>
|
</div>
|
||||||
</view>
|
<div class="evaluateItem_main">真好啊！真棒啊！优秀！</div>
|
||||||
|
<div class="evaluateItem_Score">技术评级：70分</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
import {
|
||||||
import { apiArr } from '../../../api/reservation';
|
request,
|
||||||
|
picUrl,
|
||||||
|
NavgateTo,
|
||||||
|
menuButtonInfo,
|
||||||
|
} from "../../../utils/index";
|
||||||
|
import { apiArr } from "../../../api/reservation";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: ""
|
localHeight: "",
|
||||||
}
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
back() {
|
||||||
|
NavgateTo("1");
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
|
onReady() {},
|
||||||
|
|
||||||
},
|
onLoad(options) {
|
||||||
onReady() {
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
|
||||||
},
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
onLoad(options) {
|
*/
|
||||||
const meun = menuButtonInfo();
|
onReachBottom() {},
|
||||||
this.top = meun.top;
|
};
|
||||||
this.localHeight = meun.height;
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 页面上拉触底事件的处理函数
|
|
||||||
*/
|
|
||||||
onReachBottom() {
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
20
packages/homeServer/noticeDetials/index.css
Normal file
20
packages/homeServer/noticeDetials/index.css
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.container{
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title{
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info{
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #969696;
|
||||||
|
text-align: center;
|
||||||
|
margin:10rpx 0 20rpx 0 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
50
packages/homeServer/noticeDetials/index.vue
Normal file
50
packages/homeServer/noticeDetials/index.vue
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">{{ noticeContent.title }}</view>
|
||||||
|
<view class="info">{{ noticeContent.info }}</view>
|
||||||
|
<view class="main">{{ noticeContent.content }}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
request,
|
||||||
|
picUrl,
|
||||||
|
NavgateTo,
|
||||||
|
menuButtonInfo,
|
||||||
|
} from "../../../utils/index";
|
||||||
|
import { apiArr } from "../../../api/reservation";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
top: "",
|
||||||
|
localHeight: "",
|
||||||
|
noticeContent: {
|
||||||
|
title: "公告标题",
|
||||||
|
info: "发布时间:xxxxx 来源:xxxxx",
|
||||||
|
content: "备受打击咖啡壶死啊尽快代发hi艰苦撒等哈覅u阿手打发哈",
|
||||||
|
img: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
onReady() {},
|
||||||
|
|
||||||
|
onload(options) {
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url("./index.css");
|
||||||
|
</style>
|
||||||
@ -9,7 +9,7 @@
|
|||||||
width: 520rpx;
|
width: 520rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16rpx 20rpx;
|
padding: 16rpx 20rpx 16rpx 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1rpx solid #f5f5f5;
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
}
|
}
|
||||||
@ -21,6 +21,7 @@
|
|||||||
background-color: #f5f7fb;
|
background-color: #f5f7fb;
|
||||||
border-radius: 60rpx;
|
border-radius: 60rpx;
|
||||||
padding: 14rpx 24rpx;
|
padding: 14rpx 24rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
@ -196,6 +197,11 @@
|
|||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service-info-left-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
.service-info-right {
|
.service-info-right {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -212,6 +218,11 @@
|
|||||||
height: 240rpx;
|
height: 240rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.service-image2 {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.service-badge {
|
.service-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20rpx;
|
top: 20rpx;
|
||||||
@ -227,16 +238,17 @@
|
|||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 4rpx;
|
||||||
|
margin-right: 15rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-tag {
|
.service-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: #e1ca9b;
|
color: #e1ca9b;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
padding: 2rpx 16rpx;
|
padding: 2rpx 0;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-desc {
|
.service-desc {
|
||||||
|
|||||||
@ -2,11 +2,14 @@
|
|||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 搜索栏 -->
|
<!-- 搜索栏 -->
|
||||||
<view class="search-bar">
|
<view class="search-bar">
|
||||||
<image
|
<u-icon
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
bold
|
||||||
class="search-icon"
|
color="#000"
|
||||||
@click="upView"
|
size="40"
|
||||||
></image>
|
name="arrow-left"
|
||||||
|
class="back-icon"
|
||||||
|
@click="back"
|
||||||
|
></u-icon>
|
||||||
<view class="search-input-container">
|
<view class="search-input-container">
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
@ -77,11 +80,20 @@
|
|||||||
v-for="(service, index) in hotServiceList"
|
v-for="(service, index) in hotServiceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<image :src="service.image" class="service-image"></image>
|
<image
|
||||||
|
src="http://localhost:8080/ceshi.png"
|
||||||
|
class="service-image"
|
||||||
|
/>
|
||||||
<view class="service-info">
|
<view class="service-info">
|
||||||
<view class="service-info-left">
|
<view class="service-info-left">
|
||||||
<text class="service-name">{{ service.name }}</text>
|
<view class="service-info-left-top">
|
||||||
<text class="service-tag">{{ service.tag }}</text>
|
<text class="service-name">{{ service.name }}</text>
|
||||||
|
<image
|
||||||
|
src="http://localhost:8080/index_bottom2.png"
|
||||||
|
class="service-image2"
|
||||||
|
></image>
|
||||||
|
<text class="service-tag">{{ service.tag }}</text>
|
||||||
|
</view>
|
||||||
<br />
|
<br />
|
||||||
<text class="service-desc">{{ service.description }}</text>
|
<text class="service-desc">{{ service.description }}</text>
|
||||||
</view>
|
</view>
|
||||||
@ -109,16 +121,18 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 回到顶部 -->
|
<!-- 回到顶部 -->
|
||||||
<div class="toUp" v-show="searchHistory.length > 0 && isShowToTop" @click="scrollToTop">
|
<div
|
||||||
|
class="toUp"
|
||||||
|
v-show="searchHistory.length > 0 && isShowToTop"
|
||||||
|
@click="scrollToTop"
|
||||||
|
>
|
||||||
<u-badge
|
<u-badge
|
||||||
numberType="limit"
|
numberType="limit"
|
||||||
type="error"
|
type="error"
|
||||||
max="99"
|
max="99"
|
||||||
:value="value"
|
:value="value"
|
||||||
></u-badge>
|
></u-badge>
|
||||||
<image
|
<image src="http://localhost:8080/toUp.png"></image>
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
|
|
||||||
></image>
|
|
||||||
</div>
|
</div>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -165,11 +179,11 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
const history = uni.getStorageSync("searchHistory") || [];
|
const history = uni.getStorageSync("searchHistory") || [];
|
||||||
this.searchHistory = history;
|
this.searchHistory = history;
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener("scroll", this.handleScroll);
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
window.removeEventListener("scroll", this.handleScroll);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleScroll() {
|
handleScroll() {
|
||||||
@ -178,11 +192,11 @@ export default {
|
|||||||
scrollToTop() {
|
scrollToTop() {
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
scrollTop: 0,
|
scrollTop: 0,
|
||||||
duration: 300
|
duration: 300,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
upView() {
|
back() {
|
||||||
NavgateTo("/packages/homeServer/index/index");
|
NavgateTo("1");
|
||||||
},
|
},
|
||||||
// 处理搜索
|
// 处理搜索
|
||||||
handleSearch() {
|
handleSearch() {
|
||||||
@ -239,9 +253,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 去预约
|
// 去预约
|
||||||
goSubscribe(){
|
goSubscribe() {
|
||||||
NavgateTo("/packages/homeServer/serverInfo/index")
|
NavgateTo("/packages/homeServer/searchInfo/index");
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,419 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right {
|
||||||
|
width: 133rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right image {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 7rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox {
|
||||||
|
width: 431rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox .u-input {
|
||||||
|
padding: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem image {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterList {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 12rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
}
|
||||||
|
.MasterItem:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_right {
|
||||||
|
flex: 1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_info {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130rpx;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_left image {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state1 {
|
||||||
|
background: #AECE2B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.state2 {
|
||||||
|
background: #CECECE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state3 {
|
||||||
|
background: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Medal {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
display: flex;
|
||||||
|
color: #999999;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 span {
|
||||||
|
color: #FF370B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagItem {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1 {
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2 {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3 {
|
||||||
|
background: rgba(175, 175, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 image {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Btn {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 600rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 60rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.local {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.local span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMoreItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left {}
|
||||||
|
|
||||||
|
.active2 {
|
||||||
|
color: #ff702c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left2 {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.filterMore3Item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #555555;
|
||||||
|
width: 130rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore3Item:nth-child(4n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-black-bg {
|
||||||
|
/* position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 9;
|
||||||
|
overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore3 {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialogBox {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
z-index: 8;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.master_info_right_left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.master_info_right_right {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
@ -1,5 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="iptBox">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
|
||||||
|
<u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Filter">
|
||||||
|
<div class="Filter_left">
|
||||||
|
<div class="FilterItem" @click="show1 = !show1">
|
||||||
|
附近
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
综合
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
排序
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
分类
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
地区
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Filter_right">
|
||||||
|
筛选
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filter.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 位置筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show1">
|
||||||
|
<div class="local">距离 <span>上海公馆</span></div>
|
||||||
|
<div class="filterMore1">
|
||||||
|
<div class="filterMoreItem">附近</div>
|
||||||
|
<div class="filterMoreItem">500m</div>
|
||||||
|
<div class="filterMoreItem">1km</div>
|
||||||
|
<div class="filterMoreItem">3km</div>
|
||||||
|
<div class="filterMoreItem">5km</div>
|
||||||
|
<div class="filterMoreItem">10km</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 综合筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show2">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left">综合</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left active2">从高到低</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left">从低到高</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 排序筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show3">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">智能排序</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2 active2">距离优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">好评优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">销量优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分类筛选 -->
|
||||||
|
<div class="FilterMore3" v-if="show4">
|
||||||
|
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">家电维修</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<!-- 遮罩 -->
|
||||||
|
<div class="dialogBox" v-if="show1"></div>
|
||||||
|
|
||||||
|
<div class="MasterList">
|
||||||
|
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="MasterItem_right">
|
||||||
|
<div class="MasterItem_info">
|
||||||
|
<div class="MasterItem_Info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
|
<div class="state state1">待服务</div>
|
||||||
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right">
|
||||||
|
<div class="MasterItem_Info_right_1">
|
||||||
|
<div class="master_info_right_left">
|
||||||
|
林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png">
|
||||||
|
</image>
|
||||||
|
<image class="Medal" v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="master_info_right_right" @click="masterInfo">
|
||||||
|
查看资料
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right_2">52岁 广东梅州人 5-10年</div>
|
||||||
|
<div class="MasterItem_Info_right_3">
|
||||||
|
<span>500+</span>预定 <span>100+</span>评价
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right_4">
|
||||||
|
<div class="tagItem tag1">积极主动</div>
|
||||||
|
<div class="tagItem tag2">技术精湛</div>
|
||||||
|
<div class="tagItem tag3">技术精湛</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_6">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Btn">
|
||||||
|
确定
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -12,19 +183,29 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: ""
|
localHeight: "",
|
||||||
|
show1: false,
|
||||||
|
show2: false,
|
||||||
|
show3: false,
|
||||||
|
show4: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
masterInfo() {
|
||||||
|
NavgateTo("../masterInfo/index")
|
||||||
|
},
|
||||||
|
back(){
|
||||||
|
NavgateTo("1")
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onload(options) {
|
onLoad(options) {
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
|
// this.top = meun.height + meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
|||||||
@ -41,7 +41,7 @@
|
|||||||
<div class="serverList">
|
<div class="serverList">
|
||||||
<div class="serverListTit">匹配的服务商(3)</div>
|
<div class="serverListTit">匹配的服务商(3)</div>
|
||||||
|
|
||||||
<div class="serverItem">
|
<div class="serverItem" @click="selectVendor">
|
||||||
<div class="serverItem_left">
|
<div class="serverItem_left">
|
||||||
<image src="http://192.168.0.172:5500/test.png"></image>
|
<image src="http://192.168.0.172:5500/test.png"></image>
|
||||||
</div>
|
</div>
|
||||||
@ -90,6 +90,9 @@ export default {
|
|||||||
handleRangeChange(e) {
|
handleRangeChange(e) {
|
||||||
this.rangeValue = e
|
this.rangeValue = e
|
||||||
},
|
},
|
||||||
|
selectVendor(){
|
||||||
|
NavgateTo("../vendor/index")
|
||||||
|
},
|
||||||
selectMaster(){
|
selectMaster(){
|
||||||
NavgateTo("../chooseMaster/index")
|
NavgateTo("../chooseMaster/index")
|
||||||
},
|
},
|
||||||
|
|||||||
15
pages.json
15
pages.json
@ -641,7 +641,6 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarBackgroundColor": "#fff",
|
"navigationBarBackgroundColor": "#fff",
|
||||||
"navigationBarTitleText": "服务详情"
|
"navigationBarTitleText": "服务详情"
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -685,6 +684,20 @@
|
|||||||
"navigationBarBackgroundColor": "#fff",
|
"navigationBarBackgroundColor": "#fff",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "noticeDetials/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "公告详情",
|
||||||
|
"navigationBarBackgroundColor": "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "classify/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "全部服务",
|
||||||
|
"navigationBarBackgroundColor": "#fff"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user