nongxiaoyu/pages/plots/list.vue

<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="back-button" @click="goBack">
				<text class="iconfont icon-back">&#xe60e;</text>
			</view>
			<text class="page-title">选择地块</text>
		</view>

		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input">
				<image src="@/static/icons/search.png" style="width: 40rpx; height: 40rpx; padding-right: 10rpx;"
					mode="widthFix" />
				<input type="text" v-model="searchKeyword" placeholder="搜索地块名称/编号/负责人/农场" confirm-type="search"
					@input="handleSearch" />
				<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">×</text>
			</view>
		</view>

		<!-- 当前选中地块 -->
		<view class="current-block">
			<view class="block-header">
				<view class="left">
					<text class="icon-tag">当前</text>
					<text class="title">当前地块</text>
				</view>
			</view>
			<view class="current-block-card">
				<view class="current-tag">当前</view>

				<view class="block-content">
					<view class="block-icon">
						<image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
					</view>

					<view class="block-info">
						<!-- 标题区域：显示地块名称 + 所属农场名称 -->
						<view class="block-name">{{ currentBlock.name }}</view>
						<view class="block-farm">{{ currentBlock.farmName }}</view>

						<!-- 次级信息区域：显示地块编号、负责人 -->
						<view class="block-meta">
							<text>编号：{{ currentBlock.code }}</text>
							<text class="separator">|</text>
							<text>负责人：{{ currentBlock.manager }}</text>
						</view>

						<!-- 已有信息：面积、类型、作物 -->
						<view class="block-details">
							<text>{{ currentBlock.area }}亩</text>
							<text class="separator">|</text>
							<text>{{ currentBlock.type }}</text>
							<text v-if="currentBlock.crop" class="separator">|</text>
							<text v-if="currentBlock.crop">{{ currentBlock.crop }}</text>
						</view>
					</view>
				</view>

				<view class="block-stats">
					<view class="stat-item">
						<image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
						<text>设备：{{ currentBlock.deviceCount }}</text>
					</view>
					<view class="stat-item">
						<image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit"></image>
						<text>在线：{{ currentBlock.onlineDevices }}</text>
					</view>
					<view class="stat-item" v-if="currentBlock.alerts > 0">
						<image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit"></image>
						<text class="alert-text">告警：{{ currentBlock.alerts }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 地块列表 -->
		<view class="block-list">
			<view class="block-header">
				<view class="left">
					<text class="icon-tag">列表</text>
					<text class="title">可选地块列表</text>
				</view>
				<text class="count">共{{ filteredBlocks.length }}个地块</text>
			</view>

			<!-- 加载骨架屏 -->
			<template v-if="isLoading">
				<view class="skeleton-container">
					<view class="skeleton-box" v-for="i in 3" :key="i">
						<view class="skeleton-header">
							<view class="skeleton-icon"></view>
							<view class="skeleton-info">
								<view class="skeleton-title"></view>
								<view class="skeleton-detail"></view>
							</view>
						</view>
						<view class="skeleton-stats"></view>
					</view>
				</view>
			</template>

			<!-- 空状态 -->
			<template v-else-if="filteredBlocks.length === 0">
				<view class="empty-state">
					<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
					<text class="empty-text">暂无可选地块</text>
					<text class="empty-subtext">请添加或关联地块后再试</text>
				</view>
			</template>

			<!-- 地块列表 -->
			<template v-else>
				<view class="block-cards">
					<view class="block-card" v-for="block in filteredBlocks" :key="block.id"
						:class="{'active-block': currentBlock.id === block.id, 'clickable': currentBlock.id !== block.id}"
						@click="handleBlockClick(block)">
						<view v-if="block.status === 'active'" class="status-badge status-active-badge">使用中</view>
						<view v-if="block.status === 'idle'" class="status-badge status-idle-badge">闲置</view>
						<view v-if="block.status === 'maintenance'" class="status-badge status-maintenance-badge">维护中
						</view>

						<view class="block-content">
							<view class="block-icon">
								<image src="/static/icons/location.svg" class="location-icon" mode="aspectFit"></image>
							</view>

							<view class="block-info">
								<!-- 标题区域：显示地块名称 + 所属农场名称 -->
								<view class="block-name">{{ block.name }}</view>
								<view class="block-farm">{{ block.farmName }}</view>

								<!-- 次级信息区域：显示地块编号、负责人 -->
								<view class="block-meta">
									<text>编号：{{ block.code }}</text>
									<text class="separator">|</text>
									<text>负责人：{{ block.manager }}</text>
								</view>

								<!-- 已有信息：面积、类型、作物 -->
								<view class="block-details">
									<text>{{ block.area }}亩</text>
									<text class="separator">|</text>
									<text>{{ block.type }}</text>
									<text v-if="block.crop" class="separator">|</text>
									<text v-if="block.crop">{{ block.crop }}</text>
								</view>
							</view>
						</view>

						<view class="block-stats">
							<view class="stat-item">
								<image src="/static/icons/device.svg" class="stat-icon" mode="aspectFit"></image>
								<text>设备：{{ block.deviceCount }}</text>
							</view>
							<view class="stat-item">
								<image src="/static/icons/online.svg" class="stat-icon online-icon" mode="aspectFit">
								</image>
								<text>在线：{{ block.onlineDevices }}</text>
							</view>
							<view class="stat-item" v-if="block.alerts > 0">
								<image src="/static/icons/alert.svg" class="stat-icon alert-icon" mode="aspectFit">
								</image>
								<text class="alert-text">告警：{{ block.alerts }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>

		<!-- 底部加载提示区域 -->
		<view class="loading-more" v-if="isLoadingTip || !hasMore">
			<view v-if="loadingMore" class="loading-text">
				<view class="loading-icon"></view>
				<text>正在加载更多地块...</text>
			</view>
			<text v-else-if="!hasMore && blocks.length > 0" class="no-more-text">没有更多地块了</text>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import {
	fetchUserFieldList,
	searchUserField
} from '@/api/services/field.js'
import storage from "@/utils/storage.js"

// 响应式数据
const isLoading = ref(true)
const searchKeyword = ref('')
const currentBlock = reactive({
	id: '',
	code: '',
	name: '',
	farmName: '',
	manager: '',
	area: 0,
	type: '',
	crop: '',
	status: 'active',
	deviceCount: 0,
	onlineDevices: 0,
	alerts: 0
})
const blocks = ref([])
const searchTimer = ref(null)
const pageNum = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const loadingMore = ref(false)
const hasMore = ref(true)
const isLoadingTip = ref(false)
const refreshing = ref(false)

// 计算属性
const filteredBlocks = computed(() => {
	return blocks.value
})

// 获取当前选中的地块
const fetchCurrentField = () => {
	try {
		getUserCurrentField().then((res) => {
			console.log("fetchCurrentField", res)
			if (res.data && res.data.code === 200 && res.data.data) {
				Object.assign(currentBlock, res.data.data)
			} else {
				console.log('未查询到当前地块，将使用列表第一个地块')
			}
		}).catch(err => {
			console.error('获取当前地块失败', err)
		})
	} catch (e) {
		console.log("fetchCurrentField 异常", e)
	}
}

// 获取地块列表
const getFieldList = (isRefresh = false) => {
	console.log("执行情况")
	if (isRefresh) {
		pageNum.value = 1
		blocks.value = []
		hasMore.value = true
	}

	if (!hasMore.value && !isRefresh) {
		return
	}

	if (pageNum.value === 1) {
		isLoading.value = true
	} else {
		loadingMore.value = true
		isLoadingTip.value = true
	}
	console.log("当前页码值：", pageNum.value)
	
	fetchUserFieldList(
		pageNum.value,
		pageSize.value
	).then((res) => {
		if (pageNum.value === 1) {
			isLoading.value = false
		} else {
			loadingMore.value = false
		}
		console.log("地块res", res)

		if (res.data && res.data.code === 200 && res.data.data) {
			totalCount.value = res.data.data.total || 0

			if (pageNum.value === 1) {
				blocks.value = res.data.data.list
			} else {
				blocks.value = [...blocks.value, ...res.data.data.list]
			}

			hasMore.value = blocks.value.length < totalCount.value

			if (pageNum.value === 1) {
				loadSavedBlock()

				if (!currentBlock.id && blocks.value.length > 0) {
					Object.assign(currentBlock, blocks.value[0])
					saveCurrentBlockToStorage(currentBlock)
				}
			}

			pageNum.value++
		} else {
			isLoading.value = false
			loadingMore.value = false
			hasMore.value = false
			console.error('获取地块列表失败', res)
			uni.showToast({
				title: '获取地块列表失败',
				icon: 'none'
			})
		}

		setTimeout(() => {
			isLoadingTip.value = false
		}, 2000)
	}).catch(err => {
		isLoading.value = false
		loadingMore.value = false
		hasMore.value = false
		console.error('获取地块列表失败', err)
		uni.showToast({
			title: '获取地块列表失败',
			icon: 'none'
		})
		isLoadingTip.value = false
	})
}

// 根据关键字搜索地块
const searchFields = (keyword) => {
	console.log("keyword", keyword)
	if (!keyword) {
		getFieldList(true)
		return
	}

	pageNum.value = 1
	blocks.value = []
	hasMore.value = true
	isLoading.value = true

	searchUserField({
		keyword: keyword,
		pageNum: pageNum.value,
		pageSize: pageSize.value
	}).then((res) => {
		isLoading.value = false

		if (res.data && res.data.code === 200 && res.data.data.list) {
			blocks.value = res.data.data.list
			hasMore.value = res.data.data.total >= pageSize.value
			pageNum.value++
		}
	}).catch(err => {
		isLoading.value = false
		hasMore.value = false
		console.error('搜索地块失败', err)
	})
}

const goBack = () => {
	uni.navigateBack()
}

const handleSearch = () => {
	if (searchTimer.value) {
		clearTimeout(searchTimer.value)
	}

	searchTimer.value = setTimeout(() => {
		searchFields(searchKeyword.value)
	}, 500)
}

const clearSearch = () => {
	searchKeyword.value = ''
	getFieldList(true)
}

const handleBlockClick = (block) => {
	if (currentBlock.id === block.id) return

	uni.showModal({
		title: '切换地块',
		content: '是否切换到该地块？切换后将查看该地块的相关设备数据。',
		cancelText: '取消',
		confirmText: '确定',
		success: (res) => {
			if (res.confirm) {
				selectBlock(block)
			}
		}
	})
}

const selectBlock = (block) => {
	Object.assign(currentBlock, block)
	console.log("选择地块信息:", block)
	saveCurrentBlockToStorage(block)

	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	let eventChannel

	let shouldReturn = true
	try {
		const options = currentPage.options || {}
		eventChannel = currentPage.getOpenerEventChannel && currentPage.getOpenerEventChannel()

		if (options.redirect) {
			shouldReturn = false
			uni.redirectTo({
				url: decodeURIComponent(options.redirect),
				success: () => {
					if (eventChannel) {
						eventChannel.emit('selectBlockResult', {
							success: true,
							blockId: block.id,
							blockData: block
						})
					}
				}
			})
		} else if (options.noReturn === 'true') {
			shouldReturn = false
		}
	} catch (e) {
		console.error('获取页面参数失败', e)
	}

	if (shouldReturn) {
		setTimeout(() => {
			uni.navigateBack({
				success: () => {
					if (eventChannel) {
						eventChannel.emit('selectBlockResult', {
							success: true,
							blockId: block.id,
							blockData: block
						})
					}
				}
			})
		}, 300)
	}
}

const saveCurrentBlockToStorage = (block) => {
	try {
		Object.assign(currentBlock, block)
		console.log("this.currentBlock", currentBlock)
		console.log("block", block)
		storage.setPlots(JSON.stringify({
			id: block.id,
			code: block.code,
			name: block.name,
			growCrops: block.crop,
			managerName: block.manager,
			size: block.area,
			farmId: block.farmId,
			timestamp: Date.now()
		}))
	} catch (e) {
		console.error('保存地块选择状态失败', e)
	}
}

const loadSavedBlock = () => {
	try {
		const savedPlot = storage.getPlots()
		if (savedPlot) {
			const plotData = JSON.parse(savedPlot)
			const matchedBlock = blocks.value.find(block => block.id == plotData.id)
			if (matchedBlock) {
				Object.assign(currentBlock, matchedBlock)
			}
		}
	} catch (e) {
		console.error('读取保存的地块失败', e)
	}
}

const getStatusClass = (status) => {
	const statusMap = {
		'active': 'status-active',
		'idle': 'status-idle',
		'maintenance': 'status-maintenance'
	}
	return statusMap[status] || ''
}

const getStatusText = (status) => {
	const statusMap = {
		'active': '使用中',
		'idle': '闲置',
		'maintenance': '维护中'
	}
	return statusMap[status] || '未知'
}

const onBack = (callback) => {
	if (typeof callback === 'function') {
		callback(currentBlock.id)
	}
}

const loadMore = () => {
	if (loadingMore.value || !hasMore.value) return
	getFieldList()
}

// uni-app 生命周期
onMounted(() => {
	getFieldList(true)
})

// uni-app 页面生命周期
const onReachBottom = () => {
	loadMore()
}

const onPullDownRefresh = () => {
	refreshing.value = true
	getFieldList(true)

	setTimeout(() => {
		refreshing.value = false
		uni.stopPullDownRefresh()
	}, 1000)
}

// 导出页面生命周期方法供 uni-app 调用
defineExpose({
	onReachBottom,
	onPullDownRefresh
})
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #F5F7FA;
		padding-bottom: 30rpx;
	}

	/* 头部导航 */
	.header {
		display: none;
		/* 隐藏整个头部标题栏 */
	}

	.back-button {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-back {
		font-size: 36rpx;
		color: #333;
	}

	.page-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 60rpx;
		/* 平衡左侧返回按钮 */
	}

	/* 搜索框 */
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		margin-bottom: 20rpx;
	}

	.search-header {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 15rpx;
	}

	.search-input {
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #F5F7FA;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid rgba(0, 0, 0, 0.03);
	}

	.icon-search {
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-input input {
		flex: 1;
		height: 70rpx;
		font-size: 28rpx;
		color: #333;
	}

	.clear-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #999;
	}

	/* 块区域通用样式 */
	.current-block,
	.block-list {
		margin: 0 30rpx 20rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	.block-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.block-header .left {
		display: flex;
		align-items: center;
	}

	.icon-tag {
		font-size: 24rpx;
		color: #FFFFFF;
		background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
		margin-right: 16rpx;
		box-shadow: 0 2rpx 5rpx rgba(59, 180, 74, 0.2);
	}

	.block-header .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.block-header .count {
		font-size: 24rpx;
		color: #999;
		background-color: #F5F7FA;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	/* 当前选中地块卡片 */
	.current-block-card {
		background: linear-gradient(to right, #F0F8F0, #E7F5E8);
		border-radius: 16rpx;
		padding: 30rpx;
		position: relative;
		border: 2rpx solid rgba(59, 180, 74, 0.2);
		box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
	}

	.current-tag {
		position: absolute;
		top: 0;
		right: 20rpx;
		background: linear-gradient(135deg, #66CC6A 0%, #3BB44A 100%);
		color: white;
		font-size: 22rpx;
		padding: 6rpx 16rpx;
		border-radius: 0 0 12rpx 12rpx;
		font-weight: bold;
	}

	/* 地块列表卡片 */
	.block-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.block-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		border: 1rpx solid rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
	}

	.block-card:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.03);
	}

	.block-card.active-block {
		border: 2rpx solid #3BB44A;
		background-color: #F0F8F0;
		box-shadow: 0 4rpx 16rpx rgba(59, 180, 74, 0.1);
	}

	.block-card.clickable {
		cursor: pointer;
	}

	.block-card.clickable:hover {
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.block-content {
		display: flex;
		align-items: flex-start;
		position: relative;
		margin-bottom: 20rpx;
	}

	.block-icon {
		width: 40rpx;
		margin-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.location-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.block-info {
		flex: 1;
	}

	.block-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 6rpx;
	}

	.block-farm {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.block-meta {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.block-details {
		font-size: 26rpx;
		color: #666;
	}

	.separator {
		margin: 0 10rpx;
		color: #ccc;
	}

	.check-mark {
		position: absolute;
		right: 0;
		top: 0;
	}

	.check-icon {
		width: 48rpx;
		height: 48rpx;
	}

	/* 状态标签 */
	.status-badge {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 0 16rpx 0 12rpx;
		font-weight: 500;
		z-index: 1;
	}

	.status-active-badge {
		background-color: #E6F7E6;
		color: #3BB44A;
		border-left: 1rpx solid rgba(59, 180, 74, 0.2);
		border-bottom: 1rpx solid rgba(59, 180, 74, 0.2);
	}

	.status-idle-badge {
		background-color: #F1F2F3;
		color: #909399;
		border-left: 1rpx solid rgba(144, 147, 153, 0.2);
		border-bottom: 1rpx solid rgba(144, 147, 153, 0.2);
	}

	.status-maintenance-badge {
		background-color: #FEF0F0;
		color: #F56C6C;
		border-left: 1rpx solid rgba(245, 108, 108, 0.2);
		border-bottom: 1rpx solid rgba(245, 108, 108, 0.2);
	}

	/* 地块统计信息 */
	.block-stats {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-top: 1rpx solid #F0F0F0;
		padding-top: 20rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		font-size: 26rpx;
		color: #666;
	}

	.stat-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.online-icon {
		/* 在线图标使用绿色 */
		filter: hue-rotate(120deg) saturate(1.2);
	}

	.alert-icon {
		/* 告警图标使用红色 */
		filter: hue-rotate(0deg) saturate(1.5);
	}

	.alert-text {
		color: #F56C6C;
	}

	/* 骨架屏 */
	.skeleton-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.skeleton-box {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		animation: skeleton-loading 1.5s infinite;
	}

	@keyframes skeleton-loading {
		0% {
			opacity: 0.7;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 0.7;
		}
	}

	.skeleton-header {
		display: flex;
		align-items: flex-start;
	}

	.skeleton-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #EEEEEE;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.skeleton-info {
		flex: 1;
	}

	.skeleton-title {
		width: 200rpx;
		height: 32rpx;
		background-color: #EEEEEE;
		margin-bottom: 10rpx;
		border-radius: 4rpx;
	}

	.skeleton-detail {
		width: 300rpx;
		height: 24rpx;
		background-color: #EEEEEE;
		border-radius: 4rpx;
	}

	.skeleton-stats {
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 1rpx solid #F5F5F5;
		height: 30rpx;
		background-color: #EEEEEE;
		border-radius: 4rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
		opacity: 0.7;
	}

	.empty-text {
		font-size: 32rpx;
		color: #666;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.empty-subtext {
		font-size: 26rpx;
		color: #999;
	}

	/* 基础图标样式 */
	.iconfont {
		font-family: "iconfont" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* 底部加载提示区域 */
	.loading-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
	}

	.loading-text {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.loading-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		background-color: #3BB44A;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.no-more-text {
		font-size: 28rpx;
		color: #999;
		margin-left: 10rpx;
	}
</style>