原创新作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酒店预订系统已经同步到我的原创作品集，欢迎下载使用。
支持运行到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-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>/**
* 日期参数
*/
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模板