tearoom/pages/index/index.vue

<template>
	<view class="page">
		<u-navbar :title="shopobj.name" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			:custom-back="btns" title-size='36' height='40' id="navbar">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/u3lZnmhqSqkMd7gHKtMD" 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">
					{{getMatchingLabels(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">
		     <span v-if="distance != ''">距我{{distance}}km</span> <text></text>
			{{shopobj.address == undefined ? '--' : shopobj.address}}
		</view>

		<view class="tongji" v-if="tabarr!=''">
			<view class="one" @click="btngundong(item.type,index)" v-for="(item,index) in tabarr" :key="index">
				<view class="kg">空闲 <text>{{item.idleNum}}</text></view>
				<view class="gn">{{item.tag}}</view>
				<image v-if="tabindex == item.type" src="https://api.ccttiot.com/smartmeter/img/static/uZNimi3DEsGWsjfJm2Bg"
					mode=""></image>
			</view>
		</view>
		<!-- 台球 --><!-- 台球 --><!-- 台球 --><!-- 台球 --><!-- 台球 --><!-- 台球 --><!-- 台球 --><!-- 台球 -->
		<view class="taiqiubox" v-if="tabindex == 3" @touchstart="onTouchStart" @touchend="onTouchEnd"
			@touchcancel="onTouchCancel">
			<view class="zhuozi">
				<view class="tqlist">
					<view class="tqlist_item" v-for="(item,index) in shopobj.roomList" :key="index" @click="btndetail(item)"> <!-- btntq -->
						<image src="https://api.ccttiot.com/smartmeter/img/static/uqv5RPXXtMydaBdU7sqG" mode=""></image>
						<view class="name">
							{{item.roomName.length > 5 ? item.roomName.slice(0,5) + '...' : item.roomName}}
						</view>
						<view class="kaitai">
							开台
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="tqname">
				杆柜
			</view>
			<view class="gangui" @click="btncungan">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uQPXhfkhmvvvPXbW65WF" mode=""></image>
			</view> -->
		</view>

		<view class="shoplist" v-else @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchCancel">
			<view class="shop_item" v-for="(item,index) in shopobj.roomList" :key="index"
				@click.stop="btndetail(item)">
				<view class="top">
					<view class="lt">
						<image :src="item.pictures[0]" mode="aspectFill"></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 style="color: #ccc;" class="zt" v-if="item.status == 8">
							下线维护
						</view>
					</view>
					<view class="cen">
						<view class="name">
							{{item.roomName == undefined ? '--' : item.roomName}} 
							<text v-if="item.viewType == 1">房间</text>
							<text v-if="item.viewType == 2">大厅</text>
						</view>
						<view class="leixing">
							<view class="" v-for="(val,index) in item.tags">
								{{getMatchingLabel(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(6)" src="https://api.ccttiot.com/smartmeter/img/static/u3AxwRFjWnSAAYyNS70w" 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(6)" src="https://api.ccttiot.com/smartmeter/img/static/u3AxwRFjWnSAAYyNS70w" 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,item)">
					<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" @click="btnanniu">
				{{jinxintxt}}
			</view>
		</view>
		<image v-if="jinxinflag" @click="btnyc" class="jinxinx"
			src="https://api.ccttiot.com/smartmeter/img/static/uH5fAInJQYhf3wlXkuYI" mode=""></image>
		<view class="mask" v-if="jinxinflag"></view>
		<!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 --><!-- 厕所 -->
		<view class="cesuoul" v-if="cesuoflag">
			<view class="cesuoli" v-for="(item,index) in cesuolist" :key="index">
				<view class="caocuo">
					<view class="name">
						{{item.name}}
					</view>
					<view class="kaiguan" @click="btncs(item)">
						开门
					</view>
				</view>
			</view>
			<view class="anniuqx" @click="cesuoflag = false">
				取消
			</view>
		</view>
		<view class="mask" v-if="cesuoflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "rgba(195, 221, 189, 1)",
				},
				navflag:true,
				list: [{
					image: 'https://api.ccttiot.com/smartmeter/img/static/uuoqWaq7HnXBteQayaz4'
				}],
				imgflag: true,
				storeId: '',
				shopobj: {},
				hourPointsArray: [],
				roomList: [],
				hours: [],
				reservationStatus: {},
				arr: [],
				jinxinglist: [],
				jinxinflag: false,
				jinxintxt: '开包厢',
				tabindex: 1,
				biaoqianlist: [],
				biaostoreqianlist: [],
				mdindex:-1,
				viewType:'',
				tit:'',
				tabarr:[],
				type:'',
				distance:'',
				roomId:'',
				sceneValue:'',
				cesuolist:[],
				cesuoflag:false,
			}
		},
		onLoad(option) {
			console.log(option);
			if (option.q) {
			    // 解码扫码结果
			    this.sceneValue = option.q;
			    let decodedValue = decodeURIComponent(this.sceneValue);
			    // 解析 URL 参数的函数
			    function getQueryParam(url, paramName) {
			        let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
			        let results = regex.exec(url);
			        return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
			    }
			    // 判断是 storeCode 还是 roomCode
			    let storeCode = getQueryParam(decodedValue, 'storeCode');
			    let roomCode = getQueryParam(decodedValue, 'roomCode');
			    if (storeCode) {
					this.$u.get(`app/getId?storeCode=${storeCode}`).then(resp =>{
						if(resp.code == 200){
							console.log('这是 storeCode:', resp.data);
							// 执行 storeId 相关的逻辑
							this.storeId = resp.data
							uni.setStorageSync('storeId', this.storeId)
							this.tabindex = 1
							this.getroombq()
							this.jinxinflag = false //如果进行了tab切换 则隐藏
							this.getbiaoqian()
							this.getstorebiaoqian()
							this.getorder()
							this.hourPointsArray = this.getCurrentHourPoints() //计算从当前时间往后推24小时
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			    } else if (roomCode) {
					this.$u.get(`app/getId?roomCode=${roomCode}`).then(resp =>{
						if(resp.code == 200){
							console.log('这是 roomId:', resp.data);
							this.roomId = resp.data
							this.$u.get(`/app/order/getInProgressOrderList`).then(res => {
								if (res.code == 200) {
									if(res.data == null || res.data.length == 0){
										uni.navigateTo({
											url: '/pages/myorder/index?roomId=' + this.roomId
										})
									}else{
										uni.navigateTo({
											url:'/page_user/dingdanxq?orderNo=' + res.data[0].orderNo + '&viewType=' + res.data[0].roomType2
										})
									}
								}else if(res.code == 401){
									uni.navigateTo({
										url:'/pages/login/index'
									})
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			    } else {
			        console.log('URL 中未找到 storeCode 或 roomCode');
			    }
			}else if(option.storeId) {
				this.storeId = option.storeId
				uni.setStorageSync('storeId', this.storeId)
				this.tabindex = 1
				this.getroombq()
				this.jinxinflag = false //如果进行了tab切换 则隐藏
				this.getbiaoqian()
				this.getstorebiaoqian()
				this.getorder()
				this.hourPointsArray = this.getCurrentHourPoints() //计算从当前时间往后推24小时
			} else {
				this.storeId = uni.getStorageSync('storeId')
				this.tabindex = 1
				this.getroombq()
				this.jinxinflag = false //如果进行了tab切换 则隐藏
				this.getbiaoqian()
				this.getstorebiaoqian()
				this.getorder()
				this.hourPointsArray = this.getCurrentHourPoints() //计算从当前时间往后推24小时
			}
			if(option.distance){
				this.distance = option.distance
			}
		},
		onShow() {
			
		},
		mounted() {

		},
		methods: {
			// 点击打开厕所门
			btncs(item){
				if(item.deviceId == null){
					uni.showToast({
						title: '该厕所未安装设备',
						icon: 'none',
						duration: 2000
					})
				}else{
					this.$u.get(`/app/room/openToilet/${item.toiletId}`).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '打开成功',
								icon: 'success',
								duration: 2000
							})
							this.cesuoflag = false
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// 点击存取球杆进行跳转
			btncungan(){
				uni.navigateTo({
					url:'/page_fenbaotwo/cunganimg'
				})
			},
			
			// 点击包厢切换高亮
			btnmd(index,item){
				this.viewType = item.reType
				this.mdindex = index
			},
			// 点击隐藏进行中订单
			btnyc(){
				this.jinxinflag = false
			},
			// 拿到房间标签进行对比
			getMatchingLabel(val) {
				const matchingItem = this.biaoqianlist.find(item => item.dictValue === val)
				return matchingItem ? matchingItem.dictLabel : val
			},
			// 拿到店铺标签进行对比
			getMatchingLabels(val) {
				const matchingItem = this.biaostoreqianlist.find(item => item.dictValue === val)
				return matchingItem ? matchingItem.dictLabel : val
			},
			// 获取店铺标签
			getstorebiaoqian() {
				this.$u.get(`/appVerify/getDictData?dictType=ss_store_tags`).then((res) => {
					if (res.code == 200) {
						this.biaostoreqianlist = res.data
					}
				})
			},
			// 获取房间标签
			getbiaoqian() {
				this.$u.get(`/appVerify/getDictData?dictType=ss_room_tags`).then((res) => {
					if (res.code == 200) {
						this.biaoqianlist = res.data
					}
				})
			},
			// 根据店铺id查房间tab
			getroombq() {
				this.$u.get(`/app/room/getTagListByStoreId?storeId=${this.storeId}`).then(res => {
					if (res.code == 200) {
						this.tabarr = res.data
						if(this.tabarr.length > 0){
							this.type = this.tabarr[0].type
						}else{
							this.type = ''
						}
						this.getstoredetail()
						console.log(this.tabarr)
					}
				})
			},
			// 请求门店详细信息
			getstoredetail() {
				this.reservationStatus = {}
				let data = {
					type: this.type
				}
				this.$u.get(`/app/store/${this.storeId}`, data).then(res => {
					if (res.code == 200) {
						this.shopobj = res.data
						if (res.data.pictures != null) {
							this.list = res.data.pictures
						}
						this.roomList = res.data.roomList //赋值所有房间
						this.initializeData() //在this.roomlist赋值后调用
						this.updateRoomReservationStatus()
					}
				})
			},
			// 点击台球桌预定
			btntq() {
				uni.navigateTo({
					url: '/pages/myorder/taiqiuyuding'
				})
			},

			// 点击切换tab类型
			btngundong(type, index) {
				console.log(type)
				this.shopobj.roomList = []
				this.tabindex = type
				this.type = type
				this.getstoredetail()
			},

			// 拿到当前时间后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 => {
					// if (room.reservationStatus == null) {
					// 	room.reservationStatus = {} // 为每个房间创建一个新的预订状态对象
					// 	this.hours.forEach(hour => {
					// 		room.reservationStatus[hour] = false // 初始化为未预订状态
					// 	})
					// } else {
						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
					}
				})
			},
			// 选择订单后进行操作
			btnanniu(){
				if(this.jinxintxt == '开店门'){
					let storeId = this.jinxinglist[this.mdindex].storeId
					console.log(this.jinxinglist[this.mdindex],this.mdindex);
					this.$u.get(`app/store/openGate/${storeId}`).then(res => {
						if(res.code == 200){
							this.jinxinflag = false
							this.mdindex = -1
							uni.showToast({
							title: '开启店门成功',
							icon: 'success',
							duration: 2000
						    })
						}else{
							this.mdindex = -1
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}else if(this.jinxintxt == '开包厢'){
					let roomId = this.jinxinglist[this.mdindex].roomId
					this.$u.get(`app/room/openRoomGate/${roomId}`).then(res => {
						if(res.code == 200){
						   this.jinxinflag = false
						   this.mdindex = -1
						   uni.showToast({
						     title: '开启包厢门成功',
						     icon: 'success',
						     duration: 2000
					       })
					   }else{
						   this.mdindex = -1
						  uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						  })
					    }
					})
				}else if(this.jinxintxt == '去续单'){
					 this.jinxinflag = false
					let roomId = this.jinxinglist[this.mdindex].roomId
					let orderNo = this.jinxinglist[this.mdindex].orderNo
					uni.navigateTo({
						url:'/page_user/xudan?roomId=' + roomId + '&orderNo=' + orderNo + '&viewType='  + this.viewType
					})
				}
			},
			// 点击进行开店门开包厢等操作
			btnopen(num){
				if(num == 1){
					if(this.jinxinglist.length > 1){
						this.jinxinflag = true
						this.jinxintxt = '开店门'
					}else if(this.jinxinglist.length == 1){
						let storeId = this.jinxinglist[0].storeId
						this.$u.get(`app/store/openGate/${storeId}`).then(res => {
						if(res.code == 200){
							uni.showToast({
							title: '开启店门成功',
							icon: 'success',
							duration: 2000
						    })
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				   }else{
					   this.$u.get(`app/store/openGate/${this.storeId}`).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
						})
					}
				}else if(num == 4){
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
						success: res => {
					         console.log(res)
						},
						fail: err => {
							console.error('扫描失败：', err)
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							})
						}
					})
				}else if(num == 6){
					this.$u.get(`/app/toilet/list?storeId=${this.storeId}`).then(res =>{
						if(res.code == 200){
							if(res.rows == null || res.rows.length == 0){
								uni.showToast({
									title: '暂无卫生间',
									icon: 'none',
									duration:2000
								})
							}else{
								this.cesuolist = res.rows
								if(this.cesuolist.length == 1){
									this.$u.get(`/app/room/openToilet/${this.cesuolist[0].toiletId}`).then(res => {
										if (res.code == 200) {
											uni.showToast({
												title: '打开成功',
												icon: 'success',
												duration: 2000
											})
											this.cesuoflag = false
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 2000
											})
										}
									})
								}else{
									this.cesuoflag = true
								}
							}
						}
					})
				}
			},

			// 点击进行导航
			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(item) {
				uni.navigateTo({
					url: '/pages/myorder/index?roomId=' + item.roomId + '&viewType='  + item.type2
				})
			},
			// 点击自定义导航栏返回首页
			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;
	}
    .cesuoul{
		width: 260rpx;
		max-height: 500rpx;
		background-color: #fff;
		border-radius: 30rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		padding: 30rpx;
		box-sizing: border-box;
		.anniuqx{
			width: 100%;
			height: 80rpx;
			border: 1px solid #226914;
			text-align: center;
			line-height: 80rpx;
			color: #226914;
			margin-top: 30rpx;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.cesuoli{
			width: 100%;
			.caocuo{
				.name{
					width: 100%;
					text-align: center;
					margin-top: 20rpx;
					font-size: 32rpx;
				}
				.kaiguan{
					padding: 10rpx;
					background-color: #226914;
					color: #fff;
					border-radius: 10rpx;
					margin: auto;
					margin-top: 20rpx;
					width: 100rpx;
					text-align: center;
				}
			}
			
		}
	}
	.taiqiubox {
		max-height: 710rpx;
		overflow: scroll;
		padding-bottom: 240rpx;
		box-sizing: border-box;

		.zhuozi {
			width: 99%;
			max-height: 5632rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
			margin: auto;
			margin-top: 10rpx;
			padding: 10rpx;
			padding-top: 0;
			box-sizing: border-box;
			border-radius: 10rpx;

			.tqlist {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.tqlist_item {
					width: 308rpx;
					height: 180rpx;
					position: relative;
					margin-top: 16rpx;

					.name {
						font-size: 36rpx;
						color: #FFFFFF;
						width: 100%;
						text-align: center;
						padding-top: 34rpx;
						box-sizing: border-box;
					}

					.kaitai {
						width: 90rpx;
						height: 42rpx;
						background: #C5DFC0;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 42rpx;
						font-size: 28rpx;
						color: #48893B;
						margin: auto;
						margin-top: 14rpx;
					}

					image {
						position: absolute;
						width: 308rpx;
						height: 180rpx;
						z-index: -1;
					}
				}
			}
		}

		.gangui {
			width: 674rpx;
			height: 298rpx;
			position: relative;
			margin-top: 16rpx;

			image {
				position: absolute;
				width: 674rpx;
				height: 298rpx;
			}

			.cun {
				width: 92rpx;
				height: 92rpx;
				background: #48893B;
				border: 2rpx solid #191114;
				border-radius: 50%;
				text-align: center;
				line-height: 92rpx;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

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

	.typewz {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		margin-bottom: 10rpx;

		.one {
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
			margin-right: 20rpx;
		}

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

	.tongji {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.one {
			width: 188rpx;
			text-align: center;

			.kg {
				font-weight: 600;
				font-size: 24rpx;
				color: #3D3D3D;

				text {
					color: #48893B;
					margin-left: 4rpx;
				}
			}

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

			image {
				width: 58rpx;
				height: 14rpx;
			}
		}

		.xian {
			width: 1px;
			height: 62rpx;
			background-color: #3D3D3D;
		}
	}

	.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;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.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;
		height: 100vh;
		overflow: hidden;
		overflow: scroll;
	}

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

	.xuanfu {
		position: fixed;
		top: 58%;
		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: 58%;
		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;
							display: flex;
							align-items: center;
							text{
								display: inline-block;
								padding:4rpx 8rpx;
								margin-left: 10rpx;
								border-radius: 10rpx;
								box-sizing: border-box;
								background-color: #226914;
								color: #fff;
								font-weight: 400;
								font-size: 24rpx;
							}
						}

						.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;
                            flex-wrap: wrap;
							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;
								margin-bottom: 6rpx;
							}
						}
					}

					.lt {
						width: 186rpx;
						height: 236rpx;
						// overflow: hidden;
						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;
							border-radius: 10rpx;
						}
					}
				}
			}
		}

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