433 lines
14 KiB
Vue
433 lines
14 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="https://static.hshuishang.com/property-img-file/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="showDialog(1)">
|
||
附近
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
|
||
<div class="FilterItem" @click="showDialog(2)">
|
||
综合
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
|
||
<div class="FilterItem" @click="showDialog(3)">
|
||
排序
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
|
||
<div class="FilterItem" @click="showDialog(4)">
|
||
分类
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
|
||
<div class="FilterItem" @click="showDialog(5)">
|
||
性别
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
|
||
<div class="FilterItem" @click="showDialog(6)">
|
||
地区
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="Filter_right">
|
||
筛选
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/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 class="FilterMore3" v-if="show5">
|
||
<div class="filterMore3Item">男</div>
|
||
<div class="filterMore3Item">女</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地区筛选 -->
|
||
<u-popup :show="show6" @close="close" v-if="show6">
|
||
<view>
|
||
<picker-view
|
||
indicator-style="height: 50px;"
|
||
style="width: 100%; height: 400rpx"
|
||
:value="id"
|
||
@change="bindChange"
|
||
>
|
||
<picker-view-column>
|
||
<view
|
||
v-for="(item, index) in provList"
|
||
:key="index"
|
||
style="line-height: 50px; text-align: center"
|
||
>{{ item.short_name }}</view
|
||
>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view
|
||
v-for="(item, index) in defaultCity"
|
||
:key="index"
|
||
style="line-height: 50px; text-align: center"
|
||
>{{ item.short_name }}</view
|
||
>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view
|
||
v-for="(item, index) in defaultDist"
|
||
:key="index"
|
||
style="line-height: 50px; text-align: center"
|
||
>{{ item.short_name }}</view
|
||
>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
|
||
<div class="main">
|
||
<!-- 遮罩 -->
|
||
<div class="dialogBox" v-if="isShowDia"></div>
|
||
|
||
<div class="MasterList">
|
||
<div class="MasterItem" v-for="(item, index) in 5" :key="index">
|
||
<div class="MasterItem_right">
|
||
<div class="MasterItem_info">
|
||
<div class="MasterItem_Info_left">
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/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="https://static.hshuishang.com/property-img-file/homeServer_Champion.png"
|
||
>
|
||
</image>
|
||
<image
|
||
class="Medal"
|
||
v-if="false"
|
||
src="https://static.hshuishang.com/property-img-file/homeServer_RunnerUp.png"
|
||
>
|
||
</image>
|
||
<image
|
||
class="star"
|
||
src="https://static.hshuishang.com/property-img-file/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="https://static.hshuishang.com/property-img-file/com_MsgImg1.png"
|
||
></image>
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/com_MsgImg1.png"
|
||
></image>
|
||
<image
|
||
src="https://static.hshuishang.com/property-img-file/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";
|
||
import { apiArr as apiArr2 } from "../../../api/area";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
show1: false,
|
||
show2: false,
|
||
show3: false,
|
||
show4: false,
|
||
show5: false,
|
||
show6: false,
|
||
isShowDia: false,
|
||
id: [0, 0, 0], // 默认选中第一个省、市、区
|
||
|
||
provList: [], // 省
|
||
cityList: [], //市
|
||
distList: [], // 区
|
||
defaultCity: [], // 默认展示的市区数据
|
||
defaultDist: [], // 默认展示的县/区数据
|
||
confirmProv: {}, // 默认选中省
|
||
confirmProv1: {},
|
||
confirmCity: {}, // 默认选中市
|
||
confirmDist: {}, // 默认选中区/县
|
||
};
|
||
},
|
||
methods: {
|
||
masterInfo() {
|
||
NavgateTo("../masterInfo/index");
|
||
},
|
||
back() {
|
||
NavgateTo("1");
|
||
},
|
||
|
||
showDialog(index) {
|
||
this[`show${index}`] = !this[`show${index}`];
|
||
this.logOtherButtons(index);
|
||
this.isShowDia = this[`show${index}`];
|
||
},
|
||
close() {
|
||
this.show6 = false;
|
||
this.isShowDia = false;
|
||
},
|
||
logOtherButtons(excludeIndex) {
|
||
for (let i = 1; i <= 6; i++) {
|
||
if (i == 6) {
|
||
this.getProvList();
|
||
}
|
||
if (i !== excludeIndex) {
|
||
this[`show${i}`] = false;
|
||
}
|
||
}
|
||
},
|
||
/////////////////////////////////// 省市区方法///////////////////////////////////////////
|
||
// 获取省份信息
|
||
async getProvList() {
|
||
const res = await request(apiArr2.getArea, "POST", {}, { silent: false });
|
||
this.provList = res.rows;
|
||
this.confirmProv1 = res.rows[0];
|
||
// 加载默认省份的城市数据
|
||
this.getCityList(0);
|
||
// 缓存省市区数据
|
||
},
|
||
|
||
// 获取市区信息
|
||
async getCityList(sq = 0, x = 0) {
|
||
console.log("11swq", sq);
|
||
console.log("获取x", x);
|
||
if (!this.sf && this.cityList.length > 0) {
|
||
console.log("省份没变，查市跟区", this.cityList);
|
||
let newDist = this.cityList[sq];
|
||
console.log("新的市信息", newDist);
|
||
if (this.xsq.ad_code !== newDist.ad_code) {
|
||
console.log("新市区跟旧市区不一直");
|
||
this.xsq = newDist;
|
||
this.getDistList(this.confirmCity, x);
|
||
} else {
|
||
console.log("新市区跟旧市区一直");
|
||
this.confirmDist = this.defaultDist[x];
|
||
}
|
||
return;
|
||
}
|
||
const res = await request(
|
||
apiArr2.getArea,
|
||
"POST",
|
||
{ parent_ad_code: this.confirmProv1.ad_code },
|
||
{ silent: false }
|
||
);
|
||
this.cityList = res.rows;
|
||
let newDist;
|
||
|
||
this.defaultCity = res.rows;
|
||
this.confirmCity = res.rows[0]; // 拿市的第一条区查区
|
||
this.getDistList(newDist, x);
|
||
},
|
||
// 获取 县/区 信息
|
||
async getDistList(xsq, x) {
|
||
console.log("页面传递的x", x);
|
||
const res = await request(
|
||
apiArr2.getArea,
|
||
"POST",
|
||
{ parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code },
|
||
{ silent: false }
|
||
);
|
||
this.distList = res.rows;
|
||
this.defaultDist = res.rows;
|
||
this.confirmDist = res.rows[0]; // 区的第一条信息
|
||
this.id = [0, 0, 0]; // 刷新选择器视图
|
||
},
|
||
|
||
// 切换省市区时联动改变参数值
|
||
bindChange(e) {
|
||
console.log("[1231331], e", e);
|
||
const { value } = e.detail;
|
||
// // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
|
||
let newCrty = this.provList[value[0]];
|
||
console.log("新的省份信息", newCrty);
|
||
console.log("旧的省信息", this.confirmProv1);
|
||
if (newCrty.ad_code === this.confirmProv1.ad_code) {
|
||
console.log("省份信息没变");
|
||
this.sf = false;
|
||
} else {
|
||
this.sf = true;
|
||
}
|
||
console.log("this.cityListthis.cityList", this.cityList);
|
||
this.confirmProv1 = newCrty;
|
||
this.getCityList(value[1], value[2]);
|
||
},
|
||
},
|
||
onReady() {},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
this.getProvList(); // 初始化加载省份数据
|
||
},
|
||
onShow() {},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |