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

<template>
	<view class="book-list">
		<scroll-view class="book-list_scroll " scroll-y  @scrolltolower="scrolltolower"
		 :show-scrollbar="false" @scroll="scroll">
			<view class="mlr-30">
				<view v-for="(item,index) in dataList" v-if="dataList.length>0" :key="index">
					<view class="month mt-20">{{item.month}}月</view>

					<z-timeline align="center" showDay :date="itm.date" v-for="(itm,idx) in item.dateList" :key="idx">
						<z-timeline-item v-for="(itm2,idx2) in itm.list" :key="idx2">
							<view class="item shadow-1 mtb-5 flex-n fac" @click="gotoDetail(itm2.id)">
								<view class="content1 flex-1">
									<view class="content1_1">{{itm2.customName}} {{itm2.activityBeginTime}}~{{itm2.activityEndTime}}</view>
									<view class="content1_2">{{itm2.houseName}} {{itm2.mainPayTypeText}}{{itm2.paycontent}}</view>
								</view>
								<view class="content2">已订</view>
								<view class="content3 ml-55 iconfont icondianhua-copy" v-if="itm2.phone" @click.stop="showMakePhone=true;callPhone=itm2.phone"></view>
								<view class="content3 ml-55 iconfont icondianhua-copy" style="color: #eee;" v-else></view>
							</view>
						</z-timeline-item>

					</z-timeline>
				</view>
				<z-nodata state="nodata" v-if="dataList.length==0"></z-nodata>
				<z-loading :showLoading="showLoading" :length="nowDateCount" :total="total" v-else></z-loading>
			</view>

		</scroll-view>
		<z-select-popup :visible.sync="showMakePhone">
			<view @click="gotoMakePhone">{{callPhone}}</view>
		</z-select-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

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

				total: 0,
				pageNum: 1,
				nowDateCount:0,
				scrollTop: 0,
				showLoading: false,
				startTime: ''
			}
		},
		watch: {
			// '$store.state.searchDate'(newval, oldval) {
			// 	console.log('选择的日期',newval)
			// 	this.startTime = newval;
			// 	this.nowDateCount=0;
			// 	this.dataList=[];
			// 	this.getData();
			// },
			// refresh(newval, oldval) {
			// 	if (newval) {
			// 		// this.bookList(this.date);
			// 		console.log(this.$store.state.searchDate)
			// 		this.pageNum=1;
			// 		this.dataList=[];
			// 		this.nowDateCount=0;
			// 		this.getData();
			// 	}
			// },
			date(newval,oldval){
				console.log('监听',newval,oldval)
				this.startTime=this.date;
						this.pageNum=1;
						this.dataList=[];
				this.nowDateCount=0;
					this.getData();
			}
		},
		mounted(){
			// this.startTime=this.$Date.getDayDate().date;
			// this.startTime=this.date;
			this.nowDateCount=0;
			this.getData();
		},
		methods: {
			getData() {
					var houseTypeIds  = uni.getStorageSync('searchField')||[];
				console.log(this.$store.state.searchDate,this.$store.state.tabbarIndex)
				this.$axios.post('app/order/orderListOrderByDate', {
					storeId: uni.getStorageSync('storeId'),
					"startTime": this.$store.state.searchDate,
					"endTime": "",
					// "confirmState": "-1",
					"houseTypeIds": houseTypeIds,
					"pageNum": this.pageNum,
					"pageSize": 10
				}).then(res => {
					console.log(res.data);
					var list = res.data.list;
					this.nowDateCount +=list.length;
					var dataList = [],
						date = {};
					var monthList = [],
						pos = 0;
					
					if (list.length > 0)
						monthList.push(Number(list[0].orderDate.split('-')[1]))
					//先找有几个月份 ，过滤
					for (var i in list) {
						if (Number(list[pos].orderDate.split('-')[1]) != Number(list[i].orderDate.split('-')[1])) {
							monthList.push(Number(list[i].orderDate.split('-')[1]));
							pos=i;
						}
					
						var paycontent='';
						// if(list[i].mainPayType=='03'){
						// 	paycontent +='包场地'
						// 	if(list[i].payTypes.length>1){
						// 		paycontent +='('
						// 	}
						// }
						
						for(var j in list[i].payTypes){
							if(list[i].payTypes[j].payTypeCode=='01'){
								paycontent +=(list[i].payTypes[j].orderCount||0)+'人、'
							}
							if(list[i].payTypes[j].payTypeCode=='02'){
								paycontent +=(list[i].payTypes[j].orderCount||0)+'桌、'
							}
							
						}
						
						if(paycontent.length>0){
							paycontent=paycontent.substring(0,paycontent.length-1);
						}
						
						// if(list[i].mainPayType=='03'&&list[i].payTypes.length>1){
						// 	paycontent +=')'
						// }
						
						list[i].paycontent=paycontent.length>0?('['+paycontent+']'):''
					}
					// dataList=[];
					for (var i in monthList) {

						dataList.push({
							month: monthList[i],
							dateList: []
						})
						var pos2=0;
						var item = list.filter(item => Number(item.orderDate.split('-')[1]) == monthList[i]);
						var dateList=[];
						for (var j in item) {
								var dataContent = item[j].orderDate.split('-');
								date = this.$Date.getDayDate({
									yy: dataContent[0],
									mm: dataContent[1],
									dd: dataContent[2]
								})
							if (j == 0) {
								dateList.push({
									date: date,
									list: []
								});
								
							} else {
								if (item[j - 1].orderDate != item[j].orderDate) {

									dateList.push({
										date: date,
										list: []
									});
									pos2++;
									
								} 
							}
							dateList[pos2].list.push(item[j]);
							dataList[i].dateList=dateList;
						}
					}
					console.log('预定列表',dataList)
					this.total = res.data.total;
					if(this.dataList.length>0&&this.dataList[this.dataList.length-1].month==dataList[0].month){
						var data=this.dataList[this.dataList.length-1].dateList[this.dataList[this.dataList.length-1].dateList.length-1];
						var data2=dataList[0].dateList[0];
						//数据里的日期一样
						console.log(data,data2)
						if(data.date.date==data2.date.date){
							console.log(3,data2.list)
							this.dataList[this.dataList.length-1].dateList[this.dataList[this.dataList.length-1].dateList.length-1].list=data.list.concat(data2.list);
							console.log(this.dataList)
							console.log(dataList)
							dataList[0].dateList.splice(0,1);
						}
					}
					this.dataList =this.dataList.concat(dataList) ;
					this.showLoading = false;
				}).catch(err => {
					// this.$refs.uToast.error(err.msg)
				})
			},
			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])
							}
						}
					}
					return this.dataList;
					uni.hideLoading();
				}).catch(err=>{
					uni.hideLoading();
					// this.$refs.uToast.error(err.msg)
				})
			},
			gotoDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			},
			//拨打电话
			gotoMakePhone() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: this.callPhone,
					complete: function() {
						that.showMakePhone = false;
					}
				});
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower() {
				var totalPage=Math.ceil(Number(this.total)/10)
				if (this.pageNum < totalPage) {
					this.pageNum ++;
					this.showLoading = true;
					this.getData();
				}
			},
			scrolltoupper() {
				this.pageNum = 1;
				this.dataList=[];
				this.showLoading = true;
				this.getData();
			}
		}
	}
</script>

<style scoped lang="scss">
	.book-list {
		.month {
			font-size: 30rpx;
			color: #333333;
		}

		.book-list_scroll {
			height: calc(100vh  - 98rpx - var(--status-bar-height) - 84rpx - 98rpx);
		}

		.day_info {
			text-align: center;
			font-size: 18rpx;
			color: #0075FF;
		}

		.item {
			padding: 10rpx 20rpx 10rpx 30rpx;

			.content1 {
				.content1_1 {
					color: #999999;
					font-size: 20rpx;
				}

				.content1_2 {
					color: #333333;
					font-size: 24rpx;
				}
			}

			.content2 {
				color: #999999;
				font-size: 20rpx;
			}

			.content3 {
				width: 38rpx;
				min-width: 38rpx;
				height: 38rpx;
				font-size: 38rpx;
				color: #007AFF;
			}
		}

	}
</style>