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

<template>
	<view class="book-month">
		<view class="book-month-xq flex-n fac fja">
			<view v-for="(item,index) in xqday" :key="index" :class="index==5||index==6?'book-month-zm':''">{{item}}</view>
		</view>

		<swiper class="book-out" :disable-touch="disabletouch" :current="1" circular @change="change" @animationfinish="animationfinish"
		 @transition="transition">
			<swiper-item class="book-month-area" :key='index' v-for="(item,index) in threeMonthList">
				<scroll-view id="book-out" class="book-in" scroll-y :show-scrollbar="false">
					<view class="book-month-area_rows" v-for="(itm,idx) in item" :key="idx">
						<view class="flex-n">
							<view class="book-month-area_columns line-1 flex-1 ptb-10" :class="itm2.mm!=item[1][3].mm?'book-month-area_columns_gray':''"
							 v-for="(itm2,idx2) in itm" :key="itm2.dd" @click="showDateInfo(itm2,idx,idx2)">
								<view class="flex-n fac fjc">
									<!-- (new Date().getFullYear()==itm2.yy&&(new Date().getMonth()+1)==itm2.mm&&(new Date().getDate()==itm2.dd))?'item_today':'' -->
									<view class="item_day" :class="[{'item_today':new Date().getFullYear()==itm2.yy&&(new Date().getMonth()+1)==itm2.mm&&(new Date().getDate()==itm2.dd),'item_day_select':row==idx&&column==idx2}]">{{itm2.dd}}</view>
									<view class="iconfont iconxing2" v-if="ImpList[idx*7+idx2]&&ImpList[idx*7+idx2].importantDates&&ImpList[idx*7+idx2].importantDates.length>0"
									 style="color: #e64340;font-size: 25rpx;transform: scale(0.8);width: 20rpx;"></view>
									<view class="item_daycn  " :class="ImpList[idx*7+idx2]&&ImpList[idx*7+idx2].importantDates&&ImpList[idx*7+idx2].importantDates.length>0?'':'ml-22'">{{itm2.IDayCn}}</view>
								</view>
								
								<view class="book-month-area_data " v-if="orderTotalList[idx*7+idx2]&&orderTotalList[idx*7+idx2].houseOrderCalc.length>0">
									<view v-for="(itmorder,idxorder) in orderTotalList[idx*7+idx2].houseOrderCalc" :key="idxorder">
										<view class="flex-n fac" v-if="itmorder.houseTypeCode=='01'">
											<image class="icon" src="../../../static/c1.png"></image>
											<view class="num flex-1">{{itmorder.orderCount}}</view>
										</view>
										<view class="flex-n fac" v-if="itmorder.houseTypeCode=='03'">
											<image class="icon" src="../../../static/c2.png"></image>
											<view class="num flex-1">{{itmorder.orderCount}}</view>
										</view>
										<view class="flex-n fac" v-if="itmorder.houseTypeCode=='02'">
											<image class="icon" src="../../../static/c3.png"></image>
											<view class="num flex-1">{{itmorder.orderCount}}</view>
										</view>
										
									</view>
									<view class="flex-n fac" v-if="isDisplayPrein=='1'">
										<image class="icon" src="../../../static/c4.png"></image>
										<view class="num flex-1 line-1">{{orderTotalList[idx*7+idx2].totalMoney}}</view>
									</view>
								</view>
							</view>
						</view>
						<scroll-view scroll-y class="book-month-area_list" v-if="idx==row&&current==index" :animation="showDataAnimate"
						 @scrolltolower="scrolltolower" :show-scrollbar="false" @scroll="scroll">
							<view class="book-month-area_list_content">
								<template v-if="dataList.length">
									<z-timeline align="center" v-for="(item,index) in dataList" :key="index" @click.native="gotoDetail(item.id)">
										<z-timeline-item>
											<view class="item shadow-1 mtb-5 flex-n fac">
												<view class="content1 flex-1">
													<view class="content1_1">{{item.orderDate}} {{item.activityBeginTime==item.activityBeginTimeReal?item.activityBeginTime:('次日'+item.activityBeginTimeReal)}}~{{item.activityEndTime==item.activityEndTimeReal?item.activityEndTime:('次日'+item.activityEndTimeReal)}}</view>
													<view class="content1_2">
														<text class="mr-20" v-if="item.isWedding&&item.hasWedding=='1'">{{item.maleName}}/{{item.femaleName}}</text>
														<text class="mr-20" v-else>{{item.customName}}</text>
														{{item.houseName}} {{item.packageName}}{{item.paycontent}}</view>
												</view>
												<view class="content2">{{item.orderStateText}}</view>
												<view class="content3 ml-55 iconfont icondianhua-copy" @click.stop="showMakePhone=true;callPhone=item.phone"></view>
											</view>
										</z-timeline-item>

									</z-timeline>
								</template>
								<z-nodata v-if="dataList.length==0"></z-nodata>
								<z-loading :showLoading="showLoading" :length="dataList.length" :total="total" v-else></z-loading>
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<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-month',
		props: {
			refresh: Boolean
		},
		data() {
			return {
				current: 1,
				left: 0,
				right: 2,
				xqday: ['一', '二', '三', '四', '五', '六', '日'],
				monthList: [],
				ImpList: [], //重点日期
				orderTotalList: [], //订单总计数
				threeMonthList: ['', '', ''],
				dataList: [],
				callPhone: '',
				column: -1,
				row: -1,
				disabletouch: false,
				monthday: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
				showDataAnimate: {},

				dx: 0,
				weekName: ['一', '二', '三', '四', '五', '六', '日'],
				showday: {}, //需要传入的值
				choose: 0,
				animateIn: '',
				timeout: '',
				showMakePhone: false,
				date: '',

				total: 0,
				pageNum: 1,
				scrollTop: 0,
				showLoading: false,
				
				savedata:{},
				
				isDisplayPrein:'0'
			}
		},
		watch: {
			'$store.state.searchDate'(newval, oldval) {
				console.log(newval)
				this.column = -1;
				this.row = -1;
				this.dataList = [];
				var date = newval.split('-');
				var datelist = this.$Date.getDayDate({
					yy: date[0],
					mm: date[1],
					dd: 15
				});
				this.getDateList(datelist, this.current, this.left, this.right);
			},
			refresh(newval, oldval) {
				console.log(newval)
				if (newval) {
					// this.pageNum = 1;
					// this.dataList = [];
					// console.log(this.savedata)
					// this.showDateInfo(this.savedata.info, this.savedata.row, this.savedata.column) 
					// this.bookList(this.date);
					// this.bookImportantDate()
					this.getDateList(this.$Date.getDayDate(), 1, 0, 2);
				}else{
					this.row=-1;
					this.current=1;
				}
			}
		},
	
		mounted() {
			this.getDateList(this.$Date.getDayDate(), 1, 0, 2);
			this.animateIn = uni.createAnimation({
				transformOrigin: "50% 0",
				duration: 300,
				timingFunction: 'ease-out'
			})
		},
		methods: {
			doNothing() {},
			//重点日期从
			bookImportantDate(dataList) {
				this.$axios.post("app/order/orderImportantDate", {
					"startTime": dataList[0].date,
					"endTime": dataList[dataList.length - 1].date,
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log(res)
					this.ImpList = res.data.list;
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
				})
			},
			//日历订单汇总
			orderCalendarTotal(dataList) {
				var houseTypeIds  = uni.getStorageSync('searchField')||[];
				this.$axios.post("app/order/orderCalendarTotalCalc", {
					"startTime": dataList[0].date,
					"endTime": dataList[dataList.length - 1].date,
					"storeId": uni.getStorageSync('storeId'),
					"houseTypeIds": houseTypeIds,
				}).then(res => {
					console.log(res)
					this.orderTotalList = res.data.list;
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
				})
			},
			showDateInfo(info, row, column) {
				// console.log(info, row, column)
				this.savedata={
					info:info,
					row:row,
					column:column
				}
				this.pageNum = 1;
				this.dataList = [];
				if (this.row == row && this.column == column) {

					this.animateIn.height(0).step({
						delay: 0
					});
					this.showDataAnimate = this.animateIn.export();
					this.timeout = setTimeout(() => {
						this.row = -1;
						this.column = -1;
					}, 300)

				} else {
					clearTimeout(this.timeout);
					this.row = row;
					this.column = column;
					this.animateIn.height(0).step({
						duration: 0,
						delay: 0
					}).height(250).step();
					this.showDataAnimate = this.animateIn.export();
					this.date = info.date;
					this.getData(info.date);
					uni.showLoading({
						title: '数据加载中',
						mask: true
					})
				}

			},
			getData(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": "",
					"packageId": "",
					"confirmState": "-1",
					"pageNum": this.pageNum,
					"houseTypeIds": houseTypeIds,
					"pageSize": 4
				}).then(res => {
					console.log('预定列表', res)
					var dataList = res.data.list;
					for (var i in dataList) {
						var paycontent = '';
						if (dataList[i].mainPayType == '03') {
							paycontent += '包场地'
							if (dataList[i].payTypes.length > 1) {
								paycontent += '('
							}
						}

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

						}

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

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

						dataList[i].paycontent = paycontent.length > 0 ? ('[' + paycontent + ']') : ''
					}
					this.dataList = this.dataList.concat(dataList);
					uni.hideLoading();
					this.total = res.data.total;
					this.showLoading = false;
				}).catch(err => {
					uni.hideLoading();
					this.$refs.uToast.error(err.msg);
					this.showLoading = false;
				})
			},
			//获取日期数据 获取上一月 下一周月
			getDateList(datelist, current, x1, x2) {
				var dateString = '',
					oneList = [],
					twoList = [],
					threeList = [];
				//#ifdef APP-PLUS
				dateString = datelist.yy + '/' + Number(datelist.mm) + '/' + Number(datelist.dd);
				//#endif
				//#ifndef APP-PLUS
				dateString = datelist.date;
				//#endif

				var before = new Date(new Date(dateString).getTime() - datelist.dd * 24 * 60 * 60 * 1000),
					after = new Date(new Date(dateString).getTime() + (32 - datelist.dd) * 24 * 60 * 60 * 1000);

				var a1 = this.$Date.getMonthDate({
					yy: before.getFullYear(),
					mm: before.getMonth() + 1,
					dd: before.getDate()
				});
				for (var i = 0; i < a1.length / 7; i++) {
					oneList.push([])
				}
				for (var i = 0, len = a1.length; i < len; i++) {
					oneList[Math.floor(i / 7)].push(a1[i])
				}
				var a2 = this.$Date.getMonthDate(datelist);
				for (var i = 0; i < a2.length / 7; i++) {
					twoList.push([])
				}
				for (var i = 0, len = a2.length; i < len; i++) {
					twoList[Math.floor(i / 7)].push(a2[i])
				}
				var a3 = this.$Date.getMonthDate({
					yy: after.getFullYear(),
					mm: after.getMonth() + 1,
					dd: after.getDate()
				});
				for (var i = 0; i < a3.length / 7; i++) {
					threeList.push([])
				}
				for (var i = 0, len = a3.length; i < len; i++) {
					threeList[Math.floor(i / 7)].push(a3[i])
				}

				this.threeMonthList.splice(x1, 1, oneList);
				this.threeMonthList.splice(current, 1, twoList);
				this.threeMonthList.splice(x2, 1, threeList);
				this.$emit('getDateInfo', a2[15])
				this.disabletouch = false;

				var list = this.$Date.getMonthDate({
					yy: datelist.yy,
					mm: datelist.mm,
					dd: datelist.dd
				});
				this.bookImportantDate(list);
				this.orderCalendarTotal(list);
				console.log('yue', list)
				this.getAuthState();
				
			},
			getAuthState(){
				  this.$axios.post("storeAuth/findByRoleIdStoreId",{
				                    "roleId":uni.getStorageSync('roleId'),
				                    "storeId":  uni.getStorageSync('storeId')
				                }).then(res=>{
				                    console.log(res.data)
									//不可编辑
									this.isDisplayPrein=res.data.auth.isDisplayPrein;
							
				                }).catch(err=>{
				                   this.$refs.uToast.error(err.msg);
				                })
			},
			//选择的日期
			chooseDate(idx) {
				this.choose = idx;
			},
			change(e) {
				this.row = -1;
				this.column = -1;
				this.disabletouch = true;
			},
			animationfinish(e) {
				clearTimeout(this.timeout);
				var current = e.detail.current;
				this.current = current;
				var left = 0,
					right = 0;
				if (current - 1 >= 0) {
					left = current - 1;
				} else {
					left = 2;
				}
				if (current + 1 > 2) {
					right = 0;
				} else {
					right = current + 1;
				}
				this.left = left;
				this.right = right;
				if (this.dx < 0) {
					this.getDateList(this.threeMonthList[current][1][1], current, left, right);
					// console.log('左滑：左面是', left, '当前是', current, '右面是', right);
				} else if (this.dx > 0) {
					this.getDateList(this.threeMonthList[current][1][1], current, left, right);
					// console.log('右滑：左面是', left, '当前是', current, '右面是', right);
				} else {
					// console.log('没有滑动：左面是', left, '当前是', current, '右面是', right);
					this.disabletouch = false;
				}
				this.dx = 0;
			},
			transition(e) {
				this.dx = e.detail.dx;
			},
			//拨打电话
			gotoMakePhone() {
				var that = this;

				uni.makePhoneCall({
					phoneNumber: this.callPhone,
					complete: function() {
						that.showMakePhone = false;
					}
				});
			},
			gotoDetail(id) {
				this.row = -1;
				this.column = -1;
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower() {
				var totalPage = Math.ceil(Number(this.total) / 4)
				if (this.pageNum < totalPage) {
					this.pageNum++;
					this.showLoading = true;
					this.getData(this.date);
				}
			},
			scrolltoupper() {
				this.pageNum = 1;
				this.dataList = [];
				this.showLoading = true;
				this.getData(this.date);
			}
		}
	}
