pinfen/pages/user/admin/useradmin.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 " v-for="(item,index) in searchData.list">
			<view class="user-info flex">
				<view class="flex-start flex-grow-true">
					<image class="image" :src="item.avatar" mode="scaleToFill"></image>
					<view class="clamp flex-grow-true padding-r-10">
						{{item.nickname}}
					</view>
				</view>
				<image @click="phone(item.phone)" class="phone" src="../../../static/icon/adminUserPhone.png"
					mode="scaleToFill"></image>
			</view>
			<view class="user-base font-size-sm padding-b-10">
				<view class="padding-b-10 padding-t-20">
					电话：{{item.phone}}
				</view>
				<view class="padding-b-10">
					地址：{{item.address.locate_address}}
				</view>
				<view class="padding-b-10">
					详细：{{item.address.detail}}
				</view>
			</view>
			<view class="btn-list flex font-size-sm clamp">
				<view class="btn flex-shrink-false">
					水票:{{item.certificate_num}}
				</view>
				<view class="btn flex-shrink-false clamp">
					持桶:{{item.hold_num}}
				</view>
				<view class="btn clamp">
					押金:{{+item.pledge_money}}
				</view>
			</view>
		</view>
		<uni-load-more :status="searchData.loadingType"></uni-load-more>
	</view>
</template>
<script>
	import {
		storeMember
	} from "@/api/water.js"
	export default {
		data() {
			return {
				keyword: '', //搜索关键字
				searchData: {
					page: 1,
					limit: 10,
					list: [],
					loadingType: 'more',
					loaded: false
				}
			};
		},
		onLoad(opt) {
			this.getlist()
		},
		onShow() {

		},
		onReady(res) {
			var that = this;
		},
		// #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
		onReachBottom() {
			this.getlist();
		},
		methods: {
			// 拨打电话
			phone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 搜索
			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';
				storeMember({
						page: navItem.page,
						limit: navItem.limit,
						key: this.keyword
					})
					.then(({
						data
					}) => {
						let arr = data.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 {
		align-items: flex-start;
		padding: 30rpx;
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 30rpx;
		margin-bottom: 15rpx;
		color: $font-color-light;

		.user-info {
			height: 72rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-base;

			.image {
				height: 72rpx;
				width: 72rpx;
				margin-right: 20rpx;
				background-color: #eee;
				border-radius: 50%;
			}

			.phone {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.btn-list {
			color: $font-color-light;
			text-align: center;
			line-height: 1;

			.btn {
				width: 34%;
				padding: 20rpx 0;
				font-weight: 500;
			}
			.btn:nth-child(2) {
				border-right: 1px solid $border-color-base;
				border-left: 1px solid $border-color-base;
			}
		}
	}
</style>