gxt_app/components/date-picker/date-picker.uvue

<template>
    <view class="date-picker">
        <view class="date-item" :class="{'no-margin': !showLabel}">
            <text class="date-label" v-if="showLabel && label.length > 0" :style="{ width: labelWidth }">{{ label }}</text>
            <view class="date-input-box" @click="showPicker = true">
                <text class="date-input-text" :class="{'placeholder': modelValue.length == 0}">{{ displayText }}</text>
                <view class="date-input-icons">
                    <image v-if="clearable && modelValue.length > 0" class="date-input-clear" src="/static/images/common/2.png" mode="aspectFit" @click.stop="handleClear"></image>
                    <image class="date-input-arrow" src="/static/images/common/1.png" mode="aspectFit"></image>
                </view>
            </view>
        </view>

        <!-- 日期选择器弹窗 -->
        <l-popup v-model="showPicker" position="bottom">
            <l-date-time-picker
                v-model="innerValue"
                :title="title"
                title-style="font-size: 32rpx; font-weight: 500; color: #000000;"
                cancel-style="font-size: 32rpx; color: #888888;"
                confirm-style="font-size: 32rpx; color: #1890ff;"
                mode="年月日"
                format="YYYY-MM-DD"
                cancel-btn="取消"
                confirm-btn="确定"
                :start="start"
                :end="end"
                @cancel="showPicker = false"
                @confirm="handleConfirm"
            >
            </l-date-time-picker>
        </l-popup>
    </view>
</template>

<script setup lang="uts">
    import { ref, computed } from 'vue'

    // Props 定义
    type Props = {
        modelValue: string
        label?: string
        placeholder?: string
        title?: string
        start?: string
        end?: string
        labelWidth?: string
        showLabel?: boolean
        clearable?: boolean
    }

    const props = withDefaults(defineProps<Props>(), {
        label: '',
        placeholder: '请选择日期',
        title: '选择日期',
        start: '',
        end: '',
        labelWidth: '140rpx',
        showLabel: true,
        clearable: true
    })

    // Emits 定义
    const emit = defineEmits<{
        (e: 'update:modelValue', value: string): void
    }>()

    // 弹窗显示状态
    const showPicker = ref<boolean>(false)

    // 内部值
    const innerValue = ref<string>(props.modelValue)

    // 显示文本
    const displayText = computed<string>(() => {
        return props.modelValue.length > 0 ? props.modelValue : props.placeholder
    })

    // 确认选择
    const handleConfirm = (value: string): void => {
        emit('update:modelValue', value)
        showPicker.value = false
    }

    // 清除选择
    const handleClear = (): void => {
        emit('update:modelValue', '')
        innerValue.value = ''
    }
</script>

<style lang="scss">
    .date-picker {
        .date-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 24rpx;

            &.no-margin {
                margin-bottom: 0;
            }

            .date-label {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-weight: 400;
                font-size: 28rpx;
                color: #6e7580;
            }

            .date-input-box {
                flex: 1;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20rpx;
                background-color: #f5f7fa;
                border-radius: 8rpx;

                .date-input-text {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #131415;
                    flex: 1;

                    &.placeholder {
                        color: #999999;
                    }
                }

                .date-input-icons {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-left: 20rpx;

                    .date-input-clear {
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 12rpx;
                    }

                    .date-input-arrow {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }
            }
        }
    }
</style>