项目简介

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

快速开始

方式一

1. 克隆项目到本地：

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

2. 安装依赖：

   npm install
   

3. 导入到 HBuilderX 中：

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

4. 运行项目：

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

   或

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

方式二

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

项目截图

功能特性

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

项目结构

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. 本项目使用的产品信息、图片资源、页面布局设计均来自于蜜雪冰城官方网站，如涉及版权问题，请及时联系删除。