gas-cylinder-app/pages/information/recipient.vue

<template>
	<!-- 选择接收人 -->
	<view>
		<u-navbar title="选择接收人" autoBack placeholder></u-navbar>
		<u-sticky :offset-top="navbarHeight()">
			<view class="card_search_head">
				<u-search v-model="cylinderNumber" shape="square" :showAction="false" placeholder="请输入用户名称"
					borderColor="#e4e7ed" bgColor="#fff" @change="quickSearch"></u-search>
			</view>
		</u-sticky>
		<view class="card_recipient" v-if="userData.length > 0">
			<view class="card_user_item frame" v-for="(item,index) in userData" :key="index"
				@click="selectRecipient(item)">
				<u-icon name="account" size="28"></u-icon>
				<view class="title_user">{{item.provUser.name}}</view>
			</view>
		</view>
		<view style="margin-top: 30%;" v-else>
			<u-empty mode="list" text="暂无用户"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopID: '',
				shopName: '',
				flowId: '',
				flowName: '',
				cylinderNumber: '',
				userData: [],
				Pagination: {
					PageIndex: 1,
					PageSize: 20,
					Total: 0,
				},
				loadingMore: true,
			}
		},
		onReachBottom() {
			if (!this.loadingMore) {
				this.getList()
			}
		},
		onLoad(value) {
			this.shopID = value.shopID
			this.shopName = value.shopName
			this.flowId = value.flowId
			this.flowName = value.flowName
			this.getList()
		},
		methods: {
			getList() {
				this.loadingMore = true
				this.$api.get('/api/sys-user/opt-type', {
					optType: this.flowId,
					storeId: this.shopID,
					name: this.cylinderNumber,
					page: this.Pagination.PageIndex,
					pageSize: this.Pagination.PageSize,
				}).then(res => {
					if (res.code == 200) {
						this.Pagination.Total = res.data.count
						const data = res.data.list
						if (this.loadingMore == true && data) {
							this.userData = this.userData.concat(data);
						}
						if (data.length < this.Pagination.PageSize) {
							this.loadingMore = true
						} else {
							this.loadingMore = false
							this.Pagination.PageIndex++
						}
					}
				})
			},
			quickSearch() {
				this.Pagination.PageIndex = 1
				this.loadingMore = true
				this.userData = []
				this.getList()
			},
			// 选择接收人
			selectRecipient(value) {
				let arr = {
					name: value.provUser.name,
					userId: value.id,
					shopID: this.shopID,
					shopName: this.shopName,
					flowId: this.flowId,
					flowName: this.flowName,
				}
				uni.setStorageSync('returnData', JSON.stringify(arr));
				uni.navigateBack({
					delta: 3
				});
			},
			navbarHeight() {
				let systemInfo = uni.getSystemInfoSync();
				let topHeight = 0
				// #ifdef APP-PLUS
				topHeight = 47 + systemInfo.statusBarHeight;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 47 : 48;
				topHeight = height + systemInfo.statusBarHeight
				// #endif
				/* 最后一步将px转为rpx */
				return topHeight * (375 / systemInfo.windowWidth)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card_recipient {
		display: flex;
		flex-direction: column;
	}

	.card_user_item {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.title_user {
		margin-left: 10rpx;
		font-size: 30rpx;
	}
</style>