/**
|
* CDateRangeAction - 选择日期范围操作
|
* @author Tevin
|
*/
|
|
<template>
|
<view class="c-date-range-action">
|
<view
|
class="c-date-range-slot"
|
@tap="evt => handleOpen()"
|
>
|
<slot />
|
</view>
|
<view
|
class="c-data-range-float"
|
ref="floadLayer"
|
>
|
<CDrawer
|
class="c-data-range-drawer"
|
direction="top"
|
:show="drawerShow"
|
:onClose="evt => handleClose()"
|
>
|
<view class="title">
|
<view v-if="placeholder">{{placeholder}}</view>
|
<view v-else>请选择日期</view>
|
</view>
|
<view class="date">
|
<picker
|
mode="date"
|
:start="pickerStart"
|
:end="pickerEnd"
|
:value="startDate"
|
@change="evt => handleStartDateChange(evt.detail.value)"
|
>
|
<view class="item">
|
<view class="label">开始日期</view>
|
<view :class="startDate?'filled':'empty'">
|
{{ startDate?startDate:'请选择开始日期' }}
|
</view>
|
<view class="at-icon at-icon-chevron-right" />
|
</view>
|
</picker>
|
<picker
|
mode="date"
|
:start="pickerStart"
|
:end="pickerEnd"
|
:value="endDate"
|
@change="evt => handleEndDateChange(evt.detail.value)"
|
>
|
<view class="item">
|
<view class="label">结束日期</view>
|
<view :class="endDate?'filled':'empty'">
|
{{ endDate?endDate:'请选择结束日期' }}
|
</view>
|
<view class="at-icon at-icon-chevron-right" />
|
</view>
|
</picker>
|
</view>
|
<AtButton
|
class="btn"
|
type="primary"
|
full
|
:circle="false"
|
:onClick="evt => handleFinish()"
|
>确定</AtButton>
|
</CDrawer>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { $ } from '@tarojs/extend';
|
import { AtDrawer, AtButton } from 'taro-ui-vue';
|
import { CDrawer } from '@components/layout/drawer';
|
import './cDateRangeAction.scss';
|
|
export default {
|
name: 'CDateRangeAction',
|
components: {
|
AtDrawer,
|
AtButton,
|
CDrawer,
|
},
|
props: {
|
// 项值
|
value: String,
|
// 变化回调
|
onChange: Function,
|
// 占位提示
|
placeholder: String,
|
},
|
data() {
|
const year = new Date().getFullYear();
|
return {
|
drawerShow: false,
|
startDate: '',
|
endDate: '',
|
pickerStart: year - 30 + '-01-01',
|
pickerEnd: year + 30 + '-12-31',
|
};
|
},
|
computed: {},
|
methods: {
|
handleOpen() {
|
this.drawerShow = true;
|
const curDates = (this.value || ',').split(',');
|
this.startDate = curDates[0];
|
this.endDate = curDates[1];
|
},
|
handleClose() {
|
this.drawerShow = false;
|
},
|
handleStartDateChange(date) {
|
if (date && this.endDate) {
|
const startTime = new Date(date);
|
const endTime = new Date(this.endDate);
|
if (startTime > endTime) {
|
Taro.showToast({
|
title: '开始日期不能晚于结束日期！',
|
icon: 'none',
|
mask: true,
|
duration: 2000,
|
});
|
return;
|
}
|
}
|
this.startDate = date;
|
},
|
handleEndDateChange(date) {
|
if (date && this.startDate) {
|
const startTime = new Date(this.startDate);
|
const endTime = new Date(date);
|
if (startTime > endTime) {
|
Taro.showToast({
|
title: '结束日期不能早于开始日期！',
|
icon: 'none',
|
mask: true,
|
duration: 2000,
|
});
|
return;
|
}
|
}
|
this.endDate = date;
|
},
|
handleFinish() {
|
this.drawerShow = false;
|
if (!this.startDate && !this.endDate) {
|
this.onChange();
|
} else {
|
this.onChange(this.startDate + ',' + this.endDate);
|
}
|
},
|
},
|
mounted() {
|
const $cFilter = $(this.$refs.floadLayer).parents('.c-filter');
|
if ($cFilter.length > 0) {
|
$cFilter.eq(0).after(this.$refs.floadLayer);
|
}
|
},
|
};
|
</script>
|
