更新记录

1.0.1（2026-08-17）

发版

1.0.0（2026-08-17）

发版

平台兼容性

云端兼容性

uni-app(5.12)

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

📱AI 软件开发-联系客服 📱

手机扫码体验（app+微信小程序）

iOS Android 微信小程序
验证码：1234

管理后台（unicloud）

项目截图（iPhone 12 Pro）

以下截图使用 iPhone 12 Pro 视口（390 × 844）从 H5 页面生成，并已上传到 43 服务器。

首页	陪伴师列表	陪伴师详情
聊天页	确认订单	心动墙
发布心动	消息	我的订单
我的	我的钱包	优惠券
实名认证	申请成为陪玩师	设置

管理后台截图

运营总览	人员管理
服务管理	订单管理
钱包管理	心动墙管理
平台配置

陪你玩 uni-app

「陪你玩」是一款面向年轻用户的游戏陪玩、语音陪伴与轻社交 App。项目以移动端体验为核心，优先保证 H5 展示效果，同时兼容 Android 与 iOS。

整体视觉采用白色 / 奶油白背景、高级紫色主色和少量粉色点缀，突出陪伴师头像、在线状态、服务价格、订单流程与消息互动。

技术栈

• uni-app
• Vue 3
• TypeScript
• Composition API
• Pinia
• SCSS
• Vite
• uniCloud 阿里云服务空间

核心功能

用户端

• 启动页：品牌露出、主视觉插画、立即进入。
• 首页：问候语、通知入口、搜索框、在线 Banner、游戏分类、推荐陪伴师。
• 陪玩师列表：搜索、排序、游戏 / 服务 / 价格筛选、陪伴师卡片列表。
• 陪玩师详情：人物大图、基础资料、评分数据、服务项目、私信与下单入口。
• 选择服务 / 下单：服务选择、局数 / 时长、预约时间、备注、费用明细、立即支付。
• 支付结果：支付成功提示、订单信息、查看订单、继续逛逛。
• 订单列表：全部、待付款、进行中、待评价、已完成等状态切换。
• 订单详情：订单状态、陪伴师信息、服务信息、费用明细、进度时间轴。
• 心动墙：推荐、关注、附近互动动态，展示心动、点赞、评论、礼物等数据。
• 消息中心：系统通知、订单消息、互动消息、私信快捷入口。
• 聊天页：文本消息、图片消息、服务卡片、订单卡片、底部输入栏。
• 钱包：陪伴币余额、充值金额选择、支付方式、明细入口。
• 我的：用户资料、关注 / 粉丝 / 订单 / 钱包统计、功能列表。
• 入驻申请：实名认证、资料填写、服务设置、认证图片上传。
• 审核结果：审核中状态、进度展示、查看进度、返回首页。
• 陪玩师工作台：接单开关、收入数据、订单统计、快捷功能、最近订单。

后端能力

• 使用 uniCloud-aliyun 组织云对象与数据库 schema。
• 已规划云对象：home-co、companion-co、order-co、wallet-co、message-co、user-co。
• 已规划数据表：陪伴师、服务、游戏分类、订单、钱包、充值、提现、消息、心动墙、Banner、推荐位、举报、配置等。
• 金额字段按“分”为单位保存，最终价格应由后端计算，前端不可信任提交的最终金额。

页面结构

主包页面：

• pages/splash/index：启动页
• pages/home/index：首页
• pages/discover/index：心动墙
• pages/messages/index：消息
• pages/orders/index：订单
• pages/profile/index：我的

分包页面：

• pages-sub/companion/list/index：陪玩师列表
• pages-sub/companion/detail/index：陪玩师详情
• pages-sub/checkout/index：下单页
• pages-sub/payment/result/index：支付结果
• pages-sub/order/detail/index：订单详情
• pages-sub/chat/index：聊天页
• pages-sub/wallet/index：钱包
• pages-sub/wallet/records/index：钱包明细
• pages-sub/profile/follows/index：我的关注
• pages-sub/profile/coupons/index：优惠券
• pages-sub/profile/verify/index：实名认证
• pages-sub/profile/support/index：客服中心
• pages-sub/profile/privacy/index：隐私政策
• pages-sub/profile/settings/index：设置
• pages-sub/onboarding/apply/index：陪玩师入驻申请
• pages-sub/onboarding/result/index：审核结果
• pages-sub/workbench/index：陪玩师工作台

交互流程

• 首页 -> 陪玩师列表
• 首页 -> 陪玩师详情
• 陪玩师详情 -> 私信
• 陪玩师详情 -> 立即下单
• 下单 -> 支付结果
• 支付结果 -> 订单详情
• 订单列表 -> 订单详情
• 消息 -> 聊天
• 我的 -> 钱包
• 我的 -> 入驻申请
• 入驻申请 -> 审核结果
• 陪玩师入口 -> 工作台

公共组件

项目已抽取常用 UI 组件，减少页面重复结构：

• AppNavbar.vue：自定义导航栏
• AppTabBar.vue：自定义底部 TabBar
• UserAvatar.vue：用户头像
• OnlineBadge.vue：在线状态
• CompanionCard.vue：陪伴师卡片
• ServiceCard.vue：服务项目卡片
• GameTag.vue：游戏 / 服务标签
• PriceText.vue：价格文本
• OrderCard.vue：订单卡片
• ChatBubble.vue：聊天气泡
• BalanceCard.vue：钱包余额卡
• ActionSheet.vue：底部弹层
• EmptyState.vue：空状态
• LoadingSkeleton.vue：加载骨架屏

目录说明

src/
  api/              接口封装，后续可切换 uniCloud 云对象
  components/       公共组件
  composables/      组合式逻辑
  constants/        常量配置
  mock/             第一阶段 Mock 数据
  pages/            主包页面
  pages-sub/        分包页面
  static/           图片、TabBar、iconfont 等静态资源
  stores/           Pinia 状态管理
  styles/           Design Token、混入、全局样式
  types/            TypeScript 类型
  utils/            工具函数
uniCloud-aliyun/
  cloudfunctions/   uniCloud 云对象
  database/         数据库 schema
docs/               UI 规范、页面流程、组件说明、项目状态

运行与构建

安装依赖：

pnpm install

启动 H5 开发服务：

pnpm run dev:h5

构建 H5：

pnpm run build:h5

H5 构建产物默认输出到：

dist/build/h5

uniCloud 部署说明

1. 使用 HBuilderX 打开项目根目录。
2. 在 manifest.json 中重新获取并填写真实 DCloud AppID。
3. 关联 uniCloud 阿里云服务空间。
4. 右键 uniCloud-aliyun 上传云对象与数据库 schema。
5. 根据生产环境支付、短信、通知、内容审核等能力补充对应配置。

项目文档

• docs/UI_SPEC.md：UI 规范摘要
• docs/PAGE_FLOW.md：页面流转
• docs/COMPONENTS.md：公共组件说明
• docs/STATUS.md：当前状态与部署提示

适配说明

• 页面按移动端 750rpx 设计比例实现。
• 页面使用自定义导航栏与自定义 TabBar。
• 样式统一从 styles/tokens.scss、styles/mixins.scss、styles/global.scss 管理。
• 重点处理 safe-area-inset-top 与 safe-area-inset-bottom，适配全面屏、刘海屏与底部安全区。

👉︎👉︎👉︎ 咨询客服 👈︎👈︎👈︎

Vibe coding 软件开发：出售多种网赚项目和软件开发(点击前往查看详情)

扫码体验