更新记录

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

本项目仅开源 uni-app 用户端（含店员端工作台入口），基于 Vue3 + uView Plus，适配网页（H5）、微信小程序和 App。用 HBuilderX 导入本目录即可运行，供学习研究。

平台兼容性

uni-app(3.8.7)

其他

树洞

开源说明

本项目仅开源 uni-app 用户端（含店员端工作台入口），基于 Vue3 + uView Plus，适配网页（H5）、微信小程序和 App。用 HBuilderX 导入本目录即可运行，供学习研究。

产品品牌名为 树洞：校园社交场景下的表白墙、盲盒匹配与陪伴下单。

能在哪些地方使用

普通用户可以在电脑或手机的网页里使用，也可以做成微信小程序、打包成 App。想发表白、开盲盒找人陪伴、按条件选店员下单，都在同一套用户端里完成；审核通过的店员还可切换到店员工作台接单、看收益。

底部有四个主入口：表白墙、盲盒、选人、我的。

对接了哪些第三方

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

• 微信支付：盲盒下单、指定店员下单、金币充值、表白赠礼等场景，可走微信支付。在手机网页上，通常需在微信里打开并配合公众号相关配置，才能顺利唤起微信支付。
• 支付宝：同样用于下单付款和充值等（按当前打开端与后台开关显示）。
• 金币余额：平台虚拟币支付；余额不够会提示去充值或换微信支付 / 支付宝。
• 手机短信验证码：登录时往手机号发验证码（由服务端发送）。
• 微信登录 / 授权：小程序可走微信授权与手机号授权；H5 / App 也有微信快捷登录相关入口（是否可用以后台与微信开放平台配置为准）。
• 即时聊天（WebSocket）：用户与店员可在订单相关会话里发文字、图片、语音等（能力按端略有差异）。
• 在线客服 / 联系客服：「我的」里可打开后台配置的客服入口。
• 手机系统能力：选相册发图、录音发语音（H5 能力有限）、复制***、分享好友等。

说明：部分支付、短信、客服、聊天能力依赖商家自己的第三方账号与后台配置；开源学习环境里界面可以点，功能不一定全部打通。

用户能做什么

打开软件先看到什么

• 首页是 表白墙：展示近期表白卡片（送礼人 / 收礼人、文案、礼物与价格），顶部有相遇人数统计。
• 可点右下角「+」去 发布表白；列表只展示最近约 30 天的精彩瞬间。
• 底部四个 Tab 可随时切换到盲盒、选人、我的。

表白墙

• 浏览他人表白动态，点击卡片可进入相关详情 / 对象信息（按页面跳转）。
• 发布表白：选择对象、填写内容、选择礼物并支付（金币 / 微信 / 支付宝，按端与后台显示）。
• 我的表白：在「我的」快捷入口查看自己发出的表白记录。

盲盒怎么下单

• 在 盲盒 Tab 选择性别、服务类型、店员等级、服务时长。
• 填写联系微信与备注；可选「排除接过单的店员」。
• 选择支付方式后确认下单，由平台按条件匹配店员。
• 应付金额按所选服务与时长计算；余额不足会提示充值。

选人怎么下单

• 选人 Tab：搜索店员、看女神榜 / 男神榜、浏览推荐店员列表（在线状态、等级角标、收藏爱心等）。
• 可进筛选页按条件过滤；点进店员详情查看介绍、服务项、评价，再确认下单。
• 下单页确认服务与金额后支付；订单可在「我的订单」里跟踪。

订单里能做什么

• 我的订单：查看下单记录与状态，进入订单详情。
• 进行中订单可配合聊天沟通；完成后可去评价中心提交评价。
• 待支付订单可继续选择支付方式完成付款。

付钱怎么付

• 常见可选：金币余额、微信支付、支付宝（按当前端与后台配置显示，不是每种环境都有全部方式）。
• 钱包可充值金币（需同意充值协议），并查看收支明细。
• 金币一般用于站内消费，页面会提示谨慎充值、不可随意提现等规则（以后台说明为准）。

