admission-uniapp/src/components/date-dropdown/daterange.vue

<template>
    <view class="da-dropdown-daterange-box">
        <view class="da-dropdown-daterange">
            <view class="da-dropdown-daterange--date" :class="daterange.start ? 'is-actived' : ''">
                <picker mode="date" :value="daterange.start" @change="handleStartDate">
                    {{ daterange.start || '请选择日期' }}
                </picker>
            </view>
            <view class="da-dropdown-daterange--separate">至</view>
            <view class="da-dropdown-daterange--date" :class="daterange.end ? 'is-actived' : ''">
                <picker
                    mode="date"
                    :value="daterange.end"
                    :disabled="!daterange.start"
                    :start="daterange.start"
                    @change="handleEndDate"
                >
                    {{ daterange.end || '请选择日期' }}
                </picker>
            </view>
        </view>
        <view class="da-dropdown-daterange-tags" v-if="dropdownItem.showQuick">
            <block v-for="(tag, tagi) in dateTagList" :key="tagi">
                <view
                    class="da-dropdown-tag"
                    :class="datetag === tag.value ? 'is-actived' : ''"
                    @click="handleTagDate(tag.value)"
                >
                    <text class="da-dropdown-tag--text">{{ tag.label }}</text>
                </view>
            </block>
        </view>
        <dropdown-footer @reset="handleReset" @confirm="handleConfirm" />
    </view>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
import picker from './picker.vue'
import dropdownFooter from '../widgets/admin/dropdown-footer.vue'
import { deepClone, getRangeDate } from '@/components/da-dropdown/utils'
import { getCurDate } from '@/utils/util'

export default defineComponent({
    components: { picker, dropdownFooter },
    props: {
        dropdownItem: {
            type: Object,
            default: null
        },
        dropdownIndex: {
            type: Number
        }
    },
    emits: ['success', 'reset', 'confirm'],
    setup(props, { emit }) {
        const daterange = ref(null)
        const datetag = ref('')
        const dateTagList = ref([
            { value: '-1', label: '今天' },
            { value: '-7', label: '本周' },
            { value: '-14', label: '上周' },
            { value: '-30', label: '本月' },
            { value: '-60', label: '上月' },
            // { value: '-1', label: '昨日' },
            { value: '7', label: '近7天' },
            { value: '15', label: '近15天' },
            { value: '30', label: '近30天' }
        ])

        function initData(dropdownItem, clearValue = false) {
            const item = deepClone(dropdownItem || null)
            if (clearValue === true) {
                daterange.value = {
                    start: getCurDate('start', 'YYYY-MM-DD'),
                    end: getCurDate('end', 'YYYY-MM-DD')
                }
                datetag.value = '-1'
            } else {
                daterange.value = {
                    start: item.value?.start || '',
                    end: item.value?.end || ''
                }
                if (item.value?.start && item.value?.end) {
                    datetag.value = '-1'
                }
            }
        }

        function handleStartDate(item) {
            daterange.value.start = item.detail.value
            daterange.value.end = ''
            datetag.value = ''
        }
        function handleEndDate(item) {
            if (!daterange.value?.start) {
                return
            }
            daterange.value.end = item.detail.value
            datetag.value = ''
        }
        function handleTagDate(code) {
            daterange.value = getRangeDate(code)
            datetag.value = code
        }
        function handleReset() {
            initData(props.dropdownItem, true)
            emit('reset')
        }
        function handleConfirm() {
            if (props.dropdownItem?.prop) {
                const res = { [props.dropdownItem.prop]: deepClone(daterange.value) }
                emit('success', res, daterange.value, props.dropdownIndex)
                emit('confirm', daterange.value)
            } else {
                console.error(`菜单项${props.dropdownItem.title}未定义prop，返回内容失败`)
            }
        }

        watch(
            () => props.dropdownItem,
            v => {
                initData(v)
            },
            { immediate: true }
        )

        return {
            daterange,
            datetag,
            dateTagList,
            handleStartDate,
            handleEndDate,
            handleTagDate,
            handleReset,
            handleConfirm
        }
    }
})
</script>

<style lang="scss" scoped>
.da-dropdown-daterange-box {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}
// 日期范围
.da-dropdown-daterange {
    display: flex;
    align-items: center;
    // margin: 24rpx;
    background-color: #f5f5f5;
    border-radius: 999rpx;

    &--date {
        flex-grow: 1;
        height: 66rpx;
        padding: 0 24rpx;
        // font-size: 26rpx;
        line-height: 66rpx;
        color: var(--dropdown-text-color);
        text-align: center;
        border-radius: 4rpx;

        &.is-actived {
            color: $blue-1;
        }
    }

    &--separate {
        flex-shrink: 0;
        padding: 0 20rpx;
    }

    &-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0 24rpx;
    }
}

.da-dropdown-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 40rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    // font-size: 28rpx;
    color: var(--dropdown-text-color);
    background-color: #f5f5f5;
    border-radius: 999rpx;

    &--text {
        position: relative;
        z-index: 1;
    }

    &.is-actived {
        color: $blue-1;
        background-color: #fff;

        &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 0;
            content: '';
            background-color: $blue-1;
            opacity: 0.05;
        }
    }
}
</style>