sh-app/pipe/precast/list.vue

<template>
	<view class="page-list">
		<!-- 标签页 -->
		<u-tabs
			:list="tabs"
			:current="activeTab"
			active-color="#3577FF"
			inactive-color="#666"
			:border-bottom="false"
			@change="onTabChange"
		></u-tabs>

		<!-- 预制组件列表 -->
		<scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore" refresher-enabled="true"
			:refresher-triggered="refreshing" @refresh="handleRefresh">
			<view class="list-wrap">
				<view v-for="(item, index) in list" :key="index" class="card-item" @click="goDetail(item)">
					<view class="card-header">
						<text class="card-title">{{ item.DrawingName || '--' }}</text>
						<text class="card-tag" :class="'status-' + item.State">
							{{ getStatus(item.State) }}
						</text>
					</view>
					<view class="card-body">
						<view class="card-row">
							<text class="row-label">组件编号</text>
							<text class="row-value">{{ item.PipelineComponentCode || '--' }}</text>
						</view>
						<view class="card-row">
							<text class="row-label">物流箱号</text>
							<text class="row-value">{{ item.BoxNumber || '--' }}</text>
						</view>
						<view class="card-row">
							<text class="row-label">计划安装日期</text>
							<text class="row-value">{{ formatDate(item.PlanStartDate) || '--' }}</text>
						</view>
						<view class="card-row">
							<text class="row-label">验收人</text>
							<text class="row-value">{{ item.ReceiveMan || '--' }}</text>
						</view>
						<view class="card-row">
							<text class="row-label">验收日期</text>
							<text class="row-value">{{ formatDate(item.ReceiveDate) || '--' }}</text>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<u-empty v-if="!loading && list.length === 0" mode="list" text="暂无数据"></u-empty>

				<!-- 加载提示 -->
				<view v-if="loading && list.length > 0" class="loading-more">
					<u-loading mode="circle" size="32"></u-loading>
					<text>加载中...</text>
				</view>

				<!-- 没有更多 -->
				<view v-if="!loading && isFinished && list.length > 0" class="no-more">
					<text>— 没有更多了 —</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { useUserStore } from '@/store'
	import { storeToRefs } from 'pinia'
    import {reqPipelineComponentList} from '@/api/hj'

	const userStore = useUserStore()
	const { currentProject } = storeToRefs(userStore)

	// 标签页配置（u-tabs格式）
	const tabs = ref([
		{ name: '未验收', state: 0 },
		{ name: '已验收', state: 1 },
		{ name: '已出库', state: 2 },
		{ name: '待整改', state: -2 },
		{ name: '已整改', state: -1 }
	])

	// 页面状态
	const activeTab = ref(0)
	const list = ref([])
	const loading = ref(false)
	const refreshing = ref(false)
	const isFinished = ref(false)
	const pageIndex = ref(1)
	const pageSize = ref(10)

	// 获取状态值
	const getState = (index) => {
		if (index === 3) return -2
		if (index === 4) return -1
		return index
	}

	// 状态映射
	const getStatus = (val) => {
		const map = {
			'0': '未验收',
			'1': '已验收',
			'2': '已出库',
			'-2': '待整改',
			'-1': '已整改'
		}
		return map[String(val)] || '--'
	}



	// 切换标签
	const onTabChange = (index) => {
		activeTab.value = index
		handleRefresh()
	}

	// 获取列表
	const getList = async () => {
		if (loading.value || (!refreshing.value && isFinished.value)) return

		loading.value = true

		try {
			const params = {
				projectId: currentProject.value?.ProjectId || '',
				pageindex: pageIndex.value,
				pagesize: pageSize.value,
				state: getState(activeTab.value)
			}

			const res = await reqPipelineComponentList(params)

			if (res.code === 1) {
				const dataList = res.data?.getDataList || []
				if (dataList.length < pageSize.value) {
					isFinished.value = true
				}

				if (refreshing.value) {
					list.value = dataList
				} else {
					list.value = [...list.value, ...dataList]
				}
			}
		} catch (error) {
			console.error('获取预制组件列表失败:', error)
			uni.showToast({
				title: '加载失败，请重试',
				icon: 'none'
			})
		} finally {
			loading.value = false
			refreshing.value = false
		}
	}

	// 刷新
	const handleRefresh = () => {
		pageIndex.value = 1
		isFinished.value = false
		list.value = []
		getList()
	}

	// 加载更多
	const loadMore = () => {
		if (!loading.value && !isFinished.value) {
			pageIndex.value++
			getList()
		}
	}

	// 格式化日期
	const formatDate = (date) => {
		if (!date) return ''
		return date
	}

	// 跳转到详情
	const goDetail = (item) => {
		uni.navigateTo({
			url: `/pipe/precast/detail?id=${item.PipelineComponentId}&from=1`
		})
	}

	// 生命周期
	onShow(() => {
		handleRefresh()
	})
</script>

<style lang="scss" scoped>
	.page-list {
		min-height: 100vh;
		background: #f5f6f8;
	}

	.list-scroll {
		height: calc(100vh - 180rpx);
	}

	.list-wrap {
		padding: 24rpx;
	}

	.card-tag.status--2 {
		background: rgba(255, 82, 82, 0.1);
		color: #ff5252;
	}

	.card-tag.status--1 {
		background: rgba(255, 167, 38, 0.1);
		color: #ffa726;
	}

	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		text {
			font-size: 26rpx;
			color: #999;
			margin-left: 12rpx;
		}
	}

	.no-more {
		text-align: center;
		padding: 30rpx;
		text {
			font-size: 24rpx;
			color: #ccc;
		}
	}
</style>