rongtong_301_app/report/list.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="topbar">
		</view>
		<!-- #endif -->
		<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">
				<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 @scroll="scroll" :refresher-enabled="scroll_refresher_enabled"
			:style="{paddingBottom: current == 1 ? '10px' : '10px'}" scroll-y class="scroll-box mainCont"
			@scrolltolower="handleLoadMore" :refresher-triggered="triggered" :refresher-threshold="100"
			refresher-background="white" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="card" @click="goInfo(item.id)" v-for="(item, index) in tableList" :key="index">
				<view class="top">
					<view class="left">{{ item.troubleCode }}</view>
					<view class="right" v-show="current == 0" style="color: #33CC00">待处理</view>
					<view class="right" v-show="current == 1" style="color: #33CC00;">处理中</view>
					<view class="right" v-show="current == 2" style="color: #CCCCCC">已关闭</view>
				</view>
				<view class="bottom">
					<view>隐患位置：{{ item.location }}</view>
					<view>内容描述：{{ item.description }}</view>
					<view>提交时间：{{ item.createDate }}</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 {
				isIphone: false,
				current: 0,
				tabList: [{
					name: '待处理'
				}, {
					name: '处理中'
				}, {
					name: '已关闭'
				}],
				scroll_refresher_enabled: true,
				pageIndex: 1,
				triggered: false,
				isOver: false,
				keyword: "",
				tableList: [],
				loading: false,
				filterShow: 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('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					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.getTabNum();
			this.getTableList();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			tabChange(index) {
				console.log(123123)
				this.current = index;
				this.onRefresh();
			},
			scroll(e) {
				if (e.detail.scrollTop === 0) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			clearSearch() {
				this.keyword = "";
			},
			getTabNum() {
				let postData = {
					endTime: this.time + ' 23:59:59',
					locations: this.keyword,
					pageIndex: this.pageIndex,
					pageSize: 10,
					startTime: this.time + ' 00:00:00',
					troubleState: this.current + 1,
					// userId: 0
				}
				NET.request(API.htroubleCount, postData, 'POST').then(res => {
					this.tabList[0].name = `待处理(${res.data.filter(a => a.key == 1)[0].count})`
					this.tabList[1].name = `处理中(${res.data.filter(a => a.key == 2)[0].count})`
					this.tabList[2].name = `已完成(${res.data.filter(a => a.key == 3)[0].count})`
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			},
			getTableList() {
				if (this.loading || this.isOver) {
					return false;
				}
				this.loading = true;
				let postData = {
					endTime: this.time + ' 23:59:59',
					locations: this.keyword,
					pageIndex: this.pageIndex,
					pageSize: 10,
					startTime: this.time + ' 00:00:00',
					troubleState: this.current + 1,
					// userId: 0
				}
				NET.request(API.htroubleList, 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()
				this.getTabNum()
			},
			//  重置下拉刷新状态
			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: `/report/infor?id=${id}`
				});
			},
		}
	}
</script>

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

	.mainCont {
		height: calc(100% - 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>