邓洁 : 首页icon页面渲染

pages/index/NavBarPages/zdxx/zdxx.vue

@@ -10,65 +10,107 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<view>
-			<DropDown></DropDown>
+			<DropDown @getQueryInfo="getShopList"></DropDown>
 		</view>
 		<view class="marginLR10">
-			<SearchShopList :showStyle="1"/>
+			<SearchShopList :showStyle="1" :searchInfoList="searchInfoList" />
 		</view>
 	</view>
 </template>
 
 <script>
+	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
 	export default {
+		components: {
+			DropDownItem
+		},
 		data() {
 			return {
-				
+				pageSize: 5,
+				pageNum: 1,
+				searchInfoList: [],
+				customQuery: {},
+				searchListLength: '',
 			}
 		},
+		onReachBottom() {
+			if (this.searchListLength !== 0) {
+				this.pageNum++
+				this.getShopList()
+				console.log("触底加载");
+			}
+		},
+		created() {
+			this.getShopList()
+		},
 		methods: {
-			
+			getShopList(q) {
+				let query = this.getQueryInfo(q)
+				console.log("listquery", query);
+				this.$api.getShopList(query).then(res => {
+					this.searchListLength = res.data.data.length
+					this.searchInfoList = [...this.searchInfoList, ...res.data.data]
+					console.log(this.searchInfoList);
+				})
+			},
+			getQueryInfo(query) {
+				console.log("getQueryInfo", query);
+				const q = this.$u.queryParams({
+					type: 2,
+					pageSize: this.pageSize,
+					pageNum: this.pageNum,
+					...query
+				})
+				this.customQuery = q
+				return q
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	page{
+	page {
 		background-color: #F8F8F8;
 	}
-	.marginLR10{
+
+	.marginLR10 {
 		margin: 0 10px;
 	}
-	.search-box-bg{
+
+	.search-box-bg {
 		width: 100%;
 		position: relative;
 		z-index: 3;
 		background-color: #F8F8F8;
+
 		.bug-fix {
 			transform: translateY(-20rpx);
 			width: 100%;
 			height: 20rpx;
 		}
+
 		.search-box {
 			position: relative;
 			z-index: 2;
 			left: 50%;
 			width: 84.6%;
 			transform: translateX(-50%);
+
 			.search-box-input {
 				border-radius: 12rpx;
 				background-color: #fff;
 				opacity: 0.85;
-		
+
 				.u-border {
 					border: none;
-		
+
 					.u-input__content {
 						height: 62rpx;
 						border-radius: 12rpx;
 						background-color: #fff;
-		
+
 						.u-input__content__field-wrapper__field {
 							font-size: 26rpx !important;
 						}
@@ -77,5 +119,4 @@
 			}
 		}
 	}
-	
-</style>
+</style>