WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-11-04 32f26895d72fdebb6bb4f8dceaa3ecd782dc07c5
forms/datePicker/CDateRangeAction.vue
@@ -15,17 +15,19 @@
            class="c-data-range-float"
            ref="floadLayer"
        >
            <AtDrawer
            <CDrawer
                class="c-data-range-drawer"
                ref="floatDrawer"
                mask
                direction="top"
                :show="drawerShow"
                :onClose="evt => drawerShow=false"
                :onClose="evt => handleClose()"
            >
                <view class="title">请选择日期</view>
                <view class="title">
                    <view v-if="placeholder">{{placeholder}}</view>
                    <view v-else>请选择日期</view>
                </view>
                <view class="date">
                    <picker
                        mode='date'
                        mode="date"
                        :value="startDate"
                        @change="evt => handleStartDateChange(evt.detail.value)"
                    >
@@ -38,7 +40,7 @@
                        </view>
                    </picker>
                    <picker
                        mode='date'
                        mode="date"
                        :value="endDate"
                        @change="evt => handleEndDateChange(evt.detail.value)"
                    >
@@ -58,7 +60,7 @@
                    :circle="false"
                    :onClick="evt => handleFinish()"
                >确定</AtButton>
            </AtDrawer>
            </CDrawer>
        </view>
    </view>
</template>
@@ -67,6 +69,7 @@
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 {
@@ -74,10 +77,15 @@
    components: {
        AtDrawer,
        AtButton,
        CDrawer,
    },
    props: {
        value: null,
        // 项值
        value: String,
        // 变化回调
        onChange: Function,
        // 占位提示
        placeholder: String,
    },
    data() {
        return {
@@ -94,10 +102,39 @@
            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() {