uni-app开始时间结束时间

（结束时间大于开始时间）
<template>
  <view class="ditchIndex">
    <view class="search-box" :style="{'height':totalHeight +'px'}">
      <view :style="{'margin-top':menuTop +'px','height':menuHeight +'px','line-height':menuHeight +'px'}"
        class="title">
        <image src="../../static/img/btn_lxwm.png" mode="" class="img" @click="contactUsClick()"></image>我的推荐
      </view>
    </view>
    <view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
    <!-- 中间内容开始 -->
    <view class="tabBox" :style="{'margin-top':menuTop +'px','top':menuHeight +'px'}">
      <view class="tab" @click="tabClick(0)">
        <view class="txt" :class="{'addTab':indexTab==0}">荐客列表</view>
        <view class="border" v-if="indexTab == 0"></view>
      </view>
      <view class="tab" @click="tabClick(1)">
        <view class="txt" :class="{'addTab':indexTab==1}">推荐记录</view>
        <view class="border" v-if="indexTab == 1"></view>
      </view>
    </view>
    <view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
    <view class="ditchMain">
      <view class="clientBox">
        <view class="clientTime">
          <view class="leave_cont">
            <view class="ul">
              <view class="li">
                <text>开始时间</text>
                <view class="flex1">
                  <picker mode="date" :value="start_date" :start="start_date" :end="other"
                    @change="bindDateChange">
                    <view class="date">{{start_date}}</view>
                  </picker>
                </view>
              </view>
              <view class="li">
                <text>结束时间</text>
                <view class="flex1">
                  <picker mode="date" :value="start_date" :start="start_date"
                    @change="bindDateChange2">
                    <view class="date">{{other}}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="clientsList"></view>
      </view>
    </view>
    <!-- 中间内容结束 -->
    <view class="height140"></view>
    <view class="bottomBtn">
      <view class="home btnTxt" @click="indexClick()">
        <image src="../../static/img/btn_home_n.png" mode="widthFix" class="icon"></image>
        <view>首页</view>
      </view>
      <view class="nominate btnTxt">
        <image src="../../static/img/btn_tuijian_s.png" mode="widthFix" class="icon"></image>
        <view>推荐</view>
      </view>
      <view class="my btnTxt" @click="myClick()">
        <image src="../../static/img/btn_me_n.png" mode="widthFix" class="icon"></image>
        <view>我的</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        indexTab: '0',
        // 计算头部距离开始
        statusBarHeight: 0, //状态栏的高度 
        navigatorHeight: 0, //导航栏高度
        menuHeight: 0, //胶囊高度
        menuTop: 0, //胶囊与顶部的距离
        totalHeight: 0, //总高度
        theMoreTop: 0, //更多那个组件距离屏幕顶部的距离
        system: [],
        menu: [],
        // 计算头部距离结束
        start_date: currentDate,
        end_date: currentDate,
        other: '请输入',
      }
    },
    onLoad() {
      uni.hideTabBar(); //不让底部显示tab选项
      // 计算头部距离开始
      //获取系统信息
      uni.getSystemInfo({
        success: res => {
          this.system = res
        }
      })
      //获取胶囊信息
      this.menu = uni.getMenuButtonBoundingClientRect()
      //计算组件高度
      this.statusBarHeight = this.system.statusBarHeight //状态栏高度
      this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
      this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
      this.menuHeight = this.menu.height //胶囊高度
      this.menuTop = this.menu.top //胶囊与顶部的距离
      //监听【更多】组件距离顶部的距离
      const query = wx.createSelectorQuery()
      query.select('#more').boundingClientRect()
      query.exec((res) => {
        //console.log(res)
        let top = res[0].bottom //id节点的下边界坐标        
        this.theMoreTop = top + this.totalHeight
      })
      // 计算头部距离结束
    },
    methods: {
      // 选择时间开始
      // 选择日期
      bindDateChange: function(e) {
        this.start_date = e.target.value
      },
      bindDateChange2: function(e) {
        this.end_date = e.target.value;
        this.other = this.end_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}`;
      },
      // 选择时间结束
      // 点击切换选项
      tabClick(index) {
        if (index == 0) {
          this.indexTab = 0
        } else {
          this.indexTab = 1
        }
      },
      // 点击我的
      myClick() {
        // uni.redirectTo({ //这个是公司路由
        //  url: '/pages/clientDitch/firmMy'
        // })
        uni.redirectTo({ //这个是个人路由
          url: '/pages/clientDitch/personMy'
        })
      },
      // 点击首页
      indexClick() {
        uni.redirectTo({
          url: '/pages/clientDitch/ditchIndex'
        })
      },
      // showMore() {
      //  this.isShow = !this.isShow
      //  // 先展开500毫秒后再显示文字,收缩100毫秒后再隐藏文字
      //  if (this.isShowText) {
      //    setTimeout(() => {
      //      this.isShowText = !this.isShowText
      //    }, 200)
      //  } else {
      //    setTimeout(() => {
      //      this.isShowText = !this.isShowText
      //    }, 500)
      //  }
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .ditchIndex {
    .search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background: #fff;
      position: fixed;
      z-index: 99;
      .title {
        width: 100%;
        background: #fff;
        text-align: center;
        overflow: hidden;
        position: relative;
        .img {
          position: absolute;
          width: 44rpx !important;
          height: 44rpx !important;
          float: left;
          margin-left: 30rpx;
          margin-top: 5rpx;
        }
      }
    }
    .bottomBtn {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;
      .btnTxt {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20rpx;
        color: #999999;
        width: 33.3%;
        .icon {
          width: 44rpx !important;
          height: 44rpx !important;
          margin-bottom: 4rpx;
          margin-top: 8rpx;
        }
      }
    }
    .tabBox {
      width: 100%;
      height: 100rpx;
      background: red;
      position: fixed;
      top: 0;
      display: flex;
      .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        height: 100%;
        background: #FFFFFF;
        .txt {
          font-size: 32rpx;
          color: #222222;
          margin-top: 28rpx;
        }
        .border {
          width: 60rpx;
          height: 6rpx;
          background: #4281EA;
          border-radius: 3rpx;
          margin-top: 21rpx;
        }
        .addTab {
          font-weight: bold !important;
          color: #222222 !important;
        }
      }
    }
    .ditchMain {
      margin-right: 30rpx;
      margin-left: 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      .clientBox {
        margin-right: 30rpx;
        margin-left: 30rpx;
        .clientTime {
          .leave_cont .ul {
            padding-left: 30rpx;
          }
          .leave_cont .ul .li {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #efefef;
          }
          .leave_cont .ul .li text {
            padding: 40rpx 0;
            font-size: 34rpx;
            font-family: '黑体';
          }
          .leave_cont .ul .li .flex1 {
            flex: 1;
            text-align: right;
            padding-right: 25rpx;
            color: #999999;
            font-size: 32rpx;
          }
          .date {
            height: 42rpx;
          }
        }
        .clientsList {}
      }
    }
  }
</style>
二、
<template>
  <view class="ditchIndex">
    <view class="search-box" :style="{'height':totalHeight +'px'}">
      <view :style="{'margin-top':menuTop +'px','height':menuHeight +'px','line-height':menuHeight +'px'}"
        class="title">
        <image src="../../static/img/btn_lxwm.png" mode="" class="img" @click="contactUsClick()"></image>我的推荐
      </view>
    </view>
    <view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
    <!-- 中间内容开始 -->
    <view class="tabBox" :style="{'margin-top':menuTop +'px','top':menuHeight +'px'}">
      <view class="tab" @click="tabClick(0)">
        <view class="txt" :class="{'addTab':indexTab==0}">荐客列表</view>
        <view class="border" v-if="indexTab == 0"></view>
      </view>
      <view class="tab" @click="tabClick(1)">
        <view class="txt" :class="{'addTab':indexTab==1}">推荐记录</view>
        <view class="border" v-if="indexTab == 1"></view>
      </view>
    </view>
    <view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
    <view class="ditchMain">
      <view class="clientBox">
        <view class="clientTime">
          <view class="timeBox">
            <image src="../../static/img/icon_time.png" mode="widthFix" class="timeImg"></image>
            <view class="time1">
              <picker mode="date" :value="start_date" @change="bindDateChange">
                <view class="date">{{otherEnd}}</view>
              </picker>
            </view>
            <view class="txt">至</view>
            <view class="time2">
              <picker mode="date" :value="start_date" @change="bindDateChange2">
                <view class="date">{{other}}</view>
              </picker>
            </view>
          </view>
          <view class="leave_cont">
            <view class="ul">
              <view class="li">
                <text>开始时间</text>
                <view class="flex1">
                  <picker mode="date" :value="start_date" @change="bindDateChange">
                    <view class="date">{{start_date}}</view>
                  </picker>
                </view>
              </view>
              <view class="li">
                <text>结束时间</text>
                <view class="flex1">
                  <picker mode="date" :value="start_date" @change="bindDateChange2">
                    <view class="date">{{other}}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="clientsList"></view>
      </view>
    </view>
    <!-- 中间内容结束 -->
    <view class="height140"></view>
    <view class="bottomBtn">
      <view class="home btnTxt" @click="indexClick()">
        <image src="../../static/img/btn_home_n.png" mode="widthFix" class="icon"></image>
        <view>首页</view>
      </view>
      <view class="nominate btnTxt">
        <image src="../../static/img/btn_tuijian_s.png" mode="widthFix" class="icon"></image>
        <view>推荐</view>
      </view>
      <view class="my btnTxt" @click="myClick()">
        <image src="../../static/img/btn_me_n.png" mode="widthFix" class="icon"></image>
        <view>我的</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        indexTab: '0',
        // 计算头部距离开始
        statusBarHeight: 0, //状态栏的高度 
        navigatorHeight: 0, //导航栏高度
        menuHeight: 0, //胶囊高度
        menuTop: 0, //胶囊与顶部的距离
        totalHeight: 0, //总高度
        theMoreTop: 0, //更多那个组件距离屏幕顶部的距离
        system: [],
        menu: [],
        // 计算头部距离结束
        start_date: currentDate,
        end_date: currentDate,
        other: '请输入',
        otherEnd: '请输入',
      }
    },
    onLoad() {
      uni.hideTabBar(); //不让底部显示tab选项
      // 计算头部距离开始
      //获取系统信息
      uni.getSystemInfo({
        success: res => {
          this.system = res
        }
      })
      //获取胶囊信息
      this.menu = uni.getMenuButtonBoundingClientRect()
      //计算组件高度
      this.statusBarHeight = this.system.statusBarHeight //状态栏高度
      this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
      this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
      this.menuHeight = this.menu.height //胶囊高度
      this.menuTop = this.menu.top //胶囊与顶部的距离
      //监听【更多】组件距离顶部的距离
      const query = wx.createSelectorQuery()
      query.select('#more').boundingClientRect()
      query.exec((res) => {
        //console.log(res)
        let top = res[0].bottom //id节点的下边界坐标        
        this.theMoreTop = top + this.totalHeight
      })
      // 计算头部距离结束
    },
    methods: {
      // 选择时间开始
      // 选择日期
      bindDateChange: function(e) {
        this.start_date = e.target.value
        this.otherEnd = this.start_date;
      },
      bindDateChange2: function(e) {
        this.end_date = e.target.value;
        this.other = this.end_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}`;
      },
      // 选择时间结束
      // 点击切换选项
      tabClick(index) {
        if (index == 0) {
          this.indexTab = 0
        } else {
          this.indexTab = 1
        }
      },
      // 点击我的
      myClick() {
        // uni.redirectTo({ //这个是公司路由
        //  url: '/pages/clientDitch/firmMy'
        // })
        uni.redirectTo({ //这个是个人路由
          url: '/pages/clientDitch/personMy'
        })
      },
      // 点击首页
      indexClick() {
        uni.redirectTo({
          url: '/pages/clientDitch/ditchIndex'
        })
      },
      // showMore() {
      //  this.isShow = !this.isShow
      //  // 先展开500毫秒后再显示文字,收缩100毫秒后再隐藏文字
      //  if (this.isShowText) {
      //    setTimeout(() => {
      //      this.isShowText = !this.isShowText
      //    }, 200)
      //  } else {
      //    setTimeout(() => {
      //      this.isShowText = !this.isShowText
      //    }, 500)
      //  }
      // }
    }
  }
