Ci2Order.vue/App/components/z-date-slide/z-date-slide.vue

<template>
	<view>
		<swiper class="swiper shadow-2" :disable-touch="disabletouch" :current="current" circular @change="change" @animationfinish="animationfinish" @transition="transition">
			<swiper-item :key='index' v-for="(item,index) in list">
				<view class="swiper-item flex-n fja">
					<view class="date_content" :key="idx" v-for="(itm,idx) in item" @click="chooseDate(idx)">
						<view class="date_content_1" :class="idx==6||idx==5?'date_week_style':''">{{itm.xx}}</view>
						<!-- date_select -->
						<view class="date_content_2" :class="[{'date_now':$Date.getDayDate().date==itm.date},{'date_select':choose==idx}]">
							{{itm.dd}}
							<view class="date_imp flex-n fac fjc" v-if="dataList&&dataList[idx]&&dataList[idx].isImportant">
								<view class=" iconfont iconxing2" ></view>
								<!-- iconxing2 iconxing-->
							</view>
						</view>
						<!-- <view class="flex-n fac" v-if="dataList&&dataList[idx]&&dataList[idx].record">
							<view class="date_content_4" ></view>
							<view class="date_content_3 mt-8">{{dataList[idx].record}}</view>
						</view> -->
						<view class="date_content_3 mt-8" v-if="dataList&&dataList[idx]&&dataList[idx].record">{{dataList[idx].record>99?'99+':dataList[idx].record}}</view>
						<view class="date_content_4 mt-8" v-else>无</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view style="height: 230rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: 'z-date-slide',
		props:{
			dataList:Array
		},
		data() {
			return {
				list: ['', '', ''],
				dx: 0,
				current:1,
				disabletouch:false,
				weekName:['一','二','三','四','五','六','日'],
				showday:{},//需要传入的值
				choose:0,
				// week
			}
		},
		methods: {
			getDate(newval){
				console.log(newval)
				var date=newval.split('-');
				var dateInfo=this.$Date.getDayDate({yy:date[0],mm:date[1],dd:date[2]});
				console.log(dateInfo)
				for(var i=0,len=this.$Date.getWeekDate(dateInfo.yy,dateInfo.mm,dateInfo.dd).length;i<len;i++){
					if(this.$Date.getWeekDate(dateInfo.yy,dateInfo.mm,dateInfo.dd)[i].date==newval){
						this.choose=i;
					}
				}
				this.getDateList(dateInfo,1,0,2);
			},
			//获取日期数据 获取上一周 下一周
			getDateList(dateInfo,current,x1,x2){
				this.current=current;
				var dateString='';
				//#ifdef APP-PLUS
				dateString=dateInfo.yy+'/'+Number(dateInfo.mm)+'/'+Number(dateInfo.dd);
				//#endif
				//#ifndef APP-PLUS
				dateString=dateInfo.date;
				//#endif
				var before=new Date(new Date(dateString).getTime() - 7 * 24 * 60 * 60 * 1000),
				after=new Date(new Date(dateString).getTime() + 7 * 24 * 60 * 60 * 1000);
				this.list.splice(x1,1,this.$Date.getWeekDate(before.getFullYear(),before.getMonth()+1,before.getDate()));
				this.list.splice(current,1,this.$Date.getWeekDate(dateInfo.yy,dateInfo.mm,dateInfo.dd));
				this.list.splice(x2,1,this.$Date.getWeekDate(after.getFullYear(),after.getMonth()+1,after.getDate()));
				this.disabletouch=false;
				this.$emit('getDateInfo',this.list[current][this.choose]);
				this.$emit('getDateRange',this.list[current]);
			},	
			//选择的日期
			chooseDate(idx){
				this.choose=idx;
				console.log('选择的日期',this.current,this.choose)
				this.$emit('getDateInfo',this.list[this.current][this.choose]);
			this.$emit('getDateRange',this.list[this.current]);
			},
			change(e){
				this.disabletouch=true;
			},
			animationfinish(e) {
				console.log('zz')
				var current = e.detail.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;
				}
				if (this.dx < 0) {
					// this.chooseDate(6);
					this.getDateList(this.list[current][0],current,left,right);
					this.dx=0;
					// console.log('左滑：左面是', left, '当前是', current, '右面是', right);
				} else if (this.dx > 0) {
					// this.chooseDate(0);
					this.getDateList(this.list[current][0],current,left,right);
					this.dx=0
					// console.log('右滑：左面是', left, '当前是', current, '右面是', right);
				} else {
					// console.log('没有滑动：左面是', left, '当前是', current, '右面是', right);
					this.disabletouch=false;
				}
			},
			transition(e) {
				this.dx = e.detail.dx;
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.swiper{
		height: 206rpx;
		width: 100vw;
		position: fixed;
		z-index: 400;
		background: white;
		.swiper-item{
			height: 100%;
			.date_content{
				text-align: center;
				.date_content_1{
					color: #333333;
					margin-top: 20rpx;
					font-size: 28rpx;
				}
				.date_select{
					border:2rpx solid #F7913D!important;
					.date_imp{
						border:2rpx solid #F7913D!important;
						.iconfont{
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}
				.date_now{
					background:#F7913D;
					color: white!important;
					box-shadow:5rpx 5rpx 20rpx 0rpx #f5b47e;
					border:2rpx solid #F7913D!important;
					.date_imp{
						border:2rpx solid #F7913D!important;
						box-shadow:-1rpx 0rpx 10rpx 0rpx rgba(247,145,61,0.1);
						.iconfont{
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}
				.date_content_2{
					margin-top: 10rpx;
					color: #333333;
					font-size: 42rpx;
					width:70rpx;
					height:70rpx;
					border-radius:50%;
					text-align: center;
					line-height: 70rpx;
					border:2rpx solid white;
					position: relative;
					.date_imp{
						position: absolute;
						top:-10rpx;
						right: -10rpx;
						font-size: 20rpx;
						width:32rpx;
						height:32rpx;
						color: #e64340;
						background:white;
						border:2rpx solid white;
						border-radius:50%;
						.iconfont{
							font-size: 25rpx;
							transform: scale(0.8);
						}
					}
				}
				// .date_content_3{
				// 	color: #888888;
				// 	font-size: 24rpx;
				// }
				.date_content_3{
					background: #F7913D;
					font-size: 24rpx;
					color:white;
				}
				.date_content_4{
					background: #ccc;
					font-size: 24rpx;
					color:white;
				}
				.date_week_style{
					color: #F7913D!important;
				}
				// .date_content_4{
				// 	width:12rpx;
				// 	height:12rpx;
				// 	background:#F7913D;
				// 	opacity:0.5;
				// 	border-radius:50%;
				// 	margin-top: 6rpx;
				// }
			}
		}
	}
</style>