From 67dd393a7f9d33e38ea51e9168ad878352c9a47a Mon Sep 17 00:00:00 2001 From: LuoShijie Date: Fri, 24 Nov 2023 00:42:46 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BD=97=E4=B8=96=E6=9D=B0=EF=BC=9A=E6=9C=AA?= =?UTF-8?q?=E5=AE=8C=E6=88=90Dropdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DropDown/DropDown.vue | 62 ++++++++++++--- components/DropDown/DropDownItem.vue | 96 +++++++++++++++++++----- components/ShowShopList/ShowShopList.vue | 2 +- 3 files changed, 132 insertions(+), 28 deletions(-) diff --git a/components/DropDown/DropDown.vue b/components/DropDown/DropDown.vue index 14f9dcb..924d899 100644 --- a/components/DropDown/DropDown.vue +++ b/components/DropDown/DropDown.vue @@ -16,7 +16,7 @@ + :type="title[activeIndex]" :activeChoose = "setActiveTag"/> @@ -36,17 +36,25 @@ title: ['行业', '区域', '面积', '筛选'], activeIndex: -1, postlist: [ - ['全部', '餐饮美食', '百货超市', '美容美发'], - ['区域1', '区域2', '区域3', '区域4'], - ['小于50m²', '50-200m²', '200-600m²', '600-800m²', '800-1000m²', '1000m²以上'], - ['面积从大到小', '面积从小到大', '租金从大到小', '租金从小到大'] + [], + [], + ['全部','小于50m²', '50-200m²', '200-600m²', '600-800m²', '800-1000m²', '1000m²以上'], + ['全部','面积从大到小', '面积从小到大', '租金从大到小', '租金从小到大'] ], queryInfo: { region: '', sortType: '', areatype: '', business: '' - } + }, + // 当前行业下拉列表 + currentClassList: 0, + // 当前区域下拉列表 + currentRegionList: 0, + // 当前面积下拉列表 + currentAreaList: 0, + // 当前筛选下拉列表 + currentFilterList: 0, }; }, computed: { @@ -56,8 +64,11 @@ }, created() { this.postlist[0] = JSON.parse(uni.getStorageSync('classList')) - // this.postlist[0].unshift('全部') + this.postlist[0].unshift('全部') this.postlist[1] = JSON.parse(uni.getStorageSync('regionList')) + this.postlist[1].unshift('全区域') + // this.postlist[2].unshift('所有面积') + // this.postlist[3].unshift('全部') }, methods: { changeActiveIndex(index) { @@ -70,6 +81,30 @@ this.activeIndex = -1; }, getQueryInfo(querys) { + + console.log(querys, 'getquerysinfo'); + // 修改当前选择的各选项卡下标 + if (this.activeIndex === 0) { + this.currentClassList = querys.business + }else if (this.activeIndex === 1) { + this.currentRegionList = querys.region + }else if (this.activeIndex === 2) { + this.currentAreaList = querys.areatype + }else if (this.activeIndex === 3) { + this.currentFilterList = querys.sortType + } + + // 记忆各下拉框数据 + if(querys.business==0){ + querys.business = '' + }else{ + querys.business = this.postlist[0][this.currentClassList] + } + if(querys.region==0){ + querys.region = '' + }else querys.region = this.postlist[1][this.currentRegionList] + + this.queryInfo = { ...this.queryInfo, ...querys @@ -77,8 +112,17 @@ const query = this.$u.queryParams(this.queryInfo) console.log(query, 'dropquery'); this.$emit('getQueryInfo', this.queryInfo) - - return query + }, + setActiveTag(){ + if(this.activeIndex == 0){ + return this.currentClassList + }else if(this.activeIndex == 1){ + return this.currentRegionList + }else if(this.activeIndex == 2){ + return this.currentAreaList + }else{ + return this.currentFilterList + } } } } diff --git a/components/DropDown/DropDownItem.vue b/components/DropDown/DropDownItem.vue index 3ecd3c0..9bf56eb 100644 --- a/components/DropDown/DropDownItem.vue +++ b/components/DropDown/DropDownItem.vue @@ -3,7 +3,7 @@ - {{item}} @@ -30,7 +30,7 @@ }, data() { return { - activeIndex: -1, + activeIndex: 0, queryInfo: {} } }, @@ -39,29 +39,89 @@ this.$emit('cancelDrop'); }, sendQueryInfo() { + console.log(this.queryInfo); if (this.type === '行业') { - this.queryInfo = { - business: this.list[this.activeIndex] - } - } else if (this.type === '区域') { - this.queryInfo = { - region: this.list[this.activeIndex] - } - } else if (this.type === '面积') { - this.queryInfo = { - areatype: this.activeIndex + 1 - } - } else if (this.type === '筛选') { - this.queryInfo = { - sortType: this.activeIndex + 1 - } + + this.queryInfo = { + business: this.activeIndex + } + + + } + if (this.type === '区域') { + + this.queryInfo = { + region: this.activeIndex + } + } + if (this.type === '面积') { + + this.queryInfo = { + areatype: this.activeIndex + } + + + } + if (this.type === '筛选') { + + this.queryInfo = { + sortType: this.activeIndex + } + + + } + // if (this.type === '行业') { + // if(this.list[this.activeIndex] == '全部'){ + // this.queryInfo = { + // business: '' + // } + // }else{ + // this.queryInfo = { + // business: this.activeIndex + // } + // } + + // } else if (this.type === '区域') { + // if(this.list[this.activeIndex] == '全区域'){ + // this.queryInfo = { + // region: '' + // } + // }else{ + // this.queryInfo = { + // region: this.activeIndex + // } + // } + // } else if (this.type === '面积') { + // if(this.list[this.activeIndex] == '任意面积'){ + // this.queryInfo = { + // areatype: '' + // } + // }else { + // this.queryInfo = { + // areatype: this.activeIndex + // } + // } + + // } else if (this.type === '筛选') { + // if(this.list[this.activeIndex] == '全部'){ + // this.queryInfo = { + // sortType: '' + // } + // }else{ + // this.queryInfo = { + // sortType: this.activeIndex + // } + // } + + // } // 发送queryInfo + console.log(this.queryInfo, 'sendqueryInfo'); this.$emit('getQueryInfo', this.queryInfo); }, async handleActive(index) { this.activeIndex = index; - this.sendQueryInfo(index); + this.sendQueryInfo(); // 设置一个定时器，等待200毫秒 const delayPromise = this.delay(200); // 等待定时器完成 diff --git a/components/ShowShopList/ShowShopList.vue b/components/ShowShopList/ShowShopList.vue index 5d49c33..79e5b01 100644 --- a/components/ShowShopList/ShowShopList.vue +++ b/components/ShowShopList/ShowShopList.vue @@ -1,6 +1,6 @@