hitap-chat/src/pages/investigation/indexOrigin.vue

<template>
	<view class="investigation">
		<!--  排查 -->
		<headerNavBar title="排查" :isBack="false"></headerNavBar>
		<view class="tabs">
			<view class="tab" @tap="switchTab(0)" :class="{active: currentTab === 0}">代办（{{ todoCount }}）</view>
			<view class="tab" @tap="switchTab(1)" :class="{active: currentTab === 1}">正在办理（{{ processingCount }}）</view>
			<view class="tab" @tap="switchTab(2)" :class="{active: currentTab === 2}">已完成（{{ completedCount }}）</view>
		</view>

		<view class="contentBox">
			<!-- 代办内容 -->
			<view class="uni-padding-wrap uni-common-mt">
				<view class="text" v-for="(item,index) in data" :key="item.id+index">
					<uni-list-item>
						<template v-slot:header>
							<view class="slot-box">
								<image class="imgleft" :src="item.imgurl" mode="widthFix"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="content">
								<text class="title">{{item.title}}</text>
								<view class="bottom">
									<text class="text">{{item.createTime}}</text>
									<text class="text">{{item.deptName}}</text>
								</view>
							</view>
						</template>
						<template v-slot:footer>
							<view class="right">
								<button class="btn" @click="handleDetail(item)" type="primary">排查</button>
							</view>
						</template>
					</uni-list-item>
				</view>
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			</view>
		</view>
		<!-- 	<view class="content" v-if="currentTab === 1">
			
		</view>
		<view class="content" v-if="currentTab === 2">
			
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 当前选中的 Tab，0: 代办, 1: 正在办理, 2: 已完成
				todoCount: 0, // 代办数量
				processingCount: 0, // 正在办理数量
				completedCount: 0, // 已完成数量
				data:window.PCRWList || [{
						id: 12121212,
						title: 'G228火炬路与S503岙东路',
						roadCode: 123,
						roadName: 'G228火炬路与S503岙东路',
						imgurl: '/static/imge.png',
						createTime: '2024-10-05',
						deptName: '支队级',
						sessionId: 12121212
					},
					{ //window.PCRWList ||
						id: 37020017407,
						title: '金水路与合川路事故多发点段',
						roadCode: 123,
						roadName: '金水路与合川路',
						imgurl: '/static/imge.png',
						createTime: '2024-10-11',
						deptName: '支队级',
						sessionId: 37020017404
					},
					{
						id: 37020017404,
						title: '金水路与合川路事故多发点段',
						roadCode: 123,
						roadName: '金水路与合川路',
						imgurl: '/static/imge.png',
						createTime: '2024-10-11',
						deptName: '支队级',
						sessionId: 37020017407
					}
				],
				loadMoreText: "加载中...",
				showLoadMore: false,
				max: 0,
				swiperList: [{
						imgurl: '/static/c1.png'
					},
					{
						imgurl: '/static/c2.png'
					},
					{
						imgurl: '/static/c3.png'
					},
					{
						imgurl: '/static/c4.png'
					}
				]
			}
		},
		onLoad() {
			this.initData();
		},
		onUnload() {
			this.max = 0,
				this.data = [],
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.max > 40) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			initData() {
				this.todoCount = 10;
				this.processingCount = 5;
				this.completedCount = 20;

			},
			setListData() {

			},
			// 跳转到详情页
			handleDetail(item) {
              this.$store.commit('setItemMessage',item)
				uni.navigateTo({
					url: `/pages/home/detail`
				})
			},
			switchTab(index) {
				this.currentTab = index;
			}

		}
	}
</script>

<style scoped lang="scss">
	.investigation {
		.tabs {
			display: flex;
			justify-content: space-around;
			height: 80rpx;

			.tab {
				color: #895b5e;
				width: 33.3%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ffffff;

				&.active {
					border-bottom: 1px solid #019df0;
					color: #895b5e;
					font-weight: 700
				}
			}
		}


		.imgleft {
			width: 80rpx;
			margin-right: 20rpx;
			max-height: 100%;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 32rpx;
				width: 100%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.bottom {
				display: flex;

				.text {
					margin-right: 20rpx;
				}
			}
		}

		.right {
			height: 100%;
			display: flex;
			align-items: center;
			margin-left: 10px;

			.btn {
				width: 120rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
			}
		}
	}
</style>