更新记录

1.0（2025-08-17） 下载此版本

第一次提交，初始化1.0版本，所有的mock数据都已经存在

平台兼容性

uni-app(4.76)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - - - × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
1.0 1.0 - - - - - - - - -

社区惠购小程序

项目介绍

社区惠购是一个基于地理位置的社区团购小程序，整合周边商户资源，通过社交裂变实现快速获客。用户可以在小程序中浏览商品、下单购买、邀请好友获得，团长可以管理订单、查看统计。

功能特性

用户端功能

  • 🏠 首页展示：轮播图、限时秒杀、团长推荐
  • 🛍️ 商品浏览：分类导航、商品搜索、商品详情
  • 🛒 购物车：商品管理、数量修改、批量操作
  • 📦 订单管理：订单创建、支付、状态跟踪
  • 👥 个人中心：用户信息、订单历史、邀请好友
  • 💰 系统：邀请奖励、提现

团长端功能

  • 📊 数据看板：订单统计、***统计、服务数据
  • 📋 订单管理：接单、发货、状态更新
  • 💳 管理：明细、提现申请
  • 🏘️ 社区管理：地理围栏、公告发布

技术特性

  • 🔄 Mock数据：完整的接口Mock，支持开发调试
  • 📱 响应式设计：适配不同屏幕尺寸
  • 🎨 现代化UI：基于uni-ui组件库
  • ⚡ 性能优化：图片懒加载、分页加载

技术栈

  • 前端框架：UniApp + Vue3
  • UI组件库：uni-ui
  • 状态管理：Vue3 Composition API
  • HTTP请求：uni.request + 自定义封装
  • Mock数据：Mock.js
  • 样式预处理：SCSS
  • 构建工具：Vite

项目结构

社区惠购/
├── src/                      # 源码目录（alias `@` 指向此目录）
│   ├── api/                  # API 接口定义
│   ├── components/           # 公共组件
│   ├── mock/
│   │   └── index.js          # Mock 接口定义
│   ├── pages/                # 页面文件
│   │   ├── index/            # 首页
│   │   ├── category/         # 商品分类
│   │   ├── goods/            # 商品详情
│   │   ├── cart/             # 购物车
│   │   ├── order/            # 订单相关
│   │   ├── user/             # 用户中心
│   │   └── leader/           # 团长中心
│   ├── static/               # 静态资源
│   └── utils/
│       └── request.js        # 请求封装
├── src/App.vue               # 应用入口
├── main.js                   # 主入口文件（vite/uni 入口）
├── pages.json                # 页面配置
├── index.html                # H5 入口模板
├── vite.config.js            # Vite 配置（已配置 @ => /src 别名）
├── .env*                     # 环境变量配置
└── package.json              # 依赖与脚本

快速开始

环境要求

  • Node.js >= 18.0.0（Vite 5 要求）
  • HBuilderX 或 VS Code
  • 微信开发者工具（用于微信小程序调试）
  • 推荐使用 pnpm（已包含 pnpm-lock.yaml）

安装依赖

# 推荐使用 pnpm（国内建议配置镜像以加速）
pnpm config set registry https://registry.npmmirror.com
pnpm install

# 如需使用 npm
npm config set registry https://registry.npmmirror.com
npm install

开发运行

# 运行到 H5
pnpm run dev:h5

# 运行到微信小程序
pnpm run dev:mp-weixin

# 运行到支付宝小程序
pnpm run dev:mp-alipay

构建发布

# 构建 H5 版本
pnpm run build:h5

# 构建微信小程序版本
pnpm run build:mp-weixin

接口说明

接口封装

项目使用统一的接口封装，位于 src/utils/request.js：

import { http } from '@/utils/request.js'

// GET请求
const data = await http.get('/api/user/info')

// POST请求
const result = await http.post('/api/auth/login', { code: 'xxx' })

Mock数据

开发环境可启用 Mock 数据，源文件位于 src/mock/index.js。是否启用由环境变量 VITE_USE_MOCK 控制（见下文“环境变量说明”）：

// 用户登录Mock
Mock.mock(/\/api\/auth\/login/, 'post', {
  code: 0,
  message: '登录成功',
  data: {
    token: '@guid',
    userInfo: {
      id: '@id',
      nickname: '@cname'
    }
  }
})

页面说明

用户端页面

  • 首页 (src/pages/index/index.vue)：展示轮播图、秒杀商品、团长推荐（在 pages.json 注册为 pages/index/index）
  • 分类页 (src/pages/category/index.vue)：商品分类浏览
  • 商品详情 (src/pages/goods/detail.vue)：商品信息、规格选择、加入购物车
  • 购物车 (src/pages/cart/index.vue)：商品管理、结算
  • 个人中心 (src/pages/user/center.vue)：用户信息、订单管理、邀请好友

