最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】

原创新作uniapp+vue3+pinia2+uv-ui跨端仿携程app旅行预约酒店系统。

uni-vue3-hotel：基于vite5+uniapp+vue3 setup+pinia2+uni-ui搭建跨端旅行酒店预订程序。集合了酒店首页、酒店预订搜索、列表/详情、订单、聊天客服消息、我的等功能模块。支持编译运行web+小程序+app端。

运行三端效果

编译运行到h5+小程序+app端效果如下：

未标题-1-2

使用技术

  • 编辑器：HbuilderX 4.84
  • 技术框架：uni-app+vite5+vue3
  • 状态管理：pinia2
  • 组件库：uni-ui+uv-ui（uniapp+vue3组件库）
  • 弹框组件：uv3-popup（基于uniapp+vue3多端弹窗组件）
  • 自定义组件：uv3-navbar导航条+uv3-tabbar菜单栏
  • 缓存技术：pinia-plugin-unistorage
  • 支持运行：web+小程序+app端

未标题0-1

p1

uniapp-vue3-trip采用vue3 setup语法编码，支持运行到web+小程序+app端，且三端效果基本保持一致。

p2

p3

项目结构目录

使用最新跨端框架uni-app+vue3搭建项目模板。

360截图20251106234757798

uniapp-vue3-trip酒店预订系统已经同步到我的原创作品集，欢迎下载使用。

uniapp+vue3+pinia2+uvui跨多端酒店预订app系统

p2-1

支持运行到web端在pc页面以750px宽度展示布局。

001360截图20251106153325642

001360截图20251106161306413

001360截图20251106161817132

001360截图20251106161904532

入口配置文件

import { createSSRApp } from 'vue'
import App from './App'

// 引入pinia状态管理
import pinia from '@/pinia'

export function createApp() {
  const app = createSSRApp(App)
  app.use(pinia)
  return {
    app,
    pinia
  }
}

通用布局模板

image

<!-- 公共布局模板 -->
<script setup>
  // #ifdef MP-WEIXIN
  defineOptions({
    options: { virtualHost: true }
  })
  // #endif
  const props = defineProps({
    // 是否显示自定义tabbar
    showTabBar: { type: [Boolean, String], default: false },
  })
  
  const handleChange = (index) => {
    if(index == 2) {
      uni.showToast({
        icon: 'none',
        title: '自定义功能'
      })
    }
  }
</script>

<template>
  <view class="uv3__container flexbox flex-col flex1">
    <!-- 顶部插槽 -->
    <slot name="header" />
    
    <!-- 内容区 -->
    <view class="uv3__scrollview flex1" :style="{'padding-bottom': showTabBar ? '50px' : 0}">
      <slot />
    </view>
    
    <!-- 底部插槽 -->
    <slot name="footer" />
    
    <!-- tabbar栏 -->
    <uv3-tabbar :show="showTabBar" transparent zIndex="99" @change="handleChange" />
  </view>
</template>

未标题0-2

001360截图20241206164142099

001360截图20251106094038002

001360截图20251106094718972

002360截图20251106142916405

002360截图20251106142943581

002360截图20251106143007845

003360截图20251106095807874

003360截图20251106095945682

005360截图20251106100307873

005360截图20251106100415473

005360截图20251106100436738

006360截图20251106100611648

006360截图20251106100928280

007360截图20251106101145616

007360截图20251106101331687

008360截图20251106101750903

009360截图20251106101916279

009360截图20251106102535245

010360截图20251106103110196

010360截图20251106103139876

011360截图20251106103436236

011360截图20251106103557115

012360截图20251106103635947

010360截图20251106103231501

uni-app+vue3自定义导航条+tabbar栏

image

image

image

image

image

image

自定义navbar导航栏和tabbar菜单栏组件在components目录下。

image

navbar组件支持如下参数

const props = defineProps({
  // 是否是自定义导航
  custom: { type: [Boolean, String], default: false },
  // 是否显示返回
  back: { type: [Boolean, String], default: true },
  // 标题
  title: { type: [String, Number], default: '' },
  // 标题颜色
  color: { type: String, default: '#fff' },
  // 背景色
  bgcolor: { type: String, default: '#07c160' },
  // 标题字体大小
  size: { type: String, default: null },
  // 标题是否居中
  center: { type: [Boolean, String], default: false },
  // 是否搜索
  search: { type: [Boolean, String], default: false },
  // 是否固定
  fixed: { type: [Boolean, String], default: false },
  // 是否背景透明
  transparent: { type: [Boolean, String], default: false },
  // 设置层级
  zIndex: { type: [Number, String], default: '2023' },
  // 自定义iconfont字体图标库前缀
  customPrefix: { type: String, default: 'uv3trip-icon' },
  // 自定义样式
  customStyle: String,
})

