原创新作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宽度展示布局。
入口配置文件
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}
}
通用布局模板
<!-- 公共布局模板 --> <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>
uni-app+vue3自定义导航条+tabbar栏
自定义navbar导航栏和tabbar菜单栏组件在components目录下。
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, })
如上图：底部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预约酒店模板
如上图：酒店预订模块封装成booking.vue组件。
酒店预订日期选择插件，采用底部弹窗+uv-ui日历组件实现功能。
<!-- 日历 --> <uv3-popupv-model="isVisibleCalendar"title="选择日期"position="bottom"roundxclosexposition="left":customStyle="{'overflow': 'hidden'}"@open="showCalendar=true"@close="showCalendar=false" ><uv-calendarsv-if="showCalendar"ref="calendarRef"mode="range"insertcolor="#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客服消息模块
项目中加入了聊天消息模块。可以去看看之前开发的一款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实例
-第一次提交)
