罗世杰：Dropdown生成query

components/DropDown/DropDown.vue

@@ -15,7 +15,13 @@
 			</view>
 		</view>
 		<view class="item-border">
-			<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop" :type="'region'" />
+			<DropDownItem 
+				v-if="activeIndex !== -1" 
+				:list="tablist" 
+				@cancelDrop="cancelDrop" 
+				@getQueryInfo="getQueryInfo"
+				:type="title[activeIndex]" 
+			/>
 		</view>
 	</view>
 </template>
@@ -38,8 +44,14 @@
 					['全部', '餐饮美食', '百货超市', '美容美发'],
 					['区域1', '区域2', '区域3', '区域4'],
 					['小于50m²', '50-200m²', '200-600m²', '600-800m²', '800-1000m²', '1000m²以上'],
-					['附近的', '最新发布的', '其他']
-				]
+					['面积从大到小', '面积从小到大', '租金从大到小', '租金从小到大']
+				],
+				queryInfo: {
+					region: '',
+					sortType: '',
+					areaType: '',
+					business: ''
+				}
 			};
 		},
 		computed: {
@@ -59,8 +71,17 @@
 					this.activeIndex = index
 			},
 			cancelDrop() {
-				console.log("取消遮罩");
 				this.activeIndex = -1;
+			},
+			getQueryInfo(querys) {
+				this.queryInfo = {
+					...this.queryInfo,
+					...querys
+				}
+				const query = this.$u.queryParams(this.queryInfo)
+				console.log(query, 'query');
+				this.$emit('getQueryInfo', query)
+				return query
 			}
 		}
 	}

components/DropDown/DropDownItem.vue

@@ -30,15 +30,38 @@
 		},
 		data() {
 			return {
-				activeIndex: -1
+				activeIndex: -1,
+				queryInfo: {}
 			}
 		},
 		methods: {
 			handleMask() {
 				this.$emit('cancelDrop');
 			},
+			sendQueryInfo() {
+				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
+					}
+				}
+				// 发送queryInfo
+				this.$emit('getQueryInfo', this.queryInfo);	
+			},
 			async handleActive(index) {
 				this.activeIndex = index;
+				this.sendQueryInfo(index);
 				// 设置一个定时器，等待200毫秒
 				const delayPromise = this.delay(200);
 				// 等待定时器完成
@@ -55,8 +78,7 @@
 					}, ms);
 				});
 			},
-		},
-
+		}
 	}
 </script>