uni-vue3-trip：基于uniapp+vite5+pinia2跨端预订酒店app系统

历经两周撸一个爆款h5+小程序+App酒店预订app程序模板UniVue3Hotel。

vue3-uniapp-wetrip原创uniapp+vite5+pinia2+uni-ui等技术仿同程/携程预约酒店app实例。支持编译H5、小程序和App端，能够在不同平台上提供一致的用户体验。

uni-vue3-trip不仅具备基本的酒店预订功能，还集成了消息聊天功能模块，提升了用户体验和互动性。

uniapp+vue3跨多端酒店预订app系统已经发布到我的原创作品集。
https://gf.bilibili.com/item/detail/1107519011

技术栈

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

项目结构和开发工具

HbuilderX 4.36
HbuilderX是一款强大的开发工具，特别适用于Uniapp项目的开发。它提供了丰富的功能和良好的用户体验。

公共布局模板

<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>

app.vue模板

<script setup>
    import { provide } from 'vue'
    import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'
    
    onLaunch(() => {
        console.log('App Launch')
        
        // 初始化启动
        initLaunch()
    })
    
    onShow(() => {
        console.log('App Show')
    })
    
    onHide(() => {
        console.log('App Hide')
    })
    
    onPageNotFound((e) => {
        console.warn('Route Error：', `${e.path}`)
    })
    
    const initLaunch = () => {
        // 获取系统信息
        uni.getSystemInfo({
            success: (e) => {
                // 获取手机状态栏高度
                let statusBar = e.statusBarHeight
                let customBar = 0
                
                // #ifndef MP
                customBar = statusBar + (e.platform == 'android' ? 50 : 45)
                // #endif
                
                // #ifdef MP-WEIXIN
                // 获取胶囊按钮的布局位置信息
                let menu = wx.getMenuButtonBoundingClientRect()
                // 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
                customBar = menu.bottom + menu.top - statusBar
                // #endif
                
                // #ifdef MP-ALIPAY
                customBar = statusBar + e.titleBarHeight
                // #endif
                
                // 由于globalData在vue3 setup存在兼容性问题，改为provide/inject替代
                provide('globalData', {
                    statusBarH: statusBar,
                    customBarH: customBar,
                    screenWidth: e.screenWidth,
                    screenHeight: e.screenHeight,
                    platform: e.platform
                })
            }
        })
    }
</script>

<style>
    /* #ifndef APP-NVUE */
    @import 'static/fonts/iconfont.css';
    /* #endif */
    /* 隐藏系统Tabbar */
    .uni-app--showtabbar .uni-tabbar-bottom {display: none;}
</style>
<style lang="scss">
    @import 'styles/reset.scss';
    @import 'styles/layout.scss';
</style>

vue3+uniapp实现自定义顶部导航/底部菜单栏

6708b08fcb8fc2604a64814df87ff581_1289798-20241207234410454-131427302.png

a82d4389ec44b381be9e9ca6fb45bb8c_1289798-20241207234635244-2143825926.png

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: () => []
    }
})

vue3+uniapp预订模板

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>