227 lines
9.5 KiB
Vue
227 lines
9.5 KiB
Vue
<template>
|
||
<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>
|
||
</template>
|
||
|
||
<script>
|
||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||
import { apiArr } from '../../../api/reservation';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
show1: false,
|
||
show2: false,
|
||
show3: false,
|
||
show4: false,
|
||
}
|
||
},
|
||
methods: {
|
||
masterInfo() {
|
||
NavgateTo("../masterInfo/index")
|
||
},
|
||
back(){
|
||
NavgateTo("1")
|
||
},
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |