partnerApp/pages/components/todaydate-picker.vue

<template>
  <div >
   <u-popup ref="popup" class="popup" :mask="true" mode="bottom" >
   	<view >
   		<view class="popup-title ">
   			<text >时间筛选</text>
   			<text  @click="$refs.popup.close()">×</text>
   		</view>
		<view style="margin-left: 16px;">
			<text class="quick-title">快捷选择</text>
			<view style="margin: 15px 0;">
				<text style="margin-right: 25px;" :class="typeStatistics == val.value ? 'selected' : 'text-border'" v-for="val in partnerTypeOption"
					:key="val.value" @click="getPartnerType(val.value)">{{ val.lable }}</text>
			</view>
		</view>
		<text class="quick-title" style="margin-left: 16px;">自定义时间</text>
   		<view style="padding: 15px">
   			<view class="popup-data dis j-s">
   				<text :class="startShow? 'active' :''" @click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
   				<text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
   			</view>
   			<picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
   			  class="picker-view">
   			  <picker-view-column>
   				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
   			  </picker-view-column>
   			  <picker-view-column>
   				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
   			  </picker-view-column>
   			  <picker-view-column>
   				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
   			  </picker-view-column>
   			</picker-view>
   		</view>
   	</view>
   	<view class="popup-footer dis j-s">
   		<text @click.stop="reset" >重置</text>
   		<text @click.stop="confirm" >确定</text>
   	</view>
   </u-popup>
   <u-toast ref="uToast" />
  </div>
