# 大禹节水灌溉系统

## 项目概述

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

## 项目结构

```
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. **云开发**：项目可能使用了微信小程序云开发功能，用于数据存储和云函数。

## API通信模块

API目录包含了项目中所有与后端通信相关的文件，提供了统一的网络请求处理机制。

### 文件结构

- **request.js**: 网络请求核心模块，封装了微信小程序的`wx.request`接口
  - `request()`: 基础请求函数，处理请求配置、请求头设置和响应处理
  - `get()`: GET请求简化方法
  - `post()`: POST请求简化方法
  - 自动处理token验证、错误处理和loading状态

- **config.js**: 配置文件，定义API基础URL和环境配置
  - 支持多项目环境：嘉峪关(JYG)、民勤(MQ)、测试环境(TEST)
  - `setBaseUrl()`: 动态切换项目环境的函数

- **env.js**: 环境变量配置，定义当前运行环境（生产/测试）

- **statusCode.js**: HTTP状态码常量定义，用于统一处理响应状态

### 使用方法

1. **GET请求**：
   ```javascript
   const { get } = require('../../api/request')
   
   // 获取项目列表
   get({
     url: '/wx/irrigation/getSimpleProjects',
     isShowLoding: true
   }).then(res => {
     if (res.success) {
       // 处理成功响应
       console.log(res.content)
     } else {
       wx.showToast({
         title: res.msg || '请求失败',
         icon: 'none'
       })
     }
   }).catch(err => {
     console.error('请求失败：', err)
     wx.showToast({
       title: '请求失败',
       icon: 'none'
     })
   })
   ```

2. **POST请求**：
   ```javascript
   const { post } = require('../../api/request')
   
   // 获取轮灌组列表
   post({
     url: '/wx/irrigation/getSimpleGroups',
     data: {
       projectId: '2025032017240700001',
       planName: '2025032501',
       startupMode: 1,
       operatorId: 2024090516595200300,
       schedules: [
         {
           groupId: 2025032017371700000,
           duration: 5
         }
       ]
     },
     isShowLoding: true
   }).then(res => {
     if (res.success) {
       // 处理成功响应
       console.log(res.content)
     } else {
       wx.showToast({
         title: res.msg || '请求失败',
         icon: 'none'
       })
     }
   }).catch(err => {
     console.error('请求失败：', err)
     wx.showToast({
       title: '请求失败',
       icon: 'none'
     })
   })
   ```

3. **切换项目环境**：
   ```javascript
   const { setBaseUrl } = require('../../api/config')
   
   // 切换到民勤项目
   setBaseUrl('MQ')
   
   // 切换到嘉峪关项目
   setBaseUrl('JYG')
   
   // 切换到测试环境
   setBaseUrl('TEST')
   ```

所有网络请求会自动处理：
- token 认证（通过请求头 Authorization）
- 项目标识（通过请求头 tag）
- 应用标识（通过请求头 appId）
- 错误处理和响应解析
- 加载状态显示（通过 isShowLoding 参数控制）

## 代码风格和规范

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. 在模拟器中预览效果，或使用真机调试功能在手机上预览。