tearoom/pages/index/index.vue

<template>
	<view class="page">
		<u-navbar title="门店详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			:custom-back="btns" title-size='36' height='36' id="navbar">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/uqYdRLVlB5b61Qdnbirn" mode="" class="imgbj"></image>
		<view class="lunbo">
			<u-swiper :list="list" mode="number" border-radius="20" height="366" indicator-pos="bottomRight"></u-swiper>
			<view class="shuom">
				<view class="" v-for="(item,index) in shopobj.tags">
					{{item}}
				</view>
			</view>
		</view>
		<view class="shop">
			<view class="shoplt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uUrAGtd5pY866cO8jn2N" mode=""></image>
				{{shopobj.name == undefined ? '--' : shopobj.name}}
			</view>
			<view class="shoprt">
				<image @click="btndaohang" src="https://api.ccttiot.com/smartmeter/img/static/uGTXeGxaynhN6SgufCdo" mode=""></image>
				<image @click="btntel" src="https://api.ccttiot.com/smartmeter/img/static/u8T5n2761RF0UY8ete1h" mode="">
				</image>
			</view>
		</view>
		<view class="juwo">
			距我{{shopobj.distance == undefined ? '--' : shopobj.distance}}km <text></text>
			{{shopobj.address == undefined ? '--' : shopobj.address}}
		</view>
		<view class="shoplist" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchCancel">
			<view class="shop_item" v-for="(item,index) in shopobj.roomList" :key="index" @click.stop="btndetail(item.roomId)">
				<view class="top">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uEjTJcyIlPETr6vUCs8M" mode=""></image>
						<view class="" v-if="item.status == 1">
							空闲中
						</view>
						<view class="" style="color: #ffba00;background-color: #fff1cc" v-if="item.status == 2">
							未打扫
						</view>
						<view class="" style="color: #ff4949;background-color: #ffdbdb;" v-if="item.status == 3">
							离线
						</view>
						<view class="" style="color: #ff4949;background-color: #ffdbdb;" v-if="item.status == 4">
							使用中
						</view>
						<view class="" style="color: #ffba00;background-color: #fff1cc" v-if="item.status == 5">
							打扫中
						</view>
					</view>
					<view class="cen">
						<view class="name">
							{{item.roomName == undefined ? '--' : item.roomName}}
						</view>
						<view class="leixing">
							<view class="" v-for="(val,index) in item.tags">
								{{val}}
							</view>

						</view>
						<view class="price">
							￥{{item.hour == undefined ? '--' : item.hour}}/小时
						</view>
						<view class="taocan">
							{{item.bottomPriceFeeRule.hours == undefined ? '--' : item.bottomPriceFeeRule.hours}}小时套餐/
							<text>￥{{item.bottomPriceFeeRule.price == undefined ? '--' : item.bottomPriceFeeRule.price}}</text> /场
						</view>
					</view>
					<view class="rt">
						<view class="yishou">
							已售{{item.soldNum == undefined ? '--' : item.soldNum}}
						</view>
						<view class="yuding">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uTZqERPrCyWXvlhwdV3y" mode="">
							</image>
							<view class="">
								预定
							</view>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="duan">
						<view v-for="(isReserved, hourStr) in item.reservationStatus" :key="hourStr" :class="['hour-item', { 'is-reserved': isReserved }]">
						</view>
					</view>
					<view class="shijian">
						<view style="width: 16rpx;" v-for="(item,index) in hourPointsArray" :key="index">
							{{item.slice(0, 2) == '00' ? '次日' : item.slice(0,2)}}
						</view>
					</view>
					<view class="ydshiduan">
						<view class="yi">
							<text></text> 已预订时段
						</view>
						<view class="wei">
							<text></text> 可预订时段
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 100rpx;font-size: 34rpx;color: #ccc;">
				没有更多房间啦，敬请期待吧...
			</view>
		</view>
		<view class="xuanfu" v-if="imgflag">
			<image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image>
			<image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image>
			<image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image>
		</view>
		<view class="xuanfus" v-else>
			<image @click="btnopen(1)" src="https://api.ccttiot.com/smartmeter/img/static/uKeCHdot1z4QJldDe3UL" mode=""></image>
			<image @click="btnopen(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4lmGbm77OWC2Uik2737" mode=""></image>
			<image @click="btnopen(3)" src="https://api.ccttiot.com/smartmeter/img/static/uUjamKC7Kvd9KMLLOeBD" mode=""></image>
		</view>
		<view class="karaokeroom" v-if="jinxinflag">
			<view class="top">
				正在进行中的订单
			</view>
			<view class="roomlist">
				<view class="room_item" v-for="(item,index) in jinxinglist" :key="index" :id="mdindex == index ? 'active' : ''" @click="btnmd(index)">
		            <view class="lt">
		            	<image :src="item.picture" mode=""></image>
		            </view>			
				    <view class="rt" style="font-size: 22rpx;">
				    	<view class="">
				    		<text>预约门店：</text> <text>{{item.storeName == null ? '--' : item.storeName}}</text>
				    	</view>
						<view class="">
							<text>预约包厢：</text> <text>{{item.roomName == null ? '--' : item.roomName}}</text>
						</view>
						<view class="">
							<text>开始时间：</text> <text>{{item.reserveStartTime == null ? '--' : item.reserveStartTime}}</text>
						</view>
						<view class="">
							<text>结束时间：</text> <text>{{item.reserveEndTime == null ? '--' : item.reserveEndTime}}</text>
						</view>
				    </view>
				</view>
			</view>
			<view class="anniu">
				{{jinxintxt}}
			</view>
		</view>
		<image v-if="jinxinflag" @click="jinxinflag = false" class="jinxinx" src="https://api.ccttiot.com/smartmeter/img/static/uH5fAInJQYhf3wlXkuYI" mode=""></image>
		<view class="mask" v-if="jinxinflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				list: [
					{
						image: 'https://api.ccttiot.com/smartmeter/img/static/uqYdRLVlB5b61Qdnbirn'
					}
				],
				imgflag: true,
				storeId: '',
				shopobj: {},
				hourPointsArray: [],
				roomList: [],
				hours: [],
				reservationStatus: {},
				arr:[],
				jinxinglist:[],
				jinxinflag:false,
				jinxintxt:'开包厢'
			}
		},
		onLoad(option) {
			if(option.storeId){
				this.storeId = option.storeId
				uni.setStorageSync('storeId',this.storeId)
			}else{
				this.storeId = uni.getStorageSync('storeId')
			}
		},
		onShow() {
			this.jinxinflag = false //如果进行了tab切换 则隐藏
			this.getstoredetail()
			this.getorder()
			this.hourPointsArray = this.getCurrentHourPoints() //计算从当前时间往后推24小时
		},
		mounted() {

		},
		methods: {
			// 拿到当前时间后24小时格式成两位数
			initializeData() {
			  // 获取当前时间
			  let now = new Date()
			  // 获取当前时间的小时部分（0-23）
			  let currentHour = now.getHours()
			  // 初始化小时数组
			  this.hours = []
			  this.arr = []
			  // 遍历从当前小时开始的24个小时
			  for (let i = 0; i < 24; i++) {
			    // 计算小时数，注意要处理超过23点的情况
			    let hour = (currentHour + i) % 24
				let arrsum = currentHour + i
				if(hour == '00'){ //如果是00:00 则改成24:00
					hour = 24
				}else{
					hour = hour
				}
			    // 推入数组
				this.arr.push(arrsum)
			    this.hours.push(hour)
			  }
			  console.log(this.hours,'arr',this.arr)
			},
			// 更新房间的预订状态且与initializeData进行匹对
			updateRoomReservationStatus() {
				this.roomList.forEach(room => {
					room.reservationStatus = {} // 为每个房间创建一个新的预订状态对象
					this.hours.forEach(hour => {
						room.reservationStatus[hour] = false // 初始化为未预订状态
					})
					room.reservedTimePeriods.forEach(period => {
						let startHour = period.startTime.slice(period.startTime.length - 8, period.startTime.length - 6) //取预定开始时间小时
						let endHour = period.endTime.slice(period.endTime.length - 8, period.endTime.length - 6) //取预定结束时间小时
						let timefen = period.startTime.slice(period.endTime.length - 5, period.endTime.length - 3) //取预定结束时间分钟
						console.log(timefen,'02020202')
						// 获取当前日期
						let now = new Date()
						let year = now.getFullYear()
						let month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以要加1，并用padStart确保是两位数
						let day = String(now.getDate()).padStart(2, '0') // 用padStart确保是两位数
						let riqione = `${year}-${month}-${day}` //当前日期
						let riqitwo = period.endTime.slice(0,10) //预定结束日期
						let dateOne = new Date(riqione)
						let dateTwo = new Date(riqitwo)
						if (dateOne < dateTwo) { //将开始和结束日期进行对比 判断是否是第二天
							if(endHour < startHour){ 
								endHour = 24 + Number(endHour)
							}else{
								endHour = 24 + Number(endHour)
								startHour = 24 + Number(startHour)
							}
						} else {
						    console.log("第一个日期不小于第二个日期")
						}
						console.log(startHour,endHour,period.startTime,period.endTime)
						for (let i = 0; i < 24; i++) {
							if(timefen == '00'){ //判断预定结束是否包含分钟 不包含正常走判断 包含则将时间往后延长1
								if(this.arr[i] > startHour && this.arr[i] <= endHour){
									room.reservationStatus[i] = true
								}
							}else{
								if(this.arr[i] > startHour && Number(this.arr[i] - 1) <= endHour){
									room.reservationStatus[i] = true
								}
							}
						}
					})
				})
				console.log(this.roomList,'00')
			}, 
            
			 
		//计算从当前时间往后推24小时
		getCurrentHourPoints() {
			let now = new Date()
			let startHour = now.getHours()
			let startDate = new Date(now)
			startDate.setMinutes(0, 0, 0) // 确保分钟、秒和毫秒都是0
			let options = {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			}
			let hourPoints = []
			for (let i = 0; i < 24; i++) {
				let newDate = new Date(startDate)
				newDate.setHours((startHour + i) % 24, 0, 0, 0)
				if (newDate.getHours() === 0 && i !== 0) {
					newDate.setDate(newDate.getDate() + 1)
				}
				let hours = String(newDate.getHours()).padStart(2, '0')
				let minutes = String(newDate.getMinutes()).padStart(2, '0')
				let seconds = String(newDate.getSeconds()).padStart(2, '0')
				let formattedDateString = `${hours}:${minutes}:${seconds}`
				hourPoints.push(formattedDateString)
			}
			return hourPoints;
		},
		// 请求正在进行中的订单
		getorder(){
			this.$u.get(`/app/order/getInProgressOrderList`).then(res =>{
				if(res.code == 200){
					this.jinxinglist = res.data
				}
			})
		},
		// 点击进行开店门开包厢等操作
			btnopen(num){
				if(num == 1){
					this.$u.get(`app/store/openGate/1`).then(res => {
						if(res.code == 200){
							uni.showToast({
								title: '开启店门成功',
								icon: 'success',
								duration: 2000
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if(num == 2){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '开包厢'
					}else if(this.jinxinglist.length == 1){
						let roomId = this.jinxinglist[0].roomId
						this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => {
							if(res.code == 200){
							   uni.showToast({
							     title: '开启包厢门成功',
							     icon: 'success',
							     duration: 2000
						       })
						   }else{
							  uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							  })
						    }
						})
					}else{
						uni.showToast({
							title: '您当前没有订单',
							icon: 'none',
							duration: 2000
						})
					}
				}else if(num == 3){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '去续单'
					}else if(this.jinxinglist.length == 1){
						let roomId = this.jinxinglist[0].roomId
						let orderNo = this.jinxinglist[0].orderNo
						uni.navigateTo({
							url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo
						})
					}else{
						uni.showToast({
							title: '您当前没有订单',
							icon: 'none',
							duration: 2000
						})
					}
				}
			},

			// 请求门店详细信息
			getstoredetail() {
				this.reservationStatus = {}
				this.$u.get(`app/store/${this.storeId}`).then(res => {
					if (res.code == 200) {
						this.shopobj = res.data
						if(res.data.carouselList != '' || res.data.carouselList.length > 0){
							this.list = []
							this.list = res.data.carouselList.map(item => item.picture)
						}
						this.roomList = res.data.roomList //赋值所有房间
						this.initializeData() //在this.roomlist赋值后调用
						this.updateRoomReservationStatus()
					}
				})
			},
			
			
            // 点击进行导航
			btndaohang(){
				uni.openLocation({
				   latitude:this.shopobj.lat,//纬度-目的地/坐标点
				   longitude:this.shopobj.lng,//经度-目的地/坐标点
				   name:this.shopobj.name,//地点名称
				   address:this.shopobj.addres//详细地点名称
				})
			},
			// 按下滑动
			onTouchStart() {
				this.imgflag = false
			},
			// 松开滑动
			onTouchEnd() {
				this.imgflag = true
			},
			// 滑动取消
			onTouchCancel() {
				this.imgflag = true
			},
			// 点击跳转包厢详情页
			btndetail(roomId) {
				uni.navigateTo({
					url: '/pages/myorder/index?roomId=' + roomId
				})
			},
			// 点击自定义导航栏返回首页
			btns() {
				uni.reLaunch({
					url: '/pages/nearbystores/index'
				})
			},
			// 点击拨打咨询电话
			btntel() {
				uni.makePhoneCall({
					phoneNumber: this.shopobj.serverPhone,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
						uni.showToast({
							title: '取消拨打电话',
							icon: 'none'
						})
					}
				})
			}

		}
	} 
