至今-时间

<template>
    <view class="">
        <view class="pickerDate-text" @tap="onShowPickerDate">
            <text   class="picker picker-select" v-if="selectDate !== ''">{{selectDate}}</text>
            <text class="placeholder" v-else>{{placeholder}}</text>
        </view>
        <view class="pickerDate-mask" :hidden="!isShow"></view>
        <view class="pickerDate-box" v-if="isShow" :class="isShow?'pickerDate-show':''">
            <view class="picker-header">
                <view class="picker-btn" :data-index="index" v-for="(item,index) in pickerBtn" :key="index"
                    @tap="onConfirmSelected">{{item}}</view>
            </view>
            <picker-view class="pickerDate_picker-view" :indicator-class="'pickerDate-indicator'" :value="value"
                @change="onChange">
                <picker-view-column v-if="fields === 'year' || fields === 'month' || fields === 'day'">
                    <view v-for="(item,index) in years" :key="index">{{item === '至今' ? item : item + '年'}}</view>
                </picker-view-column>
                <template v-if="fields == 'month' || fields == 'day'">
                    <picker-view-column v-if="year != '至今' ">
                        <view v-for="(item,index) in months" :key="index"> {{item + '月'}}</view>
                    </picker-view-column>
                </template>
                        <picker-view-column v-if="fields === 'day'" :hidden="year == '至今'">
                            <view v-for="(item,index) in days" :key="index">{{item}}日</view>
                    </picker-view-column>
            </picker-view>
        </view>
    </view>
</template>

<script>
    /**
     * author        cxq
     * time          2021-7-6 08:51:00
     * description   
     */
    import {
        nowYear,
        nowMonth,
        nowDay,
        setDate
    } from "utils/date.js"

    export default {
        name: '',
        props: {

            fields: {
                type: String,
                default: 'month'
            },
            placeholder: {
                type: String,
                default: '请选择(必填)'
            },
            selectDate: {
                type: String,
                default: ''
            },
            quick: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                onShowPickerDateNum:0,
                selectDateNum:0,
                isShow: false,
                pickerBtn: ['取消', '确定'],
                years: [],
                months: [],
                days: [],
                year: '',
                month: '',
                day: '',
                value: [], //选中值的下标

            }
        },
        mounted() {
            // this.year = nowYear
            // this.month = nowMonth
            // this.day=nowDay
            console.log("this.year", this.year, this.month, this.day)
        },
        
        watch: {

            'placeholder': {
                immediate: true,
                handler: function(val) {
                    if (!this.selectDate) {
                        this.year = '至今'
                    }
                    console.log("placeholder", val)
                }
            },

            'selectDate': {
                immediate: true,
                handler: function(val) {
                    this.selectDateNum++
                    let arr2
                    console.log("selectDate",this.selectDate,this.selectDateNum, val)
                    if (val != '') {
                        if (this.selectDate == '至今') {
                            this.year = '至今'
                            return
                        }
                        if(this.selectDateNum==2 &&  this.selectDate){
                             if (this.selectDate  != '至今') {
                                 arr2 = val.replace('.','-').split('-')
                             }
                        }else{
                             arr2 = val.split('-')
                        }
                        if (arr2.length === 1) {
                            this.year = Number(arr2[0])
                        } else if (arr2.length === 2) {
                            this.year = Number(arr2[0])
                            this.month = Number(arr2[1])
                        } else if (arr2.length === 3) {
                            this.year = Number(arr2[0])
                            this.month = Number(arr2[1])
                            this.day = Number(arr2[2])
                        }
                        

                        console.log("selectDate=", arr2)
                    }
                }

            }

        },
        methods: {
            // 打开选框
            onShowPickerDate() {
                    
                this.onShowPickerDateNum++
            if(this.onShowPickerDateNum==1){
                console.log('onShowPickerDate00', this.year, this.month,this.value)
                setDate(this.quick, this.year, this.month, this.day, this)
            
            }
            if(this.selectDateNum==2 &&  this.selectDate){
                setDate(this.quick, this.year, this.month, this.day, this)
                
            }
            this.isShow = true
            },
            // 关闭选框
            onConfirmSelected(e) {
                let index = e.currentTarget.dataset.index;
                if (index && index == 1) { 
                    // 确定选择 更换改变后的日期
                    if (this.val) {
                        console.log('this.val=', this.val, this.value)
                        setDate(this.quick, this.years[this.val[0]], this.months[this.val[1]], this.days[this.val[2]],this)
                    } else {
                        setDate(this.quick, this.years[this.value[0]], this.months[this.value[1]], this.days[this.value[2]], this)
                }

                    let str = ''
                    let newDate = {}
                    if (this.year === '至今') {
                        str = this.year
                        newDate.date = str
                        newDate.year = this.year
                    } else if (this.fields === 'year') {
                        str = this.year
                        newDate.date = str
                        newDate.year = this.year
                    } else if (this.fields === 'month') {
                        str = this.year + '-' + this.month
                        newDate.date = str
                        newDate.year = this.year
                        newDate.month = this.month
                    } else {
                        str = this.year + '-' + this.month + '-' + this.day
                        newDate.date = str
                        newDate.year = this.year
                        newDate.month = this.month
                        newDate.day = this.day
                    }
                    this.$emit('changeDate', newDate)
                } else {
                    // 取消选择 还原改变前的日期
                    setDate(this.quick, this.years[this.value[0]], this.months[this.value[1]], this.days[this.value[2]], this)
                }
                this.isShow = false

            },
            onChange(e) {
                let val = e.detail.value
                this.val = e.detail.value; //记录改变后的日期
                console.log('onChange', val)
                setDate(this.quick, this.years[val[0]], this.months[val[1]], this.days[val[2]], this)
            },
        },
    }
