4.7 KiB
4.7 KiB
养殖户页面设计说明
页面概述
养殖户管理页面完全按照提供的图片样式进行设计开发，实现了政府端养殖户信息管理的核心功能。
页面结构
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
数据字段
养殖户信息包含以下字段：
- 姓名 - 养殖户真实姓名
- 养殖账号 - 手机号（中间4位用*隐藏）
- 识别码 - 唯一标识码
- 账号昵称 - 用户昵称
- 养殖场类型 - 散养/圈养等
- 养殖场种类 - 牛/羊/猪等
- 养殖场规模 - 养殖数量规模
- 养殖场 - 养殖场名称
- 地址 - 详细地址
- 登记时间 - 注册时间
交互功能
1. 搜索功能
- 输入监听：实时监听搜索框输入
- 搜索触发：点击搜索或回车确认
- 搜索范围：账号、昵称、真实姓名
2. 编辑功能
- 触发方式：点击卡片右上角"编辑"按钮
- 交互反馈：显示确认对话框
- 功能状态：目前显示"编辑功能开发中"
3. 新增功能
- 触发方式：点击底部"新增监管养殖户"按钮
- 交互反馈：显示确认对话框
- 功能状态：目前显示"新增功能开发中"
4. 菜单功能
- 触发方式：点击顶部右侧菜单按钮
- 菜单项：设置、帮助、关于
- 功能状态：目前显示"功能开发中"
样式规范
颜色规范
- 主色调：#4CAF50（绿色）
- 背景色：#f5f5f5（浅灰）
- 卡片背景：#ffffff（白色）
- 标签文字：#999999（灰色）
- 内容文字：#333333（深灰）
- 分割线：#f0f0f0（浅灰）
字体规范
- 标题：36rpx，加粗
- 姓名：32rpx，加粗
- 标签：26rpx，常规
- 内容：26rpx，常规
- 按钮：24rpx/32rpx，加粗
间距规范
- 页面边距：30rpx
- 卡片间距：20rpx
- 内容间距：16rpx
- 按钮内边距：12rpx 24rpx
响应式设计
适配特点
- 固定底部按钮：使用position: fixed确保按钮始终可见
- 内容区域：添加底部padding避免内容被按钮遮挡
- 卡片布局：自适应屏幕宽度
- 文字换行：长文本自动换行显示
测试数据
模拟数据示例
{
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接口对接
- ⏳ 编辑页面开发
- ⏳ 新增页面开发
- ⏳ 数据验证和错误处理
- ⏳ 图片上传功能
- ⏳ 权限控制
使用说明
- 启动项目：在微信开发者工具中打开项目
- 查看页面：切换到"养殖户"标签页
- 测试功能：点击各个按钮测试交互效果
- 验证样式：对比图片确认样式一致性
注意事项
- 数据安全：手机号中间4位已做脱敏处理
- 性能优化：大量数据时考虑分页加载
- 用户体验：添加加载状态和错误提示
- 兼容性：确保在不同设备上正常显示
- 可维护性：代码结构清晰，便于后续扩展