Applet/pages/shop/index.vue

<template>
	<view class="container">
		<view class="top">
			<view class="search">
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col>
						<view class="demo-uni-col">
							<uni-easyinput class="uni-input" prefixIcon="search" v-model="formData.name" placeholder="请输入商户名称"></uni-easyinput>
						</view>						
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="11">
						<view class="demo-uni-col">						
							<uni-data-picker :localdata="addressOptions" v-model="selectedAddress" placeholder="商业板块/楼栋/楼层" popup-title="请选择商业板块/楼栋/楼层" 
							 @change="onchange"
							 @nodeclick="onnodeclick"
							 @popupclosed="onpopupclosed"></uni-data-picker>
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="demo-uni-col">						
							<uni-data-select class="search-data-select"  placeholder="使用状态" v-model="formData.status" :localdata="statusOptions">状态</uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col">
							<button class="searchBtn" type="default" @click="handleSearch">搜索</button>
						</view>						
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col">
							<button class="searchBtn" type="default" @click="handleReset">重置</button>
						</view>						
					</uni-col>							
				</uni-row>
			</view>
		</view>
		<uni-list border class="list">
			<uni-list-item
				v-for="(item, index) in resultList"
				:key="index"
				:ellipsis="2"
				:title="item.district"
				:note=getAddress(item)
				:rightText=getMerchantName(item)
				showArrow
				clickable
				@click="listItemBtn(item)">				
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="more" />
	</view>
</template>

<script>
	import dictApi from '../../api/dict.js';
	import shopApi from '../../api/shop.js';
	import { BASE_URL } from '../../env.js';	
	export default {
		data() {
			return {				
				addressOptions: [],
				statusOptions: [],
				currentAddress: null,
				selectedAddress: null,				
				formData: {
					pageNum: 0,
					pageSize: 20,
					district: null,
					building: null,
					floor: null,
					status: null,
					name: null,
				},
				resultList: [],
				more: 'more'
			}
		},
		onShow: function() {
			// this.init();
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getShopList();
			}
		},		
		async mounted() {
			await this.getDicts();
			await this.getDistrictBuildingFloor();
			await this.getShopList();
		},
		methods: {
			async getDicts() {
				const resp_vacant = await dictApi.getDict('vacant_status');
				if (resp_vacant.code == 200) 
					this.statusOptions = resp_vacant.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
			},
			async getDistrictBuildingFloor() {
				const resp_address = await shopApi.getDistrictBuildingFloor();
				this.addressOptions = resp_address.data.map(node => this.flattenValues(node));
			},
			flattenValues(node, parentValue='') {
			  if(parentValue!==''){
				  node.value = parentValue + ':' + node.value;
			  }			  
			  
			  if (!node.isleaf && node.children!=null && node.children.length != 0) {
			     node.children.map(child => this.flattenValues(child, node.value));
			  }
			  return node;
			},
			// 搜索函数
			async getShopList() {
				this.more = 'loading';

				const queryParams = {};
				this.getFormParams(queryParams);
				const resp = await shopApi.getShopList({...queryParams});
				this.resultList.push(...resp.rows);

				this.updateMoreStatus(resp.total);
			},
			// 搜索函数
			async handleSearch() {
				this.resultList.length = 0;
				this.formData.pageNum = 0;

				await this.getShopList();
			},
			async handleReset() {
				this.currentAddress = null;
				this.selectedAddress = null;
								
				this.formData.pageNum = 0;
				this.formData.name = null;				
				this.formData.district = null;
				this.formData.building = null;
				this.formData.floor = null;
				this.formData.status = null;

				this.resultList.length = 0;

				await this.getShopList();
			},
			onchange(nodesPath) {
				const value = nodesPath.detail.value[0];
				if (!value) {
					this.currentAddress = null;
				}
			},
			onnodeclick(node) {
				this.currentAddress = node;
			},
			onpopupclosed() {
				this.$nextTick(() => {
					this.selectedAddress = this.currentAddress.value
				});
			},
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
			},
			getAddress(shop){
				return "楼栋:" + shop.building + "  楼层:" + shop.floor + "  铺位号:" + shop.number;
			},
			getMerchantName(shop){
				if(shop.status === "未使用")
					return shop.status;
				
				if(shop.name != null && shop.name != '' && shop.name != undefined)
					return shop.name;

				return "未知";					
			},
			getFormParams(queryParams){
				this.formData.pageNum += 1;

				if(this.currentAddress != null){
					var parts = this.currentAddress.value.split(":");
					if (parts.length >= 1) this.formData.district = parts[0];				
					if (parts.length >= 2) this.formData.building = parts[1];
					if (parts.length >= 3) this.formData.floor = parts[2];					
				}
				
				for (const key in this.formData) {
					if (this.formData[key] !== null 
						&& this.formData[key] !== undefined
						&& this.formData[key] !== '') {
						queryParams[key] = this.formData[key];
					}
				}
			},
			updateMoreStatus(total){
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.formData.pageNum >= Math.ceil(total / this.formData.pageSize) ? 'noMore' : 'more';
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #fff;
	}
	.top {
		width: 100%;
		z-index: 999;
		background-color: #fff;
		/* overflow: hidden; */
	}
	.tabsBox {
		width: 100%;
		border-bottom: 1px solid #d3d3d3;
		display: flex;
	}
	.tab {
		width: 25%;
	}
	.text {
		display: block;
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	.current {
		color: #ff9302;
		border-bottom: 1px solid #ff9302;
	}
.search {
		width: 98%;
		border: 1px solid #f3f3f3;
		background-color: #fff !important;
		border-radius: 5px;
		margin: 2px;
		padding: 2rpx;
		display: block;
	}
	.demo-uni-row {
		margin-bottom: 10px;
		display: block;
	}
	/deep/ .uni-row {
		margin-bottom: 10px;
	}
	.demo-uni-col {
		height: 24px;
		margin-bottom: 10px;
		border-radius: 4px;
	}		
	.uni-easyinput {
		width: 100%;
		font-size: 14px;
		display: block;
	}
	.uni-easyinput .uni-easyinput__content {
		border: 1px solid #f3f3f3;
		border-radius: 10px;
	}
	.search-data-select{
		width: 100%;
		border-radius: 10px;
	}
	.searchBtn {
		width: 98%;
		background-color: #ff9302 !important;
		border: none;
		color: #fff !important;
		border-radius: 12px;
		padding-left: 2px;
		padding-right: 2px;
		margin-left: 2px;
		margin-right: 2px;
		font-size: 13px;
	}
	.list {
		display: block;
	}
</style>