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>
	import {
		fetchUserFieldList,
		getUserCurrentField,
		searchUserField
	} from '@/api/services/field.js';
	import storage from "@/utils/storage.js";
	export default {
		// 配置页面的下拉刷新
		onPullDownRefresh: true,

		data() {
			return {
				isLoading: true,
				searchKeyword: '',
				currentBlock: {
					id: '',
					code: '',
					name: '',
					farmName: '',
					manager: '',
					area: 0,
					type: '',
					crop: '',
					status: 'active',
					deviceCount: 0,
					onlineDevices: 0,
					alerts: 0
				},
				blocks: [],
				searchTimer: null,
				// 添加分页相关数据
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页数量
				totalCount: 0, // 总记录数
				loadingMore: false, // 是否正在加载更多
				hasMore: true, // 是否还有更多数据
				isLoadingTip: false, // 是否显示底部加载提示
				refreshing: false // 是否正在下拉刷新
			}
		},

		computed: {
			filteredBlocks() {
				return this.blocks;
			}
		},

		mounted() {
			// 获取当前选中地块
			// this.fetchCurrentField();

			// 获取地块列表
			this.getFieldList(true);
		},

		// 添加页面触底事件处理函数
		onReachBottom() {
			this.loadMore();
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.refreshing = true;
			// 重置页码并刷新列表
			this.getFieldList(true);

			// 延迟关闭刷新动画
			setTimeout(() => {
				this.refreshing = false;
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			// 获取当前选中的地块
			fetchCurrentField() {
				try {
					// 获取当前登录用户的默认地块
					getUserCurrentField().then((res) => {
						console.log("fetchCurrentField", res);
						if (res.data && res.data.code === 200 && res.data.data) {
							this.currentBlock = res.data.data;
						} else {
							// 如果没有当前选中地块，则在获取列表成功后设置第一个为当前地块
							console.log('未查询到当前地块，将使用列表第一个地块');
						}
					}).catch(err => {
						console.error('获取当前地块失败', err);
					});
				} catch (e) {
					console.log("fetchCurrentField 异常", e);
				}
			},

			// 获取地块列表
			getFieldList(isRefresh = false) {
				console.log("执行情况");
				// 刷新时重置页码
				if (isRefresh) {
					this.pageNum = 1;
					this.blocks = [];
					this.hasMore = true;
				}

				if (!this.hasMore && !isRefresh) {
					return; // 如果没有更多数据且不是刷新，则不请求
				}

				// 标记正在加载
				if (this.pageNum === 1) {
					this.isLoading = true;
				} else {
					this.loadingMore = true;
					this.isLoadingTip = true;
				}
				console.log("当前页码值：", this.pageNum);
				// 获取当前登录用户关联的地块列表
				fetchUserFieldList(
					this.pageNum,
					this.pageSize
				).then((res) => {
					if (this.pageNum === 1) {
						this.isLoading = false;
					} else {
						this.loadingMore = false;
					}
					console.log("地块res", res);


					if (res.data && res.data.code === 200 && res.data.data) {
						// 获取总数
						this.totalCount = res.data.data.total || 0;

						// 追加数据，而不是替换
						if (this.pageNum === 1) {
							this.blocks = res.data.data.list;
						} else {
							this.blocks = [...this.blocks, ...res.data.data.list];
						}

						// 判断是否还有更多数据
						this.hasMore = this.blocks.length < this.totalCount;

						// 尝试从本地存储中读取上次选择的地块
						if (this.pageNum === 1) {
							this.loadSavedBlock();

							// 如果当前没有选中地块，则设置第一个为当前地块
							if (!this.currentBlock.id && this.blocks.length > 0) {
								this.currentBlock = this.blocks[0];

								// 保存当前选择的地块到本地存储
								this.saveCurrentBlockToStorage(this.currentBlock);
							}
						}

						// 页码加1，为下次加载做准备
						this.pageNum++;
					} else {
						this.isLoading = false;
						this.loadingMore = false;
						this.hasMore = false;
						console.error('获取地块列表失败', res);
						uni.showToast({
							title: '获取地块列表失败',
							icon: 'none'
						});
					}

					// 2秒后隐藏加载提示
					setTimeout(() => {
						this.isLoadingTip = false;
					}, 2000);
				}).catch(err => {
					this.isLoading = false;
					this.loadingMore = false;
					this.hasMore = false;
					console.error('获取地块列表失败', err);
					uni.showToast({
						title: '获取地块列表失败',
						icon: 'none'
					});

					// 隐藏加载提示
					this.isLoadingTip = false;
				});
			},

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

				// 重置分页数据
				this.pageNum = 1;
				this.blocks = [];
				this.hasMore = true;
				this.isLoading = true;

				// 使用用户关联地块搜索接口
				searchUserField({
					keyword: keyword,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					this.isLoading = false;

					if (res.data && res.data.code === 200 && res.data.data.list) {
						this.blocks = res.data.data.list;
						// 搜索结果可能没有总数信息，根据返回数据判断是否有更多
						this.hasMore = res.data.data.total >= this.pageSize;

						// 增加页码为下次加载做准备
						this.pageNum++;
					}
				}).catch(err => {
					this.isLoading = false;
					this.hasMore = false;
					console.error('搜索地块失败', err);
				});
			},

			goBack() {
				uni.navigateBack();
			},

			handleSearch() {
				// 防抖处理，避免频繁请求
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}

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

			clearSearch() {
				this.searchKeyword = '';
				this.getFieldList(true);
			},

			handleBlockClick(block) {
				// 如果点击当前已选中的地块，不做任何操作
				if (this.currentBlock.id === block.id) return;

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

			selectBlock(block) {
				this.currentBlock = block;
				console.log("选择地块信息:",block);
				// 保存当前选择的地块到本地存储
				this.saveCurrentBlockToStorage(block);

				// 触发选择事件，传递地块ID
				this.$emit('selectBlock', block.id);

				// 获取页面参数，检查是否需要返回
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				let eventChannel;

				// 尝试获取页面参数和事件通道
				let shouldReturn = true; // 默认行为是返回
				try {
					const options = currentPage.options || {};
					// 获取事件通道（如果存在）
					eventChannel = currentPage.getOpenerEventChannel && currentPage.getOpenerEventChannel();

					// 如果有redirect参数，则跳转到指定页面而不是返回
					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') {
						// 如果设置了noReturn参数，则不执行返回操作
						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);
				}
			},

			// 保存当前选择的地块到本地存储
			saveCurrentBlockToStorage(block) {
				try {
					this.currentBlock = block
					console.log("this.currentBlock", this.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);
				}
			},

			// 从本地存储加载上次选择的地块
			loadSavedBlock() {
				try {
					const savedPlot = storage.getPlots();
					if (savedPlot) {
						const plotData = JSON.parse(savedPlot);
						// 如果存储的地块在当前地块列表中，则设置为当前选中地块
						const matchedBlock = this.blocks.find(block => block.id == plotData.id);
						if (matchedBlock) {
							this.currentBlock = matchedBlock;
						}
					}
				} catch (e) {
					console.error('读取保存的地块失败', e);
				}
			},

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

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

			// 可以被父组件调用的方法
			onBack(callback) {
				if (typeof callback === 'function') {
					callback(this.currentBlock.id);
				}
			},

			// 加载更多数据
			loadMore() {
				if (this.loadingMore || !this.hasMore) return;
				this.getFieldList();
			}
		}
	}
</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>