团长端页面

  • 团长中心 (src/pages/leader/dashboard.vue)：数据看板、快捷操作
  • 订单管理 (src/pages/leader/orders.vue)：订单列表、状态管理
  • 管理 (src/pages/leader/commission.vue)：统计、提现申请

配置说明

pages.json

配置页面路由、导航栏样式、底部标签栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "社区惠购"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

manifest.json

配置应用信息、权限、平台配置：

{
  "name": "社区惠购",
  "appid": "__UNI__XXXXXXX",
  "description": "社区团购小程序",
  "versionName": "1.0.0",
  "versionCode": "100"
}

部署说明

微信小程序

  1. 在微信公众平台注册小程序
  2. 配置服务器域名
  3. 使用微信开发者工具上传代码
  4. 提交审核发布

H5版本

  1. 构建H5版本：pnpm run build:h5
  2. 将 dist/build/h5 目录部署到服务器
  3. 配置HTTPS和域名

常见问题

Q: 如何修改Mock数据？

A: 编辑 src/mock/index.js 文件，修改对应的Mock规则。

Q: 如何添加新页面？

A: 在 src/pages 目录下创建页面文件，并在 pages.json 中配置路由。

Q: 如何自定义主题色？

A: 修改 uni.scss 文件中的CSS变量，或直接修改组件样式。

Q: 如何调试接口？

A: 开发环境会自动使用Mock数据，生产环境需要配置真实的API地址。

Q: Node 版本报错（如 Vite 相关错误）怎么办？

A: 请确保 Node.js 版本 >= 18。可使用 nvm/nvs 切换版本后重试。

Q: 如何加速依赖安装？

A: 建议使用 pnpm 并配置国内镜像：pnpm config set registry https://registry.npmmirror.com。

更新日志

v1.0.0 (2024-01-01)

  • 🎉 初始版本发布
  • ✨ 完成用户端核心功能
  • ✨ 完成团长端核心功能
  • ✨ 集成Mock数据系统
  • ✨ 响应式UI设计

贡献指南

  1. Fork 项目
  2. 创建功能分支：git checkout -b feature/xxx
  3. 提交更改：git commit -am 'Add feature xxx'
  4. 推送分支：git push origin feature/xxx
  5. 提交Pull Request

许可证

MIT License

联系方式

  • 项目地址：https://github.com/your-repo/community-shopping
  • 问题反馈：https://github.com/your-repo/community-shopping/issues
  • 邮箱：your-email@example.com

惠聚邻里，购享生活 - 社区惠购小程序

隐私、权限声明

1. 本插件需要申请的系统权限列表：

本插件需要申请的系统权限列表（按需保留）： 用户信息（用于个性化昵称头像展示与售后服务） 位置信息（用于就近门店/同城配送/运费计算） 相机/相册（用于上传身份证/退换货凭证/评价晒图） 存储读写（用于缓存图片与订单列表，提升加载速度） 网络访问（用于与服务器通信） 订阅消息/模板消息（用于支付成功、发货、售后状态提醒） 发票抬头/收货地址（用于下单与开票） 微信支付能力（用于订单支付）

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

采集数据类型（按需保留）： 账号信息：昵称、头像、OpenID/UnionID（用于账号识别与客服/售后） 交易数据：购物车、订单、支付流水号（用于下单、对账与售后） 物流数据：收货地址、联系人、电话（用于发货与物流跟踪） 设备与性能：机型、系统版本、崩溃日志（用于问题定位与性能优化） 位置信息（若开启）：城市/经纬度（用于同城服务与门店推荐） 数据传输与存储： 服务器地址（示例，占位）：https://api.example.com/（请替换为你的真实域名） 传输加密：HTTPS/TLS 存储安全：最小化采集与权限、访问控制、按需脱敏与定期清理 微信支付 SDK：用于拉起微信支付与支付结果回调 腾讯位置服务/地图 SDK（如使用）：用于定位与地图展示，详情参考：https://lbs.qq.com/ 崩溃与性能监控 SDK（如使用）：用于崩溃上报与性能分析，详情参考：[SDK 官网链接] 其他 SDK（如使用）：插件使用的 [XX SDK] 会采集数据，详情参考：[https://other-sdk.com/] 本插件是否包含广告： 默认不包含广告 如开启广告，请说明： 广告类型：信息流/横幅/激励视频等 表达方式：页面内展示/列表中穿插/弹窗等（明确“广告”标识） 展示频率：每页不超过1次/每次会话不超过3次/观看激励视频需用户主动触发 第三方广告 SDK（如有）：名称、官网、所采集数据及用途

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

用户可在系统设置中随时关闭相应权限；关闭后不影响非必要功能的使用。 我们仅在实现业务必要目的的范围内收集最少数据，并在达成目的后进行删除或匿名化处理。 如对隐私有任何疑问或请求（访问、更正、删除、撤回同意），可通过以下方式联系我们： 联系邮箱（占位）：privacy@example.com 客服电话（占位）：400-000-0000

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。