pinfen/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" v-for="(item,index) in searchData.list">
			<view class="flex">
				<image :src="item.user.avatar" mode="scaleToFill" class="item-logo"></image>
				<view class="item-info">
					<view class="info-name clamp padding-b-10">
						{{item.address.real_name}} {{item.address.phone}}
					</view>
					<view class="info padding-b-10">
						{{item.address.locate_address}}
					</view>
					<view class="info padding-b-10">
						空桶型号：{{item.product.keyword}}
					</view>
				</view>
			</view>
			<view class="info-info flex">
				<view>
					持桶：<text class="font-color-red">{{item.hold_num}}</text>
				</view>
				<view>
					押桶：<text class="font-color-red">{{item.pledge_num}}</text>
				</view>
				<view>
					借桶：<text class="font-color-red">{{item.borrow_num}}</text>
				</view>
				<view class="btn" @click="out(item)">
					回收桶
				</view>
			</view>
		</view>
		<uni-load-more :status="searchData.loadingType"></uni-load-more>
	</view>
</template>
<script>
	import {
		pledge_recovery,
		admin_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: {
			// 空桶回收
			out(item) {
				const that = this;
				uni.showModal({
					title: '桶回收',
					placeholderText: '请输入回收数量',
					editable: true,
					cancelText: '关闭',
					confirmText: '回收',
					success: res => {
						if (res.confirm) {
							if (res.content.search(/^\d*$/) < 0) {
								uni.showModal({
									title: '错误',
									content: '请输入数字',
									showCancel: false,
								});
								return
							}
							pledge_recovery({
								id:item.id,
								num: res.content,
							}).then(() => {
								uni.showToast({
									title: '回收成功'
								})
								that.reLoadSearch();
							}).catch(e => {
								console.log(e);
							});
						}
					},
				});

			},
			// 搜索
			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';

				admin_certificate({
						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 {
		padding: 30rpx;
		background-color: #fff;
		margin: 0 30rpx;
		margin-bottom: 15rpx;
		border-radius: 30rpx;

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

			.btn {
				background: $bg-gradual;
				color: #fff;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}

		.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;
			}
		}
	}
</style>