# uniapp云酒店

**Repository Path**: Chenfangyijie_code/uniapp-cloud-hotel

## Basic Information

- **Project Name**: uniapp云酒店
- **Description**: 基于 uniapp + Vue 2 + tm-vuetify + uniCloud（阿里云） 的酒店管理后台系统，
适合作为小型酒店的前台管理工具，支持 H5、App、小程序多端运行。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-24
- **Last Updated**: 2026-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp 云酒店后台管理系统

## 项目介绍

这是一个基于 **uniapp + Vue 2 + tm-vuetify + uniCloud（阿里云）** 的酒店管理后台系统。主要功能包括：

- 账号登录（云端验证）
- 首页房态管理（房型/房态筛选、房间列表、办理入住）
- 系统设置（酒店基本信息配置）

适合作为小型酒店的前台管理工具，支持 H5、App、小程序多端运行。

## 技术栈

| 技术 | 说明 |
|------|------|
| uniapp | 跨平台开发框架 |
| Vue 2.x | 前端框架 |
| tm-vuetify | UI 组件库（已内置） |
| uniCloud-aliyun | 阿里云 Serverless 后端 |

## 目录结构

```
├── App.vue                 应用入口
├── main.js                 主文件（全局登录检查）
├── pages/
│   ├── login/login.vue     登录页
│   └── index/index.vue     主页（Tab切换）
├── components/
│   ├── index/              首页相关组件
│   │   ├── home.vue        首页主组件
│   │   ├── room.vue        房间列表
│   │   ├── choice.vue      筛选条件
│   │   └── plug/move.vue   入住办理表单
│   ├── system/             系统设置组件
│   │   ├── system.vue      系统设置主组件
│   │   └── basic.vue       基本信息表单
│   ├── left-menu/          左侧菜单
│   ├── select-lay/         下拉选择器
│   └── mx-datepicker/      日期选择器
├── utils/
│   ├── util.js             通用工具函数
│   └── config-validator.js 配置校验
├── uniCloud-aliyun/
│   ├── cloudfunctions/
│   │   ├── user/index.js   登录云函数
│   │   └── hotel/index.js  酒店信息云函数
│   └── database/           数据库表结构
└── tm-vuetify/             UI组件库（勿改）
```

## 部署教程（小白专用）

### 第一步：安装开发工具

1. 下载并安装 **HBuilderX**（uniapp 官方 IDE）：https://www.dcloud.io/hbuilderx.html
2. 选择「App开发版」下载，安装后打开

### 第二步：导入项目

1. 打开 HBuilderX
2. 点击菜单「文件」→「导入」→「从本地导入」
3. 选择本项目文件夹，点击确定

### 第三步：关联阿里云

1. 登录 https://unicloud.dcloud.net.cn/ 注册阿里云服务空间
2. 在 HBuilderX 中，右键项目根目录 →「关联云服务空间」
3. 选择刚创建的阿里云服务空间

### 第四步：初始化数据库

1. 在 `uniCloud-aliyun/database/` 目录下，右键 `user.schema.json` →「上传 DB Schema」
2. 右键 `hotel.schema.json` →「上传 DB Schema」
3. 手动在 user 表中添加一条管理员记录：
   - name：`admin`
   - password：`123456`

### 第五步：上传云函数

1. 右键 `uniCloud-aliyun/cloudfunctions/user` →「上传部署」
2. 右键 `uniCloud-aliyun/cloudfunctions/hotel` →「上传部署」

### 第六步：运行项目

- **H5 预览**：点击工具栏「运行」→「运行到浏览器」→ 选择 Chrome
- **App 预览**：连接手机或模拟器 →「运行到 App 基座」
- **小程序**：填写 `manifest.json` 中 `mp-weixin.appid` →「运行到微信开发者工具」

## 使用教程

### 登录

1. 打开应用，进入登录页
2. 输入账号（默认 admin）和密码（默认 123456）
3. 点击「立即登录」

### 房态管理

1. 登录后进入首页，左侧显示房间信息，右侧显示房间列表
2. 顶部可按「房型」「房态」筛选房间
3. 点击左侧「入住」按钮，弹出入住办理表单

### 系统设置

1. 点击顶部「系统设置」标签
2. 填写酒店名称、电话、地址、楼层数
3. 点击「保存数据」

## 常见问题（FAQ）

### Q1：登录提示「网络连接失败」？

- 检查是否已关联云服务空间
- 检查网络是否正常
- 确认云函数已上传部署

### Q2：登录提示「账号不存在或密码错误」？

- 确认 user 表中已添加用户记录
- 检查账号密码拼写是否正确

### Q3：系统设置保存失败？

- 确认 hotel 表中已有一条记录（_id 需与代码中一致）
- 检查云函数 hotel 是否已上传

### Q4：H5 预览白屏？

- 清除浏览器缓存后重试
- 检查浏览器控制台是否有报错

### Q5：小程序运行报错？

- 在 `manifest.json` 中填写小程序的 appid
- 确认微信开发者工具已安装

## 开发说明

- UI 组件库 `tm-vuetify/` 为第三方库，请勿修改
- 通用工具函数在 `utils/util.js`，包含提示、校验、日期处理等
- 启动时自动校验配置，异常会在控制台输出警告
- 云函数返回统一格式：`{ code, msg, ... }`，code=100 表示成功

## 参与贡献

1. Fork 本仓库
2. 新建功能分支
3. 提交代码
4. 发起 Pull Request