niumalll/mini_program/README.md

# Mini Program - 活牛采购智能数字化系统小程序矩阵

## 📱 项目概述

活牛采购智能数字化系统小程序矩阵基于uni-app框架开发，支持微信小程序、支付宝小程序、H5等多端发布。系统包含四个独立的小程序应用，分别服务于不同角色用户，实现活牛采购全流程的移动端操作。

**核心特性：**
- 🎯 **多角色支持**：客户端、供应商、司机、内部员工四大角色
- 🔄 **跨平台兼容**：支持微信、支付宝、H5等多平台
- 📡 **实时同步**：WebSocket实时数据更新
- 📍 **位置服务**：GPS定位和轨迹跟踪
- 📸 **媒体支持**：图片、视频上传和播放
- 💼 **离线缓存**：关键数据本地缓存

## 🛠 技术栈

| 类别 | 技术选型 | 版本 | 说明 |
|------|----------|------|------|
| **跨端框架** | uni-app | ^3.0.0 | 跨平台开发框架 |
| **前端框架** | Vue 3 | ^3.3.0 | 响应式前端框架 |
| **开发语言** | TypeScript | ^5.0.0 | 类型安全开发 |
| **状态管理** | Pinia | ^2.1.0 | 状态管理库 |
| **UI组件库** | uni-ui | ^1.4.0 | uni-app官方组件库 |
| **HTTP客户端** | uni.request | 内置 | 网络请求封装 |
| **地图服务** | 腾讯地图 | latest | 位置和导航服务 |
| **构建工具** | Vite | ^4.4.0 | 快速构建工具 |
| **代码规范** | ESLint + Prettier | latest | 代码质量保证 |

## 📂 项目结构

```
mini_program/
├── client-mp/                  # 客户端小程序
│   ├── src/
│   │   ├── pages/             # 页面文件
│   │   │   ├── index/         # 首页
│   │   │   ├── order/         # 订单相关
│   │   │   ├── profile/       # 个人中心
│   │   │   └── auth/          # 认证相关
│   │   ├── components/        # 组件
│   │   ├── stores/           # 状态管理
│   │   ├── utils/            # 工具函数
│   │   ├── api/              # API接口
│   │   ├── static/           # 静态资源
│   │   ├── App.vue           # 应用入口
│   │   └── main.ts           # 主文件
│   ├── manifest.json         # 应用配置
│   ├── pages.json           # 页面配置
│   └── package.json         # 依赖配置
├── supplier-mp/               # 供应商小程序
│   └── ...
├── driver-mp/                # 司机小程序
│   └── ...
├── staff-mp/                 # 内部员工小程序
│   └── ...
├── common/                   # 公共资源
│   ├── components/          # 公共组件
│   ├── utils/              # 公共工具
│   ├── api/                # 公共API
│   ├── types/              # 类型定义
│   └── styles/             # 公共样式
├── docs/                     # 开发文档
└── README.md                # 项目文档
```

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- HBuilderX >= 3.8.0 或 VS Code + uni-app插件
- 微信开发者工具
- 支付宝小程序开发工具（可选）

### 安装依赖
```bash
cd mini_program/client-mp
npm install

# 安装其他小程序依赖
cd ../supplier-mp && npm install
cd ../driver-mp && npm install
cd ../staff-mp && npm install
```

### 开发模式
```bash
# 客户端小程序
cd client-mp
npm run dev:mp-weixin    # 微信小程序
npm run dev:mp-alipay    # 支付宝小程序
npm run dev:h5           # H5

# 其他小程序类似
```

### 构建发布
```bash
# 生产环境构建
npm run build:mp-weixin
npm run build:mp-alipay
npm run build:h5
```

## 📱 小程序功能模块

### 1. 客户端小程序 (Client MP)
**目标用户**：采购人、采购企业
**核心功能**：
- 📋 **订单管理**：创建采购订单、查看订单状态
- 🚛 **运输跟踪**：实时查看运输进度和位置
- ✅ **验收确认**：到货验收、质量确认
- 💰 **支付结算**：查看结算单、在线支付
- 📊 **数据统计**：采购数据分析和报表

### 2. 供应商小程序 (Supplier MP)
**目标用户**：牲畜供应商
**核心功能**：
- 📦 **订单接收**：接收和确认采购订单
- 🐄 **牲畜管理**：牲畜信息录入和管理
- 📋 **检疫证明**：上传检疫合格证明
- 🚚 **装车管理**：装车过程记录和监控
- 📸 **现场拍照**：装车现场照片和视频

### 3. 司机小程序 (Driver MP)
**目标用户**：运输司机
**核心功能**：
- 🚛 **车辆登记**：车辆信息和证件管理
- 📍 **位置上报**：实时GPS位置上报
- 📱 **状态更新**：运输状态实时更新
- 🎥 **视频上报**：运输过程视频记录
- 📄 **单据管理**：运输单据电子化管理

