uniDataCenter/components/timeFiltrate...

<template>
	<view>
		 <view class="timeList">
        <view
            class="box"
            v-for="(item,index) in timeList"
            :key='item.id'
            :class="(start_time==item.start_time && end_time==item.end_time)?'active':''"
            @click="changeInit(item)">
        {{ item.name }}
        </view>
        <view class="time_container">
          <uni-datetime-picker
          class="timeCommon"
          v-model="time"
          :end="tomorrw"
          type="daterange"
          :clear-icon="false"
          @change="timeChange"
          rangeSeparator="至"/>
         </view>
		  </view>
	</view>
</template>

<script>
export default {
	
	data(){
		return{
        tomorrw:this.$getDay(0, false),//今天以后不能选
		    timeList: [
				// { id: 1, name: '昨日', start_time: this.$getDay(-1, false), end_time: this.$getDay(-1, false) },
				{ id: 7, name: '近7日', start_time: this.$getDay(-7, false), end_time: this.$getDay(0, false) },
				{ id: 30, name: '近30日', start_time: this.$getDay(-30, false), end_time: this.$getDay(0, false) }
		    ],
		    time: [this.$getDay(-30, false), this.$getDay(0, false)],
		   start_time: this.$getDay(-30, false),
		   end_time: this.$getDay(0, false),
		}
	},
	onLoad(){
	},
  created(){
    this.$emit('getchildTime',this.start_time,this.end_time)//将时间传给父组件
  },
	methods:{
    timeChange(e){
      this.start_time = e[0];
      this.end_time = e[1];
      this.$emit('getchildTime',this.start_time,this.end_time)//将时间传给父组件
    },
    changeInit (item) {// 时间筛选
      this.start_time = item.start_time;
      this.end_time = item.end_time;
      this.time = [item.start_time, item.end_time]
      this.$emit('getchildTime',this.start_time,this.end_time)//将时间传给父组件
    },
	}
}
</script>
<style lang="scss" scoped>
	.timeList{
		display: flex;
		align-items: center;
		//justify-content: space-between;
    padding: 20rpx 0;
		.box{
      border: 1px solid #5B80F4;
      border-radius: 8rpx;
      font-size: 28rpx;
      width: 120rpx;
      height: 50rpx;
      line-height: 48rpx;
      text-align: center;
      margin-right: 20rpx;
		}
    .active{
      background-color: #5B80F4;
    }
    .time_container{
      width: 61%;
      height: 50rpx;
      line-height: 50rpx;
      background-color: transparent;
    }
	}
</style>