uniapp+vue3-hotel:自创vite5+uniapp+uvui跨端酒店客房预订系统

原创跨平台新作 uni-app+vue3+pinia2+uv-ui 仿携程 / 去哪儿酒店预订 app 模板。

实现技术#

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

功能特性#

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

项目结构目录#


使用最新版编辑器工具,采用 vue3 setup 语法编码开发。

目前 uni-vue3-hotel 项目已经同步到我的原创作品集。#

gf.bilibili.com/item/detail/110751...

项目公共模板#

<script setup>
    // #ifdef MP-WEIXIN
    defineOptions({
        /**
         * 解决小程序class、id穿透问题
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上,在组件中增加options: { virtualHost: true }
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    })
    // #endif
    const props = defineProps({
        // 是否显示自定义tabbar
        showTabBar: { type: [Boolean, String], default: false },
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1">
        <!-- 顶部插槽 -->
        <slot name="header" />

        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>

        <!-- 底部插槽 -->
        <slot name="footer" />

        <!-- tabbar栏 -->
        <uv3-tabbar :show="showTabBar" transparent zIndex="99" />
    </view>
</template>

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({
    // 当前选中项
    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',
    },
])

uni-app+vue3 聊天模块#

这块功能是之前开发的一款 uniapp+vue3 仿微信 app 聊天功能的精简版。

www.cnblogs.com/xiaoyan2017/p/1816...

聊天编辑框支持 h5 / 小程序端 /app 端,已经免费发布到插件市场,欢迎下载使用。

ext.dcloud.net.cn/plugin?id=13275

博客:harmony-chat:自研纯血鸿蒙 HarmonyOS Next 5.0 聊天 app 应用程序
博客:tauri2+vue3.5-admin:原创 vite5+tauri2+element-plus 桌面端后台系统...
博客:Tauri2.0+vue3-chat:自研 vite5+tauri2 桌面版聊天系统程序
博客:Electron32-Vue3-winos:自研 vite5+electron32+arco 电脑版 os 管理系统...
博客:Electron31-vite5-chat:原创 vue3+electron31+pinia2 客户端聊天 exe 应...

OK,综上就是 uniapp+vue3 实战开发酒店预订系统的一些知识分享。

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
文章
65
粉丝
52
喜欢
108
收藏
57
排名:356
访问:2.7 万
私信
所有博文
博客标签
展开
社区赞助商