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

<code class="actionscript"><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></code>

<code class="actionscript">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,})</code>

<code class="actionscript">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,})</code>

<code class="actionscript"><!-- 日历 --><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></code>

<code class="actionscript">/** * 日期参数 */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',  },])</code>