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

<template>
	<view class="book-month">
		<CalendarCard>
			<template v-slot:default="slot">
				<!-- 上下班正常显示蓝色 -->
				<!-- 00 正常考勤  01迟到 02 早退 03请假 04考勤异常-->
				<view class="date">
					{{slot.data.dd}}
					<!-- <view class="pointer" v-if="monthInfo[slot.data.date]"
						:class="monthInfo[slot.data.date].workStartStatus=='00'&&monthInfo[slot.data.date].workStartStatus=='00'?'success':'error'">
					</view> -->
				</view>
			</template>
		</CalendarCard>
		<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="$emit('clickDate',itm2.date)">
								<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>

					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	
		<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: '',
				date: '',

				total: 0,
				pageNum: 1,
				scrollTop: 0,
				showLoading: false,

				savedata: {},

				isDisplayPrein: '0'
			}
		},
		methods: {
			getDate(date) {
				var d = date.split('-');
				var datelist = this.$Date.getDayDate({
					yy: d[0],
					mm: d[1],
					dd: 15
				});
				this.getDateList(datelist, this.current, this.left, this.right);
			},
			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)
				})
			},
		
			//获取日期数据 获取上一月 下一周月
			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('changeDate', a2[15].date)
				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);
				})
			},
			change(e) {
				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;
			},
			

		}
	}
</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;
				}

			}
		}
	}
</style>