小程序 日期 搜索 设计案例

小程序 日期范围搜索  时间 范围搜索 。

.wrap{
  padding-bottom: 169rpx;
  
}




navigator{
  display: inline-block;
  color: blue;
}




.row {
  padding: 5px 10px 5px 10px;
  font-size: 15px;
  color: #636262;
  display: flex;
}

.left {
  width: 150rpx;
  line-height: 65rpx;
  text-align: right;
  font-size: 28rpx;
}

.right {
  flex: 1;
  padding-left: 16rpx;
  line-height: 65rpx;
}

.right  input {
  background-color: #e2e2e2;
  height: 65rpx;
  padding-left: 15rpx;
}
picker{
  line-height: 65rpx;
  background-color: #e2e2e2;
  padding-left: 15rpx;
}
textarea{
  width: 100%;
  background-color: #e2e2e2;
}

.right text{
  margin-left: 15rpx;
  border: 1rpx solid #e4880f;
  color: #e4880f;
  padding: 3rpx 5rpx 3rpx 5rpx;
  font-size: 28rpx;
 }

 .text_on{
  background-color:#e4880f;
  border: 1rpx solid #e4880f !important;
  color:#fff !important;
}

<view wx:if="{{bind_flag==0}}"  style="   font-weight: bold; padding:18rpx">
  请先绑定用户后
  <navigator url="/pages/binding_user/binding_user">点我绑定</navigator>
</view>

<view wx:if="{{bind_flag==1}}">
<!--  输入信息 -->
<view  class="my_list" style="margin-top: 65rpx;">

<view class="my_list_item">
    <view style="padding: 15rpx; font-size: 28rpx;">
       <text class="beg">搜索事件</text>
    </view>
  </view>

  <view class="my_list_item">
    <view class="row">
      <view class="left">
       用户：
      </view>
      <view class="right">{{user_obj.trueName}}</view>
    </view>
  </view>

  <view class="my_list_item">
    <view class="row">
      <view class="left">搜索内容：</view>
      <view class="right">
        <input class="right"   bindinput="qInput"    />
      </view>
    </view>
  </view>

  <view class="my_list_item">
    <view class="row">
      <view class="left">
        事件类型：
      </view>
      <view class="right">
         <block wx:for="{{type_array}}">
          <text class="{{index==type_select_index ? 'text_on' : ''}}" data-index="{{index}}" bindtap="click_type">{{item}}</text>
        </block>
      </view>
    </view>
  </view>

  <view wx:if="{{type_select_index==0}}"   class="my_list_item">
    <view class="row">
      <view class="left">
        进度：
      </view>
      <view class="right">
         <block wx:for="{{state_array}}">
          <text class="{{index==state_select_index ? 'text_on' : ''}}" data-index="{{index}}" bindtap="click_state">{{item}}</text>
        </block>
      </view>
    </view>
  </view>


  <view class="my_list_item">
    <view class="row">
      <view class="left">
        时间区间：
      </view>
      <view class="right">
        <block wx:for="{{date_array}}">
          <text class="{{index==date_select_index ? 'text_on' : ''}}" data-index="{{index}}" bindtap="click_date">{{item}}</text>
        </block>
      </view>
    </view>
  </view>

  <view class="my_list_item">
    <view class="row">
      <view class="left">
        起始时间：
      </view>
      <view class="right">
        <picker mode="date" value="{{date1}}" start="2019-09-01" end="2030-12-01" bindchange="bindDate1Change">
          <view class="picker">
            {{date1}}
          </view>
        </picker>
      </view>
    </view>
  </view>

  <view class="my_list_item">
    <view class="row">
      <view class="left">
        结束时间：
      </view>
      <view class="right">
        <picker mode="date" value="{{date2}}" start="2019-09-01" end="2030-12-01" bindchange="bindDate2Change">
          <view class="picker">
             {{date2}}
          </view>
        </picker>
      </view>
    </view>
  </view>



</view>
<!--  输入信息结束 -->

<!--  按钮开始 -->
<view   class="btn-group">
  <button   open-type="getUserInfo"  bindgetuserinfo="search"    class="btn">搜索</button>
</view>
<!-- 按钮结束 -->

</view>



<w-btm-menu  />

