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="formData.name" 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="formData.type" :localdata="typeOptions" @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="formData.community" :localdata="communityOptions" @change="changeCommunity">社区</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=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 {
				typeOptions: [],
				communityOptions: [],
				formData: {
					pageNum: 0,
					pageSize: 20,
					type: null,
					community: null,
					name: null,
				},				
				resultList: [],
				more: 'more'			
			}
		},
		onShow: function() {
			// this.init();
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getMerchantList();
			}
		},		
		async mounted() {
			await this.getDicts();
			await this.getMerchantList();			
		},
		methods: {
			async getDicts() {
				const resp_type = await dictApi.getDict('community_merchant_type');
				if (resp_type.code == 200) 
					this.typeOptions = 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.communityOptions = resp_community.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
			},
			// 搜索函数
			async getMerchantList() {
				this.more = 'loading';

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

				this.updateMoreStatus(resp.total);
			},
			// 搜索函数
			async handleSearch() {
				this.resultList = [];				
				this.formData.pageNum = 0;	
				
				await this.getMerchantList();
			},
			async handleReset() {
				this.resultList = [];
				
				this.formData.pageNum = 0;				
				this.formData.name = null;				
				this.formData.type = null;
				this.formData.community = null;

				await this.getMerchantList();
			},
			async changeType(e) {
				this.formData.type = e;
		    },
			async changeCommunity(e) {
				this.formData.community = e;
		    },
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/merchant/info?id=${e.merchantId}`})
			},			
			getTitle(merchant){
				return merchant.name;
			},
			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; */
	}
	.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>