</script>

<style lang="scss">
	.hour-item {
		width: 100%;
		text-align: center;
		margin: 2px 0;
		background-color: gray;
		/* 默认灰色 */
		color: white;
		/* 确保文本在灰色背景上清晰可见 */
	}

	.hour-item.is-reserved {
		background-color: #48893B !important;
		/* 如果被预订，则显示红色 */
	}
	#active{
		border: 1px solid #226914 !important;
		background-color: #226914 !important; 
		color: #fff !important;
	}
	.karaokeroom{
		position: fixed;
		top: 332rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		width: 674rpx;
		height: 828rpx;
		background: linear-gradient( 180deg, #DEF1DA 0%, #FFFFFF 100%, #FFFFFF 100%);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		.top{
			font-weight: 600;
			font-size: 44rpx;
			color: #48893B;
			width: 100%;
			text-align: center;
			margin-top: 52rpx;
			margin-bottom: 44rpx;
		}
		.anniu{
			width: 584rpx;
			height: 86rpx;
			background: #48893B;
			border-radius: 43rpx 43rpx 43rpx 43rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 86rpx;
			margin: auto;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 72rpx;
		}
		.roomlist{
			height: 480rpx;
			overflow: scroll;
			.room_item{
				width: 584rpx;
				height: 224rpx;
				border: 2rpx solid #969696;
				background-color: #fff;
				border-radius: 20rpx;
				margin: auto;
				display: flex;
				align-items: center;
				padding: 34rpx;
				box-sizing: border-box;
				margin-top: 26rpx;
				.lt{
					image{
						width: 154rpx;
						height: 154rpx;
						margin-right: 22rpx;
					}
				}
			}
		}
	}
	.jinxinx{
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		top: 1216rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .2;
	}

	page {
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	/deep/ .u-indicator-item-number {
		padding: 12rpx 16rpx !important;
		border-radius: 10rpx !important;
		height: 52rpx !important;
		color: #fff !important;
	}

	.xuanfu {
		position: fixed;
		top: 52%;
		right: 30rpx;
		animation: fadeInDowns .5s ease-out forwards;

		image {
			width: 90rpx;
			height: 90rpx;
			display: block;
			margin-top: 44rpx;
		}
	}

	@keyframes fadeInDowns {
		from {
			opacity: 0;
			transform: translateX(50px);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateX(-50px);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.xuanfus {
		position: fixed;
		top: 52%;
		right: -80rpx;
		animation: fadeInDown .5s ease-out forwards;

		image {
			width: 90rpx;
			height: 90rpx;
			display: block;
			margin-top: 44rpx;
		}
	}

	.page {
		width: 750rpx;
		padding-left: 38rpx;
		padding-right: 38rpx;
		box-sizing: border-box;

		.shoplist {
			max-height: 710rpx;
			overflow: scroll;
			padding-bottom: 40rpx;
			box-sizing: border-box;

			.shop_item {
				width: 674rpx;
				margin-top: 20rpx;
				max-height: 620rpx;
				background: #FFFFFF;
				padding: 20rpx 18rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.bot {
					margin-top: 28rpx;

					.ydshiduan {
						display: flex;
						margin-top: 30rpx;

						.yi {
							display: flex;
							align-items: center;
							margin-right: 32rpx;

							text {
								display: inline-block;
								width: 28rpx;
								height: 4rpx;
								background: #48893B;
								margin-right: 14rpx;
							}

							font-size: 24rpx;
							color: #48893B;
						}

						.wei {
							display: flex;
							align-items: center;

							text {
								display: inline-block;
								width: 28rpx;
								height: 4rpx;
								background: #B8B8B8;
								margin-right: 14rpx;
							}

							font-size: 24rpx;
							color: #3D3D3D;
						}
					}

					.duan {
						width: 100%;
						display: flex;
						justify-content: center;

						view {
							width: 26rpx;
							height: 4rpx;
							background-color: #B8B8B8;
							margin-right: 1rpx;
						}
					}

					.shijian {
						display: flex;
						font-size: 16rpx;
						color: #3D3D3D;
						justify-content: center;
						justify-content: space-between;
						box-sizing: border-box;
						width: 100%;
						padding-right: 10rpx;

						view {
							width: 10rpx;
						}
					}
				}

				.top {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.rt {
						text-align: right;

						.yishou {
							font-size: 28rpx;
							color: #7C7C7C;
							font-weight: 600;
						}

						.yuding {
							position: relative;
							margin-top: 140rpx;

							image {
								width: 130rpx;
								height: 56rpx;
							}

							view {
								font-size: 30rpx;
								color: #FFFFFF;
								font-weight: 600;
								position: absolute;
								top: 10rpx;
								left: 34rpx;
							}
						}
					}

					.cen {
						margin-right: 36rpx;

						.name {
							font-size: 34rpx;
							color: #48893B;
							font-weight: 600;
						}

						.price {
							font-size: 32rpx;
							color: #3D3D3D;
							margin-top: 24rpx;
							font-weight: 600;
						}

						.taocan {
							font-size: 24rpx;
							color: #3D3D3D;
							margin-top: 22rpx;

							text {
								color: #FF4848;
								font-weight: 600;
								font-size: 26rpx;
							}
						}

						.leixing {
							display: flex;
							margin-top: 28rpx;

							view {
								max-width: 104rpx;
								height: 46rpx;
								font-size: 26rpx;
								color: #48893B;
								border-radius: 10rpx;
								margin-right: 14rpx;
								padding: 4rpx 12rpx;
								box-sizing: border-box;
								border: 1px solid #48893B;
							}
						}
					}

					.lt {
						width: 186rpx;
						height: 236rpx;
						overflow: hidden;
						border-radius: 10rpx;
						position: relative;
						margin-right: 28rpx;

						view {
							width: 186rpx;
							height: 42rpx;
							background: #48893B;
							position: absolute;
							left: 0;
							bottom: 0;
							font-size: 20rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 42rpx;
						}

						image {
							width: 186rpx;
							height: 236rpx;
						}
					}
				}
			}
		}

		.juwo {
			font-size: 24rpx;
			color: #3D3D3D;
			margin-top: 24rpx;
			margin-bottom: 24rpx;

			text {
				width: 2rpx;
				height: 22rpx;
				border: 1rpx solid #ccc;
				display: inline-block;
				margin: 0 10rpx;
			}
		}

		.shop {
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
			align-items: center;

			.shoplt {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				font-size: 36rpx;
				color: #3D3D3D;
				font-weight: 600;
			}

			.shoprt {
				image {
					width: 58rpx;
					height: 58rpx;
					margin-left: 26rpx;
				}
			}
		}

		.lunbo {
			margin-top: 44rpx;
			position: relative;

			.shuom {
				display: flex;
				position: absolute;
				left: 20rpx;
				bottom: 14rpx;
                width: 100%;
				view {
					height: 52rpx;
					text-align: center;
					background: rgba(0, 0, 0, .5);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 8rpx 14rpx;
					box-sizing: border-box;
					margin-right: 12rpx;
				}
			}
		}

		.imgbj {
			width: 750rpx;
			height: 352rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
</style>