最新版研发uni-app+vue3 setup+pinia2+uni-ui仿携程app酒店客房预订系统程序。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
uniapp-vue3-hotel实现首页、酒店预订搜索、列表/详情、订单、聊天客服消息、我的等功能模块。支持编译运行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端
项目框架结构
使用最新跨端框架uni-app+vue3搭建项目模板。
另外还支持运行到web端以750px宽度展示页面布局。
项目公共布局模板
<code class="actionscript"><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="max-width:90%"padding-bottom': showTabBar ? '50px' : 0}"> <slot /> </view> <!-- 底部插槽 --> <slot name="footer" /> <!-- tabbar栏 --> <uv3-tabbar :show="showTabBar" transparent zIndex="99" @change="handleChange" /> </view></template></code>
uni-app+vue3自定义导航栏+tabbar组件
navbar配置如下
立即学习“前端免费学习笔记（深入）”；
<code class="actionscript">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,})</code>
tabbar采用毛玻璃效果，参数配置如下
<code class="actionscript">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,})</code>
uniapp+vue3酒店预订
<code class="actionscript"><!-- 日历 --><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></code>
<code class="actionscript">/** * 日期参数 */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', },])</code>
附上几个最新项目实战案例案例
最新版electron38-vite7-admin电脑端中后台管理系统
electron38-vite7-vue3os电脑端os管理系统
基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用
tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板
Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序
最新原创uniapp-vue3-osadmin手机版后台管理系统
最新研发uniapp+vue3仿微信app聊天模板
最新原创flutter3.27+bitsdojo_window客户端聊天Exe
自研新版Flutter3.32仿微信app聊天|朋友圈模板
基于uni-app+vue3实战短视频+聊天+直播app商城
基于uniapp+deepseek+vue3跨平台ai流式对话
electron35+deepseek桌面端ai模板
vue3.5+deepseek网页版ai流式对话
flutter3.27+getx仿抖音app短视频商城
tauri2.0+rust+vue3电脑版Exe聊天软件
