更新记录

1.0.0 下载此版本

首次发布 完整的酒店预约系统功能 支持多端适配

平台兼容性

uni-app(4.06)

uni-app x(4.06)

酒店预约系统插件使用说明

📋 目录

1. 快速开始
2. 项目结构说明
3. 核心功能使用
4. 组件使用指南
5. 自定义配置
6. 部署指南
7. 常见问题
8. 技术支持

🚀 快速开始

系统要求

• Node.js: >= 16.0.0
• 包管理器: npm >= 8.0.0 或 pnpm >= 7.0.0
• 浏览器: Chrome >= 88, Safari >= 14, Firefox >= 90

安装步骤

1. 下载插件

   # 从插件市场下载或克隆项目
   git clone [项目地址]
   cd hotel-booking-system

2. 安装依赖

   # 使用 npm
   npm install
   
   # 或使用 pnpm (推荐)
   pnpm install

3. 启动开发服务器

   # 使用 npm
   npm run dev
   
   # 或使用 pnpm
   pnpm dev

4. 访问应用

   • 打开浏览器访问: http://localhost:5173
   • 系统会自动打开默认浏览器

📁 项目结构说明

src/
├── components/              # 组件目录
│   ├── common/             # 通用组件
│   │   ├── Header.vue      # 页面头部
│   │   ├── Footer.vue      # 页面底部
│   │   └── Navigation.vue  # 导航组件
│   └── ui/                 # UI组件
│       ├── Button.vue      # 按钮组件
│       ├── Input.vue       # 输入框组件
│       └── Modal.vue       # 模态框组件
├── pages/                  # 页面组件
│   ├── HomePage.vue        # 首页
│   ├── HotelDetailPage.vue # 酒店详情页
│   ├── BookingPage.vue     # 预订页面
│   ├── PaymentPage.vue     # 支付页面
│   ├── AllOrdersPage.vue   # 订单列表
│   ├── FavoritesPage.vue   # 收藏夹
│   ├── HelpCenterPage.vue  # 帮助中心
│   └── SettingsPage.vue    # 设置页面
├── assets/                 # 静态资源
│   ├── images/            # 图片资源
│   └── styles/            # 样式文件
├── utils/                  # 工具函数
│   ├── api.js             # API接口
│   ├── config.js          # 配置文件
│   └── helpers.js         # 辅助函数
├── hooks/                  # Vue组合式API
│   ├── useAuth.js         # 认证相关
│   └── useBooking.js      # 预订相关
└── router/                 # 路由配置
    └── index.js           # 路由定义

🎯 核心功能使用

1. 首页功能

轮播图管理

<!-- 在 HomePage.vue 中 -->
<template>
  <div class="carousel-container">
    <!-- 轮播图会自动播放，每4秒切换一次 -->
    <!-- 支持手动点击切换 -->
  </div>
</template>

酒店搜索

• 支持按地区搜索
• 支持按价格范围筛选
• 支持按评分筛选
• 实时搜索结果展示

2. 酒店详情页

查看酒店信息

// 访问酒店详情
router.push({
  name: 'HotelDetail',
  params: { id: hotelId }
})

房间信息展示

• 房间面积、床型、入住人数
• 房间设施和服务
• 实时价格和可预订状态

3. 预订流程

步骤说明

1. 选择入住和退房日期
2. 选择房间类型和数量
3. 填写客人信息
4. 确认订单详情
5. 选择支付方式
6. 完成支付

代码示例

// 创建预订
const createBooking = async (bookingData) => {
  try {
    const response = await api.post('/bookings', bookingData)
    return response.data
  } catch (error) {
    console.error('预订失败:', error)
    throw error
  }
}

4. 订单管理

查看订单列表

• 支持按状态筛选（全部、待支付、已确认、已完成、已取消）
• 支持搜索功能
• 分页显示

订单操作

• 查看订单详情
• 取消订单
• 申请退款
• 重新预订

🧩 组件使用指南

通用组件

Header 组件

<template>
  <Header 
    :show-back="true" 
    :title="页面标题"
    @back="handleBack"
  />
</template>

Button 组件

<template>
  <Button 
    type="primary" 
    size="large"
    :loading="isLoading"
    @click="handleClick"
  >
    按钮文字
  </Button>
</template>

Modal 组件

<template>
  <Modal 
    v-model:visible="showModal"
    title="模态框标题"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>模态框内容</p>
  </Modal>
