更新记录

1.0.0（2026-10-28） 下载此版本

本项目仅开源 uni-app 用户端，基于 Vue3，适配网页、微信小程序和 App。用 HBuilderX 导入本目录即可运行，供学习研究。

平台兼容性

uni-app(3.8.7)

其他

酒吧用户端

开源说明

本项目仅开源 uni-app 用户端，基于 Vue3，适配网页、微信小程序和 App。用 HBuilderX 导入本目录即可运行，供学习研究。

能在哪些地方使用

顾客可以在微信小程序、手机/电脑网页，或 App 里使用。面向酒吧/餐饮门店消费：看门店、约桌、点餐、买单、会员充值、存取酒、积分兑换，以及店内互动游戏等。

底部有四个主入口：首页、预约、排行榜、我的。

对接了哪些第三方

下面这些是用户日常能直接感受到的外部服务，不是技术名词堆砌：

• 腾讯地图：获取定位、按距离选门店、看门店位置（H5 端已配置地图钥匙）。
• 微信支付：点餐下单、会员卡充值、酒水卡/套餐购买、到店收银台付款、开通超级会员等，可走微信支付（小程序内最完整；网页端需在微信环境且配好公众号相关能力）。
• 支付宝：部分场景用于收款/提现账号绑定（如提现到支付宝）。
• 会员卡余额：平台自己的余额支付；桌码点餐等场景可选会员卡支付。
• 手机短信验证码：注册、找回密码时，会往手机号发验证码（由服务端发送）。
• 微信登录：小程序内可走微信授权登录，并配合获取手机号；是否开启以后台/前端开关为准。
• 个人微信客服：可复制客服***，或扫客服二维码添加（以后台配置为准）。
• 电话客服：可直接拨打后台配置的客服电话。
• 团购验券：支持抖音 / 美团 / 快手等团购券码兑换、扫码核销（入口在积分相关页，具体以后台开通为准）。
• AI 推荐：游戏里「今天喝什么」会结合酒单数据做口味分析，并推荐一款酒水。
• 手机系统能力：获取定位、拨打电话、扫码（桌码/验券）、从相册选头像、复制***、保存邀请海报等。

游客能做什么

打开软件先看到什么

• 进入当前门店首页，可切换门店。
• 有门店大图、店名，以及「首页 / 门店」等面板切换（以后台功能开关为准）。
• 有滚动公告，可点开看详情。
• 有欢迎区快捷入口（点餐、预约、游戏、积分、存酒等，具体以后台配置为准）。
• 可签到、看活动 Banner。
• 下拉可刷新首页。

预约桌位

• 在「预约」里按日期、预约方式查看门店桌位。
• 看空闲 / 已约状态，查看座位图。
• 选座后提交预约，可联系门店。
• 可在预约记录里查看自己的预约历史。

到店入座 / 桌码点餐

• 扫桌码进入本桌：查看已点菜品、继续加餐、取消点餐。
• 按分类浏览商品、加入购物车后确认支付。
• 支付方式可包括：微信支付、会员卡支付（按门店配置显示）。
• 入座签到页可看本桌状态、主持人信息，并快捷进入酒水卡、积分、会员卡、团购核销等。

在线点餐（自取 / 外卖）

• 先选门店，再切换自取或外卖。
• 按分类浏览商品，看商品详情（规格、数量）。
• 确认订单：选地址/取餐方式、备注、优惠券，提交并支付。
• 订单列表按状态筛选；订单详情可看商品、金额、支付与配送状态；待付款可继续支付或取消。

酒水卡 / 套餐

• 购买酒券套餐，生成酒卡。
• 看套餐订单列表、单张酒卡使用明细（核销、剩余次数等）。

存取酒

• 查看各门店寄存酒水、剩余瓶数。
• 申请取酒，查看待取 / 已取状态。

会员卡、充值、提现

• 会员卡看账户余额。
• 充值（走微信支付等）。
• 看收支明细（充值、消费、退款等）。
• 申请提现、绑定支付宝账号或上传微信收款码，查看提现记录（提现开关以后台为准）。
• 可开通超级会员，查看会员权益与服务协议。

积分与兑换

• 看积分余额、积分明细。
• 积分商城兑换商品或权益，查看兑换记录、领取记录。
• 摇骰子等积分小游戏（以后台活动为准）。
• 团购验券：输入或扫描第三方团购券码完成兑换。

抽奖

• 转盘抽奖，消耗次数立即抽奖。
• 可查看抽奖记录（入口以后台/首页配置为准）。

排行榜

• 在「排行榜」切换积分榜 / 消费榜。
• 看用户排名（头像、昵称、积分或消费金额）。

互动游戏

• 游戏大厅：酒吧趣味游戏列表入口。
• 「今天喝什么」：AI 分析口味并推荐酒水，可继续选规格下单。
• 骰盅类聚会互动。
• 德州扑克工具：牌型大小说明、辅助工具等。
• 其他游戏详情页：规则与互动界面。

附近搭子（社交）

• 基于位置看附近用户 / 搭子，浏览动态。
• 进入个人主页看资料与动态。
• 个人资料可完善***，方便找到搭子。

