rongtong_301_app/wastePack/list.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" @click="filterShow = true">筛选</view>
		</view>
		<!-- <view class="status_tabs">
			<u-tabs bg-color="#5976ba" active-color="#fff" inactive-color="#fff" :list="tabList" :is-scroll="false"
				:current="current" @change="tabChange"></u-tabs>
		</view> -->
		<scroll-view :style="{paddingBottom: current == 0 ? '60px' : '10px'}" scroll-y class="scroll-box"
			@scrolltolower="handleLoadMore" @scroll="scroll" :refresher-enabled="scroll_refresher_enabled"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="card" v-for="(item, index) in tableList" :key="index">
				<view class="top">
					<view class="left">{{ item.packCode }}</view>
					<view class="right" style="color: #FF6600">待收集</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.provisionalName }}</view>
					<view>打包时间：{{ item.createTime }}</view>
				</view>
			</view>
			<view style="margin-top: 100px;text-align: center;" v-show="!tableList.length">暂无数据</view>
		</scroll-view>
		<view class="bottomButton" @click="toPackage" v-show="current == 0">
			<view>新增打包</view>
		</view>
		<u-picker :default-time="time" @confirm="fliterConfirm" @cancel="fliterCancel" mode="time" v-model="filterShow"
			:params="params">
		</u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				current: 0,
				tabList: [{
					name: '待收集'
				}, {
					name: '转运中'
				}, {
					name: '已完成'
				}],
				scroll_refresher_enabled: true,
				triggered: false,
				isOver: false,
				loading: false,
				pageIndex: 1,
				tableList: [],
				filterShow: false,
				isIphone: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				time: "",
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('scroll-box')[0].style.height = document.getElementsByClassName('scroll-box')[
					0].clientHeight - 25 + 'px'
			}
		},
		onShow() {
			let date = new Date;
			//获取年份
			let yy = date.getFullYear();
			//获取月份
			let mm = date.getMonth() + 1;
			//如果月份小于10 前面加0
			mm = (mm < 10 ? "0" + mm : mm);
			let dd = date.getDate();
			dd = (dd < 10 ? "0" + dd : dd);
			//返回日期 
			this.time = `${yy}-${mm}-${dd}`
			this.tabList[0].name = '待收集(0)'
			this.tabList[1].name = '转运中(0)'
			this.tabList[2].name = '已完成(0)'
			this.onRefresh();
		},
		methods: {
			goBack() {
				try {
					EbeiPlugins.onBackKeyDown();
				} catch (error) {}
			},
			toPackage() {
				uni.navigateTo({
					url: '/wastePack/package'
				});
			},
			tabChange(index) {
				this.current = index;
			},
			scroll(e) {
				if (e.detail.scrollTop <= 100) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			getTableList() {
				if (this.loading || this.isOver) {
					return false;
				}
				this.loading = true;
				let postData = {
					pageIndex: this.pageIndex,
					pageSize: 10,
					packState: 1,
					date: this.time,
				}
				NET.request(API.queryPackageList, 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',
					})
				})
			},
			//  下拉刷新
			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()
				}
			},
			fliterConfirm(val) {
				let time = `${val.year}-${val.month}-${val.day}`
				console.log(time)
				this.time = time
				this.onRefresh()
			},
			filterCancel(val) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		height: calc(100% - 80rpx);
		padding: 10px 0 60px 0;
		box-sizing: border-box;
	}

	/deep/ .uni-scroll-view-refresher {
		background-color: #f5f5f9 !important;
	}
</style>