/**
|
* 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"
|
>
|
<AtDrawer
|
class="c-data-range-drawer"
|
ref="floatDrawer"
|
mask
|
:show="drawerShow"
|
:onClose="evt => drawerShow=false"
|
>
|
<view class="title">请选择日期</view>
|
<view class="date">
|
<picker
|
mode='date'
|
: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'
|
: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>
|
</AtDrawer>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Taro from '@tarojs/taro';
|
import { $ } from '@tarojs/extend';
|
import { AtDrawer, AtButton } from 'taro-ui-vue';
|
import './cDateRangeAction.scss';
|
|
export default {
|
name: 'CDateRangeAction',
|
components: {
|
AtDrawer,
|
AtButton,
|
},
|
props: {
|
value: null,
|
onChange: Function,
|
},
|
data() {
|
return {
|
drawerShow: false,
|
startDate: '',
|
endDate: '',
|
};
|
},
|
computed: {},
|
methods: {
|
handleOpen() {
|
this.drawerShow = true;
|
const curDates = (this.value || ',').split(',');
|
this.startDate = curDates[0];
|
this.endDate = curDates[1];
|
},
|
handleStartDateChange(date) {
|
this.startDate = date;
|
},
|
handleEndDateChange(date) {
|
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>
|
