移动端vue结合vant组件实现时间的选择

样式如下

image.png

结构如下

   <div class="top_bar">
      // 自定义下拉框
      <van-dropdown-menu active-color="#009E96" :close-on-click-outside="false">
        <van-dropdown-item :title="timeTitle" ref="item">
          <template>
            <div class="menu_item_wrap">
              <p>交易时间</p>
              <div class="three_button">
                <div :class="{active: newDate=='7'}" @click="goDate('7')">近一周</div>
                <div :class="{active: newDate=='30'}" @click="goDate('30')">近一月</div>
                <div :class="{active: newDate=='90'}" @click="goDate('90')">近三月</div>
              </div>
              <p>自定义</p>
              <div class="select_date">
                <div class="date left" @click="goShow('showStartDate',true)">{{StartDate}}<i></i></div>
                <span>至</span>
                <div class="date right" @click="goShow('showEndDate',true)">{{EndDate}}<i></i></div>
                <button @click="confirm()">确定</button>
              </div>
            </div>
          </template>
        </van-dropdown-item>
        // 下拉框去掉options+Popup 弹出层实现
        <van-dropdown-item ref="item2" :title="stateTitle" @open="goShow('showOpenAcc',true)" @close="goShow('showOpenAcc',false)" />
      </van-dropdown-menu>
    </div>

<van-popup v-model="showStartDate" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @cancel="goShow('showStartDate',false)" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-popup v-model="showEndDate" position="bottom">
      <van-datetime-picker v-model="currentDate2" type="date" @cancel="goShow('showEndDate',false)" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-popup v-model="showOpenAcc" position="bottom" @close="confirm">
      // 自定义弹出层里面的样式
      <p class="acc_title">
        <span></span>
        <span>选择账户</span>
        <span>取消</span>
      </p>
      <ul class="acc_item_wrap">
        <li class="acc_item" v-for="i in AcctNoList" :key="i" @click="goSelect(i)">
          <div><img src="@/assets/image/personal/gongshangyinhang1.png" alt=""><span>{{i}}</span></div>
          <div :class="{select:i==stateTitle,active:i==stateTitle}"></div>
        </li>
      </ul>
    </van-popup>

css样式

.menu_item_wrap {
        padding: 8px 0 20px;
        p {
          padding: 12px 16px;
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
        }
        .three_button {
          padding: 0 16px;
          display: flex;
          div {
            font-size: 14px;
            padding: 5px 19px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            border-radius: 2px;
            border: 1px solid rgba(213, 213, 213, 1);
            line-height: 20px;
            margin-right: 10px;
          }
          div.active {
            color: rgba(0, 158, 150, 1);
            border: 1px solid rgba(0, 158, 150, 1);
            background: url("~@/assets/image/personal/xuanze.png") no-repeat;
            background-position-x: 100%;
            background-size: 17px;
          }
        }
        .select_date {
          display: flex;
          padding: 0 16px;
          justify-items: center;
          span {
            margin-left: 10px;
            margin-right: 10px;
            line-height: 30px;
          }
          button {
            height: 30px;
            background: rgba(255, 255, 255, 1);
            border-radius: 2px;
            border: 1px solid rgba(0, 158, 150, 1);
            margin-left: 10px;
            width: 73px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 158, 150, 1);
            text-align: center;
          }
          .date {
            height: 30px;
            padding: 5px 8px;
            width: 130px;
            background: rgba(247, 247, 247, 1);
            border-radius: 2px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            display: flex;
            align-items: center;
            i {
              height: 16px;
              width: 16px;
              line-height: 30px;
              display: inline-block;
              background: url("~@/assets/image/personal/up_arrow.png") no-repeat;
              background-size: cover;
              margin-right: 4px;
            }
          }

逻辑实现

 data () {
    return {
      newDate: '',
      currentDate: new Date(),
      currentDate2: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      RedeAmt: '',
      PayerAcctNo: '',
      showAcctNo: false,
      showStartDate: false,
      showOver: true,
      Start: null,
      showEndDate: false,
      timeTitle: '',
      stateTitle: '',
      showOpenAcc: false,
      isSelect: true,
      StartDate: '',
      EndDate: '',
      AcctNoList: [],
      List: [],
      PageNumber: 0,
      PageSize: '10'
    }
  },
  created () {
    this.goDate('30')
    this.getAcctNo()
    this.timeTitle = this.StartDate.replace(/-/g, '.') + '-' + this.EndDate.replace(/-/g, '.')
  },
  watch: {
    timeTitle (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.PageNumber = 0
        this.getData()
      }
    },
    stateTitle (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.PageNumber = 0
        this.getData()
      }
    }
  },