到店收银台

• 输入金额，勾选支付协议后微信支付（到店买单场景）。
• 支付结果页展示成功 / 失败状态。

邀请朋友赚钱

• 邀请好友、生成/保存邀请海报、微信分享。
• 看我的团队、团队收益明细。
• 注册、登录时可带上邀请关系。

账号和设置

• 账号密码登录；小程序可微信登录。
• 手机号注册（短信验证码）、忘记密码并重置。
• 登录前需同意用户协议、隐私政策等。
• 个人中心改头像、改昵称等资料。
• 设置中心：帮助、协议、关于、意见反馈、投诉记录、联系客服、退出登录。
• 可申请注销账号。

消息、客服、帮助

• 「我的」里有消息入口，未读数量会在底部角标提示。
• 消息中心看订单、活动、系统通知等。
• 客服中心按后台配置，可能是：打电话、***、扫客服二维码。
• 帮助中心看常见问题；意见反馈可提交建议或投诉。

体验

体验相关接口当前指向线上环境（见 common/config.js）。商业授权 / 体验全套可联系项目说明中的微信（备注【酒吧】）。

H5 学习运行时，浏览器能打开接口域名（例如配置中的 https://dzpk3.xianmaxiong.com）再访问用户端页面，才有数据。

技术栈

运行

这份代码已对接线上/测试接口配置，一般不用改配置，用 HBuilderX 打开后直接运行即可。 若需连自己的后端，再改 common/config.js 里的接口地址。

开始前请准备

1. 一台 Windows 电脑（苹果电脑也可以，步骤差不多）。
2. 下载并安装 HBuilderX（官方用来打开这类项目的软件）：
   打开浏览器，搜索「HBuilderX 官网」，进入 https://www.dcloud.io/hbuilderx.html，下载「正式版」，安装后打开。
3. 建议再装一个 Chrome 浏览器，用来打开 H5 运行后的页面。
   若要跑微信小程序，还需安装 微信开发者工具。

第一步：拿到文件夹

1. 如果你收到的是压缩包（例如 zip），先右键「解压到当前文件夹」或「解压到指定文件夹」。
2. 解压后，请找到名字叫 jiuba-uniapp 的文件夹。里面应该能看到 pages.json、App.vue、common 等文件。
3. 记住这个文件夹在电脑上的位置，后面要选中它。不要只打开里面某一个文件。

第二步：用 HBuilderX 打开整个项目

1. 打开已经安装好的 HBuilderX。
2. 点左上角 「文件」→「打开目录」（有的版本也叫「从本地打开」）。
3. 选中刚才的 jiuba-uniapp 文件夹，确定。
4. 左侧出现一长串文件名，就说明打开对了。如果左侧是空的，说明选错了文件夹，请重新选带 pages.json 的那一层。

第三步：用浏览器运行（H5）

1. 在 HBuilderX 顶部菜单点 「运行」→「运行到浏览器」→「Chrome」。
2. 第一次可能会提示安装浏览器运行插件，点允许或安装，等它装完再重新点一次运行。
3. 电脑会自动弹出一个网页。出现首页、底部「首页 / 预约 / 排行榜 / 我的」，就说明运行成功了。
4. 如果浏览器问能不能获取位置，点「允许」，选店、距离等功能才更完整。
5. 不要关 HBuilderX，关了网页可能会断开。

（可选）运行到微信小程序

1. 先打开微信开发者工具，并登录。
2. 在 HBuilderX 点 「运行」→「运行到小程序模拟器」→「微信开发者工具」。
3. 按提示关联微信开发者工具路径；模拟器里能看到首页和底部四个 Tab，即表示运行成功。
4. 真机预览需在开发者工具里用自己的小程序 AppID（manifest.json 里已有示例配置，商用请换成自己的）。

常见情况说明

• 点了运行没反应：确认打开的是整个 jiuba-uniapp 文件夹，不是只打开了一个页面文件。
• 浏览器打开了但是花屏、一直转圈：等十几秒；仍不行就关掉网页，在 HBuilderX 里再点一次运行。
• 页面是空的、提示加载失败：检查电脑能否访问 common/config.js 里配置的接口域名；如果接口本身打不开，用户端也会没数据。
• 地图不显示或定位失败：需要腾讯地图的钥匙（H5 在 manifest.json 已预填，有过期或额度用完的可能）。学习看页面时可以先忽略地图。
• 微信支付、充值点了没反应：需要商家自己的支付账号和小程序/公众号资质，这份开源代码一般只能看到支付流程界面，不能保证真的完成收款。
• 客服、短信验证码收不到：这些依赖服务端和第三方账号，界面可以点，功能不一定通。
• 部分入口看不到：首页快捷入口、会员、存酒、提现等受后台功能开关控制，未开启时页面上不会显示。

第一次建议怎么验收

1. 按第三步在 Chrome 打开（或按可选步骤打开微信开发者工具）。
2. 能看到首页门店信息、底部四个按钮。
3. 点「预约」「排行榜」能进入对应页。
4. 点「我的」，能看到登录入口或已登录后的个人中心。
   做到这里，就说明「这份用户端代码已经在你电脑上跑起来了」。