feat : 完成选择服务页面更改
This commit is contained in:
赵毅
parent
690c2d1833
commit
38f73a19c4
@ -4,14 +4,15 @@ page {
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
z-index: 9;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
||||
@ -62,6 +62,13 @@
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
||||
></image>
|
||||
</div>
|
||||
|
||||
<div class="FilterItem" @click="showDialog(6)">
|
||||
地区
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
||||
></image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Filter_right">
|
||||
@ -147,12 +154,50 @@
|
||||
</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 3" :key="index">
|
||||
<div class="MasterItem" v-for="(item, index) in 5" :key="index">
|
||||
<div class="MasterItem_right">
|
||||
<div class="MasterItem_info">
|
||||
<div class="MasterItem_Info_left">
|
||||
@ -222,7 +267,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Btn">确定</div>
|
||||
<!-- <div class="Btn">确定</div> -->
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
@ -235,6 +280,7 @@ import {
|
||||
menuButtonInfo,
|
||||
} from "../../../utils/index";
|
||||
import { apiArr } from "../../../api/reservation";
|
||||
import { apiArr as apiArr2 } from "../../../api/area";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -246,7 +292,19 @@ export default {
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false,
|
||||
isShowDia: false,
|
||||
id: [0, 0, 0], // 默认选中第一个省、市、区
|
||||
|
||||
provList: [], // 省
|
||||
cityList: [], //市
|
||||
distList: [], // 区
|
||||
defaultCity: [], // 默认展示的市区数据
|
||||
defaultDist: [], // 默认展示的县/区数据
|
||||
confirmProv: {}, // 默认选中省
|
||||
confirmProv1: {},
|
||||
confirmCity: {}, // 默认选中市
|
||||
confirmDist: {}, // 默认选中区/县
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -260,15 +318,97 @@ export default {
|
||||
showDialog(index) {
|
||||
this[`show${index}`] = !this[`show${index}`];
|
||||
this.logOtherButtons(index);
|
||||
this.isShowDia = this[`show${index}`]
|
||||
this.isShowDia = this[`show${index}`];
|
||||
},
|
||||
close() {
|
||||
this.show6 = false;
|
||||
this.isShowDia = false;
|
||||
},
|
||||
logOtherButtons(excludeIndex) {
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
if (i == 6) {
|
||||
this.getProvList();
|
||||
}
|
||||
if (i !== excludeIndex) {
|
||||
this[`show${i}`] = false
|
||||
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() {},
|
||||
|
||||
@ -277,6 +417,7 @@ export default {
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.getProvList(); // 初始化加载省份数据
|
||||
},
|
||||
onShow() {},
|
||||
|
||||
|
||||
@ -176,7 +176,8 @@ export default {
|
||||
this.rangeValue = e;
|
||||
},
|
||||
selectVendor() {
|
||||
NavgateTo("../vendor/index");
|
||||
// NavgateTo("../vendor/index");
|
||||
NavgateTo("../searchInfo/index");
|
||||
},
|
||||
selectMaster() {
|
||||
NavgateTo("../searchInfo/index");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user