bonus-checkVerify-app/pages/work/index.vue

<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
		<view class="top-view">
			<view class="header">
				<text class="header-text">历史记录</text>
			</view>
		</view> 
		<view class="center-box">
			<view class="tag-view">
				<view class="tag-view-item" @click="tagIndex=1" :class="tagIndex==1?'active':''">定值单解析记录</view>
				<view class="tag-view-item" @click="tagIndex=2" :class="tagIndex==2?'active':''">保护装置识别记录</view>
			</view>
			<view class="main-box">  
					<scroll-view v-if="tagIndex==1" style="width: 100%;height: 72vh;" @scrolltolower="onScrollTolower" scroll-y="true">
						<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="goToDetail(item)"> 
							<view style="width: 16%;height: 100%;display: flex;align-items: center;">
								<image src="/static/images/index/icon3.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
							</view>
							<view style="width: 84%;height: 100%;padding-top: 10rpx;">
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
									<view style="font-weight: 600;width: 80%;">{{item.protectionName}}</view>
									<view style="font-size: 20rpx;color: #333333;width: 20%;">已完成解析</view> 
								</view>
								<view style="color: #333333;font-size: 20rpx;">{{item.updateTime}}</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view v-if="tagIndex==2" style="width: 100%;height: 72vh;" @scrolltolower="onScrollTolower2" scroll-y="true">
						<view class="record-item" v-for="(item, index) in recordList2" :key="index" @click="goToCheckDetail(item)"> 
							<view style="width: 20%;height: 100%;display: flex;align-items: center;"> 
								<image src="/static/images/index/icon4.png" style="width: 80rpx;height: 80rpx;" mode="aspectFit"></image>
							</view>
							<view style="width: 84%;height: 100%;padding-top: 10rpx;">
								<view style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 20rpx;">
									<view style="font-weight: 600;width: 80%;">{{item.protectionName}}</view>
									<view style="font-size: 20rpx;color: #333333;width: 20%;"></view> 
								</view>
								<view style="color: #333333;font-size: 20rpx;">{{item.updateTime}}</view>
							</view>
						</view>
					</scroll-view>
			</view>
		</view> 
</template>

<script>

import { protectionOrderPageAPI,protectionCheckOrderPageAPI } from '@/api/protection/index.js'
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
		tagIndex:1,
		pageNum: 1,
		pageSize: 10,
		total: 0,
		recordList:[], 
		pageNum2: 1,
		pageSize2: 10,
		total2: 0,
		recordList2:[
			{
				recordName:"220kV拂晓变电站定值单",
				recordTime:"2025-08-01 14:00",
				recordType:1,
				status:1
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:1
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:2
			},
			{
				recordName:"220kV拂晓变电站定值单",
				recordTime:"2025-08-02 14:00",
				recordType:1,
				status:2
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:1
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:2
			},
			{
				recordName:"220kV拂晓变电站定值单",
				recordTime:"2025-08-02 14:00",
				recordType:1,
				status:2
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:1
			},
			{
				recordName:"主变保护装置",
				recordTime:"2025-08-01 14:00",
				recordType:2,
				status:2
			}
		], 
    }
  },
  onShow() {
  	this.getList()
  	this.getList2()
  },
  onLoad() {
	  
  },
  onUnload() { 
  },
  methods: {     
		// 翻页
		onScrollTolower(){
			console.log(this.recordList.length)
			if(this.total>this.recordList.length){
				this.pageNum++
				this.getList()
			}
		},
		//获取列表
		async getList() {
			console.log('获取列表',)
			let params = { 
				pageNum: this.pageNum,
				pageSize: this.pageSize, 
			} 
			try {
				const res = await protectionOrderPageAPI(params)
				console.log('?? ~ getList ~ res:', res)
				this.total = Number(res.total); 
				if(this.pageNum==1){
					this.recordList = res.rows
				}else{
					this.recordList.push(...res.rows)
				} 
			} catch (error) {
				console.log(error)
			}
		}, 
		// 翻页
		onScrollTolower2(){
			console.log(this.recordList.length)
			if(this.total>this.recordList.length){
				this.pageNum++
				this.getList()
			}
		},
		//获取列表
		async getList2() {
			console.log('获取列表',)
			let params = { 
				pageNum: this.pageNum2,
				pageSize: this.pageSize2, 
			} 
			try {
				const res = await protectionCheckOrderPageAPI(params)
				console.log('?? ~ getList ~ res:', res)
				this.total2 = Number(res.total); 
				if(this.pageNum2==1){
					this.recordList2 = res.rows
				}else{
					this.recordList2.push(...res.rows)
				} 
			} catch (error) {
				console.log(error)
			}
		}, 
		
		goToDetail(item) {
		 //跳转到详情页面
		  uni.navigateTo({
			url: `/pages/work/orderDetails?params=${JSON.stringify(item)}`
		  })
		},
		goToCheckDetail(item) { 
		 //跳转到详情页面
		  uni.navigateTo({
			url: `/pages/work/orderCheckDetails?params=${JSON.stringify(item)}`
			// url: `/pages/work/orderCheckDetails?params=${JSON.stringify(item)}`
		  })
		},
	},
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fafcff;
  height: 100%;
}
view {
  font-size: 28rpx;
  line-height: inherit;
}
/* #endif */
 .top-view{
 	width: 100%;
 	height: 20vh;
 	background: linear-gradient( 180deg, #3888FF 0%, rgba(56,136,255,0) 100%);
	position: relative;
 }

.header {
  padding: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  padding-top: 5vh;

  .header-text {
    font-size: 38rpx;
    font-weight: 600;
    color: #fff;
  }
} 

.center-box{
	// margin-top: 30rpx;
	width: 100%; 
	height: 85vh;
	background: rgba(255,255,255,0.3);
	opacity: 0.8;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	border: 1px solid #fff;
	margin-top: -10vh;
	padding: 20rpx 20rpx; 
	padding-top: 60rpx;
	z-index: 999999;   
	
	.tag-view{
		width: 96%;
		height: auto;
		margin: 0 auto; 
		display: flex;
		margin-bottom: 2vh;
	}
	.tag-view-item{
		width: auto;
		height: 100%;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 40rpx;
		padding-bottom: 10rpx;
	}
	.active{
		border-bottom: 2px solid #3888FF;
		color: #000;
	}
	.main-box{
		width: 96%;
		height: auto;
		margin: 0 auto;
	} 
	.record-item{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center; 
		border-bottom: 1px solid #eee;
	}
}
</style>