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

<template>
	<view class="book-day">
		<z-date-slide :dataList="headerList" @getDateInfo="getDateInfo" @getDateRange="getDateRange"></z-date-slide>

		<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: new Array(34),
				linelist: new Array(17),

				dataList: [],
				headerList: [],

				daterange: [],
				date: '',

				maxline: 52, //63
			}
		},
		watch: {
			refresh(newval, oldval) {
				if (newval) {
					this.bookList(this.date);
					this.bookHeader(this.daterange[0].date, this.daterange[6].date)
				}
			}
		},

		methods: {
			//获取预定表头
			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('预定列表', res)
					this.dataList = res.data.list;
					for (var i in this.dataList) {
						var paycontent = '';
						if (this.dataList[i].mainPayType == '03') {
							paycontent += '包场地'
							if (this.dataList[i].payTypes.length > 1) {
								paycontent += '('
							}
						}

						for (var j in this.dataList[i].payTypes) {
							if (this.dataList[i].payTypes[j].payTypeCode == '01') {
								paycontent += (this.dataList[i].payTypes[j].orderCount || 0) + '人、'
							}
							if (this.dataList[i].payTypes[j].payTypeCode == '02') {
								paycontent += (this.dataList[i].payTypes[j].orderCount || 0) + '桌、'
							}

						}

						if (paycontent.length > 0) {
							paycontent = paycontent.substring(0, paycontent.length - 1);
						}

						if (this.dataList[i].mainPayType == '03' && this.dataList[i].payTypes.length > 1) {
							paycontent += ')'
						}

						this.dataList[i].paycontent = paycontent.length > 0 ? ('[' + paycontent + ']') : ''
					}
					this.getNewDataList(this.dataList);
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			getDataPos() {
				//时间段算出条数，row,row为1 直接30宽样式2
				//重复的时间段算出 num    num>5  自动最小  num<=5  60/num
				//orderState 01预留  02已定 03免费
				var tempdata = this.dataList;
				var gridColumnStart=2,gridColumnEnd=14;
				//先计算grid-row  这个是固定的
				for (var i = 0, len = tempdata.length; i < len; i++) {
					var text_len = 0, //文字长度
						repeat_column_pos_end = -1, //记录最后重复的位置
						repeat_num = 0; //重复数量
					tempdata[i].index = i;
					tempdata[i].gridRowStart = (Number(tempdata[i].activityBeginTime.replace(':', '')) / 50).toFixed(0) - 13;
					tempdata[i].gridRowEnd = (Number(tempdata[i].activityEndTime.replace(':', '')) / 50).toFixed(0) - 13;
					tempdata[i].gridRow = tempdata[i].gridRowStart + '/' + tempdata[i].gridRowEnd;
					tempdata[i].height = tempdata[i].gridRowEnd - tempdata[i].gridRowStart;
					text_len = this.getByteLen(tempdata[i].customName); //获取文字长度设置省略
					if (tempdata[i].gridRowEnd - tempdata[i].gridRowStart == 1) {
						text_len = 16;
					}

					tempdata[i].textlen = text_len;

					tempdata[i].gridColumn = gridColumnStart+'/span 12'; //并不是完全确定的
					tempdata[i].gridColumnStart = gridColumnStart;
					tempdata[i].gridColumnEnd = gridColumnEnd;
					if(i>0){
						if (tempdata[i].houseNo != tempdata[i-1].houseNo) {
							console.log('换厅',tempdata[i].houseName)
							gridColumnStart=gridColumnEnd;
							gridColumnEnd +=12;
							tempdata[i].gridColumnStart=gridColumnStart;
							tempdata[i].gridColumnEnd=gridColumnEnd;
							tempdata[i].gridColumn=gridColumnStart + '/span 12';
									//分割线得宽度
									if (this.maxline < tempdata[i].gridColumnEnd) {
										this.maxline = tempdata[i].gridColumnEnd;
									}
						}
						
					}
				
				}

				this.dataList = tempdata;


				//找出重复时间段的数据
			},
			getNewDataList(dataList) {
				console.log(dataList)
				this.$axios.post('app/house/houseList', {
					storeId: uni.getStorageSync('storeId')
				}).then(res => {
					console.log('场地列表', res.data)
					console.log(dataList)
					this.dataList = [];
					var houseList = res.data.list;
					for (var i in houseList) {
						for (var j in dataList) {
							//同厅
							if (houseList[i].id == dataList[j].houseId) {
								this.dataList.push(dataList[j])
							}
						}
					}
					console.log('排序后', this.dataList);
					this.getDataPos();
				}).catch(err => {
					// uni.hideLoading();
					// this.$refs.uToast.error(err.msg)
				})
			},
			getByteLen(val) {
				var len = 0;
				for (var i = 0; i < val.length; i++) {
					var length = val.charCodeAt(i);
					if (length >= 0 && length <= 128) {
						len += 1;
					} else {
						len += 2;
					}
				}
				return len;
			},
			getDateInfo(date) {
				console.log(date)
				this.$emit('getDateInfo', date);
				this.bookList(date.date)
				this.date = date.date;
			},
			getDateRange(daterange) {
				this.bookHeader(daterange[0].date, daterange[6].date);
				this.daterange = daterange;
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			}
		}
	}
</script>

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

		.day_scroll-view {
			height: calc(100% - 230rpx);
			overflow-y: scroll;
			position: relative;
			overflow-x: hidden;

			.time_area {
				width: 100rpx;

				.time_area_item {

					color: #666666;
					font-size: 20rpx;
					min-height: 38rpx;
					position: relative;
					width: 100rpx;

					.time_area_item_content {
						position: absolute;
						right: 0;
						top: 10rpx;
						z-index: 100;

						.time_area_item_content_left {
							font-size: 30rpx;
							color: #666666;
						}

						.time_area_item_content_right {
							color: #999999;
							font-size: 25rpx;
							transform: scale(0.72);
							transform-origin: right center;
						}
					}
				}
			}


			.book-day_container {
				width: calc(100vw - 100rpx);

				overflow-x: scroll;
				height: max-content;


				display: grid;
				grid-auto-flow: column;

				grid-column-gap: 5rpx;
				grid-template-rows: repeat(34, 38rpx);
				// grid-template-columns: 15rpx repeat(100, 8rpx);

				.item_line {
					border-bottom: 1px solid #E4E4E4;

				}

				.item_card {
					padding: 0 10rpx;
					font-size: 25rpx;
					.item_card_text {
						color: #333333;
						transform: scale(0.88);
						width: 120%;
						transform-origin: left center;
					}

					.item_card_text2 {
						color: #666666;
						transform: scale(0.72);
						width: 150%;
						transform-origin: left center;
					}

				}

				.item_card_order_state_1 {
					background: #BCDAFF;
					border-top: 6rpx solid #2C8BFF;
				}

				.item_card_order_state_2 {
					background: #D8C9FC;
					border-top: 6rpx solid #9164F7;
				}

				.item_card_order_state_3 {
					background: #e6e6e6;
					border-top: 6rpx solid #c1c1c1;
				}
			}
		}

	}
</style>