</script>
<style lang="scss" scoped>
  .ditchIndex {
    .search-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      background: #fff;
      position: fixed;
      z-index: 99;
      .title {
        width: 100%;
        background: #fff;
        text-align: center;
        overflow: hidden;
        position: relative;
        .img {
          position: absolute;
          width: 44rpx !important;
          height: 44rpx !important;
          float: left;
          margin-left: 30rpx;
          margin-top: 5rpx;
        }
      }
    }
    .bottomBtn {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      background: #FFFFFF;
      position: fixed;
      bottom: 0;
      .btnTxt {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20rpx;
        color: #999999;
        width: 33.3%;
        .icon {
          width: 44rpx !important;
          height: 44rpx !important;
          margin-bottom: 4rpx;
          margin-top: 8rpx;
        }
      }
    }
    .tabBox {
      width: 100%;
      height: 100rpx;
      background: red;
      position: fixed;
      top: 0;
      display: flex;
      .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        height: 100%;
        background: #FFFFFF;
        .txt {
          font-size: 32rpx;
          color: #222222;
          margin-top: 28rpx;
        }
        .border {
          width: 60rpx;
          height: 6rpx;
          background: #4281EA;
          border-radius: 3rpx;
          margin-top: 21rpx;
        }
        .addTab {
          font-weight: bold !important;
          color: #222222 !important;
        }
      }
    }
    .ditchMain {
      margin-right: 30rpx;
      margin-left: 30rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      .clientBox {
        margin-right: 30rpx;
        margin-left: 30rpx;
        .clientTime {
          .timeBox{
            display: flex;
            align-items: center;
            height: 60rpx;
            border: 1rpx solid #ECECEC;
            opacity: 1;
            border-radius: 10rpx;
            .timeImg{
              width: 30rpx !important;
              height: 30rpx !important;
              margin-left: 20rpx;
            }
          }
          // ===
          .leave_cont .ul {
            padding-left: 30rpx;
          }
          .leave_cont .ul .li {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #efefef;
          }
          .leave_cont .ul .li text {
            padding: 40rpx 0;
            font-size: 34rpx;
            font-family: '黑体';
          }
          .leave_cont .ul .li .flex1 {
            flex: 1;
            text-align: right;
            padding-right: 25rpx;
            color: #999999;
            font-size: 32rpx;
          }
          .date {
            height: 42rpx;
          }
        }
        .clientsList {}
      }
    }
  }
</style>