微信小程序时间标签和时间范围的联动效果

<view class="con_screen"> <text class="cons_ti">日期范围</text> <!-- 单选时间 --> <radio-group class="radio-group" bindchange="radioCheckedChange">  <block >  <label class="cons_radio {{radioCheckVal==1?'active':''}}" >   <radio value="1" hidden="true"/>   <text>今日</text>  </label>   <label class="cons_radio {{radioCheckVal==4?'active':''}}" >   <radio value="4" hidden="true" />   <text>近7日</text>  </label>   <label class="cons_radio {{radioCheckVal==6?'active':''}}" >   <radio value="6" hidden="true"/>   <text>近30日</text>  </label>    </block> </radio-group> <!-- 时间段 --> <view class="picker_group">  <picker mode="date" value="{{date}}" start="2015-09-01" end="{{date2}}" bindchange="bindDateChange">  <view class="picker">   {{date}}   <image src="../../image/home_zsr_icon.png"></image>  </view>  </picker>  到  <picker mode="date" value="{{date2}}" start="{{date}}" end="2018-01-24" bindchange="bindDateChange2">  <view class="picker">   {{date2}}   <image src="../../image/home_zsr_icon.png"></image>  </view>  </picker>   </view>   </view>

.radio-group{ display: inline-block;}.cons_radio{ margin-left: 30rpx;}.cons_radio text{ font-size: 26rpx; color: #c8c8c8; height: 40rpx; /* width: 93rpx; */ border: #c8c8c8 solid 2rpx; padding:0 20rpx; text-align: center; line-height: 40rpx; display: inline-block; border-radius: 20rpx;}/* 黄色 */.cons_radio.active text{ color: #F5A623; border-color: #F5A623;}/* 红色 */.cons_radio.activered text{ color: #FA2B21; border-color: #FA2B21;}/* 蓝色 */.cons_radio.activeblue text{ color: #4AAFDD; border-color: #4AAFDD;}/* 黄绿色 */.cons_radio.activeyg text{ color: #BABC1A; border-color: #BABC1A;} /* 日期选择 */.picker_group{ display: block; font-size: 28rpx; color: #c8c8c8; margin-left: 20rpx; margin-top: 15rpx;}.picker_group picker{ display: inline-block; margin:0 20rpx 0 20rpx; position: relative; color: #232323;}.picker_group picker image{ width: 20rpx; height: 20rpx;}.cons_zsr{ display: block; font-size: 32rpx; color: #232323; margin-left: 40rpx; margin-bottom: 15rpx;}.cons_zsr picker image{ width: 30rpx; height: 30rpx;}

Page({ data:{ page:'', Loading:false, isLogin:false, radioCheckVal:0,//收益占比单选 date: '2015-09-01',//收益占比时间段起始时间 date2:'2018-01-24',//收益占比时间段终止时间 },  // 收益占比单选时间 ring radioCheckedChange(e){  let that=this;  that.setData({   radioCheckVal:e.detail.value  })  console.log(that.data.radioCheckVal) if(that.data.radioCheckVal=='1'){  that.setData({  date:timedate.formatDate(now),  date2:timedate.formatDate(now),  })  // console.log(that.data.date+'------'+that.data.date2)  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2) } if(that.data.radioCheckVal=='4'){  that.setData({  date:timedate.sevenDays().t2,  date2:timedate.sevenDays().t1,  })  // console.log(that.data.date+'------'+that.data.date2)  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2) } if(that.data.radioCheckVal=='6'){  that.setData({  date:timedate.thirtyDays().t2,  date2:timedate.thirtyDays().t1,  })  // console.log(that.data.date+'------'+that.data.date2)  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2) } }, // 收益占比时间段选择 bindDateChange(e){ let that=this; console.log(e.detail.value) that.setData({  date: e.detail.value,  radioCheckVal:0, }) that.timeFn(that.data.arrayindex,that.data.date,that.data.date2) }, bindDateChange2(e){ let that=this; that.setData({  date2: e.detail.value,  radioCheckVal:0, }) that.timeFn2(that.data.arrayindex,that.data.date,that.data.date2) },