# 大禹节水灌溉系统

## 项目概述

大禹节水灌溉系统是一个微信小程序项目，用于管理和控制农业灌溉系统。该系统允许用户查看当前灌溉计划、创建新的灌溉计划、管理轮灌组以及监控灌溉状态等功能。

## 项目结构

```
irrigate_user/
├── api/                  # API接口相关文件
├── images/               # 图片资源文件
├── miniprogram_npm/      # 小程序NPM构建目录
│   └── tdesign-miniprogram/  # TDesign UI组件库
├── node_modules/         # 项目依赖
│   ├── dayjs/            # 日期处理库
│   └── tdesign-miniprogram/ # TDesign UI组件库源码
├── pages/                # 页面文件
│   ├── createIrrigation/ # 新建灌溉计划页面
│   ├── feedback/         # 反馈页面
│   ├── home/             # 首页
│   ├── index/            # 引导页
│   ├── irrigation/       # 灌溉计划管理页面
│   ├── login/            # 登录页面
│   ├── my/               # 个人中心页面
│   ├── openCard/         # 开卡页面
│   ├── personCharge/     # 个人充值页面
│   ├── rechargeCard/     # 充值卡页面
│   ├── rechargeList/     # 充值记录页面
│   ├── rechargeMoney/    # 充值金额页面
│   ├── valveList/        # 阀门列表页面
│   ├── wallet/           # 钱包页面
│   ├── waterIntake/      # 取水页面
│   ├── wxbind/           # 微信绑定页面
│   └── wxlogin/          # 微信登录页面
├── utils/                # 工具函数
├── .cloudbase/           # 云开发配置
├── .eslintrc.js          # ESLint配置
├── .gitignore            # Git忽略文件
├── app.js                # 小程序入口文件
├── app.json              # 小程序全局配置
├── app.wxss              # 小程序全局样式
├── package.json          # 项目依赖配置
├── package-lock.json     # 依赖版本锁定文件
├── project.config.json   # 项目配置文件
└── sitemap.json          # 小程序sitemap配置
```

## 使用的框架和库

1. **微信小程序原生框架**：项目基于微信小程序原生框架开发，使用WXML、WXSS、JS和JSON文件组织代码。

2. **TDesign 小程序组件库**：使用腾讯TDesign UI组件库（版本1.2.8），提供了丰富的UI组件，如日期时间选择器(t-date-time-picker)等。
   - 文档地址：https://tdesign.tencent.com/miniprogram/overview
   - 组件使用方式：在页面JSON文件中引入所需组件，如：
     ```json
     {
       "usingComponents": {
         "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
         "t-avatar": "tdesign-miniprogram/avatar/avatar",
         "t-switch": "tdesign-miniprogram/switch/switch",
         "t-button": "tdesign-miniprogram/button/button",
         "t-dialog": "tdesign-miniprogram/dialog/dialog"
       }
     }
     ```

3. **Day.js**：轻量级的JavaScript日期处理库，用于日期格式化和操作。
   - 主要用于TDesign日期时间选择器组件内部。
   - 文档地址：https://day.js.org/

4. **云开发**：项目可能使用了微信小程序云开发功能，用于数据存储和云函数。

## 代码风格和规范

1. **文件命名**：
   - 页面目录使用驼峰命名法，如`createIrrigation`
   - 页面文件与目录同名，如`createIrrigation.js`

2. **样式规范**：
   - 使用WXSS编写样式
   - 类名使用连字符命名法，如`create-irrigation-container`
   - 组件样式采用BEM命名方式的变体

3. **JavaScript规范**：
   - 使用ES6语法
   - 函数采用驼峰命名法，如`onPlanCodeInput`
   - 页面逻辑使用微信小程序Page构造器组织

4. **组件使用**：
   - 第三方组件使用前缀区分，如TDesign组件使用`t-`前缀
   - 自定义组件放在对应页面目录下

## 页面交互模式

1. **表单交互**：
   - 输入框直接输入
   - 时间选择使用弹出式选择器
   - 表单提交前进行数据验证

2. **列表交互**：
   - 使用可折叠的嵌套列表
   - 支持项目展开/折叠
   - 支持选择/取消选择项目

3. **导航交互**：
   - 使用微信小程序原生导航
   - 页面间通过`wx.navigateTo`进行跳转

4. **UI风格**：
   - 主色调：蓝色(#1890FF)
   - 背景色：浅灰色(#f5f5f5)
   - 文字颜色：深色(#333)、中等(#666)、浅色(#999)
   - 圆角风格：按钮使用大圆角(44rpx)，卡片使用小圆角(8rpx)

## 开发注意事项

1. 新增页面时，需要在`app.json`的`pages`数组中添加页面路径。

2. 使用TDesign组件时，需要在页面的JSON文件中引入对应组件。

3. 图标使用SVG格式，存放在`images`目录下。

4. 网络请求应统一管理，建议放在`api`目录下。

5. 保持与现有代码风格一致，特别是命名规范和文件组织方式。

6. 项目使用npm管理依赖，添加新依赖时使用：
   ```
   npm install 包名 --save
   ```
   然后在微信开发者工具中构建npm。

## 如何运行项目

1. 安装依赖：
   ```
   npm install
   ```

2. 使用微信开发者工具打开项目目录。

3. 在工具中点击"构建npm"，将npm包构建到miniprogram_npm目录。

4. 在工具中点击"编译"按钮，或使用快捷键Ctrl+B(Windows)/Cmd+B(Mac)进行编译。

5. 在模拟器中预览效果，或使用真机调试功能在手机上预览。