import {
  wx_login,request,uploadWXUserInfo
} from '../../utils/util.js'
import {
  baseURL
} from '../../utils/config.js'
const app = getApp();
Page({
  data: {
    openid:"",
    baseURL:baseURL,
    date_api:"/api/xcx/get/date",
   
    q: "",

    bind_flag:0, //0没有绑定   1已经绑定

    date_array: ["当天", "近1周", "近1月", "近3月"],
    date_select_index:0,

    type_array: ["任务", "汇报", "全部"],
    type_select_index:0,

    state_array: ["未完成", "已完成", "全部"],
    state_select_index:0,

    date1: '2016-09-01',
    date2: '2016-09-01',
    user_obj:{}
  },
  wx_login() {
    console.log("全局的openid是：" + app.globalData.openid);
    var openid = app.globalData.openid
    if (openid == '') {
      console.log('openid是空')
      wx_login().then(res => {
        console.log(res);
        openid = res.data.openid;
        this.setData({
          openid: openid
        })
        //判断openid有没有绑定用户
        this.check();
      })
    } else {
      this.setData({
        openid: openid
      })
      //判断openid有没有绑定用户
      this.check();
    }
  },
  check(){
    var that = this;
    request({
      url:  baseURL+"/api/xcx/apply/check",
      method: 'post',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        openid:that.data.openid,
        type:2
      }
    }).then(res => {
      console.log(res);
      if(res.data.success){
        that.setData({
          bind_flag: 1,
          user_obj:res.data.user
        })
      }else{
        that.setData({
          bind_flag: 0
        })
      }
    })
  },
  click_date(e){
    console.log(e.currentTarget.dataset.index)
    this.setData({
      date_select_index: e.currentTarget.dataset.index
    })
    if(this.data.date_select_index==0){
      this.insert_current_date();
    }
    if(this.data.date_select_index==1){
      this.load_date(1);
    }
    if(this.data.date_select_index==2){
      this.load_date(2);
    }
    if(this.data.date_select_index==3){
      this.load_date(3);
    }
  },
  click_type(e){
    console.log(e.currentTarget.dataset.index)
    this.setData({
      type_select_index: e.currentTarget.dataset.index
    })
  },
  click_state(e){
    console.log(e.currentTarget.dataset.index)
    this.setData({
      state_select_index: e.currentTarget.dataset.index
    })
  },
  qInput(e) {
    this.setData({
      q: e.detail.value
    })
  },
  bindDate1Change: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date1: e.detail.value,
      date_select_index:-1
    })
  },
  bindDate2Change: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date2: e.detail.value,
      date_select_index:-1
    })
  },
  onLoad: function (options) {
   this.insert_current_date();
  },
  insert_current_date(){
    var date = new Date()
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    month = month>=10?month:"0"+month
    var day = date.getDate();
    day =  day>=10?day:"0"+day
    console.log(year + "-" + month + "-" + day )
    this.setData({
      date1: year + "-" + month + "-" + day,
      date2: year + "-" + month + "-" + day
    })
  },
  load_date(type){
    var that = this;
    request({
      url:  baseURL+that.data.date_api,
      method: 'post',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        type:type
      }
    }).then(res => {
      console.log(res);
      that.setData({
        date1: res.data.date1,
        date2: res.data.date2
      })
    })
  },
  search(e){
    var that=this;

    console.log(e);
    console.log(e.detail.rawData);
    if (app.globalData.uploadUserInfo) {
      app.globalData.uploadUserInfo = false;
      uploadWXUserInfo(e.detail.rawData, app.globalData.openid)
    }
    

    console.log(that.data.date1);
    console.log(that.data.date2);
    console.log(that.data.q);
    // 0 任务   1汇报
    console.log(that.data.type_select_index);
    console.log(that.data.state_select_index);
    //   0未完成的任务  1已完成的任务
    
    //如果下标是2（全部） type使用空字符串  
    var type = that.data.type_select_index==2?"":that.data.type_select_index;
    var state= that.data.state_select_index==2?"":that.data.state_select_index;
    
    
    //如果type下标是1（汇报）   那么state是空
    if(type==1){
      state="";
    }
    //如果type下标=2就是全部    那么 state是空
    if(that.data.type_select_index==2){
      state="";
    }

    var data = "{";
    data = data + '"date1":"'+that.data.date1+'",';
    data = data + '"date2":"'+that.data.date2+'",';
    data = data + '"q":"'+that.data.q+'",';
    data = data + '"self":"",';
    data = data + '"state":"'+state+'",';
    data = data + '"type":"'+type+'"';
    data = data + "}";
    console.log(data);
    var url = "/pages/task_list/task_list?data=" + data;
    wx.navigateTo({
      url: url
    })

  },
  onReady: function () {
  },
  onShow: function () {
    this.wx_login();
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () {
  },
  onShareAppMessage: function () {
  }
})