city-store-transfer/pages/index/NavBarPages/zrxx/zrxx.vue

<template>
	<view>
		<view class="search-box-bg">
			<view class="bug-fix"></view>
			<view class="search-box">
				<view class="search-box-input">
					<u-input v-model="keyword" placeholder="请输入店铺名称进行搜索" placeholder-style="color: #969696" prefixIcon="search"
						prefixIconStyle="font-size: 24px;color: #909399;" border="true" @change="getInput">
					</u-input>
				</view>
			</view>
		</view>

		<view>
			<DropDown @getQueryInfo="getShopList"></DropDown>
		</view>
		<view class="marginLR10">
			<ShowShopList :showStyle="1" :shopInfoList="shopInfoList" />
		</view>
		<view v-if="showNull" class="showNull">
			<text>没有符合条件的数据, 请下拉刷新重置数据~
			</text>
		</view>
	</view>
</template>

<script>
	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
	export default {
		components: {
			DropDownItem
		},
		data() {
			return {
				shopInfoList: [],
				pageSize: 8,
				pageNum: 1,
				customQuery: {},
				shopListLength: '',
				showNull: false,
				refresh: false,
				keyword: ''
			}
		},
		onPullDownRefresh() {
			this.refresh = true
			// if (this.showNull = true) {
			const q = this.$u.queryParams({
				type: 1,
				pageSize: this.pageSize,
				pageNum: 1,
			})
			// if(this.showNull=true){
			// 	this.pageNum=1
			// }
			this.getShopList(q, "refresh")

			// }
		},
		onReachBottom() {
			if (!this.refresh && this.shopListLength !== 0) {
				this.keyword=''
				this.pageNum++
				this.getShopList()
				console.log("触底加载");
			} else if (this.shopListLength == 0) {
				this.pageNum = 1
			}
		},
		onLoad() {
			this.getShopList()
		},
		methods: {
			getInput(val) {
				console.log('搜索值', val);
				if (this.pageNum !== 1) {
					this.pageNum = 1
				}
				const q = this.$u.queryParams({
					type: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					kw: val
				})
				this.$api.getShopList(q).then(res => {
					this.shopListLength = res.data.data.length
					this.shopInfoList = res.data.data
				})
			},
			getShopList(q, type) {
				let query = {}
				if (type == "refresh") {
					query = q
				} else {
					query = this.getQueryInfo(q)
				}
				console.log("listquery", query);
				this.$api.getShopList(query).then(res => {
					this.shopListLength = res.data.data.length
					if (query.includes('business') || query.includes('areatype') || query.includes('sortType') || query
						.includes('region') || this.refresh) {
						console.log('筛选');
						// this.resetQuery(q)
						this.shopInfoList = res.data.data
						this.refresh = false
						if (res.data.data.length == 0) {
							this.showNull = true
						} else {
							this.showNull = false
						}
					} else {
						console.log('查询');
						this.shopInfoList = [...this.shopInfoList, ...res.data.data]
					}
					console.log(this.shopInfoList);
					uni.stopPullDownRefresh()
				})
			},
			getQueryInfo(query) {
				console.log("getQueryInfo", query);
				const q = this.$u.queryParams({
					type: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					...query
				})
				this.customQuery = q
				return q
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.showNull {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		color: darkgray;
	}

	.marginLR10 {
		margin: 0 10px;
	}

	.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;
						}
					}
				}
			}
		}
	}
</style>