微信小程序酒店选择日期和入住人数（有效果图）

最新推荐文章于 2024-09-16 22:58:00 发布
最新推荐文章于 2024-09-16 22:58:00 发布
阅读量1.5k 收藏 3
点赞数 5
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43764578/article/details/137972813
版权

效果图

请添加图片描述

请添加图片描述
在这里插入图片描述

app.vue

	onLaunch:function(options){
		this.defaultcache()
	}
	defaultcache(){
		// 入住信息缓存
		var arr = this.getDateTime();
		var ReserVation = {
			reservType:0,//1  人数  2日期
			InCheckin:{},//入离日期
			peopleArr:[
				{title:'成人',num:2},
				{title:'儿童',num:0},
				{title:'宝子',num:1},
				{title:'房间数',num:1},
			],//入住人数
			IntimeCur:[
				{len:0,str:0},
				{len:0,str:0}
			],//选择日期
			timeDataArr:[],//日期数组
		}
		ReserVation.timeDataArr = arr[0]
		ReserVation.IntimeCur = arr[1]
		ReserVation.InCheckin = arr[2][0]
		uni.setStorageSync('ReserVation',ReserVation)
	},
	// 获取日期
	getDateTime(){
		var that = this
		var showY = 3;//显示几个月
		var timeData = [];//日期数组
		var timestamp = Date.parse(new Date());
		var date = new Date(timestamp);
		//年
		var Y = date.getFullYear();
		//月  
		var M = date.getMonth() + 1;
		//日
		var D = date.getDate();
		// 周几和月份天数
		var time = {};
		var Yday = 0,Mday = 0,data = {},param = {},toDays = 2;//toDays	默认住几天
		for(let i = 0;i < showY;i++){
			if(12 < (M + i)){
				Yday = Y + 1
				Mday = (M + i) - 12
			}else{
				Yday = Y
				Mday = M + i
			}
			time = that.getDaysInMonth(Yday,Mday)
			data = {year:Yday,moon:Mday,arr:[],days:time.days,Z:time.Z}
			for(let k = 0;k < time.Z;k++){
				data.arr.push({date:''});
			}
			for(let j = 0;j < time.days;j++){
				param = {};
				param.date = j + 1;
				param.Z = that.getDaysInMonth(Yday,Mday,param.date)
				param.price = 0;
				if(i == 0 && (j + 1) < D){
					param.status = 1
				}else if(i == 0 && (j + 1) == D){
					param.status = 2
				}
				data.arr.push(param)
			}
			timeData.push(data)
		}
		var start = {
			len:0,str:D
		};
		// if(that.timeData[start.len].days < (D + 1)){
		// 	start.len = 1
		// 	start.str = 0
		// }
		var end = {
			len:0,str:D + toDays - 1
		}
		if(timeData[end.len].days < end.str){
			end.str = end.str - timeData[end.len].days
			end.len = 1
		}
		start.str = start.str + parseInt(timeData[start.len].Z) - 1
		end.str = end.str + parseInt(timeData[end.len].Z) - 1
		var timeCur = [
			start,
			end
		]
		var Checkin = {
			start_Y:timeData[timeCur[0].len].year,
			start_M:timeData[timeCur[0].len].moon,
			start_D:timeData[timeCur[0].len].arr[timeCur[0].str].date,
			start_Z:timeData[timeCur[0].len].arr[timeCur[0].str].Z,
			end_Y:timeData[timeCur[1].len].year,
			end_M:timeData[timeCur[1].len].moon,
			end_D:timeData[timeCur[1].len].arr[timeCur[1].str].date,
			end_Z:timeData[timeCur[1].len].arr[timeCur[1].str].Z,
			days:toDays,
		}
		return [timeData,timeCur,[Checkin]];
	},
	// 获取周几和月份天数
	getDaysInMonth(Y,M,D){
		if(D){
			return this.getWeekByDate(`${Y}-${M}-${D}`,true)
		}
		//一号周几
		var Z = this.getWeekByDate(`${Y}-${M}-1`);
		// 月份天数
		var days = new Date(Y, M, 0).getDate();
		return {Z,days}
	},
	// 返回周几
	getWeekByDate(dates,status){
	  let show_day = status?['周日', '周一', '周二', '周三', '周四', '周五', '周六']:['0', '1', '2', '3', '4', '5', '6'];
	  let date = new Date(dates);
	  date.setDate(date.getDate());
	  let day = date.getDay();
	  return show_day[day];
	},

