最新版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端效果如下：
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107220800802-1386930917.png
使用技术
[*]编辑器：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端
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107221123611-1011653224.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107221424813-2127632649.gif
uniapp-vue3-trip采用vue3 setup语法编码，支持运行到web+小程序+app端，且三端效果基本保持一致。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107221634650-1543652943.gif
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107221704642-1278197843.gif
项目结构目录
使用最新跨端框架uni-app+vue3搭建项目模板。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107221905169-2011257360.png
uniapp-vue3-trip酒店预订系统已经同步到我的原创作品集，欢迎下载使用。
uniapp+vue3+pinia2+uvui跨多端酒店预订app系统
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107222204015-1136560834.gif
支持运行到web端在pc页面以750px宽度展示布局。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107222630652-738155952.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107222756714-872074200.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107222810733-232845177.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107222826421-1392892462.png
入口配置文件
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}}通用布局模板
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224450332-1926815156.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223345287-410077009.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223239727-784083306.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223429410-81922285.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223449345-129319966.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223549637-1574415163.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223601516-353000666.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223619061-2094719351.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223643084-76112420.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223659956-747979264.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223714308-195982780.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223732933-1375871268.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223746705-1394978655.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223805323-1160887889.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223842137-303868227.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223900197-1691795703.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223924314-714933798.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107223938853-359075.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224024387-1728953902.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224037241-513821712.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224057108-1031499935.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224118322-981528153.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224136656-1478324291.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224211547-1133612724.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224223043-1953364231.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107224234435-185445470.png
uni-app+vue3自定义导航条+tabbar栏
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107225130456-102367861.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231046364-1240389001.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231210431-1537206202.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231320536-1108076139.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231412783-360124530.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231558684-1368955572.png
自定义navbar导航栏和tabbar菜单栏组件在components目录下。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107231759259-328392536.png
navbar组件支持如下参数
const props = defineProps({// 是否是自定义导航custom: { type: , default: false },// 是否显示返回back: { type: , default: true },// 标题title: { type: , default: '' },// 标题颜色color: { type: String, default: '#fff' },// 背景色bgcolor: { type: String, default: '#07c160' },// 标题字体大小size: { type: String, default: null },// 标题是否居中center: { type: , default: false },// 是否搜索search: { type: , default: false },// 是否固定fixed: { type: , default: false },// 是否背景透明transparent: { type: , default: false },// 设置层级zIndex: { type: , default: '2023' },// 自定义iconfont字体图标库前缀customPrefix: { type: String, default: 'uv3trip-icon' },// 自定义样式customStyle: String,})https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107232037764-473469231.png
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107232131018-1918384319.png
如上图：底部tabbar组件采用背景高斯模糊毛玻璃效果。
tabbar组件支持如下参数
const props = defineProps({// 是否是自定义导航custom: { type: , default: false },// 是否显示返回back: { type: , default: true },// 标题title: { type: , default: '' },// 标题颜色color: { type: String, default: '#fff' },// 背景色bgcolor: { type: String, default: '#07c160' },// 标题字体大小size: { type: String, default: null },// 标题是否居中center: { type: , default: false },// 是否搜索search: { type: , default: false },// 是否固定fixed: { type: , default: false },// 是否背景透明transparent: { type: , default: false },// 设置层级zIndex: { type: , default: '2023' },// 自定义iconfont字体图标库前缀customPrefix: { type: String, default: 'uv3trip-icon' },// 自定义样式customStyle: String,})uni-app+vue3预约酒店模板
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107232800634-2015111682.png
如上图：酒店预订模块封装成booking.vue组件。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107233102420-339845490.png
酒店预订日期选择插件，采用底部弹窗+uv-ui日历组件实现功能。
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107233327062-889095202.png
/** * 日期参数 */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()// 打点，期待格式[{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客服消息模块
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107233642754-1974830840.png https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107233857056-964361757.png
项目中加入了聊天消息模块。可以去看看之前开发的一款uniapp+vue3仿微信app聊天项目。
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107234215982-698303763.gif
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107234342410-1892049652.png
以上就是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实例
https://img2024.cnblogs.com/blog/1289798/202511/1289798-20251107235037424-153089694.gif
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 热心回复！ 热心回复！ 新版吗？好像是停更了吧。
页:
[1]