Ci2Order.vue/App/pages/settlement/index/sub/dateSearch.vue

<template>
	<view class="date-search">
		<z-slide :visible.sync="show" ref="slide">
			<view class="data-search-title mt-30">开始时间</view>
			<view class="flex-n fac fjb data-search-area">
				<view class="data-search-item" :class="choose==0?'data-select':''" @click="chooseArea(0)">今天</view>
				<view class="data-search-item" :class="choose==1?'data-select':''" @click="chooseArea(1)">昨天</view>
				<view class="data-search-item" :class="choose==2?'data-select':''" @click="chooseArea(2)">本周</view>
			</view>
			<view class="flex-n fac fjb data-search-area">
				<view class="data-search-item" :class="choose==3?'data-select':''" @click="chooseArea(3)">上周</view>
				<view class="data-search-item" :class="choose==4?'data-select':''" @click="chooseArea(4)">本月</view>
				<view class="data-search-item" :class="choose==5?'data-select':''" @click="chooseArea(5)">上月</view>
			</view>
			<view class="data-search-title mt-30">自定义时间段</view>
			<view class="flex-n fac data-search-range mt-10">
				<image class="common_icon" src="../../../../static/icon_time.png"></image>
				<view class="flex-n fac fjb">
					<view class="data-search-range-item" @click="lookBeginTime=true" v-if="!beginTime">开始日期</view>
					<div class="data-search-range-itemselect" @click="lookBeginTime=true" v-else>{{beginTime}}</div>
					<view class="">
						-
					</view>
					<view class="data-search-range-item" @click="lookEndTime=true" v-if="!endTime">结束日期</view>
					<div class="data-search-range-itemselect" @click="lookEndTime=true" v-else>{{endTime}}</div>
				</view>
				<view class="iconfont iconjuxing27kaobei" v-if="beginTime||endTime" @click="beginTime='';endTime='';choose=-1"></view>
			</view>
			<view class="data-search-title mt-30">创建订单时间段</view>
			<view class="flex-n fac data-search-range mt-10">
				<image class="common_icon" src="../../../../static/icon_time.png"></image>
				<view class="flex-n fac fjb">
					<view class="data-search-range-item" @click="lookCreateTimeBegin=true" v-if="!createTimeBegin">开始日期</view>
					<div class="data-search-range-itemselect" @click="lookCreateTimeBegin=true" v-else>{{createTimeBegin}}</div>
					<view class="">
						-
					</view>
					<view class="data-search-range-item" @click="lookCreateTimeEnd=true" v-if="!createTimeEnd">结束日期</view>
					<div class="data-search-range-itemselect" @click="lookCreateTimeEnd=true" v-else>{{createTimeEnd}}</div>
				</view>
				<view class="iconfont iconjuxing27kaobei" v-if="createTimeBegin||createTimeEnd" @click="createTimeBegin='';createTimeEnd=''"></view>
			</view>
			<view class="data-search-btn" @click="submit">
				确定
			</view>
			<z-date-select :visible.sync="lookBeginTime" v-model="beginTime" :endDate="endTime"></z-date-select>
			<z-date-select :visible.sync="lookEndTime" v-model="endTime" :startDate="beginTime"></z-date-select>
			<z-date-select :visible.sync="lookCreateTimeBegin" v-model="createTimeBegin" :endDate="createTimeEnd"></z-date-select>
			<z-date-select :visible.sync="lookCreateTimeEnd" v-model="createTimeEnd" :startDate="createTimeBegin"></z-date-select>
		</z-slide>
		<z-date-select></z-date-select>
	</view>
</template>

