rongtong_301_app/wasteCheck/list.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<view class="status_bar">
			<view class="left2" @click="goBack"><u-icon name="arrow-left"></u-icon>返回</view>
			<span style="font-size: 36rpx;">医废验收</span>
			<view class="right2">
				<span>
					<u-icon style="margin-right: 10px;" name="scan" color="#fff" size="35rpx"></u-icon>
				</span>
				<span @click="filterShow = true">筛选</span>
			</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>
		<view class="search_bar">
			<u-search @custom="clearSearch" @search="onRefresh" action-text="清除" placeholder="请输入收集姓名查询"
				v-model="keyword">
			</u-search>
		</view>
		<scroll-view id="editorBox" @scroll="scroll" :style="{paddingBottom: '10px'}" scroll-y
			class="scroll-box mainCont" @scrolltolower="handleLoadMore" :refresher-enabled="scroll_refresher_enabled"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="card" :id="'editor' + index" @click="goInfo(item.id)" v-for="(item, index) in tableList"
				:key="index">
				<view class="top">
					<view class="left">{{ item.batchName }}</view>
					<view class="right" v-show="current == 0" style="color: #1890FF">待验收</view>
					<view class="right" v-show="current == 1" style="color: #CCCCCC">已完成</view>
				</view>
				<view class="bottom">
					<view>重&emsp;&emsp;量：{{ item.checkWeight }}
						<span v-show="item.errorStatus == 2" style="color: #FF0000;float: right">待处理</span>
						<span v-show="item.errorStatus == 1" style="color: #00CC00;float: right">已处理</span>
					</view>
					<view>收&ensp;集&ensp;人：{{ item.checkUserName }}<span
							style="float: right">{{ item.collectDate }}</span></view>
					<view class="bButton" v-show="current == 0">
						<span @click.stop="doCollect()">验收</span>
					</view>
				</view>
			</view>
			<view style="margin-top: 100px;text-align: center;" v-show="!tableList.length">暂无数据</view>
		</scroll-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: '已完成'
				}],
				scroll_refresher_enabled: true,
				triggered: false,
				keyword: "",
				isOver: false,
				loading: false,
				loading1: false,
				pageIndex: 1,
				tableList: [],
				filterShow: false,
				isIphone: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				time: "",
			}
		},
		onShow() {
			console.log('showaaaaaaaa')
			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.onRefresh()
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			this.onRefresh()
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					0].clientHeight - 25 + 'px'
			}
		},
		methods: {
			goBack() {
				try {
					EbeiPlugins.onBackKeyDown();
				} catch (error) {}
			},
			tabChange(index) {
				this.current = index;
				this.onRefresh()
			},
			clearSearch() {
				this.keyword = "";
			},
			getNum() {
				if (this.loading1) {
					return false;
				}
				this.loading1 = true;
				let postData = {
					date: this.time,
					name: this.keyword,
				}
				NET.request(API.queryBatchStatus, postData).then(res => {
					this.loading1 = false;
					this.tabList[0].name = `待验收(${res.data.notCheck})`
					this.tabList[1].name = `已完成(${res.data.finished})`
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			},
			getTableList() {
				if (this.loading || this.isOver) {
					return false;
				}
				this.loading = true;
				let postData = {
					// date: '2021-06-24',
					date: this.time,
					pageIndex: this.pageIndex,
					pageSize: 10,
					type: this.current + 2,
					name: this.keyword,
				}
				NET.request(API.queryBatchByPage, postData).then(res => {
					this.loading = false;
					this.triggered = 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) {
				console.log(e)
				if (e.detail.scrollTop < 100) {
					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()
				this.getNum()
			},
			//  重置下拉刷新状态
			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)
			},
			doCollect() {},
			goInfo(id) {
				uni.navigateTo({
					url: `/wasteCheck/batchInfo?id=${id}`
				});
			},
		}
	}
</script>

<style lang="scss">
	.search_bar {
		padding: 0 10px;
		height: 100rpx;
		background: #fff;
		line-height: 100rpx;
	}

	.mainCont {
		height: calc(100vh - 80rpx - 80rpx - 100rpx);
		padding: 10px 0 10px 0;
		box-sizing: border-box;
	}

	.pcTop {
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 20px;
		line-height: 20px;
		margin: 0 auto;
		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;
		}
	}

	.filterCont {
		height: calc(100% - 80rpx);
		display: flex;
		justify-content: space-between;

		.left {
			height: 100%;
			overflow-y: auto;
			width: 35%;
			background-color: #fafafa;

			view {
				height: 40px;
				line-height: 40px;
				text-align: center;

				&.active {
					background-color: #fff;
				}
			}
		}

		.right {
			height: 100%;
			overflow-y: auto;
			width: 65%;

			view {
				width: calc(100% - 20px);
				margin: 0 auto;
				padding: 0 20px;
				height: 39px;
				line-height: 39px;
				border-bottom: 1px solid #f2f2f2;
			}
		}
	}

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