</script>

<style>
    .pickerDate-box {

    }

    .pickerDate {
        font-size: 32rpx;
        color: #16233D;
    }

    .pickerDate .placeholder {
        font-size: 32rpx;
        color: #C5C8CE;
    }

    /* 自定义遮罩层*/

    .pickerDate-mask {
        width: 100%;
        height: 100%;
        z-index: 998;
        background-color: rgba(0, 0, 0, 0.5);
        /* background-color: rgba(0, 0, 0, 0.5); */
        position: fixed;
        bottom: 0;
        left: 0;
    }

    /* 自定义按钮 */

    .picker-header {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        background-color: rgba(0, 0, 0, 0.01);
        z-index: 1000;
    }

    .picker-btn {
        padding: 0 30rpx;
        line-height: 80rpx;
        color: #999;
        font-size: 32rpx;
    }

    .picker-btn:last-child {
        color: #FF4C00;
    }

    /* 自定义动画 */

    .pickerDate-box {
        width: 100%;
        padding-top: 80rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
        transform: translateY(100%);
        transition: 0.5s;
    }

    .pickerDate-show {
        transform: translateY(0);
    }

    .pickerDate_picker-view {
        width: 100%;
        height: 450rpx;
        text-align: center;
    }

    .pickerDate-indicator {
        height: 80rpx;
    }

    .pickerDate_picker-view picker-view-column view {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 32rpx;
        color: #525B6E;
    }
</style>

const date = new Date()
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
const nowYear = date.getFullYear()
const nowMonth = formatNumber(date.getMonth() + 1)
const nowDay = formatNumber(date.getDate())
// 每月的天数

let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// 根据年月 获取当月的总天数
function getDays(year, month) {
  if (month == 2) {
    return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
  } else {
    return daysInMonth[month - 1]
  }
}

// 根据年月日设置当前月有多少天 并更新年月日数组
function setDate(quick, year, month, day, that) {
  let daysNum = getDays(year, month)
  month = month ? month : 1
  day = day ? day : 1
  let monthsNum = 12
  let years = quick ? ['至今'] : []
  let months = []
  let days = []
  let yearIdx = 0
  let monthIdx = 0
  let dayIdx = 0
  // 重新设置年份列表
  if (quick){
    for (let i = nowYear; i >= 1900; i--) {
      years.push(i)
    }
  } else {
    for (let i = nowYear + 10; i >= 1900; i--) {
      years.push(i)
    }
  }
  years.map((v, idx) => {
    if (v === year) {
      yearIdx = idx
    }
  })
  // 重新设置月份列表
  for (let i = 1; i <= monthsNum; i++) {
    months.push(formatNumber(i))
  }
  months.map((v, idx) => {
    if (v === month) {
      monthIdx = idx
    }
  })
  // 重新设置日期列表
  for (let i = 1; i <= daysNum; i++) {
    days.push(formatNumber(i))
  }
  days.map((v, idx) => {
    if (v === day) {
      dayIdx = idx
    }
  })
  

     that.years=years//年份列表
     that.months=months//月份列表
     that.days=months//日期列表
     that.year=year
     that.month=formatNumber(month)
     that.day=formatNumber(day)

  // 年月日数组有数据后，重新再设置一下vualue才能跳转到对应位置
  that.value= [yearIdx, monthIdx, dayIdx]
}

 export {
         nowYear,
         nowMonth,
         nowDay,setDate
     }

 <pickerDate :fields="'month'" 
                      
                      
                      :selectDate="experciseObj.end" 
                
                       
                       quick @changeDate="onChangeDate"></pickerDate>