更新记录

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

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

平台兼容性

uni-app(3.8.7)

其他

酒吧用户端（破釜 POKER BAR）

开源说明

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

能在哪些地方使用

顾客可以在微信小程序、手机或电脑网页、以及 App 里使用。面向酒吧到店消费场景：选门店、点餐、桌位预约、会员充值、存取酒、积分兑换、附近搭子与互动游戏等。

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

对接了哪些第三方

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

• 微信支付：点餐下单、收银台买单、会员卡充值、酒券套餐购买等，可走微信支付。小程序内直接调起；H5 需在微信内打开才更容易完成支付。
• 支付宝：部分充值、提现绑定等场景会用到（以后台与端上配置为准）。
• 钱包余额：平台会员卡余额支付，钱不够会提示换微信支付等其他方式。
• 手机短信验证码：登录、注册、找回密码时，会往手机号发验证码（由服务端发送）。
• 微信授权 / 手机号快捷登录：小程序里可走微信相关能力完成登录或绑定手机号（具体入口以后台开关为准）。
• 电话客服 / 微信客服：后台若配好了客服电话或***，可在「联系客服」里拨打或复制添加。
• 平台消息：登录后可在消息中心查看订单、活动等通知；未读数会在「我的」Tab 上提示。
• 团购验券：支持抖音 / 美团 / 快手等团购券码兑换与核销说明页（以后台是否开启为准）。
• 手机系统能力：获取定位（算门店距离、附近搭子）、扫桌码、拨打电话、从相册选头像、打开内嵌网页等。

说明：部分功能入口受后台配置开关控制（如会员、零钱、酒水卡、存取酒、小程序总开关等），关闭时页面上不会显示对应入口。

用户能做什么

打开软件先看到什么

• 进入羊皮纸风格的 Lucky 首页（当前启动页）。
• 能看到当前门店、签到与活动相关入口（具体以后台与运营配置为准）。
• 有一排业务入口宫格（点餐、预约、积分、游戏等，以后台与页面配置为准）。
• 可从首页进入点餐、抽奖、互动游戏等能力。
• 扫码带上门店信息时，可直接进入对应门店的点餐流程。

点餐和下单

• 选择门店，切换自取 / 外卖。
• 按分类浏览商品，看商品详情（规格、数量），加入购物车。
• 确认订单：选地址或取餐方式、写备注、用优惠券后提交并支付。
• 在「点餐订单」里按状态查看全部订单，进订单详情看商品、金额、支付与配送状态。
• 可取消待付款订单、继续支付，或再次购买。

桌码堂食

• 扫桌上的二维码进入本桌点餐页，绑定门店与桌位。
• 查看本桌已点菜品，继续加餐或取消点餐。
• 加餐页按分类选菜、加购物车。

预约桌位

• 在「预约」Tab 按日期、预约方式筛选门店桌位。
• 查看空闲 / 已约状态，看座位图，提交座位预约。
• 可联系门店；在「我的」相关入口查看预约记录。

收银台买单

• 到店输入金额，勾选支付协议后微信支付。
• 支付结果页展示成功 / 失败状态。
• 可查看用户支付协议正文。

酒券套餐与存取酒

• 购买酒水卡 / 酒券套餐，查看已购套餐订单。
• 查看单张酒卡的核销与剩余次数等明细。
• 在存酒记录里查看各门店寄存酒水、剩余瓶数、取酒状态（待取 / 已取）。

会员卡、充值与提现

• 查看会员卡余额，充值、看收支明细。
• 开通超级会员，查看会员权益与会员协议。
• 按门店配置可申请提现、绑定提现账号、查看提现记录。

积分与营销

• 查看积分余额与积分明细入口。
• 在积分商城用积分兑换商品或权益，查看兑换与领取记录。
• 团购验券：输入或扫码兑换第三方团购券，并查看核销说明。
• 摇骰子等积分 / 活动类小游戏。

排行榜

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

附近搭子与互动游戏

• 基于位置查看附近用户 / 搭子，筛选用户，进个人主页。
• 进入游戏大厅，玩「今天喝什么」、骰盅等酒吧趣味互动。
• 可查看单个游戏的规则与玩法页。

邀请朋友

• 邀请好友、看我的团队、看团队收益。
• 登录、注册时可填邀请码；从分享链接进来也会带上邀请关系。

账号和设置

• 账号密码登录、手机号登录、注册、忘记密码。
• 登录前需同意用户协议、隐私政策等（页面会展示对应协议）。
• 个人中心改头像、改昵称等资料。
• 设置中心：帮助、关于我们、意见反馈、联系客服、退出登录。
• 可申请注销账号；也可查看投诉记录。
• 收货地址：列表管理、新增 / 编辑、设为默认（外卖场景）。

消息与帮助

• 「我的」里有消息入口，未读数量会提示。
• 消息中心查看系统 / 业务消息。
• 帮助中心看常见问题详情。
• 意见反馈可提交建议或问题。

付钱怎么付

• 下单或收银台后调起支付，常见为 微信支付；会员卡场景可用 余额。
• 可先选优惠券再付款（点餐结算页）。
• 余额不够会提示换其他方式。
• 支付成功后订单或充值生效；没付完可在订单里继续「去支付」。

体验

体验域名（项目内公共域名配置）：https://jiuba.xianmxkj.com

当前接口默认指向：common/config.js 中的环境地址（如 https://dzpk2.xianmaxiong.com/sqx_fast），学习运行前可按需改成你自己的后端地址。

技术栈

配套文档（同目录）：

• 架构说明：ARCHITECTURE.md
• 路由清单：PAGES_ROUTES.md
• UI 改造方案：用户端页面升级改造方案.md

运行

这份代码需要对接后端 jiuba-service。默认 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，关了网页可能会断开。

也可在本目录用命令行（需已安装 Node.js）：

npm install
npm run dev:h5

第四步（可选）：运行到微信小程序

1. 安装并打开微信开发者工具，登录你的微信账号。
2. 在 HBuilderX 点 「运行」→「运行到小程序模拟器」→「微信开发者工具」。
3. 按提示关联或选择微信开发者工具路径；首次可能要在 manifest.json 里确认小程序 appid。
4. 模拟器里出现四个 Tab，就说明跑起来了。

常见情况说明

• 点了运行没反应：确认打开的是整个 jiuba-uniapp 文件夹，不是只打开了一个页面文件。
• 浏览器打开了但是花屏、一直转圈：等十几秒；仍不行就关掉网页，在 HBuilderX 里再点一次运行。
• 页面是空的、提示加载失败：检查 common/config.js 里的接口地址能否在浏览器访问；后端没开或域名不通时，用户端也会没数据。
• 定位失败、附近门店/搭子异常：需要允许浏览器或手机的定位权限；学习看页面时可以先忽略。
• 微信支付点了没反应：需要商户自己的支付账号与小程序配置，这份代码一般只能看到支付流程界面，不能保证真的完成收款。
• 短信验证码收不到、客服打不通：这些依赖服务端和第三方账号，界面可以点，功能不一定通。
• 部分入口看不到：后台功能开关关掉了（会员、酒水卡、存取酒等），属于正常现象。

第一次建议怎么验收

1. 按第三步在 Chrome 打开（或按第四步打开微信模拟器）。
2. 能看到首页，底部四个按钮：首页、预约、排行榜、我的。
3. 点「我的」，能看到登录入口和个人中心菜单。
4. 再点「预约」「排行榜」，能进入对应页面。
   做到这里，就说明「这份用户端代码已经在你电脑上跑起来了」。