feiniao-farm-h5/src/components/popup/reminderTimePopup.vue

<template>
    <popup
        v-model:show="showValue"
        class="reminder-time-popup"
        closeable
    >
        <div class="popup-content">
            <!-- 标题 -->
            <div class="popup-header">
                <span class="required">*</span>
                <span class="popup-title">请选择下次提醒时间</span>
            </div>

            <!-- 时间选择输入框 -->
            <div class="time-input-wrapper">
                <el-date-picker
                    v-model="selectedTime"
                    type="date"
                    size="large"
                    placeholder="请选择日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                    :editable="false"
                    :clearable="false"
                />
            </div>

            <!-- 确认按钮 -->
            <div class="btn-confirm" @click="handleConfirm">确认</div>
        </div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
    // 控制弹窗显示/隐藏
    show: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(["update:show", "confirm"]);

// 处理v-model双向绑定
const showValue = computed({
    get: () => props.show,
    set: (value) => emit("update:show", value),
});

// 选中的时间
const selectedTime = ref("");

// 确认按钮点击
const handleConfirm = () => {
    if (!selectedTime.value) {
        ElMessage.warning("请选择日期");
        return;
    }
    emit("confirm", selectedTime.value);
    emit("update:show", false);
    // 重置日期
    selectedTime.value = "";
};
</script>

<style scoped lang="scss">
.reminder-time-popup {
    width: 90%;
    padding: 24px 18px 20px;
    border-radius: 8px;
    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);


    ::v-deep {
        .van-popup__close-icon {
            color: #333333;
        }
    }

    .popup-content {
        display: flex;
        flex-direction: column;
    }

    .popup-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .required {
            color: #ff4d4f;
            margin-right: 4px;
            font-size: 16px;
        }

        .popup-title {
            font-size: 16px;
        }
    }

    .time-input-wrapper {
        margin-bottom: 24px;
    }

    .btn-confirm {
        padding: 10px;
        background: #2199f8;
        color: #ffffff;
        border-radius: 25px;
        font-size: 16px;
        text-align: center;
    }
}
</style>