Ci2Order.vue/App/pages/book/index/book-day.vue

<template>
	<view class="book-day">
		<z-date-slide ref="dateslide" :dataList="headerList" @getDateInfo="getDateInfo" @getDateRange="getDateRange">
		</z-date-slide>
		<view class="scroll-content flex-n">
			<view class="scroll-content-left" ref="left">
				<view class="scroll-content-left-item" v-for="(item,index) in timeList" :key="index">
					<!-- 占位网格 -->
					<view v-if="index%2==0" class="flex-n fje">
						<view class="left">{{item.begin}}</view>
						<view class="right">{{item.end}}</view>
					</view>
				</view>
			</view>
			<view class="scroll-content-right " ref="right">
				<view class="scroll-content-right-grid" :style="{'grid-template-columns':'repeat('+column+',160rpx)'}">

					<view v-for="i in gridNum"
						:style="{'grid-row': Math.ceil(i/column)+' / span 1','grid-column':(i%column==0?column:i%column)+' /span 1','z-index': 0}">
					</view>
					<view class="info-box" :class="'order'+item.orderState"
						:style="{'grid-row': item.rowStart+'/'+item.rowEnd,'grid-column': item.columnStart+'/'+ item.columnEnd}"
						v-for="(item,index) in dataList" :key="index" @click="gotoDetail(item.id)">
						<view class="item_card_text line-1">{{item.houseName}}</view>
						<view class="item_card_text2 line-1" v-if="item.rowEnd-item.rowStart>1">{{item.customName}}
						</view>
						<view class="item_card_text2 line-1" v-if="item.rowEnd-item.rowStart>2">
							{{item.labelText}}
						</view>
						<view class="item_card_text2 line-1" v-if="item.rowEnd-item.rowStart>3">
						
							{{item.packageName||item.ordertype=='包场'?'':'未选套餐'}}{{item.ordertype?('['+item.ordertype+']'):''}}
						</view>
						<view class="item_card_text2 line-1" v-if="item.rowEnd-item.rowStart>4">{{item.createUserName}}
						</view>
						<view class="item_card_text2 line-1" v-if="(item.rowEnd-item.rowStart>5)&&item.remark">{{item.remark}}
						</view>
						<!-- <view>
							{{item.activityBeginTime==item.activityBeginTimeReal?item.activityBeginTime:('次日'+item.activityBeginTimeReal)}}~{{item.activityEndTime==item.activityEndTimeReal?item.activityEndTime:('次日'+item.activityEndTimeReal)}}
						</view> -->
					</view>

				</view>
			</view>
		</view>
		<!-- <view class="day_scroll-view flex-n">
			<view class="time_area">
				<view v-for="(item,index) in timeList" :key="index" class="time_area_item">
					<view class="time_area_item_content flex-n fje" v-if="index%2==0">
						<view class="time_area_item_content_left">{{index/2+7}}</view>
						<view class="time_area_item_content_right">: 00</view>
					</view>
				</view>
			</view>
			<view>
				<view class="book-day_container" :style="{'grid-template-columns': '15rpx repeat('+(maxline+1)+', 8rpx)'}">
					<!-- 最少划线64 -->
		<!-- 	<view class="item_line" v-for="(item,index) in linelist" :key="item" :style="{'grid-row':(index*2+1)+'/'+(index*2+3),'grid-column':'1/'+(maxline+1)}">

					</view>
					<view class="item_card " :class="[{'item_card_order_state_1':item.orderState=='02'},{'item_card_order_state_2':item.orderState=='01'},{'item_card_order_state_3':item.orderState=='03'}]"
					 v-for="(item,index) in dataList" @click="gotoDetail(item.id)" :key="index" :style="{'grid-row':item.gridRow,'grid-column':item.gridColumn}">
						<view class="item_card_text line-1">{{item.houseName}}</view>
						<view class="item_card_text2 line-1" v-if="item.gridRowEnd-item.gridRowStart>1">{{item.customName}}</view>
						<view class="item_card_text2 line-1" v-if="item.gridRowEnd-item.gridRowStart>2">{{item.packageName||'未选套餐'}}{{item.paycontent}}</view>
						<view class="item_card_text2 line-1" v-if="item.gridRowEnd-item.gridRowStart>3">{{item.createUserName}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<!-- 5个七点 就排开 -->
<!-- 最大宽度等于最小卡片宽度 -->
<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		name: 'book-day',
		props: {
			refresh: Boolean
		},
		data() {
			return {
				timeList: [],
				//店铺营业时间计算
				startTime: 0,
				endTime: 0,

				gridNum: 0,
				dataList: [],

				headerList: [],

				daterange: [],
				date: '',
				cartlist: [], //场地类型
				column: 1,

				timeTagList: [],
				tagList: []
			}
		},

		methods: {
			getDate(date) {
				var d = date.split('-');
				this.$nextTick(() => {
					this.$refs.dateslide.getDate(date);
				})
				this.getTimeRange(); //获取店铺设置信息的经营时间

			},

			//获取预定表头日历的值，标示数量和重点日期
			bookHeader(startTime, endTime) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/order/orderCalendarHeader', {
					"storeId": uni.getStorageSync('storeId'),
					"startTime": startTime,
					"endTime": endTime,
					"houseTypeIds": houseTypeIds
				}).then(res => {
					console.log('预定表头', res)
					var data = res.data.list;
					var headerList = [];
					for (var i in data) {
						headerList.push({
							record: data[i].record,
							isImportant: data[i].importantDates.length > 0 ? true : false
						});
					}
					this.headerList = headerList;
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
				})
			},
			//获取预定列表
			bookList(date) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				console.log(date)
				this.$axios.post('app/order/orderList', {
					"storeId": uni.getStorageSync('storeId'),
					"customName": "",
					"phone": "",
					"startTime": date,
					"endTime": date,
					"houseTypeIds": houseTypeIds,
					"packageId": "",
					"confirmState": "-1",
					"pageNum": "1",
				}).then(res => {
					console.log('timeList', this.timeList)
					var dataList = res.data.list;
					/* 
					先根据订单计算今天得场次，再根据场次计算位置
					*/
					let cartlist = [];
					for (let i in dataList) {
						if (cartlist.indexOf(dataList[i].houseId) == -1)
							cartlist.push(dataList[i].houseId);
					}
					console.log('carlist?',cartlist)
					for(let i=0; i<this.cartlist.length;i++){
						let k=-1;
						for(let j in cartlist){
							if(cartlist[j]==this.cartlist[i]){
								k=j;
								break;
							}
						}
						if(k==-1){
							this.cartlist.splice(i,1);
							i--;
						}
					}
					
					for (var i in dataList) {
						console.log(dataList[i].houseId, this.cartlist)
						let columnStart = this.cartlist.findIndex((item) => {
							return item == dataList[i].houseId
						}) + 1;
						console.log(columnStart)
						dataList[i].activityBeginTime = dataList[i].activityBeginTime.length == 5 ?
							dataList[i].activityBeginTime : ('0' + dataList[i].activityBeginTime)
						dataList[i].activityEndTime = dataList[i].activityEndTime.length == 5 ? dataList[i]
							.activityEndTime : ('0' + dataList[i].activityEndTime)

						dataList[i].columnEnd = columnStart + 1;
						let startTime = this.getFormatTimeText(dataList[i].activityBeginTime);
						let endTime = this.getFormatTimeText(dataList[i].activityEndTime);

						let item = dataList[i];
						let idx = this.timeTagList.indexOf(item.activityBeginTime + '~' + item.activityEndTime);
						let labelText = idx > -1 ? this.tagList[idx].tagName : (startTime + '~' + endTime);
						dataList[i].labelText = labelText;
						dataList[i].columnStart = columnStart;
						console.log(startTime, endTime, this.timeList);
						let rowStart = this.timeList.findIndex((item) => {
							console.log(item.timetext, startTime)
							return item.timetext == startTime
						})

						let rowEnd = this.timeList.findIndex((item) => {
							console.log(item.timetext, startTime)
							return item.timetext == endTime
						})
						console.log('row', rowStart, rowEnd,'column',dataList[i].columnStart)
						// dataList[i].rowStart = rowStart;
						// dataList[i].rowEnd = rowEnd;
						if (rowStart == -1 && rowEnd != -1) {
							dataList[i].rowStart = 1
						} else {
							dataList[i].rowStart = rowStart + 1;
						}
						if (rowEnd == -1 && rowStart != -1) {
							dataList[i].rowEnd = this.timeList.length + 1;
						} else {
							dataList[i].rowEnd = rowEnd + 1;
						}
						if (rowEnd == -1 && rowStart == -1) {
							dataList.splice(i, 1);
							break;
						}
						var ordertype = '',
							content = '';
						for (var l in dataList[i].payTypes) {
							if (dataList[i].payTypes[l].payTypeCode == '01') {
								if (dataList[i].payTypes[l].orderCount)
									content += dataList[i].payTypes[l].orderCount + '人、';
							}
							if (dataList[i].payTypes[l].payTypeCode == '02') {
								if (dataList[i].payTypes[l].orderCount)
									content += dataList[i].payTypes[l].orderCount + '桌、';
							}
						}
						if (content.length > 0)
							content = content.substring(0, content.length - 1)
						if (dataList[i].mainPayType == '03') {
							if (content.length > 0)
								ordertype = '包场(' + content + ')';
							else {
								ordertype = '包场';
							}
						} else {
							ordertype = content;
						}
						dataList[i].ordertype = ordertype;
					}
					this.dataList = dataList;
					console.log(dataList)


					this.getGrid();
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			getDateRange(daterange) {
				console.log('daterange', daterange)
				this.daterange = daterange;
				this.bookHeader(daterange[0].date, daterange[6].date);

			},
			getTimeRange() {
				this.$axios.get('app/config/baseByStoreId/' + uni.getStorageSync('storeId')).then(res => {
					console.log('基本店铺设置信息', res.data)
					let timeRange = res.data.timeRange.split('-')
					this.startTime = timeRange[0] || '00:00';
					this.endTime = timeRange[1] || '24:00';
					let orderTag = [];
					for (let i in res.data.orderTag) {
						orderTag.push(res.data.orderTag[i].beginTime + '~' + res.data.orderTag[i].endTime)
					}
					this.timeTagList = orderTag;
					this.tagList = res.data.orderTag;
					this.getTimeList();

				}).catch(err => {
					this.$message.error(err.msg);
				})
			},
			 
			getDateInfo(date) {
				console.log(date)
				this.$emit('changeDate', date.date);
				this.date = date.date;
				//获取店铺设置信息的经营时间
				this.getTimeRange();

			},
			getTimeList() {
				let startTime = Number(this.startTime.replace(':', ''));
				let endTime = Number(this.endTime.replace(':', ''));
				let timeList = [];
				if (startTime % 100) {
					timeList.push({
						time: (Number(startTime / 100).toFixed(0) > 10 ? Number(startTime / 100).toFixed(0) : (
							'0' +
							Number(startTime / 100).toFixed(0))) + ':30',
						begin: Number(startTime / 100).toFixed(0) > 10 ? Number(startTime / 100).toFixed(0) : (
							'0' +
							Number(startTime / 100).toFixed(0)),
						timetext: (Number(startTime / 100).toFixed(0) > 10 ? Number(startTime / 100).toFixed(0) : (
							'0' + Number(startTime / 100).toFixed(0))) + ':30',
						end: ':30'
					});
					startTime += 70;
				}

				console.log(startTime)
				for (let i = startTime; i < endTime; i = i % 100 == 30 ? (i + 70) : (i + 30)) {
					let time = this.getFormatTimeText2(String(i)); //不需要带次日
					let timetext = this.getFormatTimeText(String(i)); //需要带次日

					timeList.push({
						time: time,
						timetext: timetext,
						begin: time.substring(0, time.indexOf(':')),
						end: time.substring(time.indexOf(':'))
					});

				}

				this.timeList = timeList;
				this.gethouseList();
				
			},
			gethouseList() {
				 let checkedList=uni.getStorageSync('searchField');
			     this.$axios.get("/house/houseListByStoreId/" + uni.getStorageSync('storeId')).then(res => {
			       console.log('场地', res.data.list)
			       var list = res.data.list;
			       let cartlist = [];
			       if (checkedList.length == 0) {
					   for(var i in list){
						   cartlist.push(list[i].id)
					   }
			       } else {
			         for (var j = 0; j < list.length; j++) {
			           if (checkedList.indexOf(list[j].houseTypeId) > -1) {
			             cartlist.push(list[j].id)
			           }
			         }
			        
			       }
				   this.cartlist = cartlist;
				    console.log('该类型的场地有', cartlist)
			       this.bookList(this.date);
			     }).catch(err => {
			       this.$message.error(err.msg);
			     })
			   },
			getGrid() {
				this.$nextTick(() => {
					this.column = this.cartlist.length < 4 ? 4 : this.cartlist.length;
					this.gridNum = (this.timeList.length || 0) * this.column;
				})


			},
			//转化成次日文字的
			getFormatTimeText(time) {
				let ytime = Number(time.replace(':', ''));
				var c1 = Number(ytime / 100).toFixed(0)
				c1 = c1 < 10 ? ('0' + c1) : (c1 > 23 ? ('次日' + ((c1 - 24) > 9 ? (c1 - 24) : ('0' + (c1 - 24)))) : c1);
				c1 = c1 + ':' + (ytime % 100 ? '30' : '00')
				return c1;
			},
			//转化成不带次日文字的
			getFormatTimeText2(time) {
				let ytime = Number(time.replace(':', ''));
				var c1 = Number(ytime / 100).toFixed(0)
				c1 = c1 < 10 ? ('0' + c1) : (c1 > 23 ? ((c1 - 24) > 9 ? (c1 - 24) : ('0' + (c1 - 24))) : c1);
				c1 = c1 + ':' + (ytime % 100 ? '30' : '00')
				return c1;
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.book-day {
		height: 100%;

		.scroll-content {
			height: calc(100% - 230rpx);
			overflow-y: scroll;

			.scroll-content-left {
				text-align: right;
				padding: 0 20rpx;
				width: 80rpx;

				.scroll-content-left-item {
					height: 40rpx;
					white-space: nowrap;

					>view {
						font-size: 28rpx;
						align-items: flex-end;

						.left {
							transform: scale(1.1);
							margin-left: 4rpx;
							margin-bottom: 1rpx;
						}

						.right {
							margin-left: 5rpx;
						}
					}
				}

			}

			.scroll-content-right {
				overflow-x: scroll;
				overflow-y: hidden;
				height: fit-content;
				// height: 100%;
				width: calc(100% - 100rpx);

				.scroll-content-right-grid {
					display: grid;
					height: 100%;
					grid-template-rows: repeat(auto-fill, 40rpx);

					>view {
						background: white;
						height: calc(40rpx - 1px);
						border-bottom: 1px solid #E4E7ED;
					}

					.info-box {
						z-index: 10;
						font-size: 12rpx;
						padding: 0 8rpx;
						height: calc(100% - 6rpx);
						margin: 0 1px;

						&.order01 {
							background: #D8C9FC;
							border-top: 6rpx solid #9164F7 !important;
						}

						&.order02 {
							background: #BCDAFF;
							border-top: 6rpx solid #2C8BFF !important;
						}

						&.order03 {
							background: #e6e6e6;
							border-top: 6rpx solid #c1c1c1 !important;
						}

						.item_card_text {
							font-size: 14rpx;
							font-weight: bold;
						}

						>view {}
					}

				}

			}
		}
	}
</style>