历时两周高强度开发，原创跨平台uniapp-vue3-wetrip酒店客房预约app程序完成了。
uniapp-vue3-wetrip基于Uniapp+Vue3+Pinia2+UV-UI技术开发的酒店预订系统，支持编译H5、小程序和App端，能够在不同平台上提供一致的用户体验。该系统不仅具备基本的酒店预订功能，还集成了消息聊天功能模块，提升了用户体验和互动性。
技术栈
- 前端框架：Uniapp + Vue3
- 构建工具：Vite5
- 状态管理：Pinia2
- UI组件库：uni-ui + uv-ui
- 缓存技术：pinia-plugin-unistorage
功能特性
- 跨平台兼容性：支持H5、小程序和App端，确保在不同设备上的无缝体验。
- 消息聊天：内置的消息聊天功能模块，增强用户间的沟通效率。
- 自定义组件：提供uv3-navbar标题栏和uv3-tabbar菜单栏等自定义组件，方便开发者根据需求进行调整。
- 缓存机制：利用pinia-plugin-unistorage实现数据缓存，提高应用性能。
项目结构目录
开发工具和框架
HbuilderX 4.36
HbuilderX是一款强大的开发工具，特别适用于Uniapp项目的开发。它提供了丰富的功能和良好的用户体验，帮助开发者高效地完成项目开发。
uniapp+vue3自定义顶部导航+底部菜单
顶部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({ // 当前选中项 current: { type: [Number, String] }, // 背景色 bgcolor: { type: String, default: '#fff' }, // 颜色 color: { type: String, default: '#333' }, // 激活颜色 activeColor: { type: String, default: '#f90' }, // 是否固定 fixed: { type: [Boolean, String], default: false }, // 是否背景透明 transparent: { type: [Boolean, String], default: false }, // 是否中间凸起按钮 dock: { type: [Boolean, String], default: true }, // 设置层级 zIndex: { type: [Number, String], default: '2024' }, // 自定义iconfont字体图标库前缀 customPrefix: { type: String, default: 'uv3trip-icon' }, // 自定义样式 customStyle: String, // 是否显示 show: { type: Boolean, default: true }, // tab选项 tabs: { type: Array, default: () => [] } })
uni-app+vue3酒店预订模板
入住/离店弹窗日历组件支持开始/结束日期、日期区间选择、日期信息打点信息展示。
<!-- 日历 --> <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', }, ])
综上就是uniapp+vue3实战开发酒店预订app实例的一些分享知识，希望对大家有所帮助~
