nxxmdata/government-mini-program/养殖户页面设计说明.md

# 养殖户页面设计说明

## 页面概述

养殖户管理页面完全按照提供的图片样式进行设计开发，实现了政府端养殖户信息管理的核心功能。

## 页面结构

### 1. 顶部标题栏
- **背景色**：白色 (#ffffff)
- **标题**：居中显示"养殖户管理"
- **操作按钮**：右侧三个圆形按钮（⋯、−、●）
- **高度**：100rpx
- **边框**：底部1rpx浅灰色分割线

### 2. 搜索框区域
- **背景色**：白色 (#ffffff)
- **搜索框**：圆角矩形，浅灰色背景 (#f8f8f8)
- **图标**：左侧放大镜图标 🔍
- **占位符**："请输入账号、昵称、真实姓名"
- **高度**：80rpx

### 3. 养殖户信息卡片
- **背景色**：白色 (#ffffff)
- **圆角**：12rpx
- **阴影**：0 2rpx 8rpx rgba(0, 0, 0, 0.1)
- **间距**：卡片间距20rpx

#### 卡片头部
- **布局**：左右分布
- **左侧**：姓名信息（标签+值）
- **右侧**：绿色编辑按钮
- **分割线**：底部1rpx浅灰色分割线

#### 卡片内容
- **信息行**：每行包含标签和值
- **标签样式**：灰色文字 (#999999)，固定宽度160rpx
- **值样式**：黑色文字 (#333333)，自适应宽度
- **行间距**：16rpx

### 4. 底部新增按钮
- **位置**：固定在页面底部
- **背景色**：绿色 (#4CAF50)
- **文字**：白色，"新增监管养殖户"
- **高度**：固定高度，全宽显示
- **圆角**：8rpx

## 数据字段

### 养殖户信息包含以下字段：
1. **姓名** - 养殖户真实姓名
2. **养殖账号** - 手机号（中间4位用*隐藏）
3. **识别码** - 唯一标识码
4. **账号昵称** - 用户昵称
5. **养殖场类型** - 散养/圈养等
6. **养殖场种类** - 牛/羊/猪等
7. **养殖场规模** - 养殖数量规模
8. **养殖场** - 养殖场名称
9. **地址** - 详细地址
10. **登记时间** - 注册时间

## 交互功能

### 1. 搜索功能
- **输入监听**：实时监听搜索框输入
- **搜索触发**：点击搜索或回车确认
- **搜索范围**：账号、昵称、真实姓名

### 2. 编辑功能
- **触发方式**：点击卡片右上角"编辑"按钮
- **交互反馈**：显示确认对话框
- **功能状态**：目前显示"编辑功能开发中"

### 3. 新增功能
- **触发方式**：点击底部"新增监管养殖户"按钮
- **交互反馈**：显示确认对话框
- **功能状态**：目前显示"新增功能开发中"

### 4. 菜单功能
- **触发方式**：点击顶部右侧菜单按钮
- **菜单项**：设置、帮助、关于
- **功能状态**：目前显示"功能开发中"

## 样式规范

### 颜色规范
- **主色调**：#4CAF50（绿色）
- **背景色**：#f5f5f5（浅灰）
- **卡片背景**：#ffffff（白色）
- **标签文字**：#999999（灰色）
- **内容文字**：#333333（深灰）
- **分割线**：#f0f0f0（浅灰）

### 字体规范
- **标题**：36rpx，加粗
- **姓名**：32rpx，加粗
- **标签**：26rpx，常规
- **内容**：26rpx，常规
- **按钮**：24rpx/32rpx，加粗

### 间距规范
- **页面边距**：30rpx
- **卡片间距**：20rpx
- **内容间距**：16rpx
- **按钮内边距**：12rpx 24rpx

## 响应式设计

### 适配特点
- **固定底部按钮**：使用position: fixed确保按钮始终可见
- **内容区域**：添加底部padding避免内容被按钮遮挡
- **卡片布局**：自适应屏幕宽度
- **文字换行**：长文本自动换行显示

## 测试数据

### 模拟数据示例
```javascript
{
  id: 1,
  name: '西藏那曲1',
  account: '178****0774',
  identification_code: '385538-418390',
  nickname: '西藏那曲1',
  farm_type: '散养',
  animal_type: '牛',
  farm_scale: '--',
  farm_name: '西藏自治区那曲市色尼区西藏自治区那曲',
  address: '市色尼区那曲镇杭嘉新村',
  registration_time: '2025-07-16 15:01:39'
}
```

## 开发状态

### 已完成功能
- ✅ 页面布局和样式
- ✅ 数据展示
- ✅ 搜索框交互
- ✅ 按钮点击事件
- ✅ 下拉刷新
- ✅ 空状态处理

### 待开发功能
- ⏳ 真实API接口对接
- ⏳ 编辑页面开发
- ⏳ 新增页面开发
- ⏳ 数据验证和错误处理
- ⏳ 图片上传功能
- ⏳ 权限控制

## 使用说明

1. **启动项目**：在微信开发者工具中打开项目
2. **查看页面**：切换到"养殖户"标签页
3. **测试功能**：点击各个按钮测试交互效果
4. **验证样式**：对比图片确认样式一致性

## 注意事项

1. **数据安全**：手机号中间4位已做脱敏处理
2. **性能优化**：大量数据时考虑分页加载
3. **用户体验**：添加加载状态和错误提示
4. **兼容性**：确保在不同设备上正常显示
5. **可维护性**：代码结构清晰，便于后续扩展