筛选组件接接口，

蔚落 2021-07-24 22:08 220阅读 0赞

不懂得可以留言哈  
组件地址

> [https://ext.dcloud.net.cn/plugin?id=1078][https_ext.dcloud.net.cn_plugin_id_1078]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70]

> 注意哈，有个confirm函数是用来接收菜单结果的  
> 在组件的confirm事件，通过$emit向父组件传值  
> 在父组件的confirm函数中打印e.index的值

组件中无需任何操作，只要在父组件中直接处理即可

主页面  
productList是页面列表渲染的，传递需要的参数，再次渲染就好了

productList() {
    				let data = this.params
    				if (this.latitude == undefined) {
    					this.latitude = ""
    				}
    				if (this.longitude == undefined) {
    					this.longitude = ""
    				}
    				this.$myRequest({
    					url: `/lx/merchants?category_id=${this.category_id}&distance=${this.neardistance}&latitude=${this.latitude}&longitude=${this.longitude}&sort=${this.sort}&business_hours_start=${this.business_hours_start}&business_hours_end=${this.business_hours_end}&keyword=${this.searchname}`,
    					data: data,
    				}).then(res => {
    					 this.productInfo = res.data
    					//下面这部分是我来处理上拉加载和地址位置处理的，大家不必理会
    					this.productInfo = this.productInfo.concat(res.data)
    					if (res.data.length < this.params.limit) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
    						this.isLoadMore = true
    						this.loadStatus = 'nomore'
    					} else {
    						this.isLoadMore = false
    					}
    					this.productInfo.map((item, index) => {
    						this.dist = this.distances(this.latitude, this.longitude, item.location_gcj02.lat, item.location_gcj02.lng);
    						if (this.latitude == undefined && this.longitude == undefined) {
    							this.dist = "--"
    						}
    						if (this.dist < 1) {
    							this.dist = this.dist * 1000 + 'm'
    						} else if (this.dist >= 1) {
    							this.dist = this.dist + 'km'
    						}
    						this.kilometer.push(Object.assign({}, item, {
    							dist: this.dist
    						}))
    
    
    					})
    
    				})
    			},
    //接收菜单结果
    confirm(e) {
          这块是我处理对店铺营业时间筛选的，大家没需求不必理会
    		this.business_hours_start = e.startTime
    				this.business_hours_end = e.endTime
    				if (e.endTime == "24:00") {
    					this.business_hours_end = "00:00"
    				}
    				this.categoryId = e.index[0]
    				this.array[0].children.map((item, index) => {
    					this.secondChildren = item
    					if (index == this.categoryId[0] && index == 0) {
    						this.category_id = ""
    					} else if (index == this.categoryId[0] && index != 0) {
    						item.children.map((item, index) => {
    							if (this.categoryId[1] == index) {
    								this.category_id = item.id
    								item.children.map((item, index) => {
    									if (this.categoryId[2] == index) {
    										this.category_id = item.id
    									}
    								})
    							}
    						})
    					}
    				})
    				//这块是正题，大家在处理的时候直接打印e.index[ ]的值就好了（这里的index是组件传过来的），注意中括号index值得变化
    				this.neardIndex = e.index[1].toString()
    				this.array[1].children.map((item, index) => {
    					if (this.neardIndex == index) {
    						this.neardistance = item.name
    						if (this.neardistance == "所有") {
    							this.neardistance = " "
    						} else if (this.neardistance == "1km") {
    							this.neardistance = "1000"
    						} else if (this.neardistance == "3km") {
    							this.neardistance = "3000"
    						} else if (this.neardistance == "5km") {
    							this.neardistance = "5000"
    						} else if (this.neardistance == "10km") {
    							this.neardistance = "10000"
    						} else if (this.neardistance == "500米") {
    							this.neardistance = "500"
    						}
    					}
    				})
    				this.composite = e.index[2].toString()
    				this.array[2].children.map((item, index) => {
    					if (this.composite == index) {
    						this.sort = item.name
    						if (item.name == "综合排序") {
    							this.sort = "comprehensive"
    						} else if (item.name == "离我最近") {
    							this.sort = "nearest"
    						} else if (item.name == "评价最高") {
    							this.sort = "highest_rating"
    						}
    					}
    				})
    
    				this.params.page = 1   //传参完成，初始页码为1，清空列表，重新渲染
    				this.productInfo = []
    				this.kilometer = []
    				this.productList()
    },

只能教到这里了，有问题请留言

[https_ext.dcloud.net.cn_plugin_id_1078]: https://ext.dcloud.net.cn/plugin?id=1078
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70]: /images/20210724/c494fed61415482c9012f7e14b6e549a.png