Applet/pages/merchant/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 size="mini" class="uni-input" prefixIcon="search" v-model="searchVal" placeholder="请输入商户名称"></uni-easyinput>
						</view>						
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="8">
						<view class="demo-uni-col">
							<uni-data-select class="search-data-select" v-model="typeValue" :localdata="typeRange" @change="changeType">类型</uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="demo-uni-col">						
							<uni-data-select class="search-data-select" v-model="communityValue" :localdata="communityRange" @change="changeCommunity">社区</uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col">
							<button class="searchBtn" type="default" size="mini" @click="handleSearch">搜索</button>
						</view>						
					</uni-col>
					<uni-col :span="4">
						<view class="demo-uni-col">
							<button class="searchBtn" type="default" size="mini" @click="handleReset">重置</button>
						</view>						
					</uni-col>					
				</uni-row>				
			</view>
		</view>
		<uni-list border class="list">
			<uni-list-item
				v-for="(item, index) in dataList"
				:key="index"
				:ellipsis="2"
				:title=getTitle(item)
				:note="item.createTime"
				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 merchantApi from '../../api/merchant.js';
	import { BASE_URL } from '../../env.js';	
	export default {
		data() {
			return {
				searchVal: '',
				// more = 加载前， loading = 加载中， noMore = 没有更多
				more: 'more',
				dataList: [],
				typeValue: null,
				typeRange: [],
				communityValue: null,
				communityRange: [],
				queryForm: {
					pageNum: 1,
					pageSize: 12,
					type: null,
					community: null,
					name: null,
				}
			}
		},
		onShow: function() {
			// this.init();
		},
		async mounted() {			
			this.getMerchantList();
			await this.getDicts();
		},
		methods: {
			getTitle(merchant){
				return merchant.name;
			},
			async getDicts() {
				const resp_type = await dictApi.getDict('community_merchant_type');
				if (resp_type.code == 200) 
					this.typeRange = resp_type.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));

				const resp_community = await dictApi.getDict('community_merchant_belongs');
				if (resp_community.code == 200) 
					this.communityRange = resp_community.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
			},
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/merchant/info?id=${e.merchantId}`})
			},
			// 搜索函数
			async getMerchantList() {
				this.reset();
				this.more = 'loading';

				const queryParams = {};
				for (const key in this.queryForm) {
					if (this.queryForm[key] !== null 
						&& this.queryForm[key] !== undefined
						&& this.queryForm[key] !== '') {
						queryParams[key] = this.queryForm[key];
					}
				}

				const resp = await merchantApi.getMerchantList({...queryParams});
				this.dataList.push(...resp.data.map(e => {return {...e}}))
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(resp.total / this.size) ? 'noMore' : 'more';
			},
			// 搜索函数
			async handleSearch() {
				await this.getMerchantList();
			},
			async handleReset() {
				this.typeValue = null;
				this.communityValue = null;
				this.searchVal = null;
				
				await this.getMerchantList();
			},
			async changeType(e) {				
				// const resp = await shopApi.listBuildingByDistrict(e);
				// console.log(resp);
				console.log("e:", e);
		    },
			async changeCommunity(e) {
				console.log("e:", e);
		    },
			reset() {
				this.dataList.length = 0;

				this.queryForm.pageNum = 1;
				this.queryForm.pageSize= 12;
				this.queryForm.type = this.typeValue;
				this.queryForm.community= this.communityValue;
				this.queryForm.name = this.searchVal;
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getMerchantList();
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #fff;
	}
	.top {
		width: 100%;
		z-index: 999;
		background-color: #fff;
		/* overflow: hidden; */
	}
	.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;
	}
	.list {
		display: block;
	}
</style>