|
|
@@ -0,0 +1,241 @@
|
|
|
+<template>
|
|
|
+ <view class="time-horizon">
|
|
|
+ <view class="placeholder" @click="show = true">
|
|
|
+ {{ showTitle || placeholder }}
|
|
|
+ </view>
|
|
|
+ <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="true" @close="show = false">
|
|
|
+ <view class="title">
|
|
|
+ 快捷查询日期范围
|
|
|
+ </view>
|
|
|
+ <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 class="item" :class="day == 60 ? 'active' : ''" @click="fast(60)">
|
|
|
+ 60天
|
|
|
+ </view>
|
|
|
+ <view style="width: 10px;" />
|
|
|
+ <u-number-box :value="day" @change="valChange" />
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="title">
|
|
|
+ 自定义日期范围
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <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 class="bottom">
|
|
|
+ <view class="bot" @click="show = false" hover-class="navigator-hover">
|
|
|
+ 关闭
|
|
|
+ </view>
|
|
|
+ <view @click="reset" class="bot reset" hover-class="navigator-hover">
|
|
|
+ 重置
|
|
|
+ </view>
|
|
|
+ <view v-if="loading" class="bot confirm" hover-class="navigator-hover">
|
|
|
+ <u-loading-icon color="#007aff" mode="semicircle" /> 查询中...
|
|
|
+ </view>
|
|
|
+ <view v-else class="bot confirm" @click="confirm" hover-class="navigator-hover">
|
|
|
+ 查询
|
|
|
+ </view><!-- :class="begindate && enddate ? '' : 'disabled'" -->
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { formatTime } from "../utils/getTime";
|
|
|
+export default {
|
|
|
+ name: "timeHorizon",
|
|
|
+ props: {
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: "查询日期范围"
|
|
|
+ },
|
|
|
+ onConfirm: Function
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ show: false,
|
|
|
+ day: 0,
|
|
|
+ begindate: "",
|
|
|
+ enddate: '',
|
|
|
+ showTitle: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.day = 0;
|
|
|
+ this.begindate = "";
|
|
|
+ this.enddate = "";
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$emit('onConfirm', [this.begindate, this.enddate], () => {
|
|
|
+ this.loading = false;
|
|
|
+ this.show = false;
|
|
|
+ this.showTitle = this.begindate && this.enddate ? this.begindate + ' 至 ' + this.enddate : ""
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.disabled {
|
|
|
+ opacity: .7;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ line-height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px solid #ddd;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #CCCCCC;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reset {
|
|
|
+ border-color: #0B3F7E;
|
|
|
+ color: #0B3F7E;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm {
|
|
|
+ border-color: #0B3F7E;
|
|
|
+ background-color: #0B3F7E;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-button {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-button__text {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
