uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板

本文涉及的产品
性能测试 PTS,5000VUM额度
应用实时监控服务-应用监控,每月50GB免费额度
注册配置 MSE Nacos/ZooKeeper,118元/月
简介: vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。

历时两周高强度开发,原创跨平台uniapp-vue3-wetrip酒店客房预约app程序完成了。

未标题-a.png

uniapp-vue3-wetrip基于Uniapp+Vue3+Pinia2+UV-UI技术开发的酒店预订系统,支持编译H5、小程序和App端,能够在不同平台上提供一致的用户体验。该系统不仅具备基本的酒店预订功能,还集成了消息聊天功能模块,提升了用户体验和互动性。

未标题-d.png

p1.gif

p3.gif

技术栈

  • 前端框架:Uniapp + Vue3
  • 构建工具:Vite5
  • 状态管理:Pinia2
  • UI组件库:uni-ui + uv-ui
  • 缓存技术:pinia-plugin-unistorage


未标题-3.png


功能特性

  1. 跨平台兼容性:支持H5、小程序和App端,确保在不同设备上的无缝体验。
  2. 消息聊天:内置的消息聊天功能模块,增强用户间的沟通效率。
  3. 自定义组件:提供uv3-navbar标题栏和uv3-tabbar菜单栏等自定义组件,方便开发者根据需求进行调整。
  4. 缓存机制:利用pinia-plugin-unistorage实现数据缓存,提高应用性能。


未标题-5.png

003360截图20241206164733657.png 003360截图20241206164903409.png 003360截图20241206165922832.png 003360截图20241206170045167.png 004360截图20241206170342031.png 005360截图20241206170633718.png

项目结构目录

360截图20241206160247762.png

开发工具和框架

HbuilderX 4.36

HbuilderX是一款强大的开发工具,特别适用于Uniapp项目的开发。它提供了丰富的功能和良好的用户体验,帮助开发者高效地完成项目开发。

360截图20241206155439484.png

uniapp+vue3自定义顶部导航+底部菜单

image.png

6708b08fcb8fc2604a64814df87ff581_1289798-20241207234410454-131427302.png

顶部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酒店预订模板

f9b5ab62d5425a30a061cbb682f5a4a7_1289798-20241207235430032-192068082.png

8d5ba915d92b040e52d7f599e58c3b5e_1289798-20241207235616264-2104825289.png

入住/离店弹窗日历组件支持开始/结束日期、日期区间选择、日期信息打点信息展示。

219cbc19662639c05bc9a37ba80fa49e_1289798-20241207235823962-548339879.png

<!-- 日历 -->
<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实例的一些分享知识,希望对大家有所帮助~


目录
相关文章
|
7月前
|
Web App开发 移动开发 小程序
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,显示“网络不给力,请稍后再试”,预发内网版本不能使用,线上版本可以正常使用,这个是什么原因啊,是某些参数没有配置吗,还是说是一些参数改错了?
112 2
|
7月前
|
移动开发
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
钉钉H5微应用配置IP,应用首页地址报错:app url exceeds max length limit,这个怎么处理?
639 0
|
7月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
678 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
292 3
|
7月前
|
移动开发 JavaScript 前端开发
如何识别app中的页面是否是js(h5)页面
如何识别app中的页面是否是js(h5)页面
80 2
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
114 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
5月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
4月前
|
移动开发 前端开发 JavaScript
|
4月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
6月前
|
移动开发 小程序 开发工具
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
579 1