uniapp+vue3酒店預訂|vite5+uniapp預約訂房系統模板(h5+小程式+App端)

xiaoyan2017發表於2024-12-08

自研uni-app+vue3+uv-ui跨三端仿同程/攜程酒店預訂系統Uni-Vue3-WeTrip。

uniapp-vue3-wetrip原創基於vite5+uniapp+pinia2+uni-ui等技術開發的仿去哪兒/攜程預約酒店客房app系統。實現首頁酒店展示、預訂搜尋、列表/詳情、訂單、聊天訊息、我的等模組。支援編譯H5+小程式+App端。

三端預覽

執行到app端+小程式端+h5端效果。

技術棧

開發工具：HbuilderX 4.36
技術框架：Uniapp+Vue3+Vite5+Pinia2
UI元件庫：uni-ui+uv-ui（uniapp+vue3元件庫）
彈框元件：uv3-popup（自定義uniapp+vue3多端彈框元件）
自定義元件：uv3-navbar標題欄+uv3-tabbar選單欄
快取技術：pinia-plugin-unistorage
支援編譯：H5+小程式+APP端

目前uniapp結合vue3開發跨端專案受到很多開發者青睞，之前也有分享三款uniapp+vue3實戰專案案例。

uniapp-vue3-os手機os後臺例項|vite5.x+uniapp多端仿ios管理系統

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語音/朋友圈

uniapp-welive仿微信/抖音直播帶貨|uni-app+vue3+pinia短影片直播商城

uniapp-vue3trip基於最新版跨平臺框架開發，親測在h5+小程式+app端執行效果基本保持一致。

專案框架目錄

另外還內建了訊息聊天功能模組。

uniapp-vue3-wetrip酒店預訂app系統已經發布到我的原創作品集，歡迎下載使用，感謝大家的支援。

https://gf.bilibili.com/item/detail/1107519011

公共模板結構

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

uniapp+vue3自定義標題欄+底部選單欄

在components目錄下自定義導航條/選單欄元件。

底部tabbar選單欄支援高斯模糊虛化背景效果。

頂部Navbar支援如下引數

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: '2023' },
    // 自定義iconfont字型圖示庫字首
    customPrefix: { type: String, default: 'uv3trip-icon' },
    // 自定義樣式
    customStyle: String,
})

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

uniapp+vue3酒店預訂模組

預訂模組涉及功能點多，為了維護方便，單獨抽離了一個公共元件。

日期選擇則是使用自定義彈窗+uv-ui日曆元件實現功能。支援自定義開始/結束日期、日期區間、日期自定義打點資訊。

<!-- 日曆 -->
<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',
    },
])