</template>
<script>
import { log } from 'util';
  export default {
    data() {
      return {
		  typeStatistics:0,
		  partnerTypeOption: [
		  	{
		  		lable: '今日',
		  		value: '1'
		  	}, {
		  		lable: '本月',
		  		value: '2'
		  	}, {
		  		lable: '本年',
		  		value: '3'
		  	}, {
		  		lable: '全部',
		  		value: '4'
		  	}
		  ],
		  startShow: false,
		  endShow: false,
		  interviewStartTime:'',
		  interviewEndTime:'',
		  beginStartTime:'',
		  beginEndTime:'',
        years: [],
        year: null,
        months: [],
        month: null,
        days: [],
        day: null,
        hours: [],
        hour: null,
        minutes: [],
        minute: null,
        value: [],
        indicatorStyle: `height: 50px;color:#2D6DFF `,
		visible:false
      }
    },
    props: {
      // visible: {
      //   type: Boolean,
      //   default: true
      // },
      
      // interviewTime: {
      //   type: String,
      //   default() {
      //     return '';
      //   },
      // }
    },
    mounted() {
      this.init();
    },
    watch: {
      // visible: {
      //   handler(newValue, oldValue) {
      //     if (newValue) {
      //       if (this.interviewTime) {
      //         this.init(this.interviewTime);
      //       }
      //     }
      //   },
      //   immediate: false,
      //   deep: true
      // }
    },
    methods: {
		open(){
			this.typeStatistics=0
			this.interviewStartTime=''
			this.interviewEndTime =''
			this.visible=false
			this.startShow = false
			this.endShow = false
			this.$refs.popup.open()
		},
      bindChange: function (e) {
        const val = e.detail.value
        let year = this.years[val[0]] 
        let isDay = 30, days = [];
        if (val[1]+1 == 2) {
            if((val[0]%4==0 && year%100!=0)||(year%400==0)){
            console.log('闰年')
            isDay = 29;
          }else {
            isDay = 28;
             console.log('平年')
          }
        } else if ([1,3,5,7,8,10,12].includes(val[1]+1)) {
          isDay = 31;
        } else {
          isDay = 30;
        }
      
        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
        this.days = days;
        this.year = this.years[val[0]]
        this.month =  this.months[val[1]]
        this.day = this.days[val[2]]
        if(this.startShow){
      	  this.interviewStartTime=this.year+'-'+this.month+'-'+this.day
        }
        if(this.endShow){
        	this.interviewEndTime=this.year+'-'+this.month+'-'+this.day
        }
      },
      init() {
        const date =  new Date();
        const years = []
        const year = date.getFullYear()
        const months = []
        const month = date.getMonth() + 1
        const days = []
        const day = date.getDate()
      
        let isDay = 30;
        if (month == 2) {
          if((year%4==0 && year%100!=0)||(year%400==0)){
            isDay = 29;
          }else {
            isDay = 28;
          }
        } else if ([1,3,5,7,8,10,12].includes(month)) {
          isDay = 31;
        } else {
          isDay = 30;
        }
      
        for (let i = date.getFullYear();  i >= 1900; i--) {
          years.push(i)
        }
        for (let i = 1; i <= 12; i++) {
          months.push(i)
        }
        for (let i = 1; i <= isDay; i++) {
          days.push(i)
        }
      
        this.years = years
        this.year = year
        this.months = months
        this.month = month
        this.days = days
        this.day = day
        this.value = [0, month-1, day-1]
      },
      // 补0
      padZeroStr(originStr){
         if(+originStr < 10){
            return  String(originStr).padStart(2,'0')
         }
         return originStr + ''
      },
      close(){
        this.$emit('update:visible', false);
      },
	  reset(){
        this.$emit('update:visible', false);
        this.interviewStartTime=''
        this.interviewEndTime =''
      },
      startClick(){
        // this.interviewStartTime=''
		this.typeStatistics=0
        this.interviewStartTime = this.year+'-'+this.month+'-'+this.day
        this.visible=true
        this.startShow = true
        this.endShow = false
      },
      endClick(){
		  this.typeStatistics=0
        this.interviewEndTime= this.year+'-'+this.month+'-'+this.day
        this.visible=true
        this.startShow = false
        this.endShow = true
      },
      confirm() {
        // let monthStr = this.padZeroStr(this.month)
        // let dayStr = this.padZeroStr(this.day)
        // let hourStr = this.padZeroStr(this.hour)
        // let minuteStr = this.padZeroStr(this.minute)
        // this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
		let timeValue=''
		// if(this.interviewStartTime || this.interviewEndTime){
		// 	timeValue=this.interviewStartTime ||this.interviewEndTime
		// }
		if(this.interviewStartTime && this.interviewEndTime){
			// let timeValue=this.interviewStartTime +'~'+this.interviewEndTime
			// console.log(this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-')),999)
			// if(!this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-'))){
			// 	this.$refs.uToast.show({
			// 		title: '开始时间必须小于结束时间',
			// 		type: 'warning',
			// 		icon:false
			// 		// url: '/pages/user/index'
			// 	})
			// 	return false
			// }
			// this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-'))
			// log(this.compareDates(new Date(this.interviewStartTime),new Date(this.interviewEndTime),222222))
			// log(this.compareDates(new Date("2022-01-01"),new Date("2022-01-02"),222222))	
			if(this.compareDates(new Date(this.interviewStartTime),new Date(this.interviewEndTime))==1){
				this.$refs.uToast.show({
					title: '开始时间必须小于结束时间',
					type: 'warning',
					icon:false
					// url: '/pages/user/index'
				})
				return false
			}
		}
		else{
			this.$refs.uToast.show({
				title: '请选择时间!',
				type: 'warning',
				icon:false
				// url: '/pages/user/index'
			})
			return false
		}
		  this.$emit('confirmPickDate', this.interviewStartTime,this.interviewEndTime,this.interviewStartTime +'~'+this.interviewEndTime);
		  this.$refs.popup.close()
      },
	   compareDates(date1, date2) {
		     var dateString1 = date1.toISOString().slice(0, 10);
		      var dateString2 = date2.toISOString().slice(0, 10);
		      
		      if (dateString1 > dateString2) {
		        return 1;
		      } else if (dateString1 < dateString2) {
		        return -1;
		      } else {
		        return 0;
		      }
	  },
		getCurrentMonthFirst() {
			 // 获取当月第一天数据
			  let date = new Date()
			  date.setDate(1)
			  let month = parseInt(date.getMonth() + 1)
			  let day = date.getDate()
			  if (month < 10) month = '0' + month
			  if (day < 10) day = '0' + day
			  return  date.getFullYear() + '-' + month + '-' + day
		},
		getCurrentMonthLast() {
			// 获取当月最后一天数据
		  let date = new Date()
		  let year = date.getFullYear()
		  let month = date.getMonth() + 1
		  month = month < 10 ? '0' + month : month
		  let day = new Date(year, month, 0)
		  return year + '-' + month + '-' + day.getDate()
		},
	  getPartnerType(type) {
		  this.typeStatistics=type
		 let now = new Date();
		 let year = now.getFullYear();
		 let month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
		 let day = now.getDate();
		 if(type==1){
		 	let theDay=`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
			this.$emit('confirmPickDate',theDay,theDay,'今日数据');
			this.$refs.popup.close()
		 }
		 else if(type==2){
			 this.$emit('confirmPickDate', this.getCurrentMonthFirst(),this.getCurrentMonthLast(),'本月数据');
			 this.$refs.popup.close()
		 }
		 else if(type==3 ){
			 this.$emit('confirmPickDate', year+'-01-01',year+ '-12-31','本年数据');
			 this.$refs.popup.close()
		 }
		 else if(type==4 ){
			 this.$emit('confirmPickDate', '','','全部数据');
			 this.$refs.popup.close()
		 }
		this.interviewStartTime=''
		this.interviewEndTime =''
	  },
    },
  }
</script>
<style lang="scss" scoped>
	.popup {
	  border-radius:10px 10px 0 0 !important; 
	}
	.quick-title{
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 18px;
	}
	.text-border{
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #EEEEEE;
		color: #666666;
		font-size: 14px;
		padding: 3px 10px;
		
	}
	.selected {
		padding: 3px 10px;
		color: #2D6DFF;
		background: rgba(45,109,255,0.1);
	}
  .popup-title{
  	font-size: 15px;
  	color: #333333;
  	padding:10px;
  	margin-bottom: 10px;
  	position: relative;
  	text-align: center;
  	text:first-child {
  		font-weight: 600;
  	}
  	text:last-child {
  		position: absolute;
  		right: 10px;
  		font-size: 21px;
  		color: #999999;
  		line-height: 23px;
  	}
  }
  .popup-footer{
  	margin:10px 15px;
  	text{
  		font-size: 16px;
  		padding: 5px 0;
  		color: #FFFFFF;
  		display: inline-block;
  		width: 45%;
  		text-align: center;
  	}
  	text:first-child {
  		color: #2D6DFF;
  		background: rgba(45,109,255,0.1);
  		border-radius: 5px 5px 5px 5px;
  	}
  	text:last-child {
  		background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
  		border-radius: 5px 5px 5px 5px;
  	}
  }
  .popup-data{
  	line-height: 25px;
  	text{
  		font-size: 14px;
  		color: #999999 ;
  		display: inline-block;
  		width: 45%;
  		text-align: center;
  		border: 1px solid #DDDDDD;
		border-radius: 2px 2px 2px 2px;
  	}
  	.active{
  		border: 1px solid #2D6DFF;
  		color: #2D6DFF;
  	}
  }
   .picker-view {
          width: 100%;
          height: 150px;
        }
</style>