uniapp-vue3-hotel跨三端旅游酒店预订模板_陕西然坤悦科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 行业资讯

uniapp-vue3-hotel跨三端旅游酒店预订模板

2025-11-26

浏览次数：次

返回列表

最新版研发uni-app+vue3 setup+pinia2+uni-ui仿携程app酒店客房预订系统程序。

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

使用技术

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

项目框架结构

使用最新跨端框架uni-app+vue3搭建项目模板。

另外还支持运行到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="max-width:90%"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自定义导航栏+tabbar组件

n*bar配置如下

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: '2025' },  // 自定义iconfont字体图标库前缀  customPrefix: { type: String, default: 'uv3trip-icon' },  // 自定义样式  customStyle: String,})

tabbar采用毛玻璃效果，参数配置如下

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: '2025' },  // 自定义iconfont字体图标库前缀  customPrefix: { type: String, default: 'uv3trip-icon' },  // 自定义样式  customStyle: String,})

uniapp+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',  },])