</template>

页面组件使用

路由跳转

import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转到酒店详情
router.push(`/hotel/${hotelId}`)

// 跳转到预订页面
router.push({
  name: 'Booking',
  query: { hotelId, roomId }
})

⚙️ 自定义配置

1. 主题配置

修改主题色彩

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        }
      }
    }
  }
}

2. API配置

修改API地址

// src/utils/config.js
export const config = {
  apiBaseUrl: 'https://your-api-domain.com/api',
  timeout: 10000,
  // 其他配置...
}

3. 支付配置

配置支付方式

// src/utils/config.js
export const paymentConfig = {
  alipay: {
    appId: 'your-alipay-app-id',
    // 其他支付宝配置
  },
  wechat: {
    appId: 'your-wechat-app-id',
    // 其他微信配置
  }
}

4. 图片配置

替换默认图片

// 将新图片放入 src/assets/images/ 目录
// 在组件中引用
import hotelImage from '@/assets/images/your-hotel-image.jpg'

🚀 部署指南

1. 构建生产版本

# 构建项目
npm run build
# 或
pnpm build

2. 部署到服务器

静态文件部署

# 将 dist 目录上传到服务器
scp -r dist/* user@server:/var/www/html/

Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://your-backend-server;
    }
}

3. 环境变量配置

创建环境配置文件

# .env.production
VITE_API_BASE_URL=https://your-production-api.com
VITE_APP_TITLE=酒店预约系统

❓ 常见问题

Q1: 如何修改默认端口？

A: 在 vite.config.js 中修改：

export default defineConfig({
  server: {
    port: 3000 // 修改为你想要的端口
  }
})

Q2: 如何添加新的页面？

A:

1. 在 src/pages/ 目录下创建新的 Vue 组件
2. 在 src/router/index.js 中添加路由配置
3. 在导航组件中添加链接

Q3: 如何自定义样式？

A:

1. 使用 Tailwind CSS 类名
2. 在组件中使用 <style scoped>
3. 修改 tailwind.config.js 配置

Q4: 轮播图不自动切换怎么办？

A:

1. 检查 HomePage.vue 中的定时器设置
2. 确保组件正确挂载和卸载
3. 检查浏览器控制台是否有错误

Q5: 如何集成真实的支付接口？

A:

1. 注册支付服务商账号
2. 获取API密钥
3. 修改 src/utils/config.js 中的支付配置
4. 实现支付回调处理

Q6: 如何添加多语言支持？

A:

1. 安装 vue-i18n
2. 创建语言文件
3. 配置 i18n 实例
4. 在组件中使用 $t() 函数

🛠️ 开发技巧

1. 调试技巧

使用 Vue DevTools

• 安装 Vue DevTools 浏览器扩展
• 在开发模式下可以查看组件状态

控制台调试

// 在组件中添加调试信息
console.log('当前状态:', reactive_data)

2. 性能优化

图片懒加载

<template>
  <img 
    v-lazy="imageUrl" 
    alt="酒店图片"
    class="w-full h-48 object-cover"
  />
</template>

组件懒加载

// 路由懒加载
const HotelDetail = () => import('@/pages/HotelDetailPage.vue')

3. 代码规范

使用 ESLint

# 检查代码规范
npm run lint

# 自动修复
npm run lint:fix

组件命名规范

• 组件文件使用 PascalCase: HotelCard.vue
• 组件名称使用 PascalCase: <HotelCard />

📞 技术支持

联系方式

• ****: [请填写号]
• 微信群: [请填写微信群]
• 邮箱: [请填写邮箱地址]
• GitHub Issues: [请填写GitHub地址]

获取帮助

1. 查看文档: 首先查看本使用说明和API文档
2. 搜索问题: 在GitHub Issues中搜索类似问题
3. 提交Issue: 详细描述问题和复现步骤
4. 社区讨论: 在***或微信群中讨论

贡献代码

1. Fork 项目
2. 创建功能分支
3. 提交代码
4. 创建 Pull Request

📝 更新日志

v1.0.0 (2024-12-19)

• 🎉 首次发布
• ✨ 完整的酒店预约系统功能
• 📱 响应式设计支持
• 🔧 基于现代化技术栈

感谢使用酒店预约系统插件！

如果这个插件对您有帮助，请给我们一个⭐️星标支持！

有任何问题或建议，欢迎随时联系我们。