<script>
	export default {
		name: 'dateSearch',
		props: {
			visible: Boolean,
			select:Number
		},
		data() {
			return {
				show: false,
				lookBeginTime: false,
				lookEndTime: false,
				beginTime: '',
				endTime: '',
				createTimeBegin:'',
				createTimeEnd:'',
				lookCreateTimeBegin:false,
				lookCreateTimeEnd:false,
				choose: -1
			}
		},
		watch: {
			show(newval, oldval) {
				this.$emit('update:visible', this.show);
			},
			visible(newval, oldval) {
				this.show = this.visible;
				if(newval){
					this.choose=this.select;
					this.getTimeRange();
				}
			},
			// beginTime(newval, oldval) {
			// 	if (newval) {
			// 		this.choose = -1;
			// 	}
			// },
			// endTime(newval, oldval) {
			// 	if (newval) {
			// 		this.choose = -1;
			// 	}
			// }
		},
		methods: {
			chooseArea(num) {
				if (num == this.choose) {
					this.choose = -1;
				} else {
					this.choose = num;
					this.getTimeRange();
				}
			},
			getTimeRange(){
				var beginDate = '',
					endDate = '';
				var end = '';
				var start = '';
				if (this.choose == 0) {
					start = new Date();
					beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
					endDate = beginDate;
				}
				if (this.choose == 1) {
					start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24);
					beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
					endDate = beginDate;
				}
				if (this.choose == 2) {
					end = new Date();
					start = new Date();
					var num = start.getDay();
					if (num == 0) {
						num = 7;
					}
					start.setTime(start.getTime() - 3600 * 1000 * 24 * (num - 1));
					end.setTime(end.getTime() + 3600 * 1000 * 24 * (7 - num));
					beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
					endDate = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
				}
				if (this.choose == 3) {
					end = new Date();
					start = new Date();
					var num = start.getDay();
					if (num == 0) {
						num = 7;
					}
					start.setTime(start.getTime() - 3600 * 1000 * 24 * (num + 6));
					end.setTime(end.getTime() - 3600 * 1000 * 24 * num);
					beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
					endDate = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
				}
				if (this.choose == 4) {
					start = new Date();
					var year = start.getFullYear(),
						month = start.getMonth() + 1;
					var start = new Date(year + '-' + month + '-1');
					var length = this.$DateTime.getMonthArea().length - 1;
					var dd = this.$DateTime.getMonthArea()[length].dd;
					end = new Date(this.$DateTime.getMonthArea()[length - (dd < 7 ? dd : 0)].date);
					beginDate = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
					endDate = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
				}
				if (this.choose == 5) {
					start = new Date();
					var month=this.$DateTime.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[15].mm,
					year=this.$DateTime.beforeMouth({yy:start.getFullYear(),mm:start.getMonth()+1,dd:1})[15].yy;
					start=new Date(year+'-'+month+'-1');
					beginDate =year + '-' + month + '-' + 1;
					endDate = year + '-' + month + '-' + this.$DateTime.getMonthDayNum(year,month);
				}
				if(this.choose==-1&&this.beginTime != '' && this.endTime != ''){
					beginDate =this.beginTime.replace(/\//g,"-");
					endDate = this.endTime.replace(/\//g,"-");
				}
				this.beginTime=beginDate;
				this.endTime=endDate;
				console.log(beginDate,endDate)
			},
			submit() {
				console.log(111)
				
				if (this.beginTime != '' && this.endTime == '' || this.beginTime == '' && this.endTime != '') {
					return uni.showToast({
						title: '请选择完整时间段',
						icon: 'none'
					})
				}
			
				this.$emit('searchDate',{beginDate:this.beginTime,endDate:this.endTime,createTimeBegin:this.createTimeBegin.replace(/\//g,"-"),createTimeEnd:this.createTimeEnd.replace(/\//g,"-")});
				this.$refs.slide.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-search {
		.data-search-title {
			color: #999999;
			font-size: 28rpx;
			line-height: 60rpx;

			padding: {
				left: 50rpx;
				right: 50rpx;
			}

			;
		}

		.data-search-btn {
			width: calc(100% - 80rpx);
			margin-left: 40rpx;
			margin-top: 50rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			background-color: #007AFF;
		}

		.data-search-area {
			width: calc(100% - 80rpx);
			margin-left: 40rpx;
			margin-top: 20rpx;

			.data-search-item {
				color: #999999;
				border: 1px solid #f2f2f2;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.data-select {
				border: 1px solid #52c1f5 !important;
				color: #52c1f5 !important;
				background: #f8fbff !important;
			}
		}
	}

	.data-search-range {
		margin-left: 40rpx;
		width: calc(100% - 80rpx);
		padding: 10rpx 0;
		background: #eff1f6;

		.data-search-range-item {
			color: #ccc;
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}

		.data-search-range-itemselect {
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}
	}

	.common_icon {
		width: 58rpx;
		height: 58rpx;
		min-width: 58rpx;
	}
</style>