修改小程序

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

@@ -0,0 +1,165 @@
+# 养殖户页面设计说明
+
+## 页面概述
+
+养殖户管理页面完全按照提供的图片样式进行设计开发，实现了政府端养殖户信息管理的核心功能。
+
+## 页面结构
+
+### 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. **可维护性**：代码结构清晰，便于后续扩展