From 67dd393a7f9d33e38ea51e9168ad878352c9a47a Mon Sep 17 00:00:00 2001 From: LuoShijie Date: Fri, 24 Nov 2023 00:42:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=BD=97=E4=B8=96=E6=9D=B0=EF=BC=9A?= =?UTF-8?q?=E6=9C=AA=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 @@ @@ -35,6 +35,8 @@ return { title: ['行业', '区域', '面积', '筛选'], activeIndex: -1, + // 是否显示下拉框 + isShow: false, postlist: [ [], [], @@ -47,19 +49,30 @@ areatype: '', business: '' }, - // 当前行业下拉列表 - currentClassList: 0, - // 当前区域下拉列表 - currentRegionList: 0, - // 当前面积下拉列表 - currentAreaList: 0, - // 当前筛选下拉列表 - currentFilterList: 0, + // 当前选中的行业下拉列表项 + currentClassActive: 0, + // 当前选中的区域下拉列表项 + currentRegionActive: 0, + // 当前选中的面积下拉列表项 + currentAreaActive: 0, + // 当前选中的筛选下拉列表项 + currentFilterActive: 0, }; }, computed: { tablist: function() { return this.postlist[this.activeIndex] + }, + setActiveTag: function(){ + if(this.activeIndex == 0){ + return this.currentClassActive + }else if(this.activeIndex == 1){ + return this.currentRegionActive + }else if(this.activeIndex == 2){ + return this.currentAreaActive + }else if(this.activeIndex == 3){ + return this.currentFilterActive + } } }, created() { @@ -70,6 +83,11 @@ // this.postlist[2].unshift('所有面积') // this.postlist[3].unshift('全部') }, + watch: { + setActiveTag (reset){ + + } + }, methods: { changeActiveIndex(index) { if (this.activeIndex === index) { @@ -80,49 +98,54 @@ cancelDrop() { this.activeIndex = -1; }, + cancelPageNum(){ + this.$emit('cancelPageNum') + }, 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] - + if (this.activeIndex === 0) { + this.currentClassActive = querys.business + }else if (this.activeIndex === 1) { + this.currentRegionActive = querys.region + }else if (this.activeIndex === 2) { + this.currentAreaActive = querys.areatype + }else if (this.activeIndex === 3) { + this.currentFilterActive = querys.sortType + } + // 特殊处理行业、区域 + if(querys.business){ + querys.business = this.tablist[this.currentClassActive] + } + if(querys.region){ + querys.region = this.tablist[this.currentRegionActive] + } + this.queryInfo = { ...this.queryInfo, ...querys } const query = this.$u.queryParams(this.queryInfo) - console.log(query, 'dropquery'); + console.log(querys, 'dropquery'); this.$emit('getQueryInfo', this.queryInfo) }, - 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 + resetInfo(){ + console.log("重置了Dropdown"); + this.queryInfo = { + region: '', + sortType: '', + areatype: '', + business: '' } + this.currentClassActive = 0 + this.currentRegionActive = 0 + this.currentAreaActive = 0 + this.currentFilterActive = 0 + // 重置各下拉框保存的数据 + this.$refs.dropdownitem.resetQueryInfo() } } } diff --git a/components/DropDown/DropDownItem.vue b/components/DropDown/DropDownItem.vue index 9bf56eb..b629bc8 100644 --- a/components/DropDown/DropDownItem.vue +++ b/components/DropDown/DropDownItem.vue @@ -3,7 +3,7 @@ - {{item}} @@ -22,10 +22,15 @@ } }, type: { - type: String, default () { return '' } + }, + activeChoose: { + type: Number, + default () { + return 0 + } } }, data() { @@ -40,87 +45,75 @@ }, sendQueryInfo() { console.log(this.queryInfo); + console.log(this.type); + console.log(this.activeIndex); + if (this.type === '行业') { - + if(this.list[this.activeIndex] == '全部'){ + this.queryInfo = { + business: '' + } + }else{ this.queryInfo = { business: this.activeIndex } + } - - } - if (this.type === '区域') { - + } else if (this.type === '区域') { + if(this.list[this.activeIndex] == '全区域'){ + this.queryInfo = { + region: '' + } + }else{ this.queryInfo = { region: this.activeIndex } - - } - if (this.type === '面积') { - + } + } else if (this.type === '面积') { + if(this.list[this.activeIndex] == '任意面积'){ + this.queryInfo = { + areatype: '' + } + }else { this.queryInfo = { areatype: this.activeIndex } + } - - } - if (this.type === '筛选') { - + } else if (this.type === '筛选') { + if(this.list[this.activeIndex] == '全部'){ + this.queryInfo = { + sortType: '' + } + }else{ 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); }, + resetQueryInfo(){ + console.log("重置了DropdownItem"); + this.currentClassActive = 0 + this.currentRegionActive = 0 + this.currentAreaActive = 0 + this.currentFilterActive = 0 + this.activeIndex = 0 + this.queryInfo = { + region: '', + sortType: '', + areatype: '', + business: '' + } + }, async handleActive(index) { this.activeIndex = index; + // 取消当前页面的pageNum参数 + this.$emit('cancelPageNum'); this.sendQueryInfo(); // 设置一个定时器，等待200毫秒 const delayPromise = this.delay(200); diff --git a/components/ShowShopList/ShowShopList.vue b/components/ShowShopList/ShowShopList.vue index 79e5b01..483d7cc 100644 --- a/components/ShowShopList/ShowShopList.vue +++ b/components/ShowShopList/ShowShopList.vue @@ -1,6 +1,6 @@