</script>

<style scoped lang="scss">
	.norecord {
		width: 457rpx;
		margin-left: 147rpx;
		margin-top: 20rpx;
	}




	.book-out {
		height: calc(100% - 82rpx);

		.book-in {
			height: 100%;
		}
	}

	.book-month {
		height: 100%;

		.book-month-xq {
			height: 80rpx;
			color: #333333;
			font-size: 28rpx;
			border-bottom: 1px solid #E4E4E4;

			.book-month-zm {
				color: #F7913D;
			}
		}

		.book-month-area {
			height: 100%;

			.book-month-area_rows {
				border-bottom: 1px solid #E4E4E4;

				.book-month-area_columns_gray {
					background: #FAFAFA;
					.item_day {
						color: #999999;
						font-size: 24rpx;
					}

				}
				.item_day_select{
					border:2rpx solid #F7913D!important;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					text-align:center;
					line-height: 32rpx;
				}
				.item_today{
					border:2rpx solid #F7913D!important;
					color: white!important;
					background: #F7913D;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					text-align:center;
					line-height: 32rpx;
				}

				.book-month-area_columns {
					border-right: 1px solid #E4E4E4;
					min-height: 160rpx;

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

					.item_daycn {
						color: #BBBBBB;
						font-size: 18rpx;
					}

					.book-month-area_data {
						padding: 0 10rpx;

						.icon {
							width: 30rpx;
							min-width: 30rpx;
							height: 30rpx;
							margin-top: 4rpx;
						}

						.num {
							color: #666666;
							font-size: 20rpx;
							text-align: center;
						}
					}
				}

				.book-month-area_columns:last-child {
					border-right: none;
				}

				.book-month-area_list {
					border-top: 1px solid #E4E4E4;
					background: #FAFBFF;
					max-height: 400rpx;
					height: auto;

					.book-month-area_list_content {
						padding: 20rpx 40rpx 20rpx 20rpx;
					}

					.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;
							color: #007AFF;
						}
					}
				}
			}
		}
	}
</style>