最新自研uni-app+vue3 setup酒店客房预订系统

[xiaoyan_2018]

2025最新跨平台实战uniapp+vue3+pinia2+uvui跨三端仿携程app酒店预订模板Uniapp-Vue3-Hotel。

uni-vue3-hotel采用vue3 setup语法糖编码，支持运行到h5+小程序+app端。 

项目结构框架 

目前uni-vue3-hotel酒店模板已经同步到我的原创作品小铺。

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

支持运行到web端以750px显示布局结构。

项目布局结构 

 

<!-- 公共布局模板 -->
<script setup>
  // #ifdef MP-WEIXIN
  defineOptions({
    options: { virtualHost: true }
  })
  // #endif
  const props = defineProps({
    // 是否显示自定义tabbar
    showTabBar: { type: [Boolean, String], default: false },
  })
  
  const handleChange = (index) => {
    if(index == 2) {
      uni.showToast({
        icon: 'none',
        title: '自定义功能'
      })
    }
  }
</script>

<template>
  <view class="uv3__container flexbox flex-col flex1">
    <!-- 顶部插槽 -->
    <slot name="header" />
    
    <!-- 内容区 -->
    <view class="uv3__scrollview flex1" :style="{'padding-bottom': showTabBar ? '50px' : 0}">
      <slot />
    </view>
    
    <!-- 底部插槽 -->
    <slot name="footer" />
    
    <!-- tabbar栏 -->
    <uv3-tabbar :show="showTabBar" transparent zIndex="99" @change="handleChange" />
  </view>
</template>

想要了解更多的详细介绍，可以去看看下面的这篇文章。

最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】