diff --git a/components/DropDown/DropDown.vue b/components/DropDown/DropDown.vue index 14f9dcb..295bcc7 100644 --- a/components/DropDown/DropDown.vue +++ b/components/DropDown/DropDown.vue @@ -15,8 +15,8 @@ - + @@ -35,29 +35,58 @@ return { title: ['行业', '区域', '面积', '筛选'], activeIndex: -1, + // 是否显示下拉框 + isShow: false, 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: '' - } + }, + // 当前选中的行业下拉列表项 + 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() { 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('全部') + }, + watch: { + setActiveTag (reset){ + + } }, methods: { changeActiveIndex(index) { @@ -69,16 +98,54 @@ cancelDrop() { this.activeIndex = -1; }, + cancelPageNum(){ + this.$emit('cancelPageNum') + }, getQueryInfo(querys) { + + console.log(querys, 'getquerysinfo'); + // 修改当前选择的各选项卡下标 + // 记忆各下拉框数据 + + 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) - - return query + }, + 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 3ecd3c0..b629bc8 100644 --- a/components/DropDown/DropDownItem.vue +++ b/components/DropDown/DropDownItem.vue @@ -3,7 +3,7 @@ - {{item}} @@ -22,15 +22,20 @@ } }, type: { - type: String, default () { return '' } + }, + activeChoose: { + type: Number, + default () { + return 0 + } } }, data() { return { - activeIndex: -1, + activeIndex: 0, queryInfo: {} } }, @@ -39,29 +44,77 @@ this.$emit('cancelDrop'); }, sendQueryInfo() { + console.log(this.queryInfo); + console.log(this.type); + console.log(this.activeIndex); + if (this.type === '行业') { - this.queryInfo = { - business: this.list[this.activeIndex] + if(this.list[this.activeIndex] == '全部'){ + this.queryInfo = { + business: '' + } + }else{ + this.queryInfo = { + business: this.activeIndex + } } + } else if (this.type === '区域') { - this.queryInfo = { - region: this.list[this.activeIndex] + if(this.list[this.activeIndex] == '全区域'){ + this.queryInfo = { + region: '' + } + }else{ + this.queryInfo = { + region: this.activeIndex + } } } else if (this.type === '面积') { - this.queryInfo = { - areatype: this.activeIndex + 1 + if(this.list[this.activeIndex] == '任意面积'){ + this.queryInfo = { + areatype: '' + } + }else { + this.queryInfo = { + areatype: this.activeIndex + } } + } else if (this.type === '筛选') { - this.queryInfo = { - sortType: this.activeIndex + 1 + 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; - this.sendQueryInfo(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 5d49c33..483d7cc 100644 --- a/components/ShowShopList/ShowShopList.vue +++ b/components/ShowShopList/ShowShopList.vue @@ -1,6 +1,6 @@