aiotagro/nxxmdata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改小程序及大屏

Browse Source
This commit is contained in:
dengyuxin
2025-10-23 17:26:47 +08:00
parent 212dffd0da
commit 07bd3ce5da
90 changed files with 3348 additions and 3554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
government-mini-program/pages/farmers/farmers.js
View File

@@ -2,8 +2,10 @@
Page({
data: {
farmers: [],
allFarmers: [], // 存储所有养殖户数据
loading: false,
searchKeyword: '',
activeTab: 'all', // 当前激活的筛选标签
currentPage: 1,
pageSize: 10,
total: 0
@@ -45,35 +47,83 @@ Page({
address: '宁夏银川市兴庆区',
farmName: '张三养殖场',
animalCount: 120,
status: 'active'
status: 'active',
registerTime: '2023-01-15'
},
{
id: 2,
name: '李四',
phone: '13800138002',
address: '宁夏银川市金凤区',
farmName: '李四牧场',
address: '宁夏石嘴山市大武口区',
farmName: '李四牧业',
animalCount: 85,
status: 'active'
status: 'pending',
registerTime: '2023-02-20'
},
{
id: 3,
name: '王五',
phone: '13800138003',
address: '宁夏银川市西夏区',
farmName: '王五养殖合作社',
address: '宁夏吴忠市利通区',
farmName: '王五农场',
animalCount: 200,
status: 'inactive'
status: 'inactive',
registerTime: '2023-03-10'
},
{
id: 4,
name: '赵六',
phone: '13800138004',
address: '宁夏固原市原州区',
farmName: '赵六养殖合作社',
animalCount: 150,
status: 'active',
registerTime: '2023-04-05'
}
];
setTimeout(() => {
this.setData({
farmers: mockFarmers,
loading: false,
total: mockFarmers.length
allFarmers: mockFarmers,
loading: false
});
}, 500);
this.filterFarmers();
}, 1000);
},
// 筛选标签切换
onTabChange: function(e) {
const tab = e.currentTarget.dataset.tab;
this.setData({
activeTab: tab
});
this.filterFarmers();
},
// 根据当前标签和搜索关键词筛选养殖户
filterFarmers: function() {
const { allFarmers, activeTab, searchKeyword } = this.data;
let filteredFarmers = [...allFarmers];
// 按状态筛选
if (activeTab !== 'all') {
filteredFarmers = filteredFarmers.filter(farmer => farmer.status === activeTab);
}
// 按搜索关键词筛选
if (searchKeyword.trim()) {
const keyword = searchKeyword.trim().toLowerCase();
filteredFarmers = filteredFarmers.filter(farmer =>
farmer.name.toLowerCase().includes(keyword) ||
farmer.farmName.toLowerCase().includes(keyword) ||
farmer.phone.includes(keyword)
);
}
this.setData({
farmers: filteredFarmers,
total: filteredFarmers.length
});
},
onSearchInput: function(e) {
@@ -83,19 +133,19 @@ Page({
},
onSearch: function() {
this.loadFarmers();
this.filterFarmers();
},
onFarmerTap: function(e) {
const farmerId = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/farmer/detail/detail?id=${farmerId}`
url: `/pages/farmer/farmer?id=${farmerId}`
});
},
onAddFarmer: function() {
wx.navigateTo({
url: '/pages/farmer/add/add'
url: '/pages/farmer/farmer?mode=add'
});
},
@@ -105,14 +155,13 @@ Page({
},
onReachBottom: function() {
// 加载更多数据
if (this.data.farmers.length < this.data.total) {
this.loadMoreFarmers();
}
},
loadMoreFarmers: function() {
// 实现分页加载
// 实际项目中这里会加载更多数据
console.log('加载更多养殖户数据');
},

138
government-mini-program/pages/farmers/farmers.wxml
View File

@@ -1,27 +1,66 @@
<!--pages/farmers/farmers.wxml-->
<view class="container">
<!-- 顶部搜索栏 -->
<view class="search-bar">
<view class="search-input-wrapper">
<input
class="search-input"
placeholder="搜索养殖户姓名或农场名称"
value="{{searchKeyword}}"
bindinput="onSearchInput"
bindconfirm="onSearch"
/>
<view class="search-btn" bindtap="onSearch">
<text class="search-icon">🔍</text>
</view>
<view class="farmers-container">
<!-- 标题栏 -->
<view class="header">
<text class="title">养殖户管理</text>
</view>
<!-- 筛选标签 -->
<view class="filter-tabs">
<view
class="tab-item {{activeTab === 'all' ? 'active' : ''}}"
data-tab="all"
bindtap="onTabChange"
>
<text>全部</text>
</view>
<view class="add-btn" bindtap="onAddFarmer">
<text class="add-icon">+</text>
<text class="add-text">新增</text>
<view
class="tab-item {{activeTab === 'active' ? 'active' : ''}}"
data-tab="active"
bindtap="onTabChange"
>
<text>正常</text>
</view>
<view
class="tab-item {{activeTab === 'pending' ? 'active' : ''}}"
data-tab="pending"
bindtap="onTabChange"
>
<text>待审核</text>
</view>
<view
class="tab-item {{activeTab === 'inactive' ? 'active' : ''}}"
data-tab="inactive"
bindtap="onTabChange"
>
<text>停用</text>
</view>
</view>
<!-- 搜索栏 -->
<view class="search-section">
<view class="search-bar">
<view class="search-input-wrapper">
<input
class="search-input"
placeholder="搜索养殖户姓名或农场名称"
value="{{searchKeyword}}"
bindinput="onSearchInput"
bindconfirm="onSearch"
/>
<view class="search-btn" bindtap="onSearch">
<text class="search-icon">🔍</text>
</view>
</view>
<view class="add-btn" bindtap="onAddFarmer">
<text class="add-icon">+</text>
<text class="add-text">新增</text>
</view>
</view>
</view>
<!-- 养殖户列表 -->
<view class="farmers-list">
<view class="farmer-list">
<view
class="farmer-item"
wx:for="{{farmers}}"
@@ -29,49 +68,54 @@
data-id="{{item.id}}"
bindtap="onFarmerTap"
>
<view class="farmer-avatar">
<text class="avatar-text">{{item.name.charAt(0)}}</text>
</view>
<!-- 养殖户标题 -->
<view class="farmer-title">{{item.name}} - {{item.farmName}}</view>
<!-- 养殖户信息 -->
<view class="farmer-info">
<view class="farmer-header">
<text class="farmer-name">{{item.name}}</text>
<view class="farmer-status {{item.status}}">
<text class="status-text">{{item.status === 'active' ? '正常' : '停用'}}</text>
<view class="info-row">
<text class="info-label">负责人：</text>
<text class="info-value">{{item.name}}</text>
</view>
<view class="info-row">
<text class="info-label">当前状态：</text>
<view class="status-tag {{item.status}}">
<text>{{item.status === 'active' ? '正常' : item.status === 'pending' ? '待审核' : '停用'}}</text>
</view>
</view>
<view class="farmer-details">
<view class="detail-item">
<text class="detail-label">农场：</text>
<text class="detail-value">{{item.farmName}}</text>
</view>
<view class="detail-item">
<text class="detail-label">电话：</text>
<text class="detail-value">{{item.phone}}</text>
</view>
<view class="detail-item">
<text class="detail-label">地址：</text>
<text class="detail-value">{{item.address}}</text>
</view>
<view class="detail-item">
<text class="detail-label">牲畜数量：</text>
<text class="detail-value animal-count">{{item.animalCount}}头</text>
</view>
<view class="info-row">
<text class="info-label">联系电话：</text>
<text class="info-value">{{item.phone}}</text>
</view>
<view class="info-row">
<text class="info-label">牲畜数量：</text>
<text class="info-value">{{item.animalCount}}头</text>
</view>
<view class="info-row">
<text class="info-label">农场地址：</text>
<text class="info-value">{{item.address}}</text>
</view>
<view class="info-row">
<text class="info-label">注册时间：</text>
<text class="info-value">{{item.registerTime}}</text>
</view>
</view>
<view class="farmer-arrow">
<text class="arrow-icon">></text>
</view>
</view>
</view>
<!-- 加载状态 -->
<view class="loading" wx:if="{{loading}}">
<view class="loading-state" wx:if="{{loading}}">
<text class="loading-text">加载中...</text>
</view>
<!-- 空状态 -->
<view class="empty-state" wx:if="{{!loading && farmers.length === 0}}">
<text class="empty-icon">📋</text>
<image class="empty-icon" src="/images/empty.png" />
<text class="empty-text">暂无养殖户数据</text>
<view class="empty-btn" bindtap="onAddFarmer">
<text>添加养殖户</text>

255
government-mini-program/pages/farmers/farmers.wxss
View File

@@ -1,17 +1,67 @@
/* pages/farmers/farmers.wxss */
.container {
.farmers-container {
background-color: #f5f7fa;
min-height: 100vh;
background-color: #f5f5f5;
padding: 0;
}
/* 搜索栏样式 */
/* 标题栏 */
.header {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
padding: 20rpx 30rpx;
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
}
.title {
color: #ffffff;
font-size: 36rpx;
font-weight: 600;
}
/* 筛选标签 */
.filter-tabs {
display: flex;
background: #ffffff;
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #e8e8e8;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.tab-item {
flex: 1;
text-align: center;
padding: 16rpx 0;
border-radius: 8rpx;
margin: 0 8rpx;
transition: all 0.3s ease;
}
.tab-item text {
font-size: 28rpx;
color: #666666;
font-weight: 500;
}
.tab-item.active {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.25);
}
.tab-item.active text {
color: #ffffff;
font-weight: 600;
}
/* 搜索区域 */
.search-section {
background: #ffffff;
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #e8e8e8;
}
.search-bar {
display: flex;
align-items: center;
background-color: #ffffff;
padding: 20rpx 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
gap: 20rpx;
}
@@ -19,33 +69,200 @@
flex: 1;
display: flex;
align-items: center;
background-color: #f8f8f8;
border-radius: 25rpx;
background: #f8f9fa;
border-radius: 12rpx;
padding: 0 20rpx;
height: 70rpx;
border: 2rpx solid transparent;
transition: all 0.3s ease;
}
.search-input-wrapper:focus-within {
border-color: #4CAF50;
background: #ffffff;
box-shadow: 0 0 0 4rpx rgba(76, 175, 80, 0.1);
}
.search-input {
flex: 1;
height: 80rpx;
font-size: 28rpx;
color: #333333;
height: 100%;
background: transparent;
}
.search-input::placeholder {
color: #999999;
}
.search-btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #7CB342;
border-radius: 50%;
margin-left: 10rpx;
padding: 8rpx;
border-radius: 8rpx;
background: #4CAF50;
transition: all 0.3s ease;
}
.search-btn:active {
background: #45a049;
transform: scale(0.95);
}
.search-icon {
color: white;
font-size: 28rpx;
color: #ffffff;
}
.add-btn {
display: flex;
align-items: center;
gap: 8rpx;
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: #ffffff;
padding: 20rpx 24rpx;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.25);
transition: all 0.3s ease;
}
.add-btn:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.25);
}
.add-icon {
font-size: 32rpx;
font-weight: bold;
}
/* 养殖户列表 */
.farmer-list {
padding: 20rpx 30rpx;
}
.farmer-item {
background: #ffffff;
border-radius: 16rpx;
margin-bottom: 20rpx;
padding: 30rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
transition: all 0.3s ease;
}
.farmer-item:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
}
.farmer-title {
font-size: 32rpx;
font-weight: 600;
color: #333333;
margin-bottom: 20rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.farmer-info {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.info-row {
display: flex;
align-items: center;
font-size: 28rpx;
}
.info-label {
color: #666666;
width: 160rpx;
flex-shrink: 0;
}
.info-value {
color: #333333;
flex: 1;
font-weight: 500;
}
/* 状态标签 */
.status-tag {
display: inline-flex;
align-items: center;
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500;
}
.status-tag.active {
background: rgba(76, 175, 80, 0.1);
color: #4CAF50;
}
.status-tag.pending {
background: rgba(255, 193, 7, 0.1);
color: #FFC107;
}
.status-tag.inactive {
background: rgba(244, 67, 54, 0.1);
color: #F44336;
}
/* 加载状态 */
.loading-state {
display: flex;
justify-content: center;
align-items: center;
padding: 80rpx 0;
}
.loading-text {
color: #999999;
font-size: 28rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 60rpx;
text-align: center;
}
.empty-icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
.empty-text {
color: #999999;
font-size: 28rpx;
margin-bottom: 40rpx;
}
.empty-btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: #ffffff;
padding: 20rpx 40rpx;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.25);
transition: all 0.3s ease;
}
.empty-btn:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.25);
}
.add-btn {