修改时间区间

components/My_filter.vue

@@ -19,6 +19,39 @@
                     <view class="label">
                         时间区间
                     </view>
+                    <view class="date-box">
+                        <scroll-view :scroll-x="true">
+                            <view class="options">
+                                <view class="item" :class="day == 1 ? 'active' : ''" @click="fast(1)">
+                                    今天
+                                </view>
+                                <view class="item" :class="day == 7 ? 'active' : ''" @click="fast(7)">
+                                    7天
+                                </view>
+                                <view class="item" :class="day == 30 ? 'active' : ''" @click="fast(30)">
+                                    30天
+                                </view>
+                                <view style="width: 10px;" />
+                                <u-number-box :value="day" @change="valChange" />
+                            </view>
+                        </scroll-view>
+                        <view class="row" style="margin-top: 20px">
+                            <picker mode="date" class="date-box" :style="{ color: begindate ? '#333' : '#ddd' }"
+                                :value="begindate" data-name="begindate" :end="enddate" @change="onDateChange">
+                                {{ begindate || '开始日期' }}
+                            </picker>
+                            <view style="padding: 0 10px;">
+                                -
+                            </view>
+                            <picker mode="date" class="date-box" :style="{ color: enddate ? '#333' : '#ddd' }"
+                                :value="enddate" data-name="enddate" @change="onDateChange" :start="begindate">
+                                {{ enddate || '结束日期' }}
+                            </picker>
+                        </view>
+
+                    </view>
+
+                    <!-- 
                     <view class="row">
                         区间：<picker mode="date" class="date-box" :style="{ color: begindate ? '#333' : '#ddd' }"
                             :value="begindate" data-name="begindate" :start="start" :end="enddate" @change="onDateChange">
@@ -32,6 +65,7 @@
                             {{ enddate || '结束日期' }}
                         </picker>
                     </view>
+                     -->
                 </block>
             </My_listbox>
             <view id="bottom">
@@ -56,6 +90,8 @@
 </template>
 
 <script>
+import { formatTime } from "../utils/getTime";
+
 export default {
     name: 'My_filter',
     props: {
@@ -98,6 +134,7 @@ export default {
         return {
             show: false,
             CustomBar: this.CustomBar,
+            day: 0,
             begindate: "",
             enddate: "",
             filter: [],
@@ -126,6 +163,7 @@ export default {
                 v.selectIndex = v.default || null;
                 return v
             });
+            this.day = 0;
             this.begindate = "";
             this.enddate = "";
         },
@@ -143,9 +181,25 @@ export default {
             this.loading = true;
             this.$emit("onConfirm", obj)
         },
+        fast(num) {
+            this.day = num;
+            let now = new Date().getTime(),
+                end = now + 86400000,
+                beg = end - (num * 86400000);
+            this.begindate = formatTime(new Date(beg)).split(' ')[0];
+            this.enddate = formatTime(new Date(end)).split(' ')[0];
+        },
+        valChange(e) {
+            this.fast(e.value)
+        },
         onDateChange(e) {
             this[e.target.dataset.name] = e.detail.value;
-        }
+            if (this.begindate && this.enddate) {
+                let end = new Date(this.enddate).getTime(),
+                    beg = new Date(this.begindate).getTime();
+                this.day = (end - beg) / 86400000;
+            }
+        },
     },
 }
 </script>
@@ -158,6 +212,66 @@ export default {
     padding: 15px 10px 10px;
 }
 
+.date-box {
+
+    .options {
+        display: flex;
+
+        .item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #F5F5F5;
+            border-radius: 4px;
+            margin-left: 10px;
+            font-size: 14px;
+            color: #333333;
+            overflow: hidden;
+            box-sizing: border-box;
+            padding: 6px 12px;
+            flex-shrink: 0;
+        }
+
+        .active {
+            background: #0B3F7E !important;
+            color: #FFFFFF !important;
+        }
+
+        /deep/ .u-number-box__minus,
+        /deep/.u-number-box__input,
+        /deep/.u-number-box__plus {
+            height: 30px !important;
+        }
+
+        /deep/ .u-number-box__input {
+            width: 35px !important;
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #646566;
+        padding: 10px;
+        padding-top: 0;
+        border-bottom: 1px solid #ddd;
+        box-sizing: border-box;
+
+        .date-box {
+            flex: 1;
+            height: 35px;
+            line-height: 35px;
+            background: #FFFFFF;
+            border-radius: 4px;
+            border: 1px solid #CCCCCC;
+            font-size: 14px;
+            padding-left: 10px;
+        }
+    }
+
+}
+
 .value-box {
     display: flex;
     flex-wrap: wrap;