Applet/pages/shop/shoplist.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="16">
						<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 {				
				statusOptions: [],
				formData: {
					pageNum: 0,
					pageSize: 20,
					district: null,
					tag: null,
					status: null,
					name: null,
				},
				resultList: [],
				more: 'more'
			}
		},
		onLoad: function (option) {
			this.formData.district = option.district;
			this.formData.tag = option.tag;
		},		
		onShow: function() {
			// this.init();
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getShopList();
			}
		},		
		async mounted() {
			await this.getDicts();
			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 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.formData.pageNum = 0;
				this.formData.name = null;
				this.formData.status = null;

				this.resultList.length = 0;

				await this.getShopList();
			},
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/shop/info?id=${e.shopId}` })
			},
			getAddress(shop){
				return shop.tag + "  铺位号:" + 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;
				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>