微信小程序酒店选择日期和入住人数(有效果图)-需要引入的.vue

时间:2024-04-26 22:28:22
<template>
<view>
	<view @click="page_showModal('reservation',1)">打开房租</view>
	<view @click="page_showModal('reservation',2)">打开日历</view>
	<page-reservation v-if="page_modalName" :modalName="page_modalName" :ReserVation="ReserVation" @showModal="page_showModal"
	@getHotelData="getHotelData"></page-reservation>
</view>
</template>
<script>
import PageReservation from '@/colorui/components/page-reservation.vue'
export default {
	components:{ PageReservation },
	data() {
		return {
			page_modalName:'',
			ReserVation:uni.getStorageSync('ReserVation'),//入住人数日期
		}
	},
	methods: {
		// 修改入住信息
		getHotelData(peopleArr,InCheckin,IntimeCur){
			this.ReserVation.peopleArr = peopleArr
			this.ReserVation.InCheckin = InCheckin
			this.ReserVation.IntimeCur = IntimeCur
			uni.setStorage({key:"ReserVation",data:this.ReserVation})
			this.page_showModal('')
		},
		// 入住信息弹窗
		page_showModal(target,type){
			var that = this
			if(type){
				that.ReserVation.reservType = type
			}
			that.page_modalName = '1'
			setTimeout(() => {
				that.page_modalName = target
			},target?100:500)
		},
	},
</script>

默认选择当天和明天
入住一次性最多选择三十天
默认获取三个月日期数组

存储信息
InCheckin 选择的日期信息
IntimeCur 组件选择的日期
peopleArr 入住人数信息
timeDataArr 显示的日历

引入的组件库ColorUI组件库

用的是uni-app

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。