hitap-chat/components/time/dateChoose.vue

<template>
  <!--顶部-->
  <view class="DateChoose Width100 Height100">
    <picker class="Width100 PositionR" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
      <slot name="content"></slot>
    </picker>
  </view>
</template>

<script>
export default {
  name: "date-choose",
  props: {
    // 高度
    height: {
      type: Number,
      default: 100
    },
    chooseData:{
      type:String,
      default: ''
    },
    num:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      date: this.chooseData,
    }
  },
  mounted(){
  },
  computed:{
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    bindDateChange(e) {
      this.date = e.detail.value
      this.$emit('getDate',this.date)
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    // 获取url
    getCurPage() {
      let pages = getCurrentPages();
      let curPage = pages[pages.length - 1];
      return curPage
    },
    // 跳转页面
    skipPage(item) {
      this.$emit('skipPage', item.pageUrl)
    },
  },
  watch:{
  }
}
</script>

<style scoped lang="scss">
/*头部*/
.TopTitleBox {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  .TitleContent {
    text {
      line-height: 88rpx;
    }
    .LeftBox{
      width: 100rpx;
      left: 0rpx;
      top: 0rpx;
      .Icon{
        width: 48rpx;
        height: 48rpx;
        margin-top: 20rpx;
      }
    }
    .RightBox{
      top: 0;
      right: 0;
    }
    .Title{
    }
  }
}
</style>