FE-lab-xcx/pages_hazardousWasteRecycling/views/historicalRecords/index.vue

<!-- 历史记录 -->
<template>
	<view class="historicalRecords">
		<view class="picker-box">
			<picker @change="subChange" :value="subIndex" :range="subList" :range-key="'subName'">
				<view class="picker-p" :class="queryParams.subId?'check-picker-p':''">{{queryParams.subId?queryParams.subName:'全部实验室'}}</view>
			</picker>
		</view>
		<view class="check-button-max-box">
			<view @click="checkButton(1)" :class="typeIndex == 1?'check-p':''">已报备待回收</view>
			<view @click="checkButton(2)" :class="typeIndex == 2?'check-p':''">已回收</view>
			<view @click="checkButton(3)" :class="typeIndex == 3?'check-p':''">超期未回收</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<view class="for-max-big-box" @click="goPage(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-title-p">报备单编号：{{item.listNewData1}}</view>
				<view class="for-text-p">报备实验室：{{item.listNewData2}}</view>
				<view class="for-text-p">上门回收日期：{{item.listNewData3}}</view>
				<view class="for-text-p">废物种类：{{item.listNewData4}}</view>
				<view class="for-text-p">报备人：{{item.listNewData5}}</view>
				<view class="for-text-p">报备时间：{{item.listNewData6}}</view>
				<view class="for-type-p" :class="item.listNewData0==1?'colorA':(item.listNewData0==2?'colorB':(item.listNewData0==3?'colorC':''))">{{item.listNewData0==1?'已报备待回收':(item.listNewData0==2?'已回收':(item.listNewData0==3?'超期未回收':''))}}</view>
				<view class="for-icon-p">》</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				subIndex:'',
				subList:[],
				subIndex:'',
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
					subId:"",
				},
				total: 0,
				dataList: [],
				typeIndex:1,
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			this.$set(this,'dataList',[
					{
						listNewData0:'1',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'1',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'2',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'2',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'3',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'3',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'1',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
					{
						listNewData0:'2',
						listNewData1:'HW202510400001',
						listNewData2:'植物营养实验室(A201)',
						listNewData3:'2025-11-05（星期四）',
						listNewData4:'4',
						listNewData5:'王二小（2020110010）',
						listNewData6:'2025-11-04 10:10:09',
					},
				]);
			
		},
		methods: {
			//详情跳转
			goPage(item){
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/historicalRecords/infoPage",
				});
			},
			//选项切换
			checkButton(type){
				if(this.typeIndex != type){
					this.$set(this,'typeIndex',type);
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取实验室列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				const {
					data
				} = await laboratoryAppletSubList(obj);
				if (data.code == 200) {
					if(self.queryParams.page == 1){
						this.$set(this, 'dataList', data.data.records);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.$set(this, 'dataList', [...this.dataList, ...data.data.records]);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.historicalRecords{
		height: 100%;
		display flex;
		flex-direction column;
		.picker-box{
			height:60rpx;
			width:700rpx;
			margin:20rpx 25rpx;
			background-color: #fff
			border:1rpx solid #dedede;
			border-radius:10rpx;
			.picker-p{
				padding:0 20rpx;
				color:#666;
				line-height:60rpx;
			}
			.check-picker-p{
				
			}
		}
		.check-button-max-box{
			display: flex;
			border-radius:10rpx;
			border:1rpx solid #fff;
			line-height:58rpx;
			height:60rpx;
			width:700rpx;
			margin:0 25rpx 20rpx;
			overflow: hidden;
			view{
				flex:1;
				text-align: center;
				background-color: #fff;
				color:#0183FA;
			}
			.check-p{
				background-color: #0183FA;
				color:#fff;
			}
		}
		.for-max-box{
			flex: 1;
			overflow-y scroll;
			padding-bottom:60rpx;
			.for-max-big-box{
				margin:0 25rpx 25rpx;
				background-color: #fff;
				border-radius:10rpx;
				border:1rpx solid #dedede;
				padding:20rpx;
				position: relative;
				.for-title-p{
					font-size:30rpx;
					font-weight:700;
					line-height:50rpx;
				}
				.for-text-p{
					font-size:30rpx;
					line-height:50rpx;
				}
				.for-type-p{
					position: absolute;
					top:24rpx;
					right:20rpx;
				}
				.for-icon-p{
					position: absolute;
					top:155rpx;
					right:20rpx;
					font-size:32rpx;
					color:#999;
				}
				.colorA{
					color:#0183FA;
				}
				.colorB{
					color:#00CD66;
				}
				.colorC{
					color:#FF6A6A;
				}
			}
		}
	}
</style>