page-reservation.vue

<template>
<view>
	<view :class="modalName == 'reservation'?'cu-modal bottom-modal show':'cu-modal bottom-modal'" @touchmove.stop="() => false"
	 :style="'--CustomBar--:'+CustomBar+'px;z-index:10000;'">
		<view class="cu-dialog reservation-index">
			<view class="cu-custom">
				<view class="cu-bar fixed bg-white dialog-title" :style="'height:'+CustomBar+'px;padding-top:'+StatusBar+'px;'">
					<view class="action" @click="showModal('')">
						<text class="cuIcon-close" style="font-size: 42upx;"></text>
					</view>
					<view class="content" :style="'top:'+StatusBar+'px'">
						<view>选择入住条件</view>
					</view>
				</view>
			</view>
			<!-- 房住 -->
			<view class="reser-room">
				<view>房住</view>
				<view @click="tabreser(1)">
					<view v-for="(item,index) in peopleArrCur" :key="index" 
					:class="item.num > 0?'reser-room-cur':''">
						{{item.num + item.title}}
					</view>
					<view :class="type == 1?'cuIcon-unfold':'cuIcon-unfold reser-rotate'"></view>
				</view>
			</view>
			<!-- list -->
			<view class="reser-room-list reser-cur" :style="type != 1?'height:0;box-shadow:0;':''">
				<view v-for="(item,index) in peopleArrCur" :key="index">
					<view>{{item.title}}</view>
					<view class="room-list-count">
						<view class="room-list-icon" :class="item.num < 1 || (index == 0 && item.num < 2) || (index == 3 && item.num < 2) || (isType && index == 2)?'list-icon-cur':''"
						@click="item.num < 1 || (index == 0 && item.num < 2) || (index == 3 && item.num < 2) || (isType && index == 2)?'':countTap(index,1)">
							<view class="cuIcon-move"></view>
						</view>
						<view>{{item.num}}</view>
						<view class="room-list-icon" :class="item.num > 20 || (isType && index == 2)?'list-icon-cur':''"
						@click="item.num > 20 || (isType && index == 2)?'':countTap(index,2)">
							<view class="cuIcon-add"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 日期 -->
			<view class="reser-room reser-money">
				<view>入离日期</view>
				<view @click="tabreser(2)">
					<view>
						<span class="reser-room-cur">{{Checkin.start_M}}月{{Checkin.start_D}}日</span>
						{{Checkin.start_Z}}
					</view>
					<view class="reser-room-ing">{{Checkin.days}}晚</view>
					<view v-if="Checkin.days > 1">
						<span class="reser-room-cur">{{Checkin.end_M}}月{{Checkin.end_D}}日</span>
						{{Checkin.end_Z}}
					</view>
					<view :class="type == 2?'cuIcon-unfold':'cuIcon-unfold reser-rotate'"></view>
				</view>
			</view>
			<view class="reser-time" :style="type == 2?'':'height:0;'">
				<view>*以下价格为单晚入住参考价</view>
				<!-- list -->
				<view class="reser-data">
					<view v-for="(item,index) in timeTitle" :key="index">{{item}}</view>
				</view>
				<scroll-view scroll-y class="reser-list"
				@scroll="getScrollTop">
					<view v-for="(item,index) in timeData" :key="index" class="list-time"
					:id="'Time_'+index">
						<view>
							<view :class="index == scroll_index && type == 2 && modalName == 'reservation'?'reser-fixed':''">{{item.year}}年{{item.moon}}月</view>
						</view>
						<view>
							<view v-for="(cell,cell_index) in item.arr" :key="cell_index" class="list-date"
							:class="timeCur[1].str != -1 && timeCur[0].len != timeCur[1].len && (index == timeCur[0].len && timeCur[0].str < cell_index || index == timeCur[1].len && timeCur[1].str > cell_index) ? 
							'list-cur-one':timeCur[1].str != -1 && timeCur[0].len == timeCur[1].len && (index == timeCur[0].len && timeCur[0].str < cell_index && index == timeCur[1].len && timeCur[1].str > cell_index) ? 
							'list-cur-one':timeCur[1].len - timeCur[0].len > 1 && index == timeCur[1].len - 1?'list-cur-one':(index == timeCur[0].len && cell_index == timeCur[0].str) || 
							(index == timeCur[1].len && cell_index == timeCur[1].str)?'list-cur-two':''" 
							:style="cell.date?'':'visibility: hidden;'"
							@click="cell.status == 1?'':timetap(index,cell_index)">
								<view>
									<view :class="cell.status == 1?'reser-hui':cell.status == 2?'reser-chen':''">
										{{cell.status == 2?'今天':cell.date}}
									</view>
									<view class="reser-cur-font" v-if="cell.price > 0">
									<span v-if="((timeCur[1].str != -1 && timeCur[0].len != timeCur[1].len && (index == timeCur[0].len && timeCur[0].str < cell_index || index == timeCur[1].len && timeCur[1].str > cell_index)) ||
									(timeCur[1].str != -1 && timeCur[0].len == timeCur[1].len && (index == timeCur[0].len && timeCur[0].str < cell_index && index == timeCur[1].len && timeCur[1].str > cell_index)) ||
									(timeCur[1].len - timeCur[0].len > 1 && index == timeCur[1].len - 1) || ((index == timeCur[0].len && cell_index == timeCur[0].str) || 
									(index == timeCur[1].len && cell_index == timeCur[1].str)))">
									￥{{cell.price}}
									</span>
									</view>
									<view class="reser-cur-font" v-if="(index == timeCur[0].len && cell_index == timeCur[0].str) || 
									(index == timeCur[1].len && cell_index == timeCur[1].str)">{{(index == timeCur[0].len && cell_index == timeCur[0].str)?'入住':'离店'}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wdh" style="height: 162px;"></view>
				</scroll-view>
				<view class="reser-button">
					<button class="cu-btn round" @click="btnConfirm">确定</button>
				</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
