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="searchVal" 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="items" placeholder="商铺位置" popup-title="选择商铺位置" @change="onchange" @nodeclick="onnodeclick"></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="statusValue" :localdata="statusRange" @change="changeStatus">状态</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 shopApi from '../../api/shop.js';
	import { BASE_URL } from '../../env.js';	
	export default {
		data() {
			return {
				searchVal: '',
				// more = 加载前， loading = 加载中， noMore = 没有更多
				more: 'more',
				dataList: [],
				items: [{
				          text: "一年级",
				          value: "1-0",
				          children: [
				            {
				              text: "1.1班",
				              value: "1-1"
				            },
				            {
				              text: "1.2班",
				              value: "1-2"
				            }
				          ]
				        },
				        {
				          text: "二年级",
				          value: "2-0"
				        },
				        {
				          text: "三年级",
				          value: "3-0"
				        }],
				queryForm: {
					pageNum: 1,
					pageSize: 12,
					district: null,
					building: null,
					floor: null,
					status: null,
					name: null,
				}
			}
		},
		onShow: function() {
			// this.init();
		},
		async mounted() {			
			this.getShopList();
			await this.getDicts();
		},
		methods: {
			getTitle(shop){
				const title = shop.district
							+ " 楼栋:" + shop.building
							+ " 楼层:" + shop.floor
							+ " 铺位号:" + shop.number;
							+ "商户:" + shop.name;
							+ "状态:" + shop.status;
				return title;
			},
			async getDicts() {
				const resp_district = await dictApi.getDict('che_district');
				if (resp_district.code == 200) 
					this.districtRange = resp_district.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));

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

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

				const resp = await shopApi.getShopList({...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.getShopList();
			},
			async changeDistrict(e) {
				this.buildingValue = null;
				this.buildingRange.length = 0;
				this.districtValue = e;
				const resp_building = await shopApi.listBuildingByDistrict({district: e});
				if (resp_building.code == 200) 
					this.buildingRange = resp_building.data.map(l => ({ ...l, value: l, text: l}));
		    },
			changeBuidling(e) {
				this.buildingValue = e;				
				console.log("e:", e);
		    },
			changeStatus(e) {
				console.log("e:", e);
		    },
			reset() {
				this.dataList.length = 0;

				this.queryForm.pageNum = 1;
				this.queryForm.pageSize= 12;
				this.queryForm.district = this.districtValue;
				this.queryForm.status = this.statusValue;
				this.queryForm.building = this.buildingValue;
				this.queryForm.floor = this.floor;
				this.queryForm.name = this.searchVal;
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.getShopList();
			}
		}
	}
</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;
	}
	.list {
		display: block;
	}
</style>