我的订单查询 高级搜索 添加时间选择快捷方式

src/views/myOrder/components/HighSearch.vue

@@ -6,6 +6,11 @@
         position="right"
         :style="{ width: '75%',height: '100%', overflow: 'hidden' }">
         <div class="title font-bold font-16">下单时间</div>
+        <van-row type="flex" justify="space-around" class="commn-padding">
+          <van-col class="text-center" v-for="(item,index) in dataType" :key="index">
+            <van-tag :plain="!item.active" color="#1989fa" size="large" round @click="onQuickDateChoose(index)">{{item.name}}</van-tag>
+          </van-col>
+        </van-row>
         <time-choose :startTime="moreSearchInfo.time.start" :endTime="moreSearchInfo.time.end" @confirm="timeConfirm"></time-choose>
         <div class="high-info-list">
           <div class="high-info" @click="showPost('consignor')">
@@ -145,7 +150,29 @@ export default {
       chinfo: {
         goodsId: '',
         supplier: ''
+      },
+       dataType: [
+        {
+          name: '本日',
+          active: true
+        },
+        {
+          name: '本周',
+          active: false
+        },
+        {
+          name: '本月',
+          active: false
+        },
+        {
+          name: '本季',
+          active: false
+        },
+        {
+          name: '本年',
+          active: false
         }
+      ]
     }
   },
   computed: {
@@ -288,6 +315,164 @@ export default {
     // 商品信息拼接
     consignorInfoStitching(model) {
       return model.comGoodsId + '/(' + model.goodsOpcode + ')' + model.goodsName + '/' + model.goodsDesc + '/' + model.partyName + '/' + model.packageNum + '/' + model.unitName
+    },
+    onQuickDateChoose(index, tag) {
+      let _this = this
+      _this.dataType = this.dataType.map(item => {
+        item.active = false
+        return item
+      })
+      _this.dataType[index].active = true
+      switch (_this.dataType[index].name) {
+        case '本年':
+          _this.showCustomizeDate = false
+          _this.getCurrentYear()
+          break
+        case '本季':
+          _this.showCustomizeDate = false
+          _this.getCurrentSeason()
+          break
+        case '本月':
+          _this.showCustomizeDate = false
+          _this.getCurrentMonth()
+          break
+        case '本周':
+          _this.showCustomizeDate = false
+          _this.getCurrentWeek()
+          break
+        case '本日':
+          _this.showCustomizeDate = false
+          _this.getCurrentDate()
+          break
+        case '自定义':
+          _this.showCustomizeDate = true
+          break
+      }
+      // console.log(tag, _this.$refs[tag])
+    },
+    // 获取当年的开始与结束日期
+    getCurrentYear() {
+      // 起止日期数组
+      // var startStop = []
+      // 获取当前时间
+      var currentDate = new Date()
+      // 获得当前年份4位年
+      var currentYear = currentDate.getFullYear()
+
+      // 本年第一天
+      var currentYearFirstDate = new Date(currentYear, 0, 1)
+      // 本年最后一天
+      // var currentYearLastDate = new Date(currentYear, 11, 31)
+      var currentYearLastDate = new Date()
+      // 添加至数组
+      // startStop.push(currentYearFirstDate)
+      // startStop.push(currentYearLastDate)
+      this.moreSearchInfo.time.start = getFormateDate(currentYearFirstDate, 'yyyy-MM-dd')
+      this.moreSearchInfo.time.end = getFormateDate(currentYearLastDate, 'yyyy-MM-dd')
+      // 返回
+      // return startStop
+    },
+    // 获取当前季度的开始与结束日期
+    getCurrentSeason() {
+      // 起止日期数组
+      // var startStop = []
+      // 获取当前时间
+      var currentDate = new Date()
+      // 获得当前月份0-11
+      var currentMonth = currentDate.getMonth()
+      // 获得当前年份4位年
+      var currentYear = currentDate.getFullYear()
+      // 获得本季度开始月份
+      var quarterSeasonStartMonth = this.getQuarterSeasonStartMonth(currentMonth)
+      // 获得本季度结束月份
+      var quarterSeasonEndMonth = quarterSeasonStartMonth + 2
+
+      // 获得本季度开始的日期
+      var quarterSeasonStartDate = new Date(currentYear, quarterSeasonStartMonth, 1)
+      // 获得本季度结束的日期
+      // var quarterSeasonEndDate = new Date(currentYear, quarterSeasonEndMonth, this.getMonthDays(currentYear, quarterSeasonEndMonth))
+      var quarterSeasonEndDate = new Date()
+      // 加入数组返回
+      // startStop.push(quarterSeasonStartDate)
+      // startStop.push(quarterSeasonEndDate)
+      // 返回
+      // return startStop
+
+      this.moreSearchInfo.time.start= getFormateDate(quarterSeasonStartDate, 'yyyy-MM-dd')
+      this.moreSearchInfo.time.end = getFormateDate(quarterSeasonEndDate, 'yyyy-MM-dd')
+    },
+    // 获取当月的开始与结束日期
+    getCurrentMonth () {
+      // 起止日期数组
+      // var startStop = []
+      // 获取当前时间
+      var currentDate = new Date()
+      // 获得当前月份0-11
+      var currentMonth = currentDate.getMonth()
+      // 获得当前年份4位年
+      var currentYear = currentDate.getFullYear()
+      // 求出本月第一天
+      var firstDay = new Date(currentYear, currentMonth, 1)
+
+      // 当为12月的时候年份需要加1
+      // 月份需要更新为0 也就是下一年的第一个月
+      if (currentMonth == 11) {
+        currentYear++
+        currentMonth = 0 // 就为
+      } else {
+        // 否则只是月份增加,以便求的下一月的第一天
+        currentMonth++
+      }
+
+      // 一天的毫秒数
+      var millisecond = 1000 * 60 * 60 * 24
+      // 下月的第一天
+      var nextMonthDayOne = new Date(currentYear, currentMonth, 1)
+      // 求出上月的最后一天
+      // var lastDay = new Date(nextMonthDayOne.getTime() - millisecond)
+      var lastDay = new Date()
+      // 添加至数组中返回
+      // startStop.push(firstDay)
+      // startStop.push(lastDay)
+      this.moreSearchInfo.time.start = getFormateDate(firstDay, 'yyyy-MM-dd')
+      this.moreSearchInfo.time.end = getFormateDate(lastDay, 'yyyy-MM-dd')
+      // 返回
+      // return startStop
+    },
+    // 获得当前星期的开始与结束日期
+    getCurrentWeek () {
+      // 起止日期数组
+      // var startStop = []
+      // 获取当前时间
+      var currentDate = new Date()
+      // 返回date是一周中的某一天
+      var week = currentDate.getDay()
+      // 返回date是一个月中的某一天
+      // var month = currentDate.getDate()
+
+      // 一天的毫秒数
+      var millisecond = 1000 * 60 * 60 * 24
+      // 减去的天数
+      var minusDay = week != 0 ? week - 1 : 6
+      // alert(minusDay);
+      // 本周 周一
+      var monday = new Date(currentDate.getTime() - (minusDay * millisecond))
+      // 本周 周日
+      // var sunday = new Date(monday.getTime() + (6 * millisecond))
+      var sunday = new Date()
+      // 添加本周时间
+      // startStop.push(monday) // 本周起始时间
+      // // 添加本周最后一天时间
+      // startStop.push(sunday) // 本周终止时间
+      // 返回
+      // return startStop
+      this.moreSearchInfo.time.start = getFormateDate(monday, 'yyyy-MM-dd')
+      this.moreSearchInfo.time.end = getFormateDate(sunday, 'yyyy-MM-dd')
+    },
+    // 获取当天的日期
+    getCurrentDate() {
+      this.moreSearchInfo.time.start = getFormateDate(new Date(), 'yyyy-MM-dd')
+      this.moreSearchInfo.time.end = getFormateDate(new Date(), 'yyyy-MM-dd')
     }
   }
 }
@@ -298,6 +483,11 @@ export default {
     box-sizing: border-box;
   }
   .more-search {
+    .commn-padding{
+      padding: 10px 15px;
+      line-height: 24px;
+      border-bottom: 1px solid #eee;
+    }
     .title {
       margin: 30PX 0 0 15PX
     }