### 4. 内部员工小程序 (Staff MP)
**目标用户**：企业内部员工
**核心功能**：
- 👥 **用户管理**：用户信息查看和管理
- 📊 **数据监控**：业务数据实时监控
- ⚠️ **异常处理**：异常情况处理和跟进
- 📋 **审核管理**：订单和流程审核
- 📈 **统计报表**：业务统计和分析

## 🔧 开发规范

### 命名规范
- **页面文件**：kebab-case（如 `order-list.vue`）
- **组件名**：PascalCase（如 `OrderCard.vue`）
- **变量名**：camelCase（如 `orderInfo`）
- **常量名**：UPPER_SNAKE_CASE（如 `API_BASE_URL`）

### 目录规范
- `pages/`：页面文件，按功能模块分组
- `components/`：组件文件，按类型分组
- `stores/`：状态管理，按业务模块分组
- `api/`：接口定义，按业务模块分组
- `utils/`：工具函数，按功能分组

### 代码规范
- 使用TypeScript进行类型约束
- 使用Composition API编写组件
- 遵循ESLint和Prettier规范
- 组件props必须定义类型
- 使用defineEmits定义事件

## 🌐 API接口

### 接口配置
```typescript
// 环境配置
const config = {
  development: {
    baseURL: 'http://localhost:3001/api',
    wsURL: 'ws://localhost:3001'
  },
  production: {
    baseURL: 'https://api.niumall.com/api',
    wsURL: 'wss://api.niumall.com'
  }
}
```

### 请求封装
```typescript
// 统一请求封装
interface RequestOptions {
  url: string
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
  data?: any
  header?: Record<string, string>
}

const request = (options: RequestOptions) => {
  return uni.request({
    ...options,
    header: {
      'Authorization': `Bearer ${getToken()}`,
      'Content-Type': 'application/json',
      ...options.header
    }
  })
}
```

## 📍 位置服务

### GPS定位
```typescript
// 获取当前位置
const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'gcj02',
      success: resolve,
      fail: reject
    })
  })
}

// 实时位置上报
const startLocationTracking = () => {
  setInterval(async () => {
    try {
      const location = await getCurrentLocation()
      await reportLocation(location)
    } catch (error) {
      console.error('位置上报失败:', error)
    }
  }, 10000) // 每10秒上报一次
}
```

## 📸 媒体处理

### 图片上传
```typescript
// 选择并上传图片
const uploadImage = () => {
  uni.chooseImage({
    count: 9,
    success: (res) => {
      res.tempFilePaths.forEach(filePath => {
        uni.uploadFile({
          url: `${config.baseURL}/upload`,
          filePath,
          name: 'file',
          header: {
            'Authorization': `Bearer ${getToken()}`
          },
          success: (uploadRes) => {
            console.log('上传成功:', uploadRes)
          }
        })
      })
    }
  })
}
```

## 💾 数据缓存

### 本地存储
```typescript
// 缓存管理
class CacheManager {
  static set(key: string, value: any, expire?: number) {
    const data = {
      value,
      expire: expire ? Date.now() + expire : null
    }
    uni.setStorageSync(key, JSON.stringify(data))
  }

  static get(key: string) {
    try {
      const data = JSON.parse(uni.getStorageSync(key))
      if (data.expire && Date.now() > data.expire) {
        this.remove(key)
        return null
      }
      return data.value
    } catch {
      return null
    }
  }

  static remove(key: string) {
    uni.removeStorageSync(key)
  }
}
```

## 🔐 权限管理

### 登录状态管理
```typescript
// 登录状态检查
const checkAuth = () => {
  const token = CacheManager.get('token')
  if (!token) {
    uni.redirectTo({
      url: '/pages/auth/login'
    })
    return false
  }
  return true
}

// 页面访问权限
const checkPagePermission = (userRole: string, requiredRole: string[]) => {
  return requiredRole.includes(userRole)
}
```

## 🧪 测试策略

### 单元测试
- 工具函数测试
- 组件功能测试
- API接口测试
- 状态管理测试

### 真机测试
- 多设备兼容性测试
- 网络环境测试
- 性能压力测试
- 用户体验测试

## 📦 发布部署

### 微信小程序发布
1. 使用微信开发者工具打开项目
2. 点击「上传」按钮上传代码
3. 登录微信公众平台提交审核
4. 审核通过后发布上线

### 支付宝小程序发布
1. 使用支付宝小程序开发工具打开项目
2. 点击「上传」按钮上传代码
3. 登录支付宝开放平台提交审核
4. 审核通过后发布上线

## 🤝 贡献指南

1. **Fork** 仓库
2. **创建**特性分支 (`git checkout -b feature/AmazingFeature`)
3. **提交**更改 (`git commit -m 'Add some AmazingFeature'`)
4. **推送**到分支 (`git push origin feature/AmazingFeature`)
5. **开启** Pull Request

---

**🎯 让移动办公更便捷，让业务管理更高效！**