aiotagro/niumalll

Fork 0

Files

ylweng 501c218a83 添加 IntelliJ IDEA 项目配置文件

2025-09-02 21:59:27 +08:00

9.5 KiB

Raw Blame History

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插件
微信开发者工具
支付宝小程序开发工具（可选）

安装依赖

cd mini_program/client-mp
npm install

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

开发模式

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

# 其他小程序类似

构建发布

# 生产环境构建
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接口

接口配置

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

请求封装

// 统一请求封装
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定位

// 获取当前位置
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秒上报一次
}

📸 媒体处理

图片上传

// 选择并上传图片
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)
          }
        })
      })
    }
  })
}

💾 数据缓存

本地存储

// 缓存管理
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)
  }
}

🔐 权限管理

登录状态管理

// 登录状态检查
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接口测试
状态管理测试

真机测试

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

📦 发布部署

微信小程序发布

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

支付宝小程序发布

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

🤝 贡献指南

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

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

9.5 KiB Raw Blame History Unescape Escape