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

<template>
	<view class="book-field">
		<z-date-slide :dataList="headerList" @getDateInfo="getDateInfo" @getDateRange="getDateRange"></z-date-slide>
		<view style="height: 10rpx;"></view>
		<view class="book-field_item mlr-30 mt-25" v-for="(item,index) in dataList" :key="index" v-if="item.list&&item.list.length>0">
			<view class="flex-n fac">
				<view class="book-field_item_name line-1">{{item.houseName}}</view>
				<view class="book-field_item_more" v-if="item.num<item.list.length" @click="lookMore(index)">· 更多</view>
			</view>
			<view class="book-field_item_card shadow-2 plr-25 ptb-20">
				<view class="book-field_item_container">
					<view class="plr-20 item_card_content"  :class="[{'item_card_order_state_1':itm.orderState=='02'},{'item_card_order_state_2':itm.orderState=='01'},{'item_card_order_state_3':itm.orderState=='03'}]" :style="{'grid-column':'span '+item.width}"
					 v-for="(itm,idx) in item.list" :key="idx"  v-if="idx<item.num" @click="gotoDetail(itm.id)">
						
						<view class="item_card_content_name">{{itm.customName}}</view>
						<view class="item_card_content_time nowarp">{{itm.activityBeginTime}}-{{itm.activityEndTime}}</view>
						<view class="item_card_content_state line-1" v-if="itm.mainPayType!='03'">{{itm.packageName||'未选套餐'}}{{itm.paycontent?('['+itm.paycontent+']'):''}}</view>
						<view class="item_card_content_state line-1" v-else>{{itm.paycontent}}</view>
						<!-- &&itm.orderTypeId=='6' -->
						<image v-if="itm.isWedding=='1'" class="item_card_content_img" :src="itm.hasWedding=='1'?'../../../static/xi2.png':'../../../static/xi1.png'"></image>
					</view>
				</view>
			</view>
		</view>
		<z-nodata class="mt-100"  v-if="nodata"></z-nodata>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		name: 'book-list',
		props: {
			refresh: Boolean
		},
		data() {
			return {
				dataList: [],
				headerList: [],

				daterange: [],
				date: '',
				
				nodata:false
			}
		},
		watch: {
			refresh(newval, oldval) {
				if (newval) {
					this.pageNum=1;
					this.dataList=[];
					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) {
				console.log(date)
				var houseTypeIds  = uni.getStorageSync('searchField')||[];
				this.$axios.post('app/order/orderList', {
					"storeId": uni.getStorageSync('storeId'),
					"customName": "",
					"phone": "",
					"startTime": date,
					"endTime": date,
					"houseId": "",
					"houseTypeIds": houseTypeIds,
					"confirmState": "-1",
					"pageNum": "1",

				}).then(res => {
					console.log('预定列表',res)
					// this.dataList = res.data.list;
					var dataList=[];
					if(res.data.total==0){
						this.nodata=true;
					}else{
						this.nodata=false;
					}
				
					for(var i in res.data.list){
						var text=res.data.list[i].activityBeginTime.split(':')
						res.data.list[i].beginTimeContent=text[0]+''+text[1];
					}
					dataList=res.data.list;
					dataList.sort(function(a,b){
								return Number(a.beginTimeContent) - Number(b.beginTimeContent)
							})
					console.log('排序后的',dataList)
					this.getHouseDataList(dataList);
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
					uni.hideLoading();
				})
			},
			getHouseDataList(dataList){
				this.$axios.post('app/house/houseList',{
					storeId:uni.getStorageSync('storeId')
				}).then(res=>{
					console.log('场地列表',res.data)
					console.log(dataList)
					var houseList=res.data.list;
					for(var i in houseList){
						this.dataList.push({houseName:houseList[i].houseName});
						this.dataList[i].list=[];
						for(var j in dataList){
							//同厅
							if(houseList[i].id==dataList[j].houseId){
								this.dataList[i].list.push(dataList[j])
							}
						}
					}
					for(var i in this.dataList){
						var length=this.dataList[i].list.length,num=12;
						if (length == 1) {
							num= 12;
						}
						if (length == 2) {
							num= 6;
						}
						if (length == 3) {
							num= 4;
						}
						if (length > 3) {
							num= 3;
						}
						this.dataList[i].width=num;
						this.dataList[i].num=length>3?4:num;
						
						for(var k in this.dataList[i].list){
							var paycontent='';
							if(this.dataList[i].list[k].mainPayType=='03'){
								paycontent +='包场地'
								if(this.dataList[i].list[k].payTypes.length>1){
									paycontent +='['
								}
							}
							for(var j in this.dataList[i].list[k].payTypes){
							
								if(this.dataList[i].list[k].payTypes[j].payTypeCode=='01'){
									paycontent +=(this.dataList[i].list[k].payTypes[j].orderCount||0)+'人、'
								}
								
								if(this.dataList[i].list[k].payTypes[j].payTypeCode=='02'){
									paycontent +=(this.dataList[i].list[k].payTypes[j].orderCount||0)+'桌、'
								}
								
							}
							
							if(paycontent.length>0){
								paycontent=paycontent.substring(0,paycontent.length-1);
							}
							
							if(this.dataList[i].list[k].mainPayType=='03'&&this.dataList[i].list[k].payTypes.length>1){
								paycontent +=']'
							}
							
							
							this.dataList[i].list[k].paycontent=paycontent.length>0?paycontent:''
						}
						
					}
					console.log(this.dataList)
					uni.hideLoading();
				}).catch(err=>{
					uni.hideLoading();
					// this.$refs.uToast.error(err.msg)
				})
			},
			lookMore(index){
				var data=this.dataList[index];
				data.num +=4;
				this.dataList.splice(index,1,data);
				// this.$set(this.dataList[index],'num',this.dataList[index].num+4)
				console.log('22',this.dataList[index])
				// this.dataList[index].num=this.dataList[index].num+4;
			},
			getDateInfo(date) {
				console.log(date)
				uni.showLoading({
					title:'加载中…',
				});
				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-field {
		.book-field_item {

			.book-field_item_card {
				width: 640rpx;
				margin: 0 auto;
				margin-top: 25rpx;
			}

			.book-field_item_name {
				color: #888888;
				font-size: 24rpx;
			}

			.book-field_item_more {
				color: #2481EE;
				font-size: 24rpx;
				text-indent: 16rpx;
			}

			.book-field_item_container {
				justify-content: center;
				display: grid;
				// grid-auto-flow:column;
				grid-gap: 10rpx;
				grid-template-rows: 120rpx;
				grid-template-columns: repeat(12, calc(530rpx / 12));

				.item_card_content {
					font-size: 25rpx;
					line-height: 25rpx;
					height: 114rpx;
					position: relative;

					.item_card_content_name {
						color: #333333;
						font-size: 24rpx;
						margin-top: 14rpx;
						font-weight: 500;
					}

					.item_card_content_time {
						color: #666666;
						transform: scale(0.72);
						transform-origin: left center;
						margin-top: 14rpx;
					}

					.item_card_content_state {
						color: #666666;
						transform: scale(0.72);
						width: calc(100% / 0.72);
						transform-origin: left center;
					}

					.item_card_content_img {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 5rpx;
						top: 5rpx;
					}
				}

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