methods:{
  confirm () {
      this.timeTitle = this.StartDate.replace(/-/g, '.') + '-' + this.EndDate.replace(/-/g, '.')
      this.$refs.item.toggle(false)
      this.$refs.item2.toggle(false)
    },
    goSelect (row) {
      this.stateTitle = row
      console.log(this.stateTitle)
      this.goShow('showOpenAcc', false)
    },
    goShow (val, bool) {
      this[val] = bool
      console.log(this[val])
    },
    goDate (val) {
      this.newDate = val
      if (this.Start) {
        var nDate = this.Start
      } else {
        var nDate = new Date()
      }
      console.log('newDate---',nDate)

      var List = utils.getDateRange(nDate, val)
      console.log('list---',List)
      this.StartDate = List[0]
      this.currentDate = new Date(this.StartDate)
      this.EndDate = List[List.length - 1]
      this.currentDate2 = new Date(this.EndDate)
    },
    onConfirm (value) {
      if (this.showStartDate) {
        this.Start = value
        this.StartDate = utils.timeFormat(value, 'yyyy-mm-dd')
        this.goShow('showStartDate', false)
      } else if (this.showEndDate) {
        this.End = value
        this.EndDate = utils.timeFormat(value, 'yyyy-mm-dd')
        this.goShow('showEndDate', false)
      } else if (this.showAcctNo) {
        this.PayerAcctNo = value
        // this.Currency = this.Curren[index];
        this.goShow('showAcctNo', false)
      }
    },
 }

image.png

两个公共方法

const timeFormat = (value, format) => {
  let date = new Date(value)
  let y = date.getFullYear()
  let m = date.getMonth() + 1
  let d = date.getDate()
  let h = date.getHours()
  let min = date.getMinutes()
  let s = date.getSeconds()
  let result = ''
  if (format == undefined) {
    result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${
      h < 10 ? '0' + h : h
    }:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
  }
  if (format == 'yyyy-mm-dd') {
    result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
  }
  if (format == 'yyyymmdd') {
    result = `${y}${m < 10 ? '0' + m : m}${d < 10 ? '0' + d : d}`
  }
  if (format == 'yyyy-mm') {
    result = `${y}-${m < 10 ? '0' + m : m}`
  }
  if (format == 'mm-dd') {
    result = ` ${mm < 10 ? '0' + mm : mm}:${ddmin < 10 ? '0' + dd : dd}`
  }
  if (format == 'hh:mm') {
    result = ` ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`
  }
  if (format == 'yyyy') {
    result = `${y}`
  }
  return result
}

const getDateRange = (dateNow, intervalDays, bolPastTime) => {
  function formateDate (time) {
    let year = time.getFullYear()
    let month = time.getMonth() + 1
    let day = time.getDate()

    if (month < 10) {
      month = '0' + month
    }

    if (day < 10) {
      day = '0' + day
    }

    return year + '-' + month + '-' + day + ''
  }
  let oneDayTime = 24 * 60 * 60 * 1000
  let list = []
  let lastDay
  if (bolPastTime == true) {
    lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime)
    list.push(formateDate(lastDay))
    list.push(formateDate(dateNow))
  } else {
    lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime)
    list.push(formateDate(dateNow))
    list.push(formateDate(lastDay))
  }
  console.log(list, 'list')
  return list
}

具体可以参考个人网银app的detailSearch.vue文件