x***@126.com
x***@126.com
  • 发布:2024-12-09 16:11
  • 更新:2024-12-10 11:45
  • 阅读:82

uni-app+vue3酒店预订app模板|uniapp+pinia2+uv-ui仿携程

分类:uni-app

自研uniapp+vue3+pinia2多端酒店订房管理系统Uni-WeTrip(h5+小程序+App端)

uniapp-vue3-wetrip原创基于vite5+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端

uniapp+vue3+pinia2+uvui跨多端酒店预订app系统

img

img

技术栈

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

img

img

功能性

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

img

img

项目结构

img

img

uni-vue3trip布局模板

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

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

img

uni-app+vue3自定义导航条/菜单栏

img

img

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

uniapp预订功能

img

img

img

<!-- 日历 -->  
<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>

uniapp+vue3聊天模块

img

之前有开发一款uniapp+vue3聊天app实例,就不作过多的介绍,如果感兴趣可以去看看下面这篇文章。
https://www.cnblogs.com/xiaoyan2017/p/18165578

img

过往跨平台实战项目

HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信

tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

electron31+vite5+element-plus桌面端聊天EXE

flutter3+dart3+getx跨端仿抖音App短视频直播实战

作者:xiaoyan2017
链接: https://www.cnblogs.com/xiaoyan2017
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 关注 分享

要回复文章请先登录注册

x***@126.com

x***@126.com (作者)

> 分享三款uni-app+vue3实战项目案例。
[vue3+uniapp+pinia跨端仿ios桌面OA管理系统](https://gf.bilibili.com/item/detail/1105982011)
[uniapp+vue3+pinia2+uv-ui仿微信App聊天应用](https://gf.bilibili.com/item/detail/1105801011)
[uni-app+vue3+pinia2+vk-uview跨平台视频直播商城](https://gf.bilibili.com/item/detail/1105131011)
2024-12-10 11:45