最新版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端效果如下：

使用技术

• 编辑器：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端
  

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

项目结构目录

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

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

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

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

入口配置文件

1. 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  }}

复制代码

通用布局模板

1.                                                          

复制代码

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

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

navbar组件支持如下参数

1. 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,})

复制代码

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

1. 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预约酒店模板

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

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

1.   

复制代码

1. /** * 日期参数 */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客服消息模块

  

项目中加入了聊天消息模块。可以去看看之前开发的一款uniapp+vue3仿微信app聊天项目。
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

以上就是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实例

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

热心回复！

热心回复！