123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- <template>
- <!
- <view>
- <view class="dataList">
- <view class="times">
- <view class="item" :class="time == 'all' ? 'on' : ''" @click="setTime('all')">全部</view>
- <view class="item" :class="time == 'today' ? 'on' : ''" @click="setTime('today')">今天</view>
- <view class="item" :class="time == 'yesterday' ? 'on' : ''" @click="setTime('yesterday')">昨天</view>
- <view class="item" :class="time == 'seven' ? 'on' : ''" @click="setTime('seven')">近7天</view>
- </view>
- <view class="item" :class="time == 'date' ? 'on' : ''" @click="dateTitle">自定义时间 <text
- class="iconfont icon-xiangxia aaa"></text></view>
- </view>
- <uni-calendar ref="calendar" :date="info.date" :insert="info.insert" :lunar="info.lunar"
- :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm"
- :showMonth="info.showMonth" />
- <view class="mask" @touchmove.prevent v-show="current === true" @click="close"></view>
- <Loading :loaded="loaded" :loading="loading"></Loading>
- </view>
- </template>
- <script>
- import Loading from '@/components/Loading/index.vue'
- import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
- const year = new Date().getFullYear();
- const month = new Date().getMonth() + 1;
- const day = new Date().getDate();
- export default {
- components: {
- uniCalendar,
- Loading
- },
- data() {
- return {
- time:'all',
- current: false,
- loaded: false,
- loading: false,
- info: {
- startDate: '',
- endDate: '',
- lunar: false,
- range: true,
- insert: false,
- selected: [],
- showMonth: false
- },
- where: {
- start: "",
- stop: "",
- },
- }
- },
- methods: {
- close() {
- this.current = false;
- },
- // 日历确定
- confirm(e) {
- console.log(e)
- let self = this
- let star, stop;
- if (e.range.after && e.range.before) {
- if (e.range.before > e.range.after) {
- star = new Date(e.range.after + ' 00:00:00').getTime() / 1000
- stop = new Date(e.range.before + ' 23:59:59').getTime() / 1000
- } else {
- star = new Date(e.range.before + ' 00:00:00').getTime() / 1000
- stop = new Date(e.range.after + ' 23:59:59').getTime() / 1000
- }
- self.where.start = star
- self.where.stop = stop
- self.loaded = false;
- self.loading = false;
- // Promise.all();
- this.$emit('changeTime', this.where)
- }
- },
- dateTitle() {
- this.$refs.calendar.open()
- this.time = 'date'
- },
- setTime(time) {
- let self = this
- this.time = time;
- var year = new Date().getFullYear(),
- month = new Date().getMonth() + 1,
- day = new Date().getDate();
- this.tip = 1
- this.loaded = false;
- this.loading = false;
- switch (time) {
- case "all":
- this.where.start = 0
- this.where.stop = 0
- this.title = "全部";
- this.$emit('changeTime', this.where)
- break;
- case "today":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 1;
- this.title = "今日";
- this.$emit('changeTime', this.where)
- break;
- case "yesterday":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 -
- 24 * 60 * 60;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 -
- 1;
- this.title = "昨日";
- this.$emit('changeTime', this.where)
- break;
- case "month":
- this.where.start =
- new Date(year, new Date().getMonth(), 1).getTime() / 1000;
- this.where.stop = new Date(year, month, 1).getTime() / 1000 - 1;
- this.title = "本月";
- this.$emit('changeTime', this.where)
- break;
- case "seven":
- this.where.start =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 7 * 3600 * 24;
- this.where.stop =
- new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
- 1000 +
- 24 * 60 * 60 -
- 1;
- this.title = "七日";
- this.$emit('changeTime', this.where)
- break;
- // #ifdef MP
- case "date":
- let star = new Date(self.before).getTime() / 1000
- let stop = new Date(self.after).getTime() / 1000
- self.where.start = star
- self.where.stop = stop
- Promise.all([self.getList()]);
- this.$emit('changeTime', this.where)
- break;
- // #endif
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .dataList {
- display: flex;
- justify-content: space-between;
- padding: 24rpx 30rpx;
- background-color: #fff;
- color: #666666;
- font-size: 26rpx;
- width: 100%;
- box-sizing: border-box;
- .times {
- display: flex;
- .item {
- margin-right: 20rpx;
- background: #F5F5F5;
- padding: 10rpx 20rpx;
- border-radius: 30rpx;
- }
- .item.on {
- color: var(
- background-color: var(
- }
- }
- .item{
- padding: 10rpx 0rpx;
- }
- }
- .aaa {
- padding-left: 10rpx;
- font-size: 20rpx !important;
- }
- </style>
|