「我的」里有什么

• 登录入口：未登录显示「立即登录」；登录后可看昵称、用户 ID、金币余额。
• 快捷入口：我的订单、我的钱包、我的表白、我的收藏。
• 更多菜单：帮助中心、分享好友、联系客服、投诉建议、成为店员（或店员资料）。
• 右上角消息铃铛进入消息中心；设置里可看协议、注销账号、退出登录等。
• 已具备店员身份时，可 切换至店员端 工作台。

消息与聊天

• 消息中心按分类查看系统 / 业务通知。
• 订单相关可进入聊天详情，与对方沟通服务细节。

成为店员与店员端

• 普通用户可在「我的」申请 成为店员，按页面填写资料提交审核。
• 审核通过后可进入 店员工作台：接单开关、今日接单 / 收益、订单管理、核心看板、服务项目管理、接单设置、资料设置、收到的表白、收益与提现（微信收款码 / 支付宝账号等，按配置）。
• 店员可在待接单列表接单，并在订单详情里联系用户、推进服务。

账号和设置

• 手机号 + 短信验证码登录；另有微信快捷登录（按端）。
• 登录前需同意用户协议、隐私政策等。
• 可编辑个人资料、管理收藏的店员、分享邀请好友。
• 可申请注销账号，提交后由平台审核。

帮助与反馈

• 帮助中心查看常见问题。
• 投诉建议可提交反馈。
• 联系客服走后台配置入口。

体验

体验 / 接口环境域名：https://shudong.xianmaxiong.com

（用户端默认已指向该环境的后台服务。商业授权或体验全套可按仓库注释联系方式沟通。）

技术栈

主色：#7A59FF。

运行

这份代码已经接到线上体验环境，一般不用改接口地址，用 HBuilderX 打开后直接运行即可。

接口配置在 common/config.js（默认 https://shudong.xianmaxiong.com/sqx_fast）。

开始前请准备

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

第一步：拿到文件夹

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

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

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

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

1. 在 HBuilderX 顶部菜单点 「运行」→「运行到浏览器」→「Chrome」。
2. 第一次可能会提示安装浏览器运行插件，点允许或安装，等它装完再重新点一次运行。
3. 电脑会自动弹出一个网页。出现表白墙列表、底部「表白墙 / 盲盒 / 选人 / 我的」，就说明运行成功了。
4. 不要关 HBuilderX，关了网页可能会断开。

也可以运行到微信小程序 / App

1. 微信小程序：菜单 「运行」→「运行到小程序模拟器」→「微信开发者工具」（需先装好微信开发者工具，并在 HBuilderX 里配置好安装路径）。
2. App：菜单 「运行」→「运行到手机或模拟器」，按提示连接真机或模拟器。

常见情况说明

• 点了运行没反应：确认打开的是整个项目根目录，不是只打开了一个页面文件。
• 浏览器打开了但是花屏、一直转圈：等十几秒；仍不行就关掉网页，在 HBuilderX 里再点一次运行。
• 页面是空的、提示加载失败：检查电脑能否访问 https://shudong.xianmaxiong.com ；如果这个环境本身打不开，用户端也会没数据。
• 微信支付、支付宝点了没反应：需要商家自己的支付账号与对应端配置，这份开源代码一般只能看到支付按钮，不能保证真的完成收款。
• 短信验证码收不到、客服打不开、聊天连不上：这些依赖服务端和第三方账号，界面可以点，功能不一定通。
• H5 里录音 / 部分微信能力受限：语音消息、微信授权等主要在 App / 小程序或微信内置浏览器里更完整。

第一次建议怎么验收

1. 按第三步在 Chrome 打开。
2. 能看到表白墙列表与底部四个 Tab。
3. 点「盲盒」，能看到性别 / 服务 / 等级 / 时长选择与下单栏。
4. 点「选人」，能看到榜单或店员列表。
5. 点「我的」，能看到登录入口、金币余额与订单 / 钱包等入口。
   做到这里，就说明「这份树洞用户端代码已经在你电脑上跑起来了」。