image

image

如上图：底部tabbar组件采用背景高斯模糊毛玻璃效果。

tabbar组件支持如下参数

const props = defineProps({
  // 是否是自定义导航
  custom: { type: [Boolean, String], default: false },
  // 是否显示返回
  back: { type: [Boolean, String], default: true },
  // 标题
  title: { type: [String, Number], default: '' },
  // 标题颜色
  color: { type: String, default: '#fff' },
  // 背景色
  bgcolor: { type: String, default: '#07c160' },
  // 标题字体大小
  size: { type: String, default: null },
  // 标题是否居中
  center: { type: [Boolean, String], default: false },
  // 是否搜索
  search: { type: [Boolean, String], default: false },
  // 是否固定
  fixed: { type: [Boolean, String], default: false },
  // 是否背景透明
  transparent: { type: [Boolean, String], default: false },
  // 设置层级
  zIndex: { type: [Number, String], default: '2023' },
  // 自定义iconfont字体图标库前缀
  customPrefix: { type: String, default: 'uv3trip-icon' },
  // 自定义样式
  customStyle: String,
})

uni-app+vue3预约酒店模板

image

如上图：酒店预订模块封装成booking.vue组件。

image

酒店预订日期选择插件，采用底部弹窗+uv-ui日历组件实现功能。

image

<!-- 日历 -->
<uv3-popup
  v-model="isVisibleCalendar"
  title="选择日期"
  position="bottom"
  round
  xclose
  xposition="left"
  :customStyle="{'overflow': 'hidden'}"
  @open="showCalendar=true"
  @close="showCalendar=false"
>
  <uv-calendars
    v-if="showCalendar"
    ref="calendarRef"
    mode="range"
    insert
    color="#ffaa00"
    :startDate="startDate"
    :endDate="endDate"
    :date="rangeDate"
    :selected="dingDate"
    title="选择日期"
    start-text="入住"
    end-text="离店"
    @change="handleCalendarChange"
  />
</uv3-popup>
/**
 * 日期参数
 */
const isVisibleCalendar = ref(false)
const showCalendar = ref(false)
const calendarRef = ref(null)
const nightNum = ref(1)
// 限制日期选择范围-开始日期
const startDate = ref(getDate(new Date()).fullDate)
// 限制日期选择范围-结束日期
const endDate = ref(getDate(new Date(), 90).fullDate)
// 自定义默认选中日期，不传默认为今天。mode="multiple"或mode="range"时，该值为数组
const rangeDate = ref([getDate(new Date()).fullDate, getDate(new Date(), 1).fullDate])
// 打点，期待格式[{date: '2019-06-27', info: '签到', disable: false}]
const dingDate = ref([
  {
    date: getDate(new Date(), 3).fullDate,
    info: '已预订',
    infoColor: '#ffaa00',
    badge: true
  },
  {
    date: getDate(new Date(), 4).fullDate,
    info: '已满',
    disable: true,
  },
  {
    date: getDate(new Date(), 5).fullDate,
    info: '优惠',
    infoColor: '#19be6b',
    topinfo: '￥99',
    topinfoColor: '#19be6b'
  },
  {
    date: getDate(new Date(), 7).fullDate,
    info: '有空房',
    infoColor: '#09f',
  },
])

uni-app+vue3客服消息模块

image  image

项目中加入了聊天消息模块。可以去看看之前开发的一款uniapp+vue3仿微信app聊天项目。

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

3e0ee9ff1537fa4696a97b1c26a17d1e_1289798-20250811110711143-1388968582

未标题-b

以上就是uni-app+vue3搭建跨端酒店预订系统的一些项目分享，希望对大家有点帮助~

附上几个最新研发项目实例

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

s13.sinaimg

 

posted @ 2025-11-07 23:54  xiaoyan2017  阅读(34)  评论(0)    收藏  举报
友情链接： UP主小店B站