export default{
	data(){
		return{
			StatusBar:this.StatusBar,
			CustomBar: this.CustomBar,
			type:0,
			timeTitle:['周日','周一','周二','周三','周四','周五','周六'],
			timeData:[],
			timeCur:[
				{len:0,str:0},
				{len:0,str:0}
			],
			scroll_index:-1,//fiexd日期
			Checkin:{
				start_M:'',
				start_D:'',
				start_Z:'',
				end_M:'',
				end_D:'',
				end_Z:'',
				days:'',
			},//入离日期
			peopleArrCur:[],
		}
	},
	name: 'page-reservation',
	props: {
		modalName: {
			type: String,
			default: ''
		},
		ReserVation: {
			type: Object,
			default: {}
		},
		isType: {
			type: [Boolean, String],
			default: false
		},
	},
	created(){
		//默认显示日期或者人数
		this.type = this.ReserVation.reservType
		//房住
		this.peopleArrCur = this.ReserVation.peopleArr
		//选择的入住时间
		this.timeCur = this.ReserVation.IntimeCur
		//日期数组
		this.timeData = this.ReserVation.timeDataArr
		//入住时间信息
		this.Checkin = this.ReserVation.InCheckin
		this.list()
	},
	methods:{
		list(){
			var that = this
			setTimeout(() => {
				that.scroll_index = 0
			},500)
			setTimeout(() => {
				that.getDateHeight();
			},1000)
		},
		timetap(index,cell_index){
			var that = this
			if(that.timeCur[1].str != -1 || (cell_index < that.timeCur[0].str && index == that.timeCur[0].len) || (index < that.timeCur[0].len)){//选择开始
				that.timeCur[0].len = index
				that.timeCur[0].str = cell_index
				that.timeCur[1].len = index
				that.timeCur[1].str = -1
				that.Checkin = {
					start_M:that.timeData[that.timeCur[0].len].moon,
					start_D:that.timeData[that.timeCur[0].len].arr[that.timeCur[0].str].date,
					start_Z:that.timeData[that.timeCur[0].len].arr[that.timeCur[0].str].Z,
					end_M:'',
					end_D:'',
					end_Z:'',
					days:1,
				}
			}else{//选择结束
				var number = 0
				if(that.timeCur[0].len == index){
					number = cell_index - that.timeCur[0].str + 1
				}else{
					var time = index - that.timeCur[0].len;
					number += (that.timeData[that.timeCur[0].len].arr.length - that.timeCur[0].str)
					for(let i = that.timeCur[0].len + 1;i < index;i++){
						number += that.timeData[i].days
					}
					number += (cell_index - parseInt(that.timeData[index].Z)) + 1
				}
				if(number > 30){
					getApp().Tips('最多选择三十天')
				}else{
					that.timeCur[1].len = index
					that.timeCur[1].str = cell_index
					that.getCheckinDays(number)
				}
			}
		},
		// 入离日期
		getCheckinDays(D){
			var that = this
			that.Checkin = {
				start_Y:that.timeData[that.timeCur[0].len].year,
				start_M:that.timeData[that.timeCur[0].len].moon,
				start_D:that.timeData[that.timeCur[0].len].arr[that.timeCur[0].str].date,
				start_Z:that.timeData[that.timeCur[0].len].arr[that.timeCur[0].str].Z,
				end_Y:that.timeData[that.timeCur[1].len].year,
				end_M:that.timeData[that.timeCur[1].len].moon,
				end_D:that.timeData[that.timeCur[1].len].arr[that.timeCur[1].str].date,
				end_Z:that.timeData[that.timeCur[1].len].arr[that.timeCur[1].str].Z,
				days:D,
			}
		},
		btnConfirm(){
			if(this.Checkin.days < 2){
				return getApp().Tips('请选择离店时间~')
			}
			this.$emit('getHotelData', this.peopleArrCur,this.Checkin,this.timeCur);
		},
		getDateHeight(){
			var that = this
			var text = ''
			for(let i = 0;i < that.timeData.length;i++){
				text = '#Time_' + i
				uni.createSelectorQuery().in(that).select(text).boundingClientRect(function (res) {
					that.timeData[i].TimeHiehgt = res.height + (i == 0?0:that.timeData[i - 1].TimeHiehgt) - 5
				}).exec();
			}
		},
		getScrollTop(e){
			var i = this.scroll_index > 0?this.scroll_index - 1:0;
			for(i;i < this.timeData.length;i++){
				if(e.detail.scrollTop < this.timeData[i].TimeHiehgt){
					this.scroll_index = i;
					break;
				}
			}
		},
		showModal(target){
			this.$emit('showModal', target);
		},
		countTap(index,type){
			if(type == 1){
				this.peopleArrCur[index].num--
			}else{
				this.peopleArrCur[index].num++
			}
		},
		tabreser(type){
			var that = this
			if(that.type == type){
				that.type = 0
			}else{
				that.type = type
				if(type == 2){
					that.scroll_index = -1
					setTimeout(() => {
						that.scroll_index = 0
					},500)
				}
			}
		},
	},
}
</script>
<style>
/* 预定酒店 */
.reservation-index{height: 100vh;}
.dialog-title{position: relative !important;z-index: 0 !important;}
.reser-room{font-size: 26upx;display: flex;align-items: center;justify-content:space-between;color: #666;
height:53px;padding: 0 30upx;background: #fff;width: 100%;float: left;}
.reser-room>view:nth-child(2){display: flex;align-items:center;}
.reser-room>view:nth-child(2)>view{margin-left: 20upx;}
.reser-room>view:nth-child(2)>.cuIcon-unfold{color: #000;}
.reser-cur{box-shadow: inset 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);}
.reser-room-cur{color: #FC9C39;}
.reser-room-list{width: 100%;float: left;padding: 0 30upx;transition: height 0.3s;background: #fff;height: 200px;overflow: hidden;}
.reser-room-list>view{width: 100%;float: left;height:50px;display:flex;align-items:center;
justify-content:space-between;font-size: 26upx;color: #666;}
.room-list-count{display: flex;align-items: center;}
.room-list-icon{display: flex;align-items: center;justify-content: center;width: 38upx;height: 38upx;border-radius: 50%;color: #fff;
background-color: #FF9800;}
.list-icon-cur{background-color: #939393 !important;}
.room-list-count>view:nth-child(2){margin: 0 10upx;min-width: 34upx;}
.cuIcon-unfold{transform:rotate(0deg);transition: all 0.3s;margin-left: 6upx !important;}
.reser-rotate{transform:rotate(-90deg);}
.reser-room-ing{background-color: #FAFAFA;border-radius: 20upx;padding: 0 20upx;height: 40upx;line-height: 40upx;font-size: 20upx;color: #666;}
/* 日期 */
.reser-money{margin-top: 10px;}
.reser-time{width: 100%;height:calc(100vh - 116px - var(--CustomBar--)) ;background-color: #fff;float: left;transition: height 0.3s;overflow: hidden;}
.reser-time>view{width: 100%;float: left;}
.reser-time>view:nth-child(1){background: #FFE3C6;color: #5F5F5F;height: 31px;display: flex;align-items: center;justify-content: center;}
.reser-data{width: calc(100% - 60upx) !important;float: left;height: 50px;display: flex;align-items: center;font-size: 24upx;
color: #5F5F5F;margin: 0 30upx;}
.reser-data>view{width: calc((100% - 60upx) / 7);margin-left: 10upx;}
.reser-data>view:nth-child(1){margin-left: 0;}
.reser-list{width: 100%;float: left;background: #fff;height:calc(100vh - 197px - var(--CustomBar--));}
.list-time{width: 100%;float: left;position: relative;}
.list-time>view:nth-child(1){padding-bottom:20upx;font-size: 30upx;color: #FC9C39;height: 31px;
width: calc(100% - 56upx);margin: 0 28upx;}
.list-time>view:nth-child(1)>view{height: 31px;border-bottom: 1px solid #F2F4F9;background: #fff;z-index: 1;}
.reser-fixed{position: fixed;top: calc(197px + var(--CustomBar--));width: calc(100% - 56upx);}
.list-time>view:nth-child(2){width: 100%;padding: 20upx 30upx 30upx;float: left;}
.list-date{width: calc((100% - 30px) / 7);height: 58px;border-radius: 10upx;float: left;display: flex;align-items: center;justify-content: center;
margin-left: 5px;margin-top: 5px;}
.list-date{font-size: 30upx;color: #252525;} 
.list-time>view:nth-child(2)>view:nth-child(7n+1){margin-left: 0 !important;}
.list-cur-one{background-color: #F8C691;}
.list-cur-two{background-color: #FC9C39;}
.list-cur-two>view>view:nth-child(1){color: #252525 !important;}
.reser-cur-font{font-size: 24upx;color: #FFFFFF;}
.reser-hui{color: #AAAAAA;}
.reser-chen{color: #FC9C39;}
</style>

需要引入的.vue

<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，很少看博客，对你有帮助别忘记点赞收藏。

换日线°
关注
专栏目录
案例-做一个酒店预定小程序用的日期选择案例
逍遥生的博客
12-27 6831
做一个酒店预定用的日期选择案例 不多说，先上效果图 设计思路：根据年份和月份构建最近6个月的日历，获取每个月的第一天是星期几，空白用空对象填充，每个月需要的格子数 = 每月1号的星期数 + 每月对应的天数。在HTML中遍历日期数据，根据条件判断高亮显示入住时间、离店时间以及两者之间的时间。一下是全部代码(优化在最后). &amp;amp;amp;lt;!-- html代码 --&amp;amp;amp;gt; &amp;amp;amp;lt;view...
小程序酒店预定日期选择
He195501的博客
09-17 4802
https://blog.csdn.net/u012562411/article/details/85287537
微信小程序日历（预定酒店办）
07-21
该小程序主要是显示未来6个月的日期状况，以平铺的形式进行。主要用于酒店的日期选取 该小程序主要是显示未来6个月的日期状况，以平铺的形式进行。主要用于酒店的日期选取
微信小程序----日期时间选择器（自定义时间&&精确到分秒）
最新发布
每天都要努力学习哦~~
09-16 1519
pickerReady 为了保证加载顺序初始化正常 Skyline 模式下初始化会触发change 导出初始化异常。未解决 用户快速滚动会造成页面卡死 有思路的大佬可以留言解决方案。其他限制条件可修改组件中的compareTime函数定义。微信小程序自定义时间选择器，支持多种自定义功能。复制链接在浏览器中打开。
微信小程序酒店区间日历(含农历日期)
12-06
(链接："https://download.csdn.net/download/qq_40591925/11489494" ——更好，还便宜一个币。)该小程序主要是显示未来6个月的日期（含农历）状况，以平铺的形式进行。主要用于酒店的日期选取 ( ios显示问题解决： 将：var startWeek = new Date('' + year + '，' + month + '，1').getDay(); 该：var startWeek = new Date('' + year + '/' + month + '/1').getDay(); )
微信小程序酒店选择区间日历组件版（可通过参数实现是否显示农历日期）
04-19
(链接："https://download.csdn.net/download/qq_40591925/11489494" ——同样的，便宜些。)微信小程序酒店选择区间日历组件版，可通过参数实现是否显示农历日期。 博客：https://blog.csdn.net/qq_40591925/article/details/84834692 ( ios显示问题解决： 将：var startWeek = new Date('' + year + '，' + month + '，1').getDay(); 该：var startWeek = new Date('' + year + '/' + month + '/1').getDay(); )
微信小程序—仿美团酒店入住日期时段选择
WeiHan_Seven的博客
06-19 2284
美团市值突飞猛进，确实霸占了我们的吃喝玩乐，所以想做什么东西，研究一下美团也是不错的。最近需要用到一个酒店入住日期选择的组件，看了一下美团的设计，很好用，在此实现一下。
酒店小程序预定日期
qq_39016524的博客
07-16 1306
求大神赐教
微信小程序--选择酒店入住离店时间的控件
03-29
微信小程序，选择酒店入住离店时间的控件 效果图 (此图片来源于网络，如有侵权，请联系删除! ) image 使用方法   //事件处理函数 bindViewTap: function() { var that = this; //传递入住离店时间 var startDate = ...
基于微信小程序的酒店预订小程序.zip
02-18
4. **预订流程**：用户选择入住日期、离店日期和房型后，系统会计算总价，用户可选择在线支付，这涉及JS与微信支付接口的集成，确保支付安全。 5. **用户账户管理**：用户可以注册、登录，查看订单、修改个人信息等...
js mysql 住宿系统_微信小程序酒店管理信息系统研发(WebStorm,node.js,MySQL)
weixin_33624741的博客
02-06 1140
微信小程序酒店管理信息系统研发(WebStorm,node.js,MySQL)(任务书,开题报告,论文17000字,程序代码)摘 要随着社会经济的蓬勃发展，人们的消费水平在不断增长，外出旅行愈加频繁，酒店客房量的需求也在加强，这给酒店行业的发展带来了机遇与挑战。如何做好酒店住客的引流工作，如何管理好酒店，为酒店住客提供最优质的服务，成为酒店发展的关键。因此，结合现代软件技术和微信相关技术，整合...
微信小程序仿美团城市选择
12-08
本文实例为大家分享了微信小程序城市选择器，供大家参考，具体内容如下 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, // tHeight: 0, // bHeight: 0, cityList: [], isShowLetter: false, scrollTop: 0,//置顶高度 scrollTopId: '',//置顶id city: "上海市",
微信小程序实现时间预约功能
10-17
主要为大家详细介绍了微信小程序实现时间预约基本功能，一个类似电商的时间预约功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
虹软人脸识别 - 基于QT的桌面客户端与微信小程序及服务器设计
Aspendove的博客
05-09 2196
文章目录虹软人脸识别 - 基于QT的桌面客户端与微信小程序服务器设计简介桌面客户端微信小程序登记信息显示无线嵌入式摄像头服务器设计处理桌面客户端处理微信小程序公共信息上传与访问接口无线摄像头处理结语 虹软人脸识别 - 基于QT的桌面客户端与微信小程序服务器设计 简介 虹软公司为了帮助巨量的企业打破技术壁垒，快速运用机器视觉技术，让AI真正为行业赋能，为社会造福，将其二十多年来经行业检验积累并已广泛应用于各种智能设备上的人工智能引擎开放供开发者免费使用，并且提供了多种平台的多种语言接口。尤其是C/C++接口，
小程序酒店日历
qq_22718203的博客
07-24 452
之前做了个时间日历比较简单的把，如果要加价格什么的也可以稍微看着加加，之前写过这样的一个博客，只不过那个照片太丑然后又有点变化，就重新写过了。如图那个时间点是入口。 这个呢是未选中的样子。 这个是选了连续的样式， 这个是选了好多个时间的样式。其实还有些中间不可选的样式，只不过是调接口获取的，不过接口已经挂了所以就没办法显示出来了，大概就是有些已经满课的然后选的时间范围内有满课的就提示这个时间段不能选，接下来就是展示代码的时刻了。 首先还是看view <view class="page"..
小程序酒店预订日期组件
weixin_47426557的博客
08-10 1663
components/calendar/calendar.wxml <view class="page"> <view class="box"> <view class="box-flex"> <view class="flex-item"> <view class="item-content" bindtap="doDay" data-key='left'> <!-- &...
小程序酒店日历插件
Salunone的博客
09-24 1241
最近在写酒店的项目,需要用到日历插件。代码如下：放在一个组件里面，在页面中直接饮用组件 const formatDate = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() return [year, month, d...
微信小程序日历(酒店入住日期选择)
weixin_52618969的博客
12-15 1357
微信小程序日历(酒店入住日期选择) 今年刚毕业参加工作，微信小程序属于自学。望大佬指正代码的错误，不喜勿喷。当然也在线求职，现在在外包公司，工作半年了，基本都是做微信小程序的开发，老板只让单纯写页面，不让写功能和调接口，想换一个公司，提高自习。 wxml代码。 <!-- 日历--> <!-- 引入wxs文件，用来在界面中使用函数 --> <wxs src="../../pages/calendar/getTime.wxs" module="getTime" /> <
微信小程序日历
空&白的博客
10-17 576
首先，做完的页面展示 html <!-- 签到 --> <view class="sign"> <view class='wrap'> <!-- 显示年月 --> <view> <view class='selectDate'> <view class='goleft' ...
微信小程序精确日期时间选择器实现与问题修复
"微信小程序实现精确日期时间选择器的方法和注意事项" 在微信小程序开发中，为用户提供方便的日期和时间选择功能是非常常见的需求。这篇内容主要探讨了如何在微信小程序中创建一个精确的日期时间选择器，包括日期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值