rongtong_301_app/collection/list2.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<view class="status_bar">
			<view class="left" @click="goBack"><u-icon name="arrow-left"></u-icon>返回</view>
			<span style="font-size: 36rpx;">批次列表</span>
			<view class="right"></view>
		</view>
		<scroll-view :style="{paddingBottom: '10px'}" scroll-y class="scroll-box mainCont"
			@scrolltolower="handleLoadMore" @scroll="scroll" :refresher-enabled="scroll_refresher_enabled"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="pcTop" v-show="tableList.length">{{ text }}<span style="float: right">{{ weight }}kg</span>
			</view>
			<view class="card" @click="goInfo(item.packageId)" v-for="(item, index) in tableList" :key="index">
				<view class="top">
					<view class="left">{{ item.packCode }}</view>
				</view>
				<view class="bottom">
					<view>科&emsp;&emsp;室：{{ item.positionName }}<span
							style="float: right">{{ item.packWeight }}kg</span></view>
					<view>医废分类：{{ item.rubbishCategoryStr }}</view>
					<view>打&ensp;包&ensp;人：{{ item.createUserName }}<span
							style="float: right">{{ item.createTime }}</span></view>
				</view>
			</view>
			<view style="margin-top: 100px;text-align: center;" v-show="!tableList.length">暂无数据</view>
		</scroll-view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				triggered: false,
				isOver: false,
				tableList: [],
				pageIndex: 1,
				scroll_refresher_enabled: true,
				loading: false,
				id: "",
				isIphone: false,
				weight: "",
				text: "",
			}
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			this.id = options.id
			this.text = options.text
			this.weight = options.weight
			this.onRefresh()
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					0].clientHeight - 45 + 'px'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			getTableList() {
				if (this.loading || this.isOver) {
					return false;
				}
				this.loading = true;
				let postData = {
					pageIndex: this.pageIndex,
					pageSize: 10,
					batchId: this.id
				}
				NET.request(API.getPackageListByBatchId, postData, 'POST').then(res => {
					this.triggered = false;
					this.loading = false;
					if (res.data.records.length < 10) {
						this.isOver = true
					}
					for (let i in res.data.records) {
						this.tableList.push(res.data.records[i])
					}
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			},
			scroll(e) {
				if (e.detail.scrollTop === 0) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			//  下拉刷新
			onRefresh() {
				this.triggered = true
				this.isOver = false
				this.pageIndex = 1
				this.tableList = []
				this.getTableList()
			},
			//  重置下拉刷新状态
			onRestore() {
				this.triggered = 'restore'
				this.triggered = false
			},
			//获取更多数据
			handleLoadMore() {
				if (this.isOver) {

				} else if (this.loading) {

				} else {
					this.pageIndex++;
					this.getTableList()
				}
			},
			goInfo(id) {
				uni.navigateTo({
					url: `/collection/infor2?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.mainCont {
		height: calc(100% - 80rpx);
		padding-bottom: 60px;
		overflow-y: scroll;
	}

	.pcTop {
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 20px;
		line-height: 20px;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			height: 20px;
			top: 0;
			left: 0;
			width: 2px;
			background-color: #6aa0f7;
		}
	}

	.bottomButtons {
		box-shadow: 0px -5px 5px #d0cece;
		position: fixed;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 40px;
		line-height: 40px;
		bottom: 0;
		left: 0;

		view {
			width: 50%;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>