# mxbc-mp

**Repository Path**: tinypuppet/mxbc-mp

## Basic Information

- **Project Name**: mxbc-mp
- **Description**: 本项目是一个基于uni-app框架开发的蜜雪冰城小程序前端模板，提供商品展示、购物车、订单管理、会员中心等核心功能模块。支持两种快速启动方式：通过Git克隆源码或从uniapp插件市场直接导入。项目包含多个功能分包，如门店管理、客户中心、营销活动等，完整模拟了蜜雪冰城的线上点餐流程和会员体系。特别声明本项目为个人学习用途，非官方产品。开发者可通过微信(tinypuppet)进行交流合作。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-10-25
- **Last Updated**: 2025-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, Vue, Vuex, 奶茶, 小程序

## README

## 项目简介

本项目是基于 uni-app 框架开发的仿蜜雪冰城小程序纯前端模板。

## 快速开始

### 方式一

1. 克隆项目到本地：

   ```bash
   git clone https://github.com/tinypuppet/mxbc-mp.git
   或
   git clone https://gitee.com/tinypuppet/mxbc-mp.git
   ```

2. 安装依赖：

   ```bash
   npm install
   ```

3. 导入到 HBuilderX 中：

   - 打开 HBuilderX 软件。
   - 点击 `文件` -> `导入项目`。
   - 在弹出的对话框中，选择该项目。
   - 点击 `确定` 导入项目。

4. 运行项目：

    - 在 HBuilderX 中，点击 `运行` -> `运行到小程序模拟器`。
    - 选择 `微信开发者工具` 。

    或

    - 在 HBuilderX 中，点击 `运行` -> `运行到浏览器`。

### 方式二

1. 访问 uniapp 插件市场 ：https://ext.dcloud.net.cn/plugin?id=25589
2. 在页面上点击「下载插件并导入HBuilderX」
3. 依照方式一的步骤 2-4 进行操作。

## 项目截图
![collection-1](https://env-00jxu77cydqa.normal.cloudstatic.cn/mxbc/collection-1.png)
![collection-2](https://env-00jxu77cydqa.normal.cloudstatic.cn/mxbc/collection-2.png)
![collection-3](https://env-00jxu77cydqa.normal.cloudstatic.cn/mxbc/collection-3.png)
![collection-4](https://env-00jxu77cydqa.normal.cloudstatic.cn/mxbc/collection-4.png)

## 功能特性

- **商品模块**：模拟蜜雪冰城丰富多样的饮品与商城，包含详细的商品信息和图片。
- **购物车模块**：模拟添加、删除商品，实时计算购物车总价。
- **订单模块**：模拟订单查看。
- **会员模块**：模拟会员权益、等级、蜜雪币、余额充值等页面。
- **营销模块**：模拟优惠券、礼品卡等营销功能。

## 项目结构

### TabBar 页面

- **首页** (`pages/index/index`)：应用入口页面，展示轮播图、推荐商品、活动等内容
- **点餐** (`pages/menu/menu`)：商品列表与点餐功能页面
- **订单** (`pages/order/order`)：用户订单管理中心
- **我的** (`pages/mine/mine`)：用户个人中心，包含会员信息、资产等

#### 门店模块分包 (`pages/store`)

- **门店列表** (`pages/store/list/list`)：展示附近门店与常去门店信息

#### 客户中心分包 (`pages/customer-center`)

- **我的余额** (`pages/customer-center/wallet/wallet`)：用户余额与充值功能
- **会员等级权益** (`pages/customer-center/rights/rights`)：会员等级与对应权益说明
- **会员等级规则** (`pages/customer-center/level-rule/level-rule`)：会员等级升级规则详情
- **个人资料** (`pages/customer-center/userinfo/userinfo`)：用户个人信息管理
- **我的雪王币** (`pages/customer-center/coins/coins`)：雪王币余额与管理
- **雪王币明细** (`pages/customer-center/coins-detail/coins-detail`)：雪王币收支明细记录

#### 营销模块分包 (`pages/marketing`)

- **优惠券** (`pages/marketing/coupons/coupons`)：用户优惠券管理中心
- **雪王礼品卡** (`pages/marketing/gift-card/gift-card`)：礼品卡购买与管理
- **选择礼品卡** (`pages/marketing/gift-card-detail/gift-card-detail`)：礼品卡选择页面
- **兑换中心** (`pages/marketing/exchange/exchange`)：积分或虚拟货币兑换商品

#### 活动模块分包 (`pages/activity`)

- **雪王魔法铺** (`pages/activity/mosushop/mosushop`)：特色活动商品购买页面

## 特别说明

1. 本人非蜜雪冰城官方员工，非官方产品；
2. 本项目代码均为独立开发，仅用于学习与研究；
3. 本项目使用的产品信息、图片资源、页面布局设计均来自于蜜雪冰城官方网站，如涉及版权问题，请及时联系删除。

## 联系作者

商务合作/交流学习/问题反馈可添加WX：**tinypuppet**