waterDelivery/pages/user/admin/ktadmin.vue

<template>
	<view class="content padding-t-30">
		<!-- 空白页 -->
		<!-- #ifdef H5 -->
		<empty src="../../../static/error/emptyOrder.png"
			v-if="searchData.loaded === true && searchData.list.length === 0"></empty>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<empty src="../../static/error/emptyOrder.png"
			v-if="searchData.loaded === true && searchData.list.length === 0"></empty>
		<!-- #endif -->
		<view class="user-item flex" v-for="(item,index) in searchData.list">
			<image :src="item.avatar" mode="scaleToFill" class="item-logo"></image>
			<view class="item-info">
				<view class="info-name clamp padding-b-10">
					{{item.nickname}} {{item.phone}}
				</view>
				<view class="info padding-b-10">
					椒江区东海大道400号
				</view>
				<view class="info padding-b-10">
					空桶型号：小瓶330ML
				</view>
				<view class="info-info flex">
					<view>
						押桶：<text>0</text>
					</view>
					<view>
						押金：<text>0</text>元
					</view>
					<view>
						借桶：<text>0</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="searchData.loadingType"></uni-load-more>
	</view>
</template>
<script>
	import {
		certificate,
	} from '@/api/water.js';
	export default {
		data() {
			return {
				keyword: '', //搜索关键字
				searchData: {
					page: 1,
					limit: 10,
					list: [],
					loadingType: 'more',
					loaded: false,
				}
			};
		},
		onLoad(opt) {
			this.getlist()
		},
		onShow() {

		},
		// #ifndef MP
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.reLoadSearch();
			}
		},
		// 点击键盘搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			this.reLoadSearch();
		},
		// 搜索栏内容变化事件
		onNavigationBarSearchInputChanged(e) {
			this.keyword = e.text;
		},
		// #endif
		onReady(res) {
			var that = this;
		},
		onReachBottom() {
			this.getlist();
		},
		methods: {
			// 搜索
			reLoadSearch() {
				this.searchData = {
					page: 1,
					limit: 10,
					list: [],
					loadingType: 'more',
					loaded: false
				};
				this.getlist()
			},
			// 载入数据
			getlist() {
				//这里是将订单挂载到tab列表下
				let navItem = this.searchData;
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';

				certificate({
						page: navItem.page,
						limit: navItem.limit,
						keyword: this.keyword
					})
					.then(({
						data
					}) => {
						let arr = data.map(e => {
							return e;
						});
						navItem.list = navItem.list.concat(arr);
						// console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == data.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						navItem.loaded = true;
					})
					.catch(e => {
						console.log(e);
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.user-item {
		padding: 30rpx;
		background-color: #fff;
		margin: 0 30rpx;
		margin-bottom: 15rpx;
		border-radius: 30rpx;

		.item-logo {
			align-self: flex-start;
			width: 115rpx;
			height: 115rpx;
			border-radius: 50%;
			background-color: #eee;
			flex-shrink: 0;
			margin-right: 24rpx;
		}

		.item-info {
			flex-grow: 1;
			height: 100%;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			color: $font-color-base;

			.info-name {
				font-size: $font-lg;
				font-weight: bold;
			}

			.info {
				font-size: $font-base;
				font-weight: 500;
				color: $font-color-light;
			}

			.info-info {
				width: 100%;
				font-size: $font-base;
				font-weight: bold;

				text {
					color: $color-red;
				}
			}

		}
	}
</style>