byte-sailing-storage-android/pages/store-manage/store-check/store-check.vue

<!-- 库存盘点 -->
<template>
	<view class="container-wrap">
		<uni-nav-bar title="库存盘点" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.back()">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view class="filter">
				<u-input 
				v-model="materialCode"
				:searchIcon="true" 
				:border="true" 
				placeholder="请输入物料名称或编码"
				@search="search"
				 />
			</view>
			<view class="content">
				<view>
					<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					 swiperWidth="750"></u-tabs-swiper>
				</view>
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100% - 80rpx);">
					<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore(index)">
							<view class="list">
								<view class="item" v-for="(item, index) in (index === 0? data1 : data2)" :key="index">
									<view class="row">
										<view class="col">
											<view class="label">物料编码：</view>
											<view class="value">{{ item.materialCode }}</view>
										</view>
										<view class="col">
											<view class="label">物料类型：</view>
											<view class="value">{{ item.materialType }}</view>
										</view>
									</view>
									<view class="row">
										<view class="col">
											<view class="label">库存数量：</view>
											<view class="value">{{ item.oldQuantity }}</view>
										</view>
										<view class="col">
											<view class="label">所在仓库：</view>
											<view class="value">{{ item.saveHouse }}</view>
										</view>
									</view>
									<view class="row">
										<view class="col">
											<view class="label">申购数量：</view>
											<view class="value">{{ item.quantity }}</view>
										</view>
										<view class="col">
											<view class="label">放置区域：</view>
											<view class="value">{{ item.saveArea }}</view>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore :status="index === 0? loadStatus1: loadStatus2" @loadmore="loadMore(index)" />
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="btn">
				<my-fixed-button :customClick="true" @click="scan" text="扫码盘点"></my-fixed-button>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	// #endif
	export default {
		data() {
			return {
				pageIndex1: 1,
				pageIndex2: 1,
				materialCode: '',
				data1: [],
				data2: [],
				loadStatus1: 'loadmore',
				loadStatus2: 'loadmore',
				form: {},
				isReading: false,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				list: [{
					name: '待盘点'
				}, {
					name: '已盘点'
				}]
			};
		},
		methods: {
			search() {
				console.log(this.swiperCurrent)
				if(this.swiperCurrent === 0) {
					this.pageIndex1 = 1
					this.data1 = []
					this.getList(0)
				} else {
					this.pageIndex2 = 1
					this.data2 = []
					this.getList(1)
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			loadMore(index) {
				if(index === 0) {
					this.pageIndex1++
				} else {
					this.pageIndex2++
				}
				this.getList(index)
			},
			/* 扫码盘点 */
			scan() {
				this.$utils.open('/pages/store-manage/store-check/store-check-scan')
			},
			getList(type) {
				this.$http.PeopleStorageCheckList({
					materialCode: this.materialCode,
					pageIndex: this['pageIndex' + (type + 1)],
					pageSize: this.pageSize,
					type
				}).then(res => {
					console.log(res)
					console.log(this.materialCode)
					if(res.code === 0) {
						console.log(type)
						this['data' + (type + 1)].push(...res.result.list)
						if(res.result.isLastPage) {
							this['loadStatus' + (type + 1)] = 'nomore'
						}else {
							this['loadStatus' + (type + 1)] = 'loadmore'
						}
					}
				})
			}
		},
		onLoad() {
			this.getList(0)
			this.getList(1)
			uni.$on('getlist', () => {
				this.getList(0)
				this.getList(1)
			})
		},
		onUnload() {
			uni.$off('getlist')
		}
	}
</script>

<style lang="scss" scoped>
.container-wrap {
	overflow: hidden;
	.container {
		height: calc(100vh - var(--status-bar-height) - 44px);
		overflow: auto;
		.filter {
			padding: 10rpx;
			height: 90rpx;
			background-color: #FFFFFF;
		}
		.content {
			padding: 10rpx;
			height: calc(100% - 170rpx);
			overflow: auto;		
			.list {
				margin-bottom: 10rpx;
				.item {
					padding: 20rpx;
					margin-bottom: 10rpx;
					background-color: #FFFFFF;
					border: 1rpx solid rgba(215, 215, 215, 1);
					border-radius: 10rpx;
					&:last-child {
						margin-bottom: 0;
					}
					.row {
						&.border {
							border-bottom: 1px solid rgba(215, 215, 215, 1);
						}
					}
				}
			}
		}
		.btn {
			height: 80rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
}
</style>