基于uniapp+vue3 setup+pinia2+uni-ui跨多端仿携程app酒店预订系统模板

2025-11-08 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器镜像服务 ACR，镜像仓库100个不限时长

任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格

应用实时监控服务-可观测链路OpenTelemetry版，每月50GB免费额度

简介： 基于uniapp+vite5+vue3 setup+pinia2+uni-ui仿携程酒店预订系统。支持编译运行h5+小程序+app端。

2025最新款原创研发uni-app+vite5+vue3+pinia2+uv-ui搭建仿携程/同程旅行app酒店预约应用。

未标题-2.png

未标题-3.png

uniapp-vue3-trip酒店预订系统支持运行到h5+小程序+app端。实现了首页、酒店预订搜索、列表/详情、订单、聊天客服消息、我的等功能模块。

项目知识框架

编辑器：HbuilderX 4.84
技术框架：uni-app+vite5+vue3+pinia2
UI组件库：uni-ui+uv-ui（uniapp+vue3组件库）
弹框组件：uv3-popup（基于uniapp+vue3多端弹窗组件）
自定义组件：uv3-navbar导航条+uv3-tabbar菜单栏
缓存技术：pinia-plugin-unistorage
支持运行：web+小程序+app端

未标题0-0.png 未标题0-2.png 未标题-10.png 未标题-b.png

项目框架结构

项目整体采用uniapp+vue3 setup搭建开发项目模板。

360截图20251106234757798.png

360截图20251106233803817.png

未标题-4.png 未标题-5.png 未标题-6.png 未标题-7.png 未标题-8.png 未标题-9.png

项目布局模板

<!-- 公共布局模板 -->
<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>

001360截图20251106094257828.png 001360截图20251106094718972.png 002360截图20251106094854292.png 002360截图20251106095237483.png 002360截图20251106095347067.png 003360截图20251106095853923.png 005360截图20251106100307873.png 005360截图20251106100415473.png 005360截图20251106100436738.png 006360截图20251106100708767.png 007360截图20251106101145616.png 008360截图20251106101656429.png 009360截图20251106101916279.png 009360截图20251106102535245.png 010360截图20251106103110196.png 011360截图20251106103436236.png 011360截图20251106103557115.png 012360截图20251106103635947.png