最新版研发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宽度展示页面布局。
项目公共布局模板
uni-app+vue3自定义导航栏+tabbar组件
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采用毛玻璃效果，参数配置如下
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,})
uniapp+vue3酒店预订
/** * 日期参数 */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', },])
附上几个最新项目实战